/*
 * Cartuul admin design layer — applied after Filament's own stylesheet via a
 * HEAD_END render hook (see App\Filament\Support\Brand). Content-first, quiet,
 * Apple-influenced: neutral canvas, hairline borders, soft radii, no ornament.
 */

:root {
    /* Surfaces & canvas */
    --ct-canvas: #f5f5f7;            /* Apple page gray */
    --ct-surface: #ffffff;
    --ct-surface-raised: #ffffff;    /* tiles/cards that sit on a surface */
    --ct-surface-sunken: #f0f0f2;    /* wells, inset areas */

    /* Hairlines & hover */
    --ct-hairline: rgba(0, 0, 0, 0.08);
    --ct-hairline-soft: rgba(0, 0, 0, 0.05);
    --ct-hover: rgba(0, 0, 0, 0.03);

    /* Text */
    --ct-text-strong: #1d1d1f;
    --ct-text-muted: #6e6e73;
    --ct-text-faint: #86868b;        /* meta labels, captions */

    /* Brand + semantic accents (text colour / soft background pairs) */
    --ct-accent: #486db4;
    --ct-accent-strong: #3a5a99;
    --ct-accent-soft: rgba(72, 109, 180, 0.10);
    --ct-success: #1f7a4d;
    --ct-success-soft: rgba(47, 169, 140, 0.16);
    --ct-warning: #9a6a14;
    --ct-warning-soft: rgba(214, 158, 46, 0.18);
    --ct-danger: #9f3a38;
    --ct-danger-soft: rgba(159, 58, 56, 0.14);
    --ct-info: #1f6f97;
    --ct-info-soft: rgba(34, 167, 224, 0.16);
    --ct-neutral-soft: rgba(0, 0, 0, 0.06);

    /* Focus ring (keyboard a11y) */
    --ct-focus-ring: rgba(72, 109, 180, 0.45);
    /* Slick form-focus lift (task modal / template editor fields): a soft,
       accent-tinted drop shadow offset slightly downward — the field reads as
       gently lifted rather than ringed — plus a faint contact layer, blooming
       in on an expo-out curve. The composite shadows resolve the ring vars
       lazily, so overriding just --ct-tm-ring/-soft in .dark re-themes it. */
    --ct-tm-ring: rgba(72, 109, 180, 0.20);
    --ct-tm-ring-soft: rgba(72, 109, 180, 0.09);
    --ct-tm-focus-shadow: 0 4px 12px -3px var(--ct-tm-ring), 0 1px 3px -1px var(--ct-tm-ring-soft);
    --ct-tm-focus-rest: 0 0 0 0 var(--ct-tm-ring), 0 0 0 0 var(--ct-tm-ring-soft);
    --ct-tm-focus-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Radii */
    --ct-r-sm: 0.5rem;
    --ct-r-md: 0.75rem;
    --ct-r-lg: 1rem;
    --ct-r-pill: 999px;

    /* Shadows */
    --ct-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --ct-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --ct-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.12);

    /* Spacing rhythm for custom components */
    --ct-gap: 0.75rem;
    --ct-pad: 1.25rem;

    /* Mono-logo silhouette tuning (see .ct-logo-mono) */
    --ct-logo-filter: brightness(0);
    --ct-logo-opacity: 0.62;
}

.dark {
    --ct-canvas: #161618;
    --ct-surface: #1f1f22;
    --ct-surface-raised: rgba(255, 255, 255, 0.04);
    --ct-surface-sunken: #141416;

    --ct-hairline: rgba(255, 255, 255, 0.09);
    --ct-hairline-soft: rgba(255, 255, 255, 0.06);
    --ct-hover: rgba(255, 255, 255, 0.04);

    --ct-text-strong: #f5f5f7;
    --ct-text-muted: #a1a1a6;
    --ct-text-faint: #86868b;

    --ct-accent: #a9c4ee;
    --ct-accent-strong: #c3d6f4;
    --ct-accent-soft: rgba(72, 109, 180, 0.22);
    --ct-success: #66d19e;
    --ct-success-soft: rgba(47, 169, 140, 0.22);
    --ct-warning: #e3b659;
    --ct-warning-soft: rgba(214, 158, 46, 0.22);
    --ct-danger: #e88f8d;
    --ct-danger-soft: rgba(159, 58, 56, 0.26);
    --ct-info: #7fd0f2;
    --ct-info-soft: rgba(34, 167, 224, 0.22);
    --ct-neutral-soft: rgba(255, 255, 255, 0.08);

    --ct-focus-ring: rgba(125, 162, 232, 0.55);
    --ct-tm-ring: rgba(125, 162, 232, 0.32);
    --ct-tm-ring-soft: rgba(125, 162, 232, 0.16);

    --ct-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --ct-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --ct-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);

    --ct-logo-filter: brightness(0) invert(1);
    --ct-logo-opacity: 0.7;
}

/* ---------- Canvas & typography ---------- */

.fi-body {
    background-color: var(--ct-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.fi-header-heading {
    letter-spacing: -0.02em;
    font-weight: 650;
    color: var(--ct-text-strong);
}

/* ---------- Topbar: translucent, blurred, hairline (macOS menu bar feel) ---------- */

.fi-topbar nav {
    border-bottom: 1px solid var(--ct-hairline-soft);
    box-shadow: none;
}

.fi-topbar {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ---------- Sidebar: quiet list, soft active state ---------- */

.fi-sidebar {
    border-inline-end: 1px solid var(--ct-hairline-soft);
}

.fi-sidebar-header {
    box-shadow: none;
    border-bottom: 1px solid transparent;
}

.fi-sidebar-item-btn {
    border-radius: 0.625rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover {
    background-color: var(--ct-hover);
}

/* Active item: a soft accent wash + a slim accent indicator on the left edge —
   readable at a glance without shouting, in both themes. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
    background-color: var(--ct-accent-soft);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.05rem;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 999px;
    background: var(--ct-accent);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--ct-accent);
    font-weight: 600;
}

/* Quiet uppercase group labels, matching .ct-section-label. */
.fi-sidebar-group-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ct-text-faint);
}

/* ---------- Surfaces: cards, tables, dropdowns, modals ---------- */

.fi-section,
.fi-ta-ctn {
    background-color: var(--ct-surface);
    border-radius: var(--ct-r-lg);
    border: 1px solid var(--ct-hairline-soft);
    box-shadow: var(--ct-shadow-sm);
}

.fi-dropdown-panel,
.fi-modal-box {
    border-radius: 0.875rem;
    border: 1px solid var(--ct-hairline-soft);
    box-shadow: var(--ct-shadow-pop);
}

/* ---------- Tables: information first ---------- */

.fi-ta-header-cell {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ct-text-muted);
}

.fi-ta-row {
    transition: background-color 0.1s ease;
}

.fi-ta-row:hover {
    background-color: var(--ct-hover);
}

.fi-ta-cell {
    font-size: 0.875rem;
}

/* Stacked (layout-column) records — the user lists: comfortable rows with
   hairline separation, like a contact list. */
.fi-ta-record-content {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.fi-ta-record:not(:last-child) {
    border-bottom: 1px solid var(--ct-hairline-soft);
}

/* ---------- Controls: calm radii, hairline inputs ---------- */

.fi-btn {
    border-radius: var(--ct-r-sm);
}

.fi-input-wrp {
    border-radius: var(--ct-r-sm);
}

.fi-badge {
    border-radius: var(--ct-r-pill);
    font-weight: 600;
    letter-spacing: 0.005em;
}

/* Consistent, brand-tinted keyboard focus ring across interactive chrome
   (Filament's default is fine but varies; this unifies it). */
.fi-btn:focus-visible,
.fi-input:focus-visible,
.fi-sidebar-item-btn:focus-visible,
.fi-link:focus-visible,
.ct-pill:focus-visible,
.ct-btn:focus-visible {
    outline: 2px solid var(--ct-focus-ring);
    outline-offset: 2px;
}

/* =====================================================================
   Reusable element library (.ct-*)
   ---------------------------------------------------------------------
   The shared vocabulary for Cartuul's custom (non-Filament) surfaces:
   dealer inventory cards, integration tiles, feed-presence/key chips,
   status pills, empty states. Built on the tokens above so they read as
   one family with Filament's own components. Prefer these over inline
   per-blade <style> blocks.
   ===================================================================== */

/* ---- Pills: the one canonical status chip ----
   Usage: <span class="ct-pill ct-pill--success"><i class="ct-pill-dot"></i> Label</span>
   Modifiers tint text + background together; the dot inherits currentColor. */
.ct-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ct-r-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--ct-text-muted);
    background: var(--ct-neutral-soft);
}

.ct-pill-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.ct-pill--accent  { color: var(--ct-accent);  background: var(--ct-accent-soft); }
.ct-pill--success { color: var(--ct-success); background: var(--ct-success-soft); }
.ct-pill--warning { color: var(--ct-warning); background: var(--ct-warning-soft); }
.ct-pill--danger  { color: var(--ct-danger);  background: var(--ct-danger-soft); }
.ct-pill--info    { color: var(--ct-info);    background: var(--ct-info-soft); }
.ct-pill--neutral { color: var(--ct-text-muted); background: var(--ct-neutral-soft); }

/* Standalone status dot (e.g. before a label in a list) */
.ct-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

/* ---- Charts (ApexCharts brand cards; see ct-charts.js + apex-chart.blade) ---- */
.ct-chart-card {
    display: flex;
    flex-direction: column;
    background: var(--ct-surface-raised);
    border: 1px solid var(--ct-hairline-soft);
    border-radius: var(--ct-r-lg);
    box-shadow: var(--ct-shadow-sm);
    padding: 0.9rem 1rem 0.5rem;
    min-width: 0; /* let the chart shrink inside grid tracks */
}
.ct-chart-card__head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--ct-text-strong);
    margin-bottom: 0.15rem;
}
.ct-chart-card__sub {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ct-text-faint);
}
.ct-chart-wrap { min-width: 0; }
.ct-chart { min-height: 1rem; }
/* ApexCharts injects its own tooltip/legend; nudge them onto the brand. */
.apexcharts-tooltip { border-radius: var(--ct-r-sm) !important; box-shadow: var(--ct-shadow-pop) !important; }
.apexcharts-legend-text { color: var(--ct-text-muted) !important; }

/* ---- Column-help "?" badge: click to reveal a feed column's reference ---- */
.ct-col-help-anchor {
    display: inline-flex;
    vertical-align: middle;
}
.ct-col-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ct-info-soft, rgba(34, 167, 224, 0.15));
    color: var(--ct-info, #1a86c7);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    appearance: none;
    transition: background 0.12s, color 0.12s;
}
.ct-col-help:hover,
.ct-col-help[aria-expanded='true'] {
    background: var(--ct-info, #22a7e0);
    color: #fff;
}
.ct-col-pop {
    position: fixed;
    z-index: 9999;
    padding: 0.5rem 0.625rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: #fff;
    background: #1f2733;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    box-shadow: var(--ct-shadow-pop, 0 10px 30px rgba(0, 0, 0, 0.3));
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---- Cards: a reusable surface matching .fi-section ---- */
.ct-card {
    display: flex;
    flex-direction: column;
    background: var(--ct-surface-raised);
    border: 1px solid var(--ct-hairline-soft);
    border-radius: var(--ct-r-lg);
    padding: var(--ct-pad);
    box-shadow: var(--ct-shadow-sm);
}

.ct-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--ct-gap);
}

.ct-card-title {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--ct-text-strong);
}

/* dt/dl meta row — quiet label over a strong value, wrapping in columns. */
.ct-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0;
}

.ct-card-meta div { font-size: 0.75rem; }
.ct-card-meta dt { color: var(--ct-text-faint); margin: 0; }
.ct-card-meta dd { margin: 0; font-weight: 650; color: var(--ct-text-strong); }

/* ---- Quiet uppercase section/meta label ---- */
.ct-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ct-text-faint);
    margin: 0.5rem 0 0.75rem;
}

/* ---- Empty state: centred icon + message ---- */
.ct-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--ct-text-muted);
}

.ct-empty svg,
.ct-empty .ct-empty-icon {
    width: 2.25rem;
    height: 2.25rem;
    opacity: 0.5;
}

/* ---- Monochrome logo silhouette ----
   Flattens any logo (colour SVG/PNG or self-uploaded) to a single
   theme-appropriate mark: black in light, white in dark, at reduced
   opacity that lifts on hover. Used for integration-module logos AND
   dealer logos (tenant switcher). Tune per-context with --ct-logo-opacity. */
.ct-logo-mono {
    filter: var(--ct-logo-filter);
    opacity: var(--ct-logo-opacity);
    transition: opacity 0.2s ease;
    object-fit: contain;
}

.ct-logo-mono:hover,
*:hover > .ct-logo-mono {
    opacity: 0.95;
}

/* ---------- Tenant (account) switcher: prominent, card-like ---------- */

.fi-tenant-menu-trigger {
    border: 1px solid var(--ct-hairline-soft);
    border-radius: 0.75rem;
    background-color: var(--ct-surface);
    padding: 0.5rem 0.625rem;
    transition: background-color 0.15s ease;
}

.fi-tenant-menu-trigger:hover {
    background-color: var(--ct-hover);
}

/* Expanded: stacked card — full-size logo with the account name centred
   beneath it; the switcher chevron tucks into the top-right corner. */
.fi-sidebar.fi-sidebar-open .fi-tenant-menu-trigger {
    position: relative;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
    padding: 0.875rem 0.625rem 0.625rem;
}

.fi-sidebar.fi-sidebar-open .fi-tenant-menu-trigger > svg:last-of-type {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem;
}

/* Logos keep their real shape: natural aspect ratio, capped, not rounded off. */
.fi-tenant-avatar {
    width: auto;
    height: auto;
    max-height: 4rem;
    max-width: 100%;
    border-radius: 0.25rem;
    object-fit: contain;
}

/* Uploaded account logos get the theme-adaptive monochrome silhouette so a
   colour mark reads cleanly on the dark sidebar and the light one alike — but
   ONLY when the logo actually has transparency. Account::getFilamentAvatarUrl()
   appends ?mask=1 to such logos; opaque photos (and the generated initials
   avatar) carry no marker and stay in full colour. */
.fi-tenant-avatar[src*="mask=1"] {
    filter: var(--ct-logo-filter);
    opacity: var(--ct-logo-opacity);
    transition: opacity 0.2s ease;
}

.fi-tenant-menu-trigger:hover .fi-tenant-avatar[src*="mask=1"] {
    opacity: 0.95;
}

/* Collapsed rail: swap the logo for a compact initials badge ("MMF") sized
   like the nav icons; name/chevron are already hidden by the sidebar store. */
.ct-tenant-initials {
    display: none;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5rem;
    color: var(--ct-text-strong);
}

.fi-sidebar:not(.fi-sidebar-open) .fi-tenant-menu-trigger {
    padding-inline: 0.25rem;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-tenant-avatar {
    display: none;
}

.fi-sidebar:not(.fi-sidebar-open) .ct-tenant-initials {
    display: block;
}

/* Account images in the switcher dropdown (rendered as background tiles). */
.fi-dropdown-list-item-image {
    width: 3rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Same silhouette treatment for transparent logos in the dropdown thumbnails
   (background-image carries the ?mask=1 marker); opaque photos and generated
   avatars stay in full colour. */
.fi-dropdown-list-item-image[style*="mask=1"] {
    filter: var(--ct-logo-filter);
    opacity: var(--ct-logo-opacity);
}

.fi-tenant-menu-trigger-tenant-name {
    font-weight: 600;
    color: var(--ct-text-strong);
}

/* ---------- Guest (auth) pages: split-screen with brand panel ---------- */

.fi-body:has(> .ct-auth-brand) {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
}

.fi-body:has(> .ct-auth-brand) .fi-simple-layout {
    grid-column: 2;
    min-height: 100vh;
}

.ct-auth-brand {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    /* Flex centring is immune to extra decorative children; the footer is
       absolutely pinned so it never pushes the greeting off-centre. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 60px;
    color: #fff;
    background: linear-gradient(155deg, #1b2333 0%, #14161c 55%, #0a0b0e 100%);
}

/* Faint blueprint grid, fading out to the lower right. */
.ct-auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(120% 120% at 30% 20%, #000 0%, transparent 75%);
    pointer-events: none;
}

/* Ambient glows in the corp palette, breathing very slowly. */
.ct-auth-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ct-auth-glow-a {
    background: radial-gradient(120% 90% at 12% 8%, rgba(72, 109, 180, 0.45) 0%, rgba(72, 109, 180, 0) 55%);
    animation: ct-breathe 9s ease-in-out infinite alternate;
}

.ct-auth-glow-b {
    background: radial-gradient(110% 80% at 92% 96%, rgba(34, 167, 224, 0.28) 0%, rgba(34, 167, 224, 0) 50%);
    /* Negative delay: starts mid-cycle, desynced from glow-a — a positive
       delay made it sit at full opacity then visibly snap when it kicked in. */
    animation: ct-breathe 11s ease-in-out -3s infinite alternate;
}

@keyframes ct-breathe {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-auth-glow { animation: none; }
}

/* Particle constellation (drawn by public/js/auth-particles.js). */
.ct-auth-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.ct-auth-center,
.ct-auth-foot {
    position: relative;
    z-index: 1;
}

.ct-auth-foot {
    position: absolute;
    left: 60px;
    bottom: 28px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.42);
}

.ct-auth-greet {
    font-weight: 600;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    /* Moving gradient in pale tints of the badge palette (blue, mint, cyan,
       lavender) — mostly white so it reads as light, with a slow ping-pong
       sweep matching the constellation's pulse rhythm, and a soft glow.
       (drop-shadow, not text-shadow: the fill is transparent.) */
    background: linear-gradient(100deg,
        #f3f6fd 0%, #aac8f2 22%, #9fe6d2 42%, #a8ddf4 60%, #c4b4ec 80%, #f3f6fd 100%);
    background-size: 320% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ct-greet-sheen 16s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 22px rgba(120, 160, 230, 0.3));
}

@keyframes ct-greet-sheen {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-auth-greet { animation: none; }
}

.ct-auth-sub {
    margin-top: 16px;
    font-size: 16.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    max-width: 30ch;
}

/* Lift the brand logo out of the form card: it floats centred above the box
   instead of sitting inside it. The card anchors the absolute position. */
.fi-body:has(> .ct-auth-brand) .fi-simple-main {
    position: relative;
}

.fi-body:has(> .ct-auth-brand) .fi-simple-header .fi-logo {
    position: absolute;
    bottom: calc(100% + 2.25rem);
    left: 50%;
    transform: translateX(-50%);
}

/* Larger wordmark on the auth pages than in the panel chrome (the blade and
   Brand::panel() set 1.75rem inline, hence the !important). */
.fi-body:has(> .ct-auth-brand) .fi-simple-header .fi-logo,
.fi-body:has(> .ct-auth-brand) .fi-simple-header .fi-logo img {
    height: 2.75rem !important;
}

/* …and the v2 mark scales with it. */
.fi-body:has(> .ct-auth-brand) .fi-simple-header .fi-logo .cartuul-v2 {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
}

/* Reserve headroom so the floated logo never clips at the viewport top. */
.fi-body:has(> .ct-auth-brand) .fi-simple-main-ctn {
    padding-top: 6rem;
}

@media (max-width: 900px) {
    .fi-body:has(> .ct-auth-brand) {
        grid-template-columns: 1fr;
    }

    .fi-body:has(> .ct-auth-brand) .fi-simple-layout {
        grid-column: 1;
        min-height: auto;
    }

    /* On the slim mobile layout there is no room above the card — keep the
       logo in flow inside the header. */
    .fi-body:has(> .ct-auth-brand) .fi-simple-header .fi-logo {
        position: static;
        transform: none;
        margin-inline: auto;
    }

    /* Slim header: greeting only, centred — no sub-texts, no particles.
       Kept compact so the form fields stay above the fold. */
    .ct-auth-brand {
        position: static;
        height: auto;
        justify-content: center;
        align-items: center;
        padding: 0.875rem 1.25rem;
    }

    .ct-auth-canvas,
    .ct-auth-sub,
    .ct-auth-foot {
        display: none;
    }

    .ct-auth-greet {
        font-size: 1.125rem;
        line-height: 1.2;
    }

    /* Tighten the form side's vertical padding so inputs are visible
       without scrolling on a phone. */
    .fi-body:has(> .ct-auth-brand) .fi-simple-main-ctn {
        padding-top: 0.5rem;
    }

    .fi-body:has(> .ct-auth-brand) .fi-simple-main {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .fi-body:has(> .ct-auth-brand) .fi-simple-header {
        margin-bottom: 0.5rem;
    }
}

/* ---------- Inventory labels ---------- */

/*
 * Coloured label pills applied to vehicles. Background and text colour are set
 * inline from the dealer's label definition (Label::color / ::textColor()).
 * Blinking labels use ct-lbl--blink to draw attention.
 */

@keyframes ct-label-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

.ct-lbl {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--ct-r-pill);
    font-size: 0.71875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ct-lbl--blink {
    animation: ct-label-blink 1.4s ease-in-out infinite;
}

/* ---------- Scrollbars: thin and unobtrusive ---------- */

.fi-body ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fi-body ::-webkit-scrollbar-thumb {
    background-color: var(--ct-hairline);
    border-radius: 999px;
}

.fi-body ::-webkit-scrollbar-track {
    background: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   Compact form — dense, multi-column modal layout (v1 "Add task" style).
   Reusable: wrap any Filament schema in a group with class `ct-compact-form`.
   ────────────────────────────────────────────────────────────────────────── */
.ct-compact-form .fi-sc-has-gap { gap: 0.5rem !important; }
.ct-compact-form .fi-fo-field-label { margin-bottom: 0.05rem; }
.ct-compact-form .fi-fo-field-label-label,
.ct-compact-form .fi-fo-field-label { font-size: 0.7rem; font-weight: 600; color: #6b7280; }
.dark .ct-compact-form .fi-fo-field-label-label,
.dark .ct-compact-form .fi-fo-field-label { color: #9aa3b2; }
/* Tighter, smaller inputs / selects */
.ct-compact-form .fi-input,
.ct-compact-form .fi-input-wrp .fi-select-input,
.ct-compact-form .fi-input-wrp input { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.82rem; min-height: 0; }
.ct-compact-form .fi-input-wrp { border-radius: 0.45rem; }
.ct-compact-form textarea.fi-input { padding-top: 0.4rem; }
/* Sections become thin, chrome-light blocks — no big card borders/descriptions */
.ct-compact-form .fi-section { border-radius: 0.5rem; box-shadow: none; }
.ct-compact-form .fi-section-header { padding: 0.45rem 0.7rem; }
.ct-compact-form .fi-section-header-heading { font-size: 0.78rem; }
.ct-compact-form .fi-section-header-description { display: none; }
.ct-compact-form .fi-section-content { padding: 0.55rem 0.7rem; }
/* Repeater rows tight */
.ct-compact-form .fi-fo-repeater-item { border-radius: 0.45rem; }
.ct-compact-form .fi-fo-repeater-item-header { padding: 0.3rem 0.6rem; }
.ct-compact-form .fi-fo-repeater-item-content { padding: 0.5rem 0.6rem; }
/* Tabs as a tight pill row (Employees / Approval / Departments / Vendors) */
.ct-compact-form .fi-tabs { gap: 0.25rem; padding: 0.2rem; }
.ct-compact-form .fi-tabs-item { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
/* Toggles / checkboxes inline-tight */
.ct-compact-form .fi-fo-toggle { transform: scale(0.9); }

/* ── Task modal: attendants picker (Employees / Approval / Departments / Vendors) ── */
.ct-task-attend { display: grid; gap: 0.5rem; }
.ct-task-attend-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
@media (max-width: 640px) { .ct-task-attend-bar { grid-template-columns: repeat(2, 1fr); } }
.ct-task-attend-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.5rem 0.6rem; font-size: 0.78rem; font-weight: 600; cursor: pointer;
    color: var(--ct-accent); background: var(--ct-accent-soft);
    border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-md);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ct-task-attend-btn:hover { background: var(--ct-accent); color: #fff; border-color: var(--ct-accent); }
.ct-task-attend-btn--active { background: var(--ct-accent); color: #fff; border-color: var(--ct-accent); }
.ct-task-attend-ico { width: 1rem; height: 1rem; }
.ct-task-attend-panel {
    background: var(--ct-surface-sunken); border: 1px solid var(--ct-hairline);
    border-radius: var(--ct-r-md); padding: 0.6rem; display: grid; gap: 0.5rem;
}
.ct-task-attend-search { width: 100%; }
.ct-task-attend-list {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem 0.5rem;
    max-height: 280px; overflow-y: auto;
}
@media (max-width: 640px) { .ct-task-attend-list { grid-template-columns: 1fr; } }
.ct-task-attend-item {
    text-align: left; padding: 0.3rem 0.5rem; font-size: 0.78rem; cursor: pointer;
    background: transparent; border: 0; border-bottom: 1px dotted var(--ct-hairline);
    color: inherit; border-radius: 0.3rem;
}
.ct-task-attend-item:hover { background: var(--ct-accent); color: #fff; }
.ct-task-attend-item--inactive { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
.ct-task-attend-item--inactive:hover { background: transparent; color: inherit; }
.ct-task-attend-empty { grid-column: 1 / -1; text-align: center; font-size: 0.75rem; color: var(--ct-text-muted); padding: 0.5rem; }
.ct-task-attend-pool { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.ct-task-chip {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.5rem;
    font-size: 0.75rem; border-radius: var(--ct-r-pill); border: 1px solid transparent;
}
.ct-task-chip-x { cursor: pointer; background: transparent; border: 0; font-size: 1rem; line-height: 1; color: inherit; opacity: 0.7; }
.ct-task-chip-x:hover { opacity: 1; }
.ct-task-chip--user { background: var(--ct-info-soft); color: var(--ct-info); border-color: var(--ct-info); }
.ct-task-chip--aprooval { background: var(--ct-success-soft); color: var(--ct-success); border-color: var(--ct-success); }
.ct-task-chip--department { background: var(--ct-accent-soft); color: var(--ct-accent); border-color: var(--ct-accent); }
.ct-task-chip--vendor { background: var(--ct-warning-soft); color: var(--ct-warning); border-color: var(--ct-warning); }
/* Approval sub-toggle (members | departments) */
.ct-task-attend-sub { display: inline-flex; gap: 0.25rem; padding: 0.15rem; background: var(--ct-surface); border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-pill); width: fit-content; }
.ct-task-attend-sub-btn { padding: 0.2rem 0.7rem; font-size: 0.72rem; font-weight: 600; cursor: pointer; background: transparent; border: 0; border-radius: var(--ct-r-pill); color: var(--ct-text-muted); }
.ct-task-attend-sub-btn--active { background: var(--ct-accent); color: #fff; }
/* Department-approver chip: same green as member-approver, dashed to distinguish */
.ct-task-chip--aprooval_dept { background: var(--ct-success-soft); color: var(--ct-success); border-color: var(--ct-success); border-style: dashed; }


/* ── Recon pipeline builder (Settings → Recon pipelines) ────────────────── */
.ct-rb-empty { font-size: 0.9rem; color: var(--ct-text-muted); padding: 1.25rem; background: var(--ct-surface); border: 1px solid var(--ct-hairline-soft); border-radius: var(--ct-r-lg); }
/* Fill the viewport: bar pinned on top, boards scroll internally — so the page
   itself never grows past the screen. */
.ct-rb { display: flex; flex-direction: column; gap: 0.6rem; height: calc(100vh - 7rem); }
/* Embedded on the vehicle page (the inline fork editor) — sized by content,
   not the viewport; a bounded board well so the page keeps scrolling normally. */
.ct-rb-embed { margin-bottom: 0.85rem; }
.ct-rb-embed .ct-rb { height: auto; max-height: 42rem; }
.ct-rb-embed .ct-rb-forkbar-back { background: none; border: 0; cursor: pointer; }
.ct-rb-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.85rem; background: var(--ct-surface); border: 1px solid var(--ct-hairline-soft); border-radius: var(--ct-r-md); box-shadow: var(--ct-shadow-sm); }
.ct-rb-hint { font-size: 0.78rem; color: var(--ct-text-muted); margin: 0; }
.ct-rb-bar-actions { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.ct-rb-dirty { font-size: 0.72rem; font-weight: 600; color: var(--ct-warning); }
/* Fork mode — the vehicle page's "Customize" deep-link edits ONE personal pipe. */
.ct-rb-forkbar { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; font-size: 0.8rem; color: var(--ct-text-strong); background: color-mix(in srgb, var(--ct-accent) 8%, var(--ct-surface)); border: 1px solid color-mix(in srgb, var(--ct-accent) 30%, transparent); border-radius: var(--ct-r-md); }
.ct-rb-forkbar > i { color: var(--ct-accent); }
.ct-rb-forkbar-back { margin-left: auto; flex: 0 0 auto; font-size: 0.76rem; font-weight: 600; color: var(--ct-accent); text-decoration: none; }
.ct-rb-forkbar-back:hover { text-decoration: underline; }
.ct-rb-save:disabled { opacity: 0.45; pointer-events: none; }
.ct-rb-boards { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; padding-right: 0.25rem; }

.ct-rb-board { background: var(--ct-surface); border: 1px solid var(--ct-hairline-soft); border-radius: var(--ct-r-md); box-shadow: var(--ct-shadow-sm); padding: 0.5rem 0.6rem 0.6rem; }
/* Compact one-line caption replaces the old chunky board header. */
.ct-rb-board-cap { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-text-muted); }
.ct-rb-board-tag { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ct-text-faint); text-transform: none; }
.ct-rb-board-count { font-size: 0.62rem; font-weight: 600; letter-spacing: 0; color: var(--ct-text-faint); text-transform: none; }
/* Edit/delete tools pushed to the right edge of the board caption + palette chip. */
.ct-rb-board-tools { margin-left: auto; display: inline-flex; gap: 0.15rem; }
.ct-rb-tool { background: none; border: 0; cursor: pointer; padding: 0.15rem 0.3rem; font-size: 0.72rem; line-height: 1; color: var(--ct-text-faint); border-radius: var(--ct-r-sm); transition: color 0.12s ease, background 0.12s ease; }
.ct-rb-tool:hover { color: var(--ct-text-strong); background: var(--ct-neutral-soft); }
.ct-rb-tool--danger:hover { color: var(--ct-danger); }
.ct-rb-addbtn i { font-size: 0.7rem; margin-right: 0.2rem; }
.ct-rb-inline-link { background: none; border: 0; cursor: pointer; padding: 0; }

.ct-rb-flow { display: flex; flex-direction: column; gap: 0.4rem; }
.ct-rb-section { display: flex; align-items: stretch; gap: 0.4rem; padding: 0.35rem; background: var(--ct-neutral-soft); border: 1px solid var(--ct-hairline-soft); border-radius: var(--ct-r-sm); }
.ct-rb-section-head { flex: 0 0 5.5rem; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.4rem; border-radius: var(--ct-r-sm); background: var(--ct-neutral-soft); color: var(--ct-text-muted); }
.ct-rb-section-head--info { background: var(--ct-info-soft); color: var(--ct-info); }
.ct-rb-section-head--warning { background: var(--ct-warning-soft); color: var(--ct-warning); }
.ct-rb-section-head--success { background: var(--ct-success-soft); color: var(--ct-success); }

.ct-rb-cols { flex: 1 1 auto; display: flex; gap: 0.35rem; align-items: stretch; overflow-x: auto; padding-bottom: 0.15rem; }
.ct-rb-col { flex: 0 0 auto; min-width: 6.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-height: 2.6rem; padding: 0.3rem; background: var(--ct-surface); border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm); transition: transform 0.12s ease; }
.ct-rb-col-grip { align-self: stretch; display: flex; align-items: center; justify-content: center; height: 0.85rem; line-height: 1; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--ct-text-faint); cursor: grab; opacity: 0.6; border-radius: var(--ct-r-sm); user-select: none; touch-action: none; transition: background 0.12s ease, opacity 0.12s ease; }
.ct-rb-col-grip:hover { opacity: 1; background: var(--ct-neutral-soft); }
.ct-rb-col-grip:active { cursor: grabbing; }

/* Trailing add zone — the only "empty" slot; fills the rest of the row. */
.ct-rb-add { flex: 1 1 6.5rem; min-width: 6.5rem; display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0.3rem; border: 1px dashed var(--ct-hairline); border-radius: var(--ct-r-sm); color: var(--ct-text-faint); font-size: 0.74rem; }

/* Pointer-drag: draggable surfaces opt out of touch-scroll/selection. */
.ct-rb-chip { touch-action: none; }
.ct-rb-over { border-color: var(--ct-accent); background: var(--ct-accent-soft); color: var(--ct-accent); }
.ct-rb-palette.ct-rb-over { background: var(--ct-accent-soft); }
/* The placeholder GAP that opens where the block will land — a clear accent
   slot so the drop location is obvious. */
.ct-rb-ph { flex: 0 0 6rem; align-self: stretch; min-height: 2.6rem; border: 2px dashed var(--ct-accent); border-radius: var(--ct-r-sm); background: var(--ct-accent-soft); box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--ct-accent) 8%, transparent); pointer-events: none; transform-origin: center; animation: ctRbPhIn 0.14s ease; }
@keyframes ctRbPhIn { from { opacity: 0; transform: scaleX(0.3); } to { opacity: 1; transform: none; } }
/* The slot bar between a step's stacked chips — where a dropped chip lands. */
.ct-rb-chip-ph { align-self: stretch; height: 0.3rem; border-radius: 999px; background: var(--ct-accent); opacity: 0.85; pointer-events: none; animation: ctRbPhIn 0.14s ease; }
/* Step-owner badge on a builder chip — count + hover list of the step's
   owners (people / departments / vendors; edited in the step modal). */
.ct-rb-own { display: inline-flex; align-items: center; gap: 0.18rem; font-size: 0.62rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 999px; background: color-mix(in srgb, var(--ct-accent) 12%, transparent); color: var(--ct-accent); cursor: default; }
.ct-rb-own i { font-size: 0.58rem; }
/* Pipeline-template tab strip — one tab per pipe of a category board (the ★
   default first, then named templates like "Short lane"); tools on the right
   add/rename/promote/delete templates. */
.ct-rb-tabs { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin: 0.15rem 0 0.35rem; }
.ct-rb-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem; font-size: 0.78rem; font-weight: 600; color: var(--ct-text-muted); background: var(--ct-surface); border: 1px solid var(--ct-hairline); border-radius: 999px; cursor: pointer; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.ct-rb-tab:hover { color: var(--ct-text); border-color: var(--ct-hairline-strong, var(--ct-hairline)); }
.ct-rb-tab.is-active { color: var(--ct-accent); background: color-mix(in srgb, var(--ct-accent) 10%, transparent); border-color: color-mix(in srgb, var(--ct-accent) 45%, transparent); }
.ct-rb-tab .fa-star { font-size: 0.62rem; color: #eab308; }
.ct-rb-tab-count { font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--ct-fill-soft, rgba(148, 163, 184, 0.16)); color: var(--ct-text-muted); }
.ct-rb-tab-tools { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.25rem; }
.ct-rb-tab-tools .ct-rb-tool { font-size: 0.72rem; }
/* Default-order bar — the cross-pipe status order (dashboard merged view,
   inventory filters, selects). One row of drag-sortable chips. */
.ct-rb-orderbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.45rem 0.6rem; margin-top: 0.5rem; background: var(--ct-surface); border: 1px dashed var(--ct-hairline); border-radius: var(--ct-r-sm); }
.ct-rb-orderbar-chips { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ct-rb-chip--bar { cursor: grab; }
.ct-rb-chip--bar:active { cursor: grabbing; }
.ct-rb-orderbar-hint { font-size: 0.7rem; color: var(--ct-text-faint); }
.ct-rb-bar-ph { width: 0.3rem; align-self: stretch; min-height: 1.4rem; border-radius: 999px; background: var(--ct-accent); opacity: 0.85; pointer-events: none; animation: ctRbPhIn 0.14s ease; }
/* The lifted item is pulled OUT of the row while dragging (the ghost is what
   you move; the placeholder shows where it lands) — so it neither occupies a
   slot nor acts as a drop target. */
.ct-rb-src { display: none !important; }
body.ct-rb-dragging { cursor: grabbing; user-select: none; }
.ct-rb-ghost { position: fixed; z-index: 9999; pointer-events: none; padding: 0.25rem 0.5rem; font-size: 0.76rem; font-weight: 600;
    background: var(--ct-accent); color: #fff; border-radius: var(--ct-r-sm); box-shadow: var(--ct-shadow-pop); white-space: nowrap; }
.ct-rb-ghost--chip { display: flex; align-items: center; gap: 0.35rem; background: var(--ct-surface); color: var(--ct-text-strong); border: 1px solid var(--ct-hairline); }
.ct-rb-ghost--col { display: flex; flex-direction: column; gap: 0.2rem; align-items: stretch; padding: 0.35rem; background: var(--ct-surface); border: 1px solid var(--ct-accent); }
.ct-rb-ghost-chip { padding: 0.15rem 0.4rem; font-size: 0.72rem; font-weight: 500; color: var(--ct-accent); background: var(--ct-accent-soft); border-radius: var(--ct-r-sm); }

/* Status chip = the per-status colour (Inventory palette) as a dot + a soft
   tint of that colour, matching the inventory recon pills. The tint/border are
   precomputed rgba set inline (no per-element color-mix → cheaper style calc). */
.ct-rb-chip { display: flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.75rem; font-weight: 600; cursor: grab;
    color: var(--ct-text-strong); border-radius: 0.375rem; background: var(--ct-surface); border: 1px solid var(--ct-hairline); }
.ct-rb-chip:active { cursor: grabbing; }
/* Colour ring for mandatory — a box-shadow (inline border-color can't be overridden by a class). */
.ct-rb-chip.is-mandatory { box-shadow: 0 0 0 1.5px var(--ct-rb-c, var(--ct-accent)); }
.ct-rb-chip-label { flex: 1 1 auto; }
.ct-rb-chip--palette { background: var(--ct-neutral-soft); border-color: transparent; color: var(--ct-text-muted); }
.ct-rb-dot { flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ct-rb-c, var(--ct-text-faint)); }
.ct-rb-star { background: none; border: 0; cursor: pointer; font-size: 0.7rem; line-height: 1; color: var(--ct-text-faint); padding: 0; }
.ct-rb-star.on { color: var(--ct-warning); }
.ct-rb-x { background: none; border: 0; cursor: pointer; font-size: 0.95rem; line-height: 1; color: var(--ct-text-faint); padding: 0 0.1rem; }
.ct-rb-x:hover { color: var(--ct-danger); }

.ct-rb-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.75rem; padding: 0.5rem 0.6rem; border: 1px dashed var(--ct-hairline); border-radius: var(--ct-r-md); }
.ct-rb-palette-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-text-faint); margin-right: 0.25rem; }
.ct-rb-palette-empty { font-size: 0.74rem; color: var(--ct-text-faint); font-style: italic; }
/* Palette chip extras: a current-vehicle count + hover-revealed edit/delete. */
.ct-rb-chip-count { flex: 0 0 auto; min-width: 1.1rem; padding: 0 0.3rem; font-size: 0.64rem; font-weight: 700; text-align: center; color: var(--ct-text-muted); background: var(--ct-surface); border-radius: var(--ct-r-pill); }
/* Hover-revealed; display (not opacity) so they fully vanish on mouse-out. */
.ct-rb-chip-tools { flex: 0 0 auto; display: none; gap: 0.1rem; }
.ct-rb-chip--palette:hover .ct-rb-chip-tools { display: inline-flex; }

/* ─────────────────────────────────────────────────────────────────────────
   Unified ("global") search — the ⌘K topbar box + its body-level dropdown.
   .ct-gs-* names so nothing leaks into the shared library. See
   App\Livewire\GlobalSearch + livewire/global-search.blade.php.
   ───────────────────────────────────────────────────────────────────────── */

/* Fill the topbar gap between the logo and the user menu: the search sits in
   the .fi-topbar-end cluster (where Filament's own search was), so grow that
   cluster and the slot, keeping notifications + user menu hard right. */
.fi-topbar-end:has(.ct-gs-slot) { flex: 1 1 auto; min-width: 0; }
.ct-gs-slot { flex: 1 1 auto; min-width: 0; margin-inline: 0.75rem; }

/* Search box (teleported into the topbar). */
.ct-gs-box { display:flex; align-items:center; gap:0.5rem; width:100%;
    background:var(--ct-surface); border:1.5px solid var(--ct-hairline);
    border-radius:var(--ct-r-md); padding:0 0.7rem; height:2.25rem; cursor:text;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ct-gs-box--open, .ct-gs-box:focus-within { background:var(--ct-surface);
    border-color:var(--ct-accent); box-shadow:0 0 0 3px var(--ct-accent-soft, rgba(72,109,180,.13)); }
.ct-gs-ico { color:var(--ct-text-faint); font-size:0.8rem; flex-shrink:0; }
.ct-gs-box input { flex:1; min-width:0; background:transparent; border:none; outline:none;
    color:var(--ct-text-strong); font-size:0.9rem; font-family:inherit; }
.ct-gs-box input::placeholder { color:var(--ct-text-faint); }
.ct-gs-scan { border:none; background:transparent; padding:0; width:1.5rem; height:1.5rem;
    display:flex; align-items:center; justify-content:center; border-radius:var(--ct-r-sm);
    color:var(--ct-text-faint); cursor:pointer; flex-shrink:0; transition:color .12s, background .12s; }
.ct-gs-scan:hover { background:var(--ct-hover); color:var(--ct-accent); }
.ct-gs-kbd { display:flex; gap:0.18rem; flex-shrink:0; }
.ct-gs-kbd kbd, .ct-gs-hints kbd, .ct-gs-tool kbd {
    background:var(--ct-surface); border:1px solid var(--ct-hairline); border-radius:3px;
    padding:0.05rem 0.3rem; font:inherit; font-size:0.62rem; color:var(--ct-text-faint); line-height:1.3; }
@media (max-width: 640px) { .ct-gs-kbd { display:none; } }

/* Dropdown (fixed-positioned, body level). Uses the solid --ct-surface (NOT the
   translucent --ct-surface-raised) so the teleported popover stays fully opaque
   over page content — in dark mode -raised is a 4% white tint = see-through. */
.ct-gs-dd { position:fixed; z-index:60; background:var(--ct-surface);
    border:1px solid var(--ct-hairline); border-radius:var(--ct-r-lg);
    box-shadow:var(--ct-shadow-pop, 0 10px 36px rgba(0,0,0,.11)); overflow:hidden; }
.ct-gs-overlay { position:fixed; inset:0; z-index:55; }

.ct-gs-tabs { display:flex; flex-wrap:wrap; gap:0.1rem; padding:0 0.5rem;
    border-bottom:1px solid var(--ct-hairline); }
.ct-gs-tab { display:flex; align-items:center; gap:0.3rem; padding:0.55rem 0.6rem 0.5rem;
    font-size:0.72rem; font-weight:600; color:var(--ct-text-faint); cursor:pointer; user-select:none;
    border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .12s, border-color .12s; }
.ct-gs-tab:hover { color:var(--ct-text-muted); }
.ct-gs-tab.active { color:var(--ct-accent); border-bottom-color:var(--ct-accent); }
.ct-gs-tc { background:var(--ct-surface); border-radius:10px; padding:0 0.3rem; font-size:0.62rem;
    font-weight:700; color:var(--ct-text-faint); min-width:1rem; text-align:center; }
.ct-gs-tab.active .ct-gs-tc { background:var(--ct-accent-soft, rgba(72,109,180,.12)); color:var(--ct-accent); }

.ct-gs-results { max-height:50vh; overflow-y:auto; overflow-x:hidden; padding:0.3rem 0; container-type:inline-size; }
.ct-gs-group + .ct-gs-group { border-top:1px solid var(--ct-hairline); margin-top:0.25rem; padding-top:0.15rem; }
.ct-gs-label { padding:0.6rem 0.85rem 0.25rem; font-size:0.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ct-text-faint); }
.ct-gs-grid { display:grid; grid-template-columns:1fr; }
@container (min-width: 720px) { .ct-gs-grid { grid-template-columns:repeat(2, 1fr); } }
.ct-gs-dd[data-cat="all"] { }

.ct-gs-row { display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0.85rem; cursor:pointer;
    text-decoration:none; color:inherit; background:transparent; min-width:0; transition:background .08s; }
.ct-gs-row:hover, .ct-gs-row.focused { background:var(--ct-hover); }

.ct-gs-thumb { width:4.2rem; height:2.8rem; border-radius:var(--ct-r-sm); flex-shrink:0;
    object-fit:cover; background:var(--ct-surface); }
.ct-gs-thumb--ph { display:flex; align-items:center; justify-content:center; color:var(--ct-text-faint); font-size:1rem; }
.ct-gs-icon { width:1.9rem; height:1.9rem; border-radius:var(--ct-r-sm); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:0.8rem; }
.ic-task { background:rgba(139,92,246,.12); color:#8b5cf6; }
.ic-note { background:rgba(217,119,6,.12); color:#d97706; }
.ic-location { background:rgba(22,163,74,.12); color:#16a34a; }
.ic-account { background:rgba(72,109,180,.12); color:var(--ct-accent); }
.ic-user { background:rgba(100,116,139,.14); color:#64748b; }
.ic-part { background:rgba(249,115,22,.12); color:#f97316; }

.ct-gs-body { flex:1; min-width:0; }
.ct-gs-title { font-size:0.8rem; font-weight:500; color:var(--ct-text-strong);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-gs-stock { font-size:0.66rem; font-weight:600; color:var(--ct-text-faint); margin-left:0.25rem; }
.ct-gs-meta { font-size:0.7rem; color:var(--ct-text-faint); margin-top:0.05rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-gs-vin { color:var(--ct-text-muted); }
.ct-gs-by { color:var(--ct-text-muted); font-weight:600; }

.ct-gs-right { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; flex-shrink:0; }
.ct-gs-acc { font-size:0.62rem; font-weight:600; color:var(--ct-text-faint);
    display:flex; align-items:center; gap:0.2rem; white-space:nowrap; }
.ct-gs-acc::before { content:'●'; font-size:0.35rem; }
.ct-gs-acc--cur { color:#16a34a; }
.ct-gs-pill { font-size:0.62rem; font-weight:600; padding:0.1rem 0.45rem; border-radius:var(--ct-r-pill); white-space:nowrap; }
.ct-gs-pill--info    { background:rgba(34,167,224,.14); color:#1d4ed8; }
.ct-gs-pill--success { background:rgba(22,163,74,.14); color:#15803d; }
.ct-gs-pill--warning { background:rgba(217,119,6,.16); color:#92400e; }
.ct-gs-pill--danger  { background:rgba(220,38,38,.14); color:#dc2626; }
.ct-gs-pill--neutral { background:var(--ct-surface); color:var(--ct-text-muted); }

.ct-gs-empty { padding:1.6rem 1rem; text-align:center; color:var(--ct-text-faint); font-size:0.8rem;
    display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
.ct-gs-empty i { font-size:1.3rem; opacity:.6; }
.ct-gs-empty strong { color:var(--ct-text-muted); }

.ct-gs-footer { display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
    border-top:1px solid var(--ct-hairline); padding:0.4rem 0.85rem; }
.ct-gs-hints { display:flex; gap:0.7rem; }
.ct-gs-hints span { display:flex; align-items:center; gap:0.2rem; font-size:0.62rem; color:var(--ct-text-faint); }
.ct-gs-tools { display:flex; gap:0.5rem; }
.ct-gs-tool { display:flex; align-items:center; gap:0.25rem; background:transparent; border:none; padding:0;
    font:inherit; font-size:0.62rem; color:var(--ct-text-faint); cursor:pointer; }
.ct-gs-tool:hover { color:var(--ct-text-muted); }
.ct-gs-tool.active { color:var(--ct-accent); }
.ct-gs-tool.active kbd { background:var(--ct-accent-soft, rgba(72,109,180,.12)); border-color:var(--ct-accent); color:var(--ct-accent); }
.ct-gs-count { font-size:0.7rem; color:var(--ct-text-faint); white-space:nowrap; }
@media (max-width: 640px) { .ct-gs-hints { display:none; } }

/* VIN scan overlay (full-screen; distinct from the .ct-gs-scan trigger button). */
.ct-gs-scanner { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.85);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; }
.ct-gs-scanner video { width:min(480px,90vw); border-radius:12px; }
.ct-gs-scanner-frame { position:absolute; width:min(260px,70vw); height:80px;
    border:2px solid var(--ct-accent); border-radius:6px; box-shadow:0 0 0 2000px rgba(0,0,0,.4); pointer-events:none; }
.ct-gs-scanner p { color:#cbd5e1; font-size:0.85rem; }
.ct-gs-scanner button { color:#fff; font-size:0.85rem; background:transparent;
    border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:0.5rem 1.25rem; cursor:pointer; }

/* ─────────────────────────────────────────────────────────────────────────
   Notification center (.ct-nc-*) — the topbar bell: count badge + grouped
   dropdown, plus a full "message center" modal ("Open message center"). Fed by
   App\Support\Notifications providers; teleported into the topbar slot from the
   body-level NotificationBell component.
   ───────────────────────────────────────────────────────────────────────── */
.ct-nc { position:relative; display:flex; align-items:center; }
.ct-nc-btn { position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:2.25rem; height:2.25rem; border-radius:var(--ct-r-md); border:1px solid transparent;
    background:transparent; color:var(--ct-text-muted); font-size:1rem; cursor:pointer;
    transition:background .12s ease, color .12s ease, border-color .12s ease; }
.ct-nc-btn:hover, .ct-nc-btn--on { background:var(--ct-surface-raised); color:var(--ct-text-strong);
    border-color:var(--ct-border); }
.ct-nc-badge { position:absolute; top:-2px; right:-2px; min-width:1.05rem; height:1.05rem; padding:0 0.28rem;
    display:inline-flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:700;
    line-height:1; color:#fff; background:var(--ct-danger); border-radius:var(--ct-r-pill);
    box-shadow:0 0 0 2px var(--ct-surface); }
.ct-nc-pop { position:absolute; top:calc(100% + 0.5rem); right:0; width:21rem; max-width:calc(100vw - 1.5rem);
    background:var(--ct-surface); border:1px solid var(--ct-border); border-radius:var(--ct-r-lg);
    box-shadow:var(--ct-shadow-pop); z-index:50; overflow:hidden; display:flex; flex-direction:column; }
.ct-nc-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
    padding:0.7rem 0.85rem; border-bottom:1px solid var(--ct-border); font-size:0.8rem; font-weight:650;
    color:var(--ct-text-strong); }
.ct-nc-head i { color:var(--ct-info); margin-right:0.3rem; }
.ct-nc-head-count { font-size:0.7rem; font-weight:700; color:var(--ct-text-muted);
    background:var(--ct-neutral-soft); border-radius:var(--ct-r-pill); padding:0.05rem 0.5rem; }
.ct-nc-list { max-height:24rem; overflow-y:auto; }
.ct-nc-group-label { display:flex; align-items:center; gap:0.4rem; padding:0.5rem 0.85rem 0.3rem;
    font-size:0.64rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--ct-text-faint); }
.ct-nc-group-label i { color:var(--ct-info); font-size:0.7rem; }
.ct-nc-group-count { margin-left:auto; font-size:0.62rem; font-weight:700; color:var(--ct-text-muted);
    background:var(--ct-neutral-soft); border-radius:var(--ct-r-pill); padding:0 0.4rem; letter-spacing:0; }
.ct-nc-item { display:flex; align-items:center; gap:0.65rem; padding:0.6rem 0.85rem;
    border-top:1px solid var(--ct-border-soft, var(--ct-border)); text-decoration:none; cursor:pointer;
    transition:background .12s ease; }
.ct-nc-item:hover { background:var(--ct-surface-raised); }
.ct-nc-ic { flex:0 0 auto; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--ct-r-md); background:var(--ct-info-soft); color:var(--ct-info); font-size:0.85rem; }
.ct-nc-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:0.15rem; }
.ct-nc-title { font-size:0.8rem; font-weight:600; color:var(--ct-text-strong); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
.ct-nc-tag { font-size:0.68rem; font-weight:600; color:var(--ct-text-faint); margin-left:0.35rem; }
.ct-nc-meta { font-size:0.68rem; color:var(--ct-text-muted); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; }
.ct-nc-pill { flex:0 0 auto; font-size:0.6rem; }
.ct-nc-empty { display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center;
    padding:1.6rem 1rem; color:var(--ct-text-muted); font-size:0.78rem; }
.ct-nc-empty i { font-size:1.4rem; color:var(--ct-success); opacity:.8; }
.ct-nc-foot { border-top:1px solid var(--ct-border); }
.ct-nc-foot button { width:100%; display:flex; align-items:center; justify-content:center; gap:0.4rem;
    padding:0.6rem; background:transparent; border:0; cursor:pointer; font-size:0.74rem; font-weight:650;
    color:var(--ct-info); transition:background .12s ease; }
.ct-nc-foot button:hover { background:var(--ct-info-soft); }

/* Full "message center" modal (body-level, not clipped by the topbar). */
.ct-nc-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start;
    justify-content:center; padding:5vh 1rem 1rem; background:rgba(15,23,42,.45);
    backdrop-filter:blur(2px); }
.ct-nc-modal { width:34rem; max-width:100%; max-height:86vh; display:flex; flex-direction:column;
    background:var(--ct-surface); border:1px solid var(--ct-border); border-radius:var(--ct-r-lg);
    box-shadow:var(--ct-shadow-pop); overflow:hidden; }
.ct-nc-modal-head { display:flex; align-items:center; gap:0.55rem; padding:0.9rem 1.1rem;
    border-bottom:1px solid var(--ct-border); font-size:0.95rem; font-weight:650; color:var(--ct-text-strong); }
.ct-nc-modal-head i.ct-nc-modal-bell { color:var(--ct-info); }
.ct-nc-modal-head .ct-nc-head-count { font-size:0.72rem; }
.ct-nc-modal-x { margin-left:auto; width:1.9rem; height:1.9rem; display:inline-flex; align-items:center;
    justify-content:center; border:0; border-radius:var(--ct-r-md); background:transparent; cursor:pointer;
    color:var(--ct-text-muted); font-size:0.9rem; transition:background .12s ease, color .12s ease; }
.ct-nc-modal-x:hover { background:var(--ct-surface-raised); color:var(--ct-text-strong); }
.ct-nc-modal-body { overflow-y:auto; padding:0.4rem 0; }
.ct-nc-modal-body .ct-nc-group-label { padding-top:0.7rem; }
.ct-nc-modal-body .ct-nc-item { padding-left:1.1rem; padding-right:1.1rem; }
.ct-nc-modal-body .ct-nc-empty { padding:3rem 1rem; }

/* Stored notifications: read/new state + mark-all-read + delivery prefs. */
.ct-nc-item--read { opacity:.62; }
.ct-nc-item--read .ct-nc-title { font-weight:500; color:var(--ct-text); }
.ct-nc-mark { margin-left:0.5rem; border:0; background:none; padding:0; cursor:pointer;
    font-size:0.62rem; font-weight:600; color:var(--ct-info); }
.ct-nc-mark:hover { text-decoration:underline; }
.ct-nc-prefs { display:flex; align-items:center; flex-wrap:wrap; gap:0.35rem 0.9rem;
    padding:0.65rem 1.1rem; border-top:1px solid var(--ct-border);
    font-size:0.72rem; color:var(--ct-text-muted); }
.ct-nc-prefs-label { font-weight:600; color:var(--ct-text-strong); }
.ct-nc-prefs-label i { color:var(--ct-info); margin-right:0.3rem; font-size:0.68rem; }
.ct-nc-pref { display:inline-flex; align-items:center; gap:0.32rem; cursor:pointer; }
.ct-nc-pref input { accent-color:var(--ct-info); }
.ct-nc-pref--muted { opacity:.55; cursor:default; }
.ct-nc-prefs-hint { flex-basis:100%; font-size:0.64rem; color:var(--ct-text-faint); }
.ct-nc-prefs-verify { flex-basis:100%; display:inline-flex; align-items:center; gap:0.35rem;
    font-size:0.68rem; font-weight:600; color:var(--ct-warning); text-decoration:none; }
.ct-nc-prefs-verify:hover { text-decoration:underline; }
.ct-nc-prefs-hours { flex-basis:100%; display:inline-flex; align-items:center; gap:0.35rem;
    font-size:0.66rem; color:var(--ct-text-muted); text-decoration:none; }
.ct-nc-prefs-hours:hover { color:var(--ct-text-strong); }
.ct-nc-prefs-hours i { color:var(--ct-info); }
.ct-nc-prefs-edit { color:var(--ct-info); font-weight:600; margin-left:0.15rem; }

/* Phone verification (profile editor). */
.ct-pv { display:flex; flex-direction:column; gap:0.6rem; }
.ct-pv-row { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; color:var(--ct-text); }
.ct-pv-row i { font-size:0.9rem; color:var(--ct-warning); }
.ct-pv-row--ok i { color:var(--ct-success); }
.ct-pv-row--muted { color:var(--ct-text-muted); }
.ct-pv-row--muted i { color:var(--ct-text-faint); }
.ct-pv-actions { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.ct-pv-code { width:7rem; padding:0.35rem 0.6rem; border:1px solid var(--ct-border);
    border-radius:var(--ct-r-md); background:var(--ct-surface); color:var(--ct-text-strong);
    font-size:0.95rem; letter-spacing:0.2em; text-align:center; }
.ct-pv-resend { border:0; background:none; padding:0; cursor:pointer;
    font-size:0.72rem; font-weight:600; color:var(--ct-info); }
.ct-pv-resend:hover { text-decoration:underline; }

/* ─────────────────────────────────────────────────────────────────────────
   Dashboard component library (.ct-stat / .ct-kpi / .ct-stage / .ct-svc /
   .ct-task / .ct-linejson) + the .ct-btn primitive. Used by the dealer /
   admin / system / vendor dashboards; token-built, light/dark, reusable on any
   custom (non-Filament) surface.
   ───────────────────────────────────────────────────────────────────────── */

/* Button primitive for custom blades (Filament chrome uses .fi-btn). */
.ct-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 0.9rem; font-size:0.85rem; font-weight:600;
    border-radius:var(--ct-r-sm); border:1px solid transparent; cursor:pointer; text-decoration:none;
    transition:background 0.15s ease, border-color 0.15s ease; }
.ct-btn--primary { background:var(--ct-accent); color:#fff; }
.ct-btn--primary:hover { background:var(--ct-accent-strong); }
.ct-btn--secondary { background:var(--ct-surface); color:var(--ct-text-strong); border-color:var(--ct-hairline); }
.ct-btn--secondary:hover { background:var(--ct-hover); }
.ct-btn--sm { padding:0.3rem 0.6rem; font-size:0.78rem; }

/* Empty-state icon when a FontAwesome <i> is used instead of an <svg>. */
.ct-empty i { font-size:2.25rem; opacity:0.5; }

/* .ct-stat — headline metric tile (label + big number + sublabel). */
.ct-stat { display:flex; flex-direction:column; gap:0.15rem; background:var(--ct-surface-raised);
    border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md); padding:0.85rem 1rem; box-shadow:var(--ct-shadow-sm); }
.ct-stat-label { font-size:0.7rem; font-weight:600; color:var(--ct-text-muted); display:flex; align-items:center; gap:0.4rem; }
.ct-stat-value { font-size:1.6rem; font-weight:650; line-height:1.1; letter-spacing:-0.02em; color:var(--ct-text-strong); }
.ct-stat-sub { font-size:0.7rem; color:var(--ct-text-faint); }
.ct-stat--accent .ct-stat-value { color:var(--ct-accent); }

/* .ct-kpi — compact KPI chip (value + caption). */
.ct-kpi { display:flex; flex-direction:column; gap:0.1rem; padding:0.6rem 0.85rem; border-radius:var(--ct-r-sm);
    background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); min-width:0; }
.ct-kpi-value { font-size:1.15rem; font-weight:650; letter-spacing:-0.02em; color:var(--ct-text-strong); white-space:nowrap; }
.ct-kpi-cap { font-size:0.68rem; color:var(--ct-text-muted); }

/* .ct-stage — recon pipeline stage row: name + count + a proportional bar. */
.ct-stage { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0.75rem; padding:0.5rem 0.65rem; border-radius:var(--ct-r-sm); }
.ct-stage:hover { background:var(--ct-hover); }
.ct-stage + .ct-stage { border-top:1px solid var(--ct-hairline-soft); }
.ct-stage-name { font-size:0.82rem; color:var(--ct-text-strong); display:flex; align-items:center; gap:0.55rem; min-width:0; }
.ct-stage-name .ct-dot { flex:0 0 auto; }
.ct-stage-count { font-size:0.85rem; font-weight:650; color:var(--ct-text-strong); min-width:2.5rem; text-align:right; }
.ct-stage-bar { grid-column:1 / -1; height:0.3rem; border-radius:var(--ct-r-pill); background:var(--ct-neutral-soft); overflow:hidden; }
.ct-stage-bar span { display:block; height:100%; border-radius:var(--ct-r-pill); background:currentColor; }

/* .ct-svc — services / tasks-by-type row: title + Next | Active | Total. */
.ct-svc { display:grid; grid-template-columns:1fr repeat(3,3.2rem); align-items:center; gap:0.5rem; padding:0.45rem 0.65rem; border-radius:var(--ct-r-sm); }
.ct-svc:hover { background:var(--ct-hover); }
.ct-svc + .ct-svc { border-top:1px solid var(--ct-hairline-soft); }
.ct-svc-title { font-size:0.82rem; color:var(--ct-text-strong); }
.ct-svc-n { font-size:0.85rem; font-weight:650; text-align:right; color:var(--ct-text-faint); }
.ct-svc-n.is-set { color:var(--ct-text-strong); }
.ct-svc-n.is-next.is-set { color:var(--ct-accent); }
.ct-svc-n.is-prog.is-set { color:var(--ct-warning); }
/* Every cell is its own deep-link into the Tasks board — keep the plain look,
   add a hover underline so the numbers read as clickable. */
a.ct-svc-title, a.ct-svc-n { text-decoration:none; }
a.ct-svc-title:hover, a.ct-svc-n:hover { text-decoration:underline; }
.ct-svc-head { display:grid; grid-template-columns:1fr repeat(3,3.2rem); gap:0.5rem; padding:0 0.65rem 0.4rem;
    font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ct-text-faint); }
.ct-svc-head span:not(:first-child) { text-align:right; }

/* .ct-task — task card with header meta, body, optional line items, actions. */
.ct-task { display:flex; flex-direction:column; gap:0.6rem; background:var(--ct-surface-raised);
    border:1px solid var(--ct-hairline-soft); border-left:3px solid var(--ct-hairline); border-radius:var(--ct-r-md); padding:0.9rem 1rem; box-shadow:var(--ct-shadow-sm); }
.ct-task--urgent { border-left-color:var(--ct-danger); }
.ct-task--high { border-left-color:var(--ct-warning); }
.ct-task-top { display:flex; align-items:baseline; gap:0.6rem; flex-wrap:wrap; }
.ct-task-id { font-size:0.78rem; font-weight:700; color:var(--ct-text-muted); }
.ct-task-veh { font-size:0.9rem; font-weight:650; color:var(--ct-text-strong); }
.ct-task-meta { display:flex; flex-wrap:wrap; gap:0.3rem 1rem; font-size:0.7rem; color:var(--ct-text-faint); }
.ct-task-meta b { color:var(--ct-text-muted); font-weight:600; }
.ct-task-body { font-size:0.82rem; color:var(--ct-text-muted); }
.ct-task-body .ct-task-kind { font-weight:650; color:var(--ct-text-strong); }
.ct-task-actions { display:flex; flex-wrap:wrap; gap:0.4rem; }

/* .ct-linejson — line-item mini table inside a task. */
.ct-linejson { width:100%; border-collapse:collapse; font-size:0.75rem; }
.ct-linejson th { text-align:left; font-weight:700; color:var(--ct-text-faint); font-size:0.62rem; text-transform:uppercase;
    letter-spacing:0.04em; padding:0.25rem 0.5rem; border-bottom:1px solid var(--ct-hairline-soft); }
.ct-linejson th:not(:first-child), .ct-linejson td:not(:first-child) { text-align:right; width:4rem; }
.ct-linejson td { padding:0.3rem 0.5rem; color:var(--ct-text-muted); border-bottom:1px solid var(--ct-hairline-soft); }
.ct-linejson tr:last-child td { border-bottom:none; }

/* ============================================================================
   Create-Task modal (.ct-tm-*) — port of the v1 "task-with-parts" design onto
   brand tokens (light + dark). Mounted at BODY_END; see
   resources/views/livewire/dealer/create-task-modal.blade.php.
   ========================================================================== */
.ct-tm-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem; overflow-y: auto;
    background: rgba(15, 18, 26, 0.55); backdrop-filter: blur(2px);
}
.ct-tm {
    width: 100%; max-width: 640px; margin: auto;
    background: var(--ct-surface); color: var(--ct-text-muted);
    border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-lg);
    box-shadow: var(--ct-shadow-pop); overflow: hidden;
    font-size: 0.8rem;
}
.ct-tm-header {
    font-size: 1.4rem; font-weight: 600; text-align: center;
    color: var(--ct-accent); padding: 1.1rem 1rem 0.4rem;
}
.ct-tm-body {
    display: grid; gap: 0.7rem; padding: 0.6rem 1.25rem 1.1rem;
    max-height: calc(90vh - 7rem); overflow-y: auto;
}
.ct-tm-row { display: grid; gap: 0.5rem; }

/* Base inputs / selects */
.ct-tm-input, .ct-tm-select {
    width: 100%; box-sizing: border-box; font-size: 0.8rem;
    padding: 0.4rem 0.55rem; border-radius: var(--ct-r-sm);
    border: 1px solid var(--ct-hairline); background: var(--ct-surface);
    color: var(--ct-text-strong); font-family: inherit;
    box-shadow: var(--ct-tm-focus-rest);
    transition: border-color 0.15s ease, box-shadow 0.22s var(--ct-tm-focus-ease);
}
.ct-tm-select { background: var(--ct-surface-sunken); }
.ct-tm-textarea { resize: vertical; }
.ct-tm-input:focus, .ct-tm-select:focus { outline: none; border-color: var(--ct-accent); box-shadow: var(--ct-tm-focus-shadow); }
.ct-tm-label { font-size: 0.7rem; font-weight: 600; color: var(--ct-text-faint); padding-left: 0.15rem; }
.ct-tm-error { font-size: 0.7rem; color: var(--ct-danger); }
.ct-tm-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--ct-text-muted); }
.ct-tm-x { cursor: pointer; color: var(--ct-accent); }
.ct-tm-x:hover { color: var(--ct-danger); }

/* Settings grid */
.ct-tm-settings {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem;
    padding-top: 0.6rem; border-top: 1px solid var(--ct-accent-soft);
}
.ct-tm-field { display: grid; gap: 0.2rem; font-size: 0.66rem; text-align: center; }
.ct-tm-field > span { font-weight: 600; color: var(--ct-text-faint); }

/* Task-name combobox — type a title, or pick a task template / MVI template / MVI element.
   Two inline icon buttons sit at the right edge: a sliders icon (the "Task settings" popover)
   and a chevron (the title picker). Each opens a panel anchored under the field. */
.ct-tm-namefield { position: relative; }
.ct-tm-namefield > .ct-tm-input { padding-right: 4.2rem; }
.ct-tm-namefield--2 > .ct-tm-input { padding-right: 6.2rem; }
.ct-tm-nameicons { position: absolute; top: 0; right: 0; height: 100%; display: flex; }
.ct-tm-nameic {
    width: 2rem; display: flex; align-items: center; justify-content: center;
    background: none; border: none; border-left: 1px solid var(--ct-hairline);
    color: var(--ct-text-faint); cursor: pointer; font-size: 0.7rem; transition: color 0.12s;
}
.ct-tm-nameic:hover, .ct-tm-nameic--on { color: var(--ct-accent); }
.ct-tm-nameic--clear:hover { color: var(--ct-danger); }
.ct-tm-nameic .fa-chevron-down { transition: transform 0.15s; }
.ct-tm-nameic--on .fa-chevron-down { transform: rotate(180deg); }
.ct-tm-namemenu, .ct-tm-settingsmenu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; box-shadow: var(--ct-shadow-md); }
.ct-tm-settingsmenu { padding: 0.7rem 0.8rem; }
.ct-tm-nopt-ico { color: var(--ct-text-faint); margin-right: 0.45rem; font-size: 0.72rem; }
.ct-tm-mvi-item:hover .ct-tm-nopt-ico { color: #fff; }
.ct-tm-tspanel { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ct-tm-tplnote { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0; font-size: 0.74rem; color: var(--ct-warning); }
.ct-tm-tplnote i { margin-top: 0.12rem; }
.ct-tm-tplnote span { flex: 1 1 auto; }
.ct-tm-tplnote-x { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem; padding: 0.1rem 0.4rem; border: 1px solid var(--ct-border); border-radius: var(--ct-r-pill); background: transparent; color: var(--ct-text-muted); font-size: 0.68rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s, background .12s; }
.ct-tm-tplnote-x:hover { color: var(--ct-danger); border-color: var(--ct-danger); background: var(--ct-danger-soft); }
.ct-tm-tplnote-x i { margin-top: 0; }

/* Buttons (pill action buttons from the design) */
.ct-tm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; gap: 0.25rem; cursor: pointer; font-weight: 600; font-size: 0.74rem;
    padding: 0.55rem 0.7rem; border: 1px solid var(--ct-hairline);
    border-radius: var(--ct-r-sm); background: var(--ct-surface-sunken); color: var(--ct-accent);
    transition: background 0.12s, color 0.12s;
}
.ct-tm-btn:hover, .ct-tm-btn--active { background: var(--ct-accent); color: #fff; border-color: var(--ct-accent); }
.dark .ct-tm-btn:hover, .dark .ct-tm-btn--active { color: #0f1117; }

/* Unified "add items" bar — Add MVI · Add Line Item · Add Part on one row.
   Buttons flex to equal widths; a hidden one (MVI on non-vehicle tasks) lets the
   rest fill. The MVI picker + added rows / line items / parts render below it. */
.ct-tm-items { display: grid; gap: 0.6rem; }
.ct-tm-addbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ct-tm-addbar > .ct-tm-btn { flex: 1 1 0; min-width: 8.5rem; }

/* Vehicles */
.ct-tm-vehicles { display: grid; gap: 0.5rem; }
.ct-tm-veh-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ct-tm-veh-add { position: relative; }
.ct-tm-vehicle {
    position: relative; display: grid; grid-template-columns: 46px auto; gap: 0.5rem; align-items: center;
    border: 1px solid var(--ct-hairline); background: var(--ct-surface-sunken);
    padding: 0.4rem; border-radius: var(--ct-r-sm);
}
.ct-tm-vehicle-x { position: absolute; right: 4px; top: 3px; font-size: 0.7rem; }
.ct-tm-vehicle-pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--ct-r-sm); overflow: hidden; background: var(--ct-surface); }
.ct-tm-vehicle-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-tm-vehicle-noimg { color: var(--ct-text-faint); }
.ct-tm-vehicle-name { display: grid; gap: 0.1rem; min-width: 0; }
.ct-tm-vehicle-ymm { color: var(--ct-accent); font-weight: 600; font-size: 0.74rem; }
.ct-tm-vehicle-vin { font-size: 0.62rem; color: var(--ct-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-tm-vsearch { position: relative; }
.ct-tm-vsearch-ico { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--ct-text-faint); }
.ct-tm-vsearch-input { width: 100%; box-sizing: border-box; font-size: 0.74rem; padding: 0.4rem 0.5rem 0.4rem 1.6rem; border-radius: var(--ct-r-sm); border: 1px solid var(--ct-hairline); background: var(--ct-surface); color: var(--ct-accent); box-shadow: var(--ct-tm-focus-rest); transition: border-color 0.15s ease, box-shadow 0.22s var(--ct-tm-focus-ease); }
.ct-tm-vsearch-input:focus { outline: none; border-color: var(--ct-accent); box-shadow: var(--ct-tm-focus-shadow); }
.ct-tm-vsearch-results { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 5; background: var(--ct-surface); border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm); box-shadow: var(--ct-shadow-md); max-height: 220px; overflow-y: auto; }
.ct-tm-vsearch-item { display: grid; gap: 0.05rem; width: 100%; text-align: left; padding: 0.4rem 0.6rem; background: none; border: none; border-bottom: 1px solid var(--ct-hairline-soft); cursor: pointer; }
.ct-tm-vsearch-item:hover { background: var(--ct-accent); }
.ct-tm-vsearch-item:hover * { color: #fff; }
.ct-tm-vsearch-ymm { font-size: 0.74rem; font-weight: 600; color: var(--ct-accent); }
.ct-tm-vsearch-vin { font-size: 0.62rem; color: var(--ct-text-faint); }

/* Inline dropdown panels (MVI + attendants) — expand above their button */
.ct-tm-dropdown { position: relative; }
.ct-tm-dropdown-panel { background: var(--ct-surface-sunken); border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm); margin-bottom: 0.5rem; overflow: hidden; }
.ct-tm-dropdown-panel--static { margin-top: 0.5rem; margin-bottom: 0; }
.ct-tm-dropdown-list { max-height: 280px; overflow-y: auto; padding: 0.5rem 0.75rem; display: grid; gap: 0.6rem; }
.ct-tm-dropdown-search { padding: 0.5rem 0.75rem; border-top: 1px solid var(--ct-hairline); }
.ct-tm-mvi-block { display: grid; gap: 0; }
.ct-tm-mvi-cat { text-align: center; padding: 0.2rem; background: var(--ct-accent-soft); color: var(--ct-text-strong); font-weight: 600; border-radius: var(--ct-r-sm) var(--ct-r-sm) 0 0; font-size: 0.68rem; }
.ct-tm-mvi-items { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 0.5rem; }
.ct-tm-mvi-items--one { grid-template-columns: 1fr 1fr; }
.ct-tm-mvi-item {
    display: flex; align-items: center; text-align: left; width: 100%;
    padding: 0.3rem 0.5rem; font-size: 0.7rem; color: var(--ct-text-muted);
    background: none; border: none; border-bottom: 1px dotted var(--ct-hairline); cursor: pointer;
}
.ct-tm-mvi-item:hover { background: var(--ct-accent); color: #fff; border-radius: var(--ct-r-sm); }
.ct-tm-mvi-item--inactive { color: var(--ct-text-faint); opacity: 0.55; cursor: not-allowed; }
.ct-tm-mvi-item--inactive:hover { background: none; color: var(--ct-text-faint); }
.ct-tm-empty { font-size: 0.72rem; color: var(--ct-text-faint); text-align: center; padding: 0.4rem; }

/* Added MVI elements — dot · name · description · per-element quick actions */
.ct-tm-added-mvi { display: grid; gap: 0.6rem; }
.ct-tm-mvi-added { display: grid; grid-template-columns: 14px minmax(0, 34%) minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ct-hairline); }
.ct-tm-mvi-dot { width: 15px; height: 10px; background: var(--ct-accent); border-radius: 3px; }
.ct-tm-mvi-added-name { font-size: 0.74rem; color: var(--ct-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tm-mvi-acts { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ct-tm-mvi-act { cursor: pointer; color: var(--ct-text-faint); font-size: 0.78rem; line-height: 1; transition: color 0.12s; }
.ct-tm-mvi-act:hover { color: var(--ct-accent); }
.ct-tm-mvi-act--del:hover { color: var(--ct-danger); }
.ct-tm-mvi-act--done:hover { color: var(--ct-success, #1f9d57); }
/* Card MVI: read-only comment text vs. the edit textarea (column 3). */
.ct-tm-mvi-c3 { min-width: 0; }
.ct-tm-mvi-added-note { font-size: .74rem; color: #47566a; white-space: normal; word-break: break-word; }
.dark .ct-tm-mvi-added-note { color: #b9c6d8; }
.ct-tm-mvi-added-note--empty { color: #9aa0a6; font-style: italic; }
/* CARD-scoped compaction — the inspection-item rows reuse the dialog's .ct-tm-*
   markup, but on the task CARD they read as a dense list: tighter row rhythm +
   line-height, no trailing divider. The create/edit dialog keeps its air. */
.ct-task .ct-tm-added-mvi { gap: .22rem; }
.ct-task .ct-tm-mvi-added { padding-bottom: .22rem; gap: .4rem; }
.ct-task .ct-tm-mvi-added:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-task .ct-tm-mvi-added-name, .ct-task .ct-tm-mvi-added-note { font-size: .72rem; line-height: 1.35; }
.ct-task .ct-tm-mvi-acts { gap: .3rem; }

/* Line items — each row is ONE unified, bordered track with seamless inner cells.
   The labor "Flat / Hrs" select matches the inputs (borderless, custom caret) so the
   whole line reads as a single piece; the row lights up as a unit on focus. */
.ct-tm-lines { display: grid; gap: 0.4rem; }
/* Line Items Library autocomplete — the dropdown under a line's title input.
   ⚠️ .ct-tm-line clips (overflow:hidden, for its rounded corners) — while an
   input inside the row is FOCUSED (the only time the dropdown shows) the clip
   relaxes so the absolutely-positioned dropdown can escape the row. */
.ct-tm-cell--name { position: relative; }
.ct-tm-line:focus-within { overflow: visible; }
/* The panel + items mirror the task modal's vehicle-search dropdown
   (.ct-tm-vsearch-results / -item) — the house suggestion look: hairline
   panel, two-line rows, accent hover with white text. */
.ct-tm-sug { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 30;
    background: var(--ct-surface); border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm);
    box-shadow: var(--ct-shadow-md); max-height: 220px; overflow-y: auto; }
.ct-tm-sug-opt { display: grid; gap: 0.05rem; width: 100%; text-align: left; padding: 0.4rem 0.6rem;
    background: none; border: none; border-bottom: 1px solid var(--ct-hairline-soft); cursor: pointer; }
.ct-tm-sug-opt:last-child { border-bottom: 0; }
.ct-tm-sug-opt > span { font-size: 0.78rem; font-weight: 600; color: var(--ct-text-strong); }
.ct-tm-sug-opt > small { font-size: 0.66rem; color: var(--ct-text-faint); }
.ct-tm-sug-opt:hover { background: var(--ct-accent); }
.ct-tm-sug-opt:hover * { color: #fff; }
.ct-tm-lines-head,
.ct-tm-line { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 5rem 10.5rem 4.6rem; align-items: stretch; }
.ct-tm-lines-head { padding: 0.1rem 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ct-text-faint); }
.ct-tm-lines-head > span { align-self: center; text-align: right; padding: 0 0.6rem; }
.ct-tm-lines-head > span:nth-child(2) { text-align: left; }
.ct-tm-lines-head > span:nth-child(4) { text-align: center; }
.ct-tm-line {
    border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm);
    background: var(--ct-surface-sunken); overflow: hidden;
    box-shadow: var(--ct-tm-focus-rest);
    transition: border-color 0.15s ease, box-shadow 0.22s var(--ct-tm-focus-ease);
}
.ct-tm-line:focus-within { border-color: var(--ct-accent); box-shadow: var(--ct-tm-focus-shadow); }
/* seamless inner fields — no per-field border/bg; the cell dividers carry the structure */
.ct-tm-line .ct-tm-input, .ct-tm-line .ct-tm-select {
    border: none; border-radius: 0; background: transparent; box-shadow: none;
    height: 100%; font-size: 0.74rem; padding: 0.45rem 0.6rem;
}
.ct-tm-line .ct-tm-input:focus, .ct-tm-line .ct-tm-select:focus { background: transparent; box-shadow: none; }
.ct-tm-cell { display: flex; align-items: stretch; min-width: 0; border-left: 1px solid var(--ct-hairline-soft); }
.ct-tm-cell--name { border-left: none; }
.ct-tm-cell > .ct-tm-input { width: 100%; }
.ct-tm-line-x {
    display: flex; align-items: center; justify-content: center; padding: 0;
    background: none; border: none; cursor: pointer; color: var(--ct-text-faint);
    font-size: 0.74rem; transition: color 0.12s;
}
.ct-tm-line-x:hover { color: var(--ct-danger); }
.ct-tm-line .ct-tm-num { text-align: right; }
/* labor segment: mode select (content-width, custom caret) + amount(s), hairline-divided */
.ct-tm-labor .ct-tm-num { flex: 1 1 0; border-left: 1px solid var(--ct-hairline-soft); }
.ct-tm-line .ct-tm-labormode {
    flex: 0 0 auto; width: auto; color: var(--ct-text-muted); font-weight: 600;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 1.3rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23889' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.45rem center; background-size: 0.6rem;
}
.ct-tm-line-total { align-items: center; justify-content: flex-end; padding: 0 0.6rem; color: var(--ct-accent); font-weight: 700; font-size: 0.78rem; white-space: nowrap; }
/* Line Items Library — the "add" row: name + costs entered together, saved on Add. */
.ct-tm-line--add { border-style: dashed; }
.ct-tm-line--add:focus-within { border-style: solid; }
.ct-tll-addic { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--ct-accent); opacity: 0.55; font-size: 0.7rem; }
.ct-tm-line--add .mb-btn { width: 100%; height: 100%; border-radius: 0; font-size: 0.72rem; }
/* Parts qty/cost selects (outside line items) keep their centered alignment */
.ct-tm-num { text-align: center; padding-left: 0.3rem; padding-right: 0.3rem; }
/* Grand total — a summary line, not a card */
.ct-tm-grandrow { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.6rem; padding: 0.15rem 0.6rem 0; }
.ct-tm-grand-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ct-text-faint); }
.ct-tm-grand { color: var(--ct-accent); font-weight: 800; font-size: 0.92rem; }

/* Parts — each part is ONE bordered card: a seamless head track (name · comment ·
   expand toggle) over an attached, tidy details panel. Matches the line-item track. */
.ct-tm-parts { display: grid; gap: 0.45rem; padding-top: 0.1rem; }
.ct-tm-part {
    border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm);
    background: var(--ct-surface-sunken); overflow: hidden;
    box-shadow: var(--ct-tm-focus-rest);
    transition: border-color 0.15s ease, box-shadow 0.22s var(--ct-tm-focus-ease);
}
.ct-tm-part:focus-within { border-color: var(--ct-accent); box-shadow: var(--ct-tm-focus-shadow); }
/* head track — seamless cells (reuses .ct-tm-cell / .ct-tm-cell--name from line items) */
.ct-tm-part-head { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) minmax(0, 1fr) 2.3rem; align-items: stretch; }
.ct-tm-part-head .ct-tm-input {
    border: none; border-radius: 0; background: transparent; box-shadow: none;
    height: 100%; font-size: 0.76rem; padding: 0.55rem 0.6rem;
}
.ct-tm-part-head .ct-tm-cell--name .ct-tm-input { font-weight: 600; color: var(--ct-text-strong); }
.ct-tm-part-head .ct-tm-input:focus { background: transparent; box-shadow: none; }
.ct-tm-part-toggle {
    display: flex; align-items: center; justify-content: center; padding: 0;
    background: none; border: none; border-left: 1px solid var(--ct-hairline-soft);
    cursor: pointer; color: var(--ct-text-faint); font-size: 0.7rem; transition: color 0.12s;
}
.ct-tm-part-toggle:hover, .ct-tm-part-toggle--on { color: var(--ct-accent); }
.ct-tm-part-toggle i { transition: transform 0.15s; }
.ct-tm-part-toggle--on i { transform: rotate(180deg); }
/* details panel — inside the card, divided from the head; clean filled labelled fields.
   12-col grid: row1 = Qty(2) · Part #(6) · ETA(4); row2 = Cost(2) · Supplier(4) · Threshold(3) · Tracking #(3) */
.ct-tm-part-details {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.55rem 0.5rem; align-items: end;
    padding: 0.7rem 0.7rem 0.75rem; border-top: 1px solid var(--ct-hairline);
}
.ct-tm-part-details .ct-tm-field { text-align: left; gap: 0.25rem; }
.ct-tm-part-details .ct-tm-field > span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ct-text-faint); padding-left: 0.1rem; }
.ct-tm-part-details .ct-tm-input, .ct-tm-part-details .ct-tm-select {
    background: var(--ct-surface); border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm);
    font-size: 0.74rem; padding: 0.4rem 0.5rem;
}
.ct-tm-part-details .ct-tm-input:focus, .ct-tm-part-details .ct-tm-select:focus { border-color: var(--ct-accent); box-shadow: none; }
.ct-tm-c2 { grid-column: span 2; }
.ct-tm-c3 { grid-column: span 3; }
.ct-tm-c4 { grid-column: span 4; }
.ct-tm-c6 { grid-column: span 6; }
/* dropdowns — 4 inline label+select pairs on their own row, divided from the fields above */
.ct-tm-part-dropdowns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 0.4rem 0.7rem; margin-top: 0.15rem; padding-top: 0.6rem; border-top: 1px dashed var(--ct-hairline-soft); }
.ct-tm-field--inline { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.ct-tm-field--inline > span { white-space: nowrap; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ct-text-faint); }
.ct-tm-field--inline > select { flex: 1 1 0; min-width: 0; width: auto; padding: 0.4rem 0.5rem; }
/* money fields: hide the native number spinners (Qty keeps its stepper) */
.ct-tm-nospin::-webkit-outer-spin-button, .ct-tm-nospin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-tm-nospin { -moz-appearance: textfield; appearance: textfield; }

/* Assignees & approval */
.ct-tm-attend { display: grid; gap: 0.5rem; }
.ct-tm-attend-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.ct-tm-attend-groups { display: grid; gap: 0.6rem; }
.ct-tm-attend-pool { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.ct-tm-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; font-size: 0.7rem; border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-pill); }
.ct-tm-chip-x { cursor: pointer; background: none; border: none; color: inherit; font-size: 0.9rem; line-height: 1; opacity: 0.7; }
.ct-tm-chip-x:hover { opacity: 1; }
.ct-tm-chip--user { border-color: #d0b8d2; background: rgba(208, 184, 210, 0.16); color: #8a5e8d; }
.ct-tm-chip--aprooval, .ct-tm-chip--aprooval_dept { border-color: #b0c6ae; background: var(--ct-success-soft); color: var(--ct-success); }
.ct-tm-chip--department { border-color: #beb8df; background: rgba(190, 184, 223, 0.18); color: #6f6ba0; }
.ct-tm-chip--vendor { border-color: #dab1bc; background: rgba(218, 177, 188, 0.18); color: #a76b79; }
.ct-tm-chip--internal { border-color: #a9c4ee; background: rgba(72, 109, 180, 0.14); color: #3f5f9c; }
.ct-tm-chip--event { border-color: #cbb79a; background: rgba(203, 183, 154, 0.2); color: #8a6d3f; }
.dark .ct-tm-chip--user { color: #d9b6dc; }
.dark .ct-tm-chip--department { color: #b6b1e0; }
.dark .ct-tm-chip--vendor { color: #e0aebb; }
.dark .ct-tm-chip--internal { color: #a9c4ee; }
.dark .ct-tm-chip--event { color: #d8c29e; }

/* Status change */
.ct-tm-status { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.6rem; background: var(--ct-surface-sunken); border-radius: var(--ct-r-sm); }

/* Auto-complete ("Complete when…") rule rows */
.ct-tm-autoc { display: grid; gap: 0.5rem; padding: 0.6rem; background: var(--ct-surface-sunken); border-radius: var(--ct-r-sm); }
.ct-tm-autoc-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 600; color: var(--ct-text-faint); }
.ct-tm-autoc-head .ct-tm-select { width: auto; }
.ct-tm-autoc-row { display: flex; align-items: center; gap: 0.4rem; }
.ct-tm-autoc-row .ct-tm-select, .ct-tm-autoc-row .ct-tm-input { flex: 1; min-width: 0; }
.ct-tm-autoc-row .ct-tm-autoc-num { flex: 0 0 5.5rem; }
.ct-tm-autoc-x { flex: 0 0 auto; border: 0; background: transparent; color: var(--ct-text-faint); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0.2rem; }
.ct-tm-autoc-x:hover { color: var(--ct-danger, #b91c1c); }
.ct-tm-autoc-add { justify-self: start; border: 0; background: transparent; color: var(--ct-accent); font-size: 0.7rem; font-weight: 600; cursor: pointer; padding: 0; }

/* Attachments */
.ct-tm-upload { position: relative; overflow: hidden; }
.ct-tm-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ct-tm-uploading { font-size: 0.7rem; color: var(--ct-text-faint); text-align: center; }
.ct-tm-docs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ct-tm-doc { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; font-size: 0.7rem; border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm); color: var(--ct-text-muted); }

/* Footer */
.ct-tm-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.8rem 1.25rem; border-top: 1px solid var(--ct-accent-soft); }
.ct-tm-foot-btn { padding: 0.45rem 1.4rem; font-size: 0.8rem; font-weight: 600; border-radius: var(--ct-r-sm); border: 1px solid var(--ct-accent); background: var(--ct-accent); color: #fff; cursor: pointer; }
.ct-tm-foot-btn--ghost { background: transparent; color: var(--ct-accent); }
.ct-tm-foot-btn:hover { filter: brightness(1.05); }
.ct-tm-foot-btn[disabled] { opacity: 0.6; cursor: default; }

@media (max-width: 560px) {
    .ct-tm-settings { grid-template-columns: 1fr 1fr; }
    .ct-tm-veh-cards { grid-template-columns: 1fr; }
    .ct-tm-attend-bar { grid-template-columns: 1fr 1fr; }
    .ct-tm-mvi-items { grid-template-columns: 1fr; }
    .ct-tm-part-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-tm-part-dropdowns { grid-template-columns: 1fr 1fr; }
    .ct-tm-c2, .ct-tm-c3, .ct-tm-c4 { grid-column: span 1; }
    .ct-tm-c6 { grid-column: span 2; }
    .ct-tm-header { font-size: 1.15rem; }
    .ct-tm-lines-head, .ct-tm-line { grid-template-columns: 1.4rem minmax(0, 1fr) 3.6rem 8.2rem 3.8rem; }
    .ct-tm-line .ct-tm-input, .ct-tm-line .ct-tm-select { font-size: 0.68rem; padding: 0.4rem 0.45rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Inspection RUN / capture surface (.ct-ins-*) — App\Filament\Dealer\Pages\InspectRun.
   Mobile-first; self-contained (no dependency on the builder's page-scoped .ext-*).
   ─────────────────────────────────────────────────────────────────────────── */
.ct-ins { display:flex; flex-direction:column; gap:1rem; width:100%; position:relative;
    --mb-border:1px solid var(--ct-hairline); }
.dark .ct-ins { --mb-border:1px solid rgba(255,255,255,.1); }
.ct-btn--ghost { background:transparent; color:var(--ct-text-strong); border-color:var(--ct-hairline); }
.ct-btn--ghost:hover { background:var(--ct-hover); }
.ct-btn:disabled { opacity:.45; pointer-events:none; }

.ct-ins-top { position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:0.7rem;
    background:var(--ct-surface-raised); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-lg);
    padding:0.85rem 1rem; box-shadow:var(--ct-shadow-sm); }
.ct-ins-top-main { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ct-ins-veh { display:flex; flex-direction:column; gap:0.1rem; }
.ct-ins-veh-title { font-size:1.05rem; font-weight:700; color:var(--ct-text-strong); }
.ct-ins-veh-sub { font-size:0.8rem; color:var(--ct-text-muted); }
.ct-ins-meta { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.ct-ins-meta-txt { font-size:0.78rem; color:var(--ct-text-muted); display:inline-flex; align-items:center; gap:0.3rem; }
.ct-ins-progress { display:flex; align-items:center; gap:0.6rem; }
.ct-ins-progress-bar { flex:1; height:7px; background:var(--ct-hover); border-radius:var(--ct-r-pill); overflow:hidden; }
.ct-ins-progress-bar > span { display:block; height:100%; background:var(--ct-accent); transition:width .25s ease; }
.ct-ins-progress-txt { font-size:0.74rem; color:var(--ct-text-muted); white-space:nowrap; }
.ct-ins-saving { font-size:0.74rem; color:var(--ct-warning); display:inline-flex; align-items:center; gap:0.3rem; white-space:nowrap; }
.ct-ins-actions { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.ct-ins-undo { display:flex; gap:0.3rem; margin-right:auto; }
.ct-ins-danger { color:var(--ct-danger); }
.ct-ins-danger:hover { background:var(--ct-danger-soft); }

.ct-ins-bar { display:flex; align-items:center; gap:0.55rem; padding:0.6rem 0.85rem; border-radius:var(--ct-r-md);
    font-size:0.83rem; background:var(--ct-info-soft); color:var(--ct-text-strong); border:1px solid var(--ct-hairline); }
.ct-ins-bar--warn { background:var(--ct-warning-soft); }
.ct-ins-bar--edit { background:var(--ct-warning-soft); }

.ct-ins-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
    background:rgba(15,23,42,.55); backdrop-filter:blur(2px); padding:1rem; }
.ct-ins-overlay-card { background:var(--ct-surface-raised); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-lg);
    box-shadow:var(--ct-shadow-pop); padding:1.5rem; max-width:420px; text-align:center; display:flex; flex-direction:column; gap:0.6rem; }
.ct-ins-overlay-ic { font-size:1.8rem; color:var(--ct-accent); }
.ct-ins-overlay-card h3 { font-size:1.05rem; font-weight:700; color:var(--ct-text-strong); }
.ct-ins-overlay-card p { font-size:0.85rem; color:var(--ct-text-muted); line-height:1.4; }
.ct-ins-overlay-btns { display:flex; gap:0.5rem; justify-content:center; margin-top:0.4rem; }

.ct-ins-body { display:flex; flex-direction:column; gap:0.85rem; }
.ct-ins-body--ro { opacity:.92; }
/* Element / group cards sit on a white (raised) surface, not the page gray. */
.ct-ins .mb-group-block { background:var(--ct-surface-raised); }
/* Vertically centre the grade chips + tool buttons against the element name. */
.ct-ins .cl-el-head { align-items:center; }
/* Selecting a grade only transitions COLOURS (never `all`) so the chip can't appear
   to resize/pop on click; and no press-transform. */
.ct-ins .cl-chip { transition:background-color .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease; }
.ct-ins .cl-chip:active { transform:none; }
/* Tool buttons (attach/parts/lines): the span only exists once a grade is selected
   (x-show=toolsVisible); the buttons themselves keep the builder's hover-reveal
   (opacity:0 → 1 on element hover, content tools stay via .cl-tool--on). */
/* Bigger diagrams than the builder's 400px cap; interior runs taller so cap it smaller to match. */
.ct-ins .ext-diagram { max-width:520px; }
.ct-ins .ext-diagram--interior { max-width:380px; }
/* Diagrams flow into a BALANCED number of columns (--diag-cols, computed so the
   last row is never a lonely 1: 4→2·2, 5→3·2), equal height per row; responsive. */
.ct-ins-diagrams { display:grid; grid-template-columns:repeat(var(--diag-cols,2),minmax(0,1fr)); gap:0.9rem; align-items:stretch; }
@media (max-width:1200px) { .ct-ins-diagrams { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) { .ct-ins-diagrams { grid-template-columns:1fr; } }
.ct-ins-diagrams .mb-group-block { margin-bottom:0; display:flex; flex-direction:column; }
.ct-ins-diagrams .ext { flex:1 1 auto; display:flex; flex-direction:column; }
.ct-ins-diagrams .ext-readout--top { margin-bottom:0.55rem; }
/* Diagram on the left, condition summary on the right (≈half each) — the diagram
   fills its half-column (no fixed summary min that would crowd it out). */
.ct-ins-diagrams .ext-grid { flex:1 1 auto; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0.7rem; }
.ct-ins-diagrams .ext-diagram { max-width:none; margin:0; }
.ct-ins-diagrams .ext-diagram--interior { max-width:none; }
/* CR read-only render: every diagram caps at a shared height so a tall SVG
   (interior/mechanical) doesn't dwarf the exterior — the drawing letterboxes
   centered inside its box, hover/click unaffected. */
.ct-ins--cr .ct-ins-diagrams .ext-diagram svg { max-height:24rem; }
/* Tool buttons keep their place in the layout always, so revealing them on a
   grade-select never shifts the chips (the "size change" was the buttons appearing).
   They're invisible until a grade is selected, then reveal on element hover; tools
   holding content always show. Overrides the builder's reveal-on-any-hover. */
.ct-ins .cl-tool { opacity:0; pointer-events:none; }
.ct-ins .cl-el:hover .cl-tool { opacity:0; pointer-events:none; }
.ct-ins .cl-tool--on { opacity:1; pointer-events:auto; }
.ct-ins .cl-el--graded:hover .cl-tool { opacity:1; pointer-events:auto; }
/* View (completed) mode: show ONLY tools that hold content; Set-all is useless too. */
.ct-ins-body--ro .cl-tool:not(.cl-tool--on):not(.cl-tool--wip) { display:none; }
.ct-ins-body--ro .cl-gradeall { display:none; }
/* An in-progress finding badges a timer that links to its open task. It's a
   status indicator (not an edit tool), so it stays visible in every mode —
   including the read-only CR, which otherwise hides content-less tools, and on
   element hover (whose 0,3,0 rule would otherwise re-hide it). */
.ct-ins .cl-tool--wip,
.ct-ins .cl-el:hover .cl-tool--wip,
.ct-ins .cl-el--graded .cl-tool--wip,
.ct-ins-body--ro .cl-tool--wip { opacity:1; pointer-events:auto; color:var(--ct-warning); border-color:var(--ct-warning-soft); }
.cl-tool--wip:hover { color:var(--ct-warning); background:var(--ct-warning-soft); }

.ct-ins-group { border:1px solid var(--ct-hairline); border-radius:var(--ct-r-lg); background:var(--ct-surface-raised); overflow:hidden; }
.ct-ins-group-head { display:flex; align-items:center; gap:0.5rem; padding:0.65rem 0.9rem; cursor:pointer;
    background:var(--ct-surface); border-bottom:1px solid var(--ct-hairline); user-select:none; }
.ct-ins-group-chev { font-size:0.75rem; color:var(--ct-text-muted); transition:transform .2s ease; }
.ct-ins-group-chev--closed { transform:rotate(-90deg); }
.ct-ins-group-name { font-weight:700; font-size:0.92rem; color:var(--ct-text-strong); }
.ct-ins-group-name--muted { color:var(--ct-text-muted); font-weight:600; }
.ct-ins-group-body { display:flex; flex-direction:column; gap:0.75rem; padding:0.85rem 0.9rem; }

.ct-ins-el { display:flex; flex-direction:column; gap:0.5rem; padding:0.7rem 0.8rem; border:1px solid var(--ct-hairline);
    border-radius:var(--ct-r-md); background:var(--ct-surface); }
.ct-ins-el-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.ct-ins-el-name { font-weight:600; font-size:0.88rem; color:var(--ct-text-strong); }
.ct-ins-el-tasks { display:flex; gap:0.3rem; }

.ct-ins-chips { display:flex; flex-wrap:wrap; gap:0.4rem; }
.ct-ins-chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.4rem 0.7rem; border-radius:var(--ct-r-pill);
    border:1.5px solid var(--ct-hairline); background:var(--ct-surface-raised); font-size:0.8rem; font-weight:600; cursor:pointer;
    transition:all .12s ease; }
.ct-ins-chip:hover { filter:brightness(.97); }
.ct-ins-chip--on { box-shadow:var(--ct-shadow-sm); }
.ct-ins-chip:disabled { cursor:default; opacity:.85; }

.ct-ins-field { width:100%; padding:0.5rem 0.65rem; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md);
    background:var(--ct-surface-raised); color:var(--ct-text-strong); font-size:0.85rem; }
.ct-ins-note { width:100%; padding:0.5rem 0.65rem; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md);
    background:var(--ct-surface-raised); color:var(--ct-text-strong); font-size:0.83rem; resize:vertical; }
.ct-ins-field:disabled, .ct-ins-note:disabled { opacity:.7; background:var(--ct-surface); }
.ct-ins-diagram { display:flex; align-items:center; gap:0.5rem; padding:0.65rem 0.8rem; border:1px dashed var(--ct-hairline);
    border-radius:var(--ct-r-md); font-size:0.8rem; color:var(--ct-text-muted); background:var(--ct-surface-raised); }

.ct-ins-media { display:flex; flex-wrap:wrap; gap:0.45rem; align-items:center; }
.ct-ins-add-row { display:contents; }
.ct-ins-thumb { position:relative; width:64px; height:64px; border-radius:var(--ct-r-md); overflow:hidden;
    border:1px solid var(--ct-hairline); background:var(--ct-surface-raised); }
.ct-ins-thumb img, .ct-ins-thumb video { width:100%; height:100%; object-fit:cover; display:block; }
.ct-ins-thumb-v { display:block; width:100%; height:100%; position:relative; }
.ct-ins-thumb-ic { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem;
    background:rgba(0,0,0,.25); }
.ct-ins-thumb--doc { width:auto; min-width:64px; padding:0 0.5rem; }
.ct-ins-thumb-doc { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:0.2rem;
    font-size:0.62rem; color:var(--ct-text-muted); text-align:center; }
.ct-ins-thumb-doc i { font-size:1.1rem; }
.ct-ins-thumb-doc span { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-ins-thumb-x { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; border:none;
    background:rgba(0,0,0,.6); color:#fff; font-size:0.75rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ct-ins-add { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--ct-r-md);
    border:1px dashed var(--ct-hairline); color:var(--ct-text-muted); cursor:pointer; background:var(--ct-surface-raised); }
.ct-ins-add:hover { color:var(--ct-accent); border-color:var(--ct-accent); }
.ct-ins-file { display:none; }

.ct-ins-history { border:1px solid var(--ct-hairline); border-radius:var(--ct-r-lg); background:var(--ct-surface-raised); padding:0.9rem 1rem; }
.ct-ins-history h3 { font-size:0.95rem; font-weight:700; color:var(--ct-text-strong); display:flex; align-items:center; gap:0.4rem; }
.ct-ins-history-sub { font-size:0.78rem; color:var(--ct-text-muted); margin:0.15rem 0 0.6rem; }
.ct-ins-history-list { display:flex; flex-direction:column; gap:0.4rem; }
.ct-ins-history-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; font-size:0.78rem;
    padding:0.4rem 0.55rem; border-radius:var(--ct-r-sm); background:var(--ct-surface); }
.ct-ins-history-when { color:var(--ct-text-muted); white-space:nowrap; }
.ct-ins-history-who { font-weight:600; color:var(--ct-text-strong); }
.ct-ins-history-what { color:var(--ct-text-muted); }
.ct-ins-history-diff { display:inline-flex; align-items:center; gap:0.4rem; margin-left:auto; }
.ct-ins-old { color:var(--ct-danger); text-decoration:line-through; opacity:.8; }
.ct-ins-new { color:var(--ct-success); font-weight:600; }

@media (max-width:640px) {
    .ct-ins-actions { width:100%; }
    .ct-ins-top { top:0; }
}

/* ---- Address autocomplete (Google Places dropdown; see ct-address-autocomplete.js) ---- */
.ct-ac-menu {
    position: absolute;
    z-index: 9999;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--ct-surface, #fff);
    border: 1px solid var(--ct-hairline, #e5e7eb);
    border-radius: var(--ct-r-md, 0.6rem);
    box-shadow: var(--ct-shadow-pop, 0 10px 30px rgba(0, 0, 0, 0.12));
    padding: 0.25rem;
    font-size: 0.85rem;
}
.ct-ac-item {
    padding: 0.5rem 0.65rem;
    border-radius: var(--ct-r-sm, 0.4rem);
    cursor: pointer;
    color: var(--ct-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-ac-item:hover,
.ct-ac-item--hi { background: var(--ct-accent-soft, #eef2ff); color: var(--ct-accent, #486db4); }
/* Business/place picks render two lines (name over its address). */
.ct-ac-item--two { white-space: normal; }
.ct-ac-main { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ac-sub { font-size: 0.72rem; color: var(--ct-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-ac-item--hi .ct-ac-sub,
.ct-ac-item:hover .ct-ac-sub { color: inherit; }
.ct-ac-foot {
    padding: 0.35rem 0.65rem 0.15rem;
    font-size: 0.66rem;
    color: var(--ct-text-faint, #9ca3af);
    text-align: right;
    border-top: 1px solid var(--ct-hairline-soft, #f1f1f4);
    margin-top: 0.2rem;
}

/* ---- Geofence builder + map display (Leaflet; see public/js/ct-geofence.js) ---- */
.ct-geo { position: relative; }
.ct-veh-map { margin-top: 0.8rem; }
.ct-veh-map .ct-geo-map { height: 300px; }
.ct-geo-map {
    height: 360px;
    width: 100%;
    border-radius: var(--ct-r-md, 0.6rem);
    overflow: hidden;
    border: 1px solid var(--ct-hairline, #e5e7eb);
    background: var(--ct-surface-2, #f3f4f6);
    z-index: 0;
}
.ct-geo--builder .ct-geo-map { height: 540px; }
/* Full-bleed fleet map (Vehicle locations) — big, height set inline via the config. */
.ct-fleet-map { margin: 0 0 1.1rem; }
.ct-geo-map--draw { cursor: crosshair; }
/* Fallback when no Google Maps key is configured. */
.ct-geo-msg {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ct-r-md, 0.6rem);
    border: 1px dashed var(--ct-hairline, #e5e7eb);
    background: var(--ct-surface-2, #f3f4f6);
    color: var(--ct-text-muted, #6b7280);
    font-size: 0.85rem;
}

.ct-geo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ct-geo-search { position: relative; flex: 1 1 16rem; min-width: 12rem; }
.ct-geo-search > i { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--ct-text-faint, #9ca3af); font-size: 0.8rem; pointer-events: none; }
.ct-geo-search input {
    width: 100%;
    padding: 0.45rem 0.6rem 0.45rem 1.9rem;
    border: 1px solid var(--ct-hairline, #e5e7eb);
    border-radius: var(--ct-r-md, 0.6rem);
    background: var(--ct-surface, #fff);
    color: var(--ct-text, #111827);
    font-size: 0.85rem;
}
.ct-geo-ac {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--ct-surface, #fff);
    border: 1px solid var(--ct-hairline, #e5e7eb);
    border-radius: var(--ct-r-md, 0.6rem);
    box-shadow: var(--ct-shadow-pop, 0 10px 30px rgba(0, 0, 0, 0.12));
    padding: 0.25rem;
}
.ct-geo-ac-item { padding: 0.45rem 0.6rem; border-radius: var(--ct-r-sm, 0.4rem); cursor: pointer; font-size: 0.83rem; color: var(--ct-text, #111827); }
.ct-geo-ac-item span { display: block; font-size: 0.72rem; color: var(--ct-text-muted, #6b7280); }
.ct-geo-ac-item:hover { background: var(--ct-accent-soft, #eef2ff); color: var(--ct-accent, #486db4); }
.ct-geo-ac-item:hover span { color: inherit; }

.ct-geo-modes { display: inline-flex; gap: 0; border: 1px solid var(--ct-hairline, #e5e7eb); border-radius: var(--ct-r-md, 0.6rem); overflow: hidden; }
.ct-geo-modes button {
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    background: var(--ct-surface, #fff);
    color: var(--ct-text-muted, #6b7280);
    border: 0;
    border-left: 1px solid var(--ct-hairline, #e5e7eb);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.ct-geo-modes button:first-child { border-left: 0; }
.ct-geo-modes button:hover { background: var(--ct-surface-2, #f3f4f6); color: var(--ct-text, #111827); }
.ct-geo-modes button.is-on { background: var(--ct-accent, #486db4); color: #fff; }
.ct-geo-modes .ct-geo-clear { color: var(--ct-danger, #dc2626); }
.ct-geo-modes .ct-geo-clear.is-on { background: var(--ct-danger, #dc2626); color: #fff; }
.ct-geo-readout { font-size: 0.78rem; color: var(--ct-text-muted, #6b7280); margin-left: auto; }
.ct-geo-readout b { color: var(--ct-text, #111827); font-weight: 600; }

/* Leaflet divIcon markers (no image dependency). */
.ct-geo-pin { background: none; border: 0; }
.ct-geo-pin i {
    display: block; width: 18px; height: 18px; border-radius: 50% 50% 50% 0;
    background: var(--ct-accent, #486db4); transform: rotate(-45deg);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    margin: 4px;
}
.ct-geo-marker { background: none; border: 0; }
.ct-geo-marker i { display: block; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); margin: 4px; }
.ct-geo-vert { background: var(--ct-accent, #486db4); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); cursor: move; }
.ct-geo-mid { background: #fff; border: 2px dashed var(--ct-accent, #486db4); border-radius: 50%; opacity: 0.85; cursor: copy; }
.ct-geo-handle { background: #fff; border: 2px solid var(--ct-accent, #486db4); border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); cursor: ew-resize; }
.dark .ct-geo-search input,
.dark .ct-geo-ac,
.dark .ct-geo-modes,
.dark .ct-geo-modes button { background: var(--ct-surface, #1f2430); border-color: var(--ct-hairline, #374151); }

/* ============================================================================
   Task STEP pipeline strip (.ct-tstep*) — the multi-step task hand-off tracker.
   A shared, cross-panel component (dealer vehicle page + vendor panel): one row
   per step, left-accented by status, the active step expanded with its controls,
   each step showing its owning department/member (the hand-off) + a status pill.
   Promoted here from the vehicle page's inline <style> so any panel can render it.
   ========================================================================== */
.ct-tsteps { margin: .5rem 0 .2rem; display: flex; flex-direction: column; gap: .3rem; }
.ct-tstep { border-left: 2px solid rgba(0,0,0,.1); padding: .15rem 0 .15rem .6rem; position: relative; }
.dark .ct-tstep { border-left-color: rgba(255,255,255,.14); }
.ct-tstep--in_progress { border-left-color: var(--ct-info, #22a7e0); }
.ct-tstep--done { border-left-color: var(--ct-success, #1f9d57); }
.ct-tstep--waiting_approval { border-left-color: var(--ct-warning, #de9400); }
.ct-tstep--declined { border-left-color: var(--ct-danger, #c0392b); }
.ct-tstep--skipped { border-left-color: rgba(0,0,0,.12); }
.ct-tstep.is-active { border-left-color: var(--ct-accent, #486db4); border-left-width: 3px; }
.ct-tstep-head { display: flex; align-items: center; gap: .4rem; font-size: .8rem; flex-wrap: wrap; }
.ct-tstep-no { width: 1.15rem; height: 1.15rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(72,109,180,.12); color: var(--ct-accent, #486db4); font-size: .66rem; font-weight: 700; }
.ct-tstep--done .ct-tstep-no { background: rgba(31,157,87,.15); color: var(--ct-success, #1f9d57); }
.ct-tstep-ic { width: .95rem; text-align: center; color: #86868b; }
.ct-tstep.is-active .ct-tstep-ic { color: var(--ct-accent, #486db4); }
.ct-tstep--done .ct-tstep-ic { color: var(--ct-success, #1f9d57); }
.ct-tstep-name { font-weight: 600; }
.ct-tstep--done .ct-tstep-name { color: #9aa0a6; }
/* The owning member / department / vendor — the visible hand-off. */
.ct-tstep-owner { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600; color: var(--ct-accent, #486db4); background: rgba(72,109,180,.1); border-radius: var(--ct-r-pill, 999px); padding: .05rem .4rem; }
.ct-tstep-owner i.fa-lock { color: var(--ct-warning, #de9400); font-size: .62rem; }
.dark .ct-tstep-owner { color: #9fb6d4; background: rgba(72,109,180,.22); }
.ct-tstep-pill { margin-left: auto; }
.ct-tstep-body { padding: .25rem 0 .35rem 1.55rem; }
.ct-tstep-hint { font-size: .74rem; color: #86868b; margin: 0; }
.ct-tstep-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .76rem; color: #5a738e; flex-wrap: wrap; }
.ct-tstep-row--col { flex-direction: column; align-items: stretch; }
.dark .ct-tstep-row { color: #9fb6d4; }
.ct-tstep-row i { margin-right: .25rem; color: var(--ct-accent, #486db4); }
.ct-tstep-btns { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
/* A parts step's part chips (each with its live Parts-hub status pill). */
.ct-tstep-parts { display: flex; flex-direction: column; gap: .2rem; margin: .15rem 0; }
.ct-tstep-part { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; }

/* --- Step strip (v1-style plain progress line — marker + name, no pills/box) --- */
.ct-tstrip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .1rem .5rem; margin: 0; }
.ct-tstrip-wrap { position: relative; display: inline-flex; align-items: center; }
.ct-tstrip-step { position: relative; display: inline-flex; align-items: center; gap: .26rem; font-size: .74rem; font-weight: 500; line-height: 1; color: #8592a4; background: none; border: 0; border-radius: 6px; padding: .12rem .08rem; cursor: default; white-space: nowrap; transition: color .12s; }
.dark .ct-tstrip-step { color: #808ea3; }
.ct-tstrip-mk { font-size: .56rem; opacity: .8; }
.ct-tstrip-step:hover { color: #47566a; }
.dark .ct-tstrip-step:hover { color: #c2cfdf; }
/* Done — green ✓ + green name. */
.ct-tstrip-step.is-done { color: #1f9d57; }
.dark .ct-tstrip-step.is-done { color: #4bbe83; }
.ct-tstrip-step.is-done .ct-tstrip-mk { opacity: 1; }
/* Current step — its status colour, bold, on a soft highlight so it clearly
   reads as "you are here" (only this one step, not the whole strip). */
.ct-tstrip-step.is-active { font-weight: 700; padding: .12rem .4rem; }
.ct-tstrip-step--info.is-active { color: var(--ct-info, #22a7e0); background: rgba(34,167,224,.12); }
.ct-tstrip-step--warning.is-active { color: var(--ct-warning, #de9400); background: rgba(222,148,0,.14); }
.ct-tstrip-step--success.is-active { color: var(--ct-success, #1f9d57); background: rgba(31,157,85,.12); }
.ct-tstrip-step--danger.is-active { color: var(--ct-danger, #c0392b); background: rgba(192,57,43,.12); }
.ct-tstrip-step--neutral.is-active { color: var(--ct-accent, #486db4); background: rgba(72,109,180,.12); }
.dark .ct-tstrip-step--info.is-active { background: rgba(34,167,224,.2); }
.dark .ct-tstrip-step--warning.is-active { background: rgba(222,148,0,.22); }
.dark .ct-tstrip-step--success.is-active { background: rgba(31,157,85,.2); }
.dark .ct-tstrip-step--danger.is-active { background: rgba(192,57,43,.2); }
.dark .ct-tstrip-step--neutral.is-active { background: rgba(72,109,180,.22); }
.ct-tstrip-step.is-active .ct-tstrip-mk { opacity: 1; }
/* NEXT step — accent, clickable to advance (same as the footer "Next" button). */
.ct-tstrip-step.is-next { cursor: pointer; color: var(--ct-accent, #486db4); }
.dark .ct-tstrip-step.is-next { color: #9db8e6; }
.ct-tstrip-step.is-next:hover .ct-tstrip-nm { text-decoration: underline; text-underline-offset: 2px; }
/* A DONE step you can click to return the task there. */
.ct-tstrip-step.is-back { cursor: pointer; }
.ct-tstrip-step.is-back:hover .ct-tstrip-nm { text-decoration: underline; text-underline-offset: 2px; }
.ct-tstrip-step.is-open .ct-tstrip-nm { text-decoration: underline; }
/* Hover popover — this step's purpose + its own owner/approvers + status. */
.ct-tstrip-pop { position: absolute; left: 0; top: calc(100% + .3rem); z-index: 30; display: none; flex-direction: column; gap: .2rem; min-width: 11rem; max-width: 17rem; padding: .5rem .6rem; background: var(--ct-surface, #fff); border: 1px solid rgba(0,0,0,.1); border-radius: var(--ct-r-md, 10px); box-shadow: var(--ct-shadow-pop, 0 8px 28px rgba(0,0,0,.16)); font-weight: 500; color: #2b3440; white-space: normal; }
.dark .ct-tstrip-pop { background: #1b2431; border-color: rgba(255,255,255,.12); color: #cdd8e6; }
.ct-tstrip-step:hover .ct-tstrip-pop, .ct-tstrip-step:focus-visible .ct-tstrip-pop { display: flex; }
.ct-tstrip-pop-h { font-weight: 700; font-size: .78rem; }
.ct-tstrip-pop-k { font-size: .68rem; color: #86868b; text-transform: uppercase; letter-spacing: .03em; }
.ct-tstrip-pop-r { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; }
.ct-tstrip-pop-r i { color: var(--ct-accent, #486db4); }
/* Reset-vs-keep confirm popover on a gate-crossing return (chip or "Previous"). */
.ct-tstrip-confirm { position: absolute; left: 0; top: calc(100% + .3rem); z-index: 40; display: flex; flex-direction: column; gap: .3rem; min-width: 12.5rem; padding: .55rem .6rem; background: var(--ct-surface, #fff); border: 1px solid rgba(0,0,0,.12); border-radius: var(--ct-r-md, 10px); box-shadow: var(--ct-shadow-pop, 0 8px 28px rgba(0,0,0,.16)); }
.dark .ct-tstrip-confirm { background: #1b2431; border-color: rgba(255,255,255,.14); }
.ct-tstrip-confirm--up { top: auto; bottom: calc(100% + .3rem); }
.ct-tstrip-confirm-h { font-size: .74rem; font-weight: 700; color: #2b3440; }
.dark .ct-tstrip-confirm-h { color: #cdd8e6; }
.ct-tstrip-confirm .ct-task-li-btn { justify-content: center; width: 100%; }
.ct-tstrip-confirm-x { align-self: flex-end; background: none; border: 0; font-size: .7rem; color: #86868b; cursor: pointer; padding: .1rem .2rem; }
.ct-tstrip-confirm-x:hover { color: var(--ct-danger, #c0392b); }

/* The single detail block for the current step. */
.ct-tstep-detail { border-left: 3px solid var(--ct-accent, #486db4); padding: .3rem 0 .35rem .7rem; }
.dark .ct-tstep-detail { border-left-color: rgba(72,109,180,.8); }
/* "Assigned to …" — the who-has-it descriptor (same block family as the step
   detail): the current step's owner on a pipeline, the task's assignees flat. */
.ct-tk-assigned-hint { color: var(--ct-text-faint, #86868b); font-weight: 500; }

/* Bottom Prev / Next step nav bar (nice pill buttons). */
.ct-tstep-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed rgba(0,0,0,.1); flex-wrap: wrap; }
.dark .ct-tstep-nav { border-top-color: rgba(255,255,255,.12); }
.ct-tstep-nav-l, .ct-tstep-nav-r { display: inline-flex; gap: .3rem; flex: 1; align-items: center; }
.ct-tstep-nav-r { justify-content: flex-end; }
.ct-tstep-nav-cur { font-size: .72rem; font-weight: 600; color: #86868b; text-align: center; flex: none; }
.ct-tstep-nav-hint { font-size: .72rem; color: var(--ct-warning, #b9770a); display: inline-flex; align-items: center; gap: .3rem; }
.ct-tstep-navbtn { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; line-height: 1; color: #47566a; background: var(--ct-surface, #fff); border: 1px solid rgba(0,0,0,.14); border-radius: var(--ct-r-pill, 999px); padding: .4rem .8rem; cursor: pointer; transition: background .12s, color .12s, border-color .12s, box-shadow .12s; }
.dark .ct-tstep-navbtn { color: #b9c6d8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.ct-tstep-navbtn:hover:not(:disabled) { background: rgba(72,109,180,.1); border-color: rgba(72,109,180,.4); color: var(--ct-accent, #486db4); }
.ct-tstep-navbtn--go { color: #fff; background: var(--ct-accent, #486db4); border-color: transparent; box-shadow: 0 1px 2px rgba(72,109,180,.35); }
.ct-tstep-navbtn--go:hover:not(:disabled) { background: #3c5da0; color: #fff; }
.ct-tstep-navbtn:disabled { opacity: .5; cursor: not-allowed; }

/* The step BAR — strip + nav together as ONE block at the bottom of the card. */
/* The step strip opens the tinted BOTTOM zone (its top border is the single
   separator); the footer continues the same band beneath it (see .ct-tk-foot). */
.ct-tstep-bar { margin: .5rem -1rem 0; padding: .55rem 1rem .2rem; border-top: 1px solid rgba(72,109,180,.14); background: linear-gradient(180deg, rgba(72,109,180,.035), rgba(72,109,180,.05)); display: flex; flex-direction: column; }
.dark .ct-tstep-bar { border-top-color: rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(148,178,235,.035), rgba(148,178,235,.05)); }
.ct-tstep-bar .ct-tstrip { margin: 0; }
.ct-tstep-bar .ct-tstep-nav { margin-top: .4rem; }
/* Strip + footer read as ONE bottom zone: the strip already carries the top
   divider, so the footer drops its own line/padding and the buttons pull up
   snug beneath the strip (no dead gap, no double hairline). */
/* Strip + footer read as ONE band: the negative margin bridges the card's flex
   gap so the two tinted zones sit flush (the strip's gradient hands off to the
   footer's), and the footer drops its own divider. The padding keeps a clear
   breath between the step chips and the action pills. */
.ct-tstep-bar + .ct-tk-foot { margin-top: -.6rem; padding-top: .55rem; border-top: 0; background: linear-gradient(180deg, rgba(72,109,180,.05), rgba(72,109,180,.09)); }
.dark .ct-tstep-bar + .ct-tk-foot { background: linear-gradient(180deg, rgba(148,178,235,.05), rgba(148,178,235,.09)); }
/* The (usually hidden) finish prompt renders between the strip and the footer
   on a pipeline — keep the strip→footer zone merge across it. The panel's own
   margin-bottom absorbs the footer's pull-up while it's OPEN (display:none
   contributes no margin, so the hidden case merges exactly like no sibling). */
.ct-tstep-bar + .ct-tk-finish + .ct-tk-foot { margin-top: -.6rem; padding-top: .55rem; border-top: 0; background: linear-gradient(180deg, rgba(72,109,180,.05), rgba(72,109,180,.09)); }
.dark .ct-tstep-bar + .ct-tk-finish + .ct-tk-foot { background: linear-gradient(180deg, rgba(148,178,235,.05), rgba(148,178,235,.09)); }
.ct-tstep-bar + .ct-tk-finish { margin-bottom: .6rem; }
/* The bar sits at the bottom of the card, so its popovers open UPWARD. */
.ct-tstep-bar .ct-tstrip-pop { top: auto; bottom: calc(100% + .3rem); }

/* ============================================================================
   Task CARD (.ct-task*) — the rich, interactive task card. Shared between the
   vehicle page (tasks for one vehicle) and the Tasks board (every task, with a
   clickable vehicle mini-header). Promoted here from the vehicle page's inline
   <style> so the board renders identically. Light + dark.
   ========================================================================== */
.ct-tasks-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.ct-tasks-title { font-size: .9rem; font-weight: 700; }
.ct-task-alllink { font-size: .8rem; color: var(--ct-accent, #486db4); text-decoration: underline; }
/* Row gap clears the top-edge status ribbon (see .ct-tb-board) so stacked task
   cards on the vehicle page don't overlap a "NEW"/status label. */
.ct-tasks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .75rem; }
@media (max-width: 1280px) { .ct-tasks-grid { grid-template-columns: 1fr; } }

.ct-task { position: relative; border: 1px solid rgba(0,0,0,.07); border-radius: .75rem; padding: .85rem 1rem; display: flex; flex-direction: column; background: var(--ct-surface, #fff); }
.dark .ct-task { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.02); }

/* Corner ribbon labels — little tabs seated on the card's top edge. LEFT =
   deadline / priority / approval; RIGHT = the task status. align-items:flex-end
   so several tabs of different heights all seat by their BOTTOM on the border. */
.ct-tk-ribbons { position: absolute; top: 0; left: .9rem; display: flex; align-items: flex-end; gap: .3rem; z-index: 3; transform: translateY(-100%); pointer-events: none; max-width: calc(100% - 1.8rem); flex-wrap: wrap; }
.ct-tk-ribbons--right { left: auto; right: .9rem; justify-content: flex-end; }
.ct-tk-ribbon { pointer-events: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; line-height: 1; padding: .26rem .5rem; border-radius: .4rem .4rem 0 0; color: #fff; box-shadow: 0 -1px 2px rgba(0,0,0,.08); white-space: nowrap; }
.ct-tk-ribbon i { font-size: .6rem; }
.ct-tk-ribbon--due { background: #6b7fa6; }
.ct-tk-ribbon--overdue { background: var(--ct-danger, #c0392b); }
.ct-tk-ribbon--prio-very_important { background: var(--ct-danger, #c0392b); }
.ct-tk-ribbon--prio-high { background: var(--ct-warning, #de9400); }
.ct-tk-ribbon--prio-low { background: #8a94a6; }
.ct-tk-ribbon--approval { background: #b07a12; }
.ct-tk-ribbon--approved { background: var(--ct-success, #1f9d55); }
.ct-tk-ribbon--declined { background: var(--ct-danger, #c0392b); }
/* Time-in-status on the status ribbon — the compact age ("· 3d"); the exact
   since-date rides in the ribbon's title tooltip. */
.ct-tk-ribbon small { font-size: .56rem; font-weight: 650; letter-spacing: 0; text-transform: none; opacity: .8; }
/* Status ribbon tones (mirror the status pill colours). */
.ct-tk-ribbon--tone-neutral { background: #6b7280; }
.ct-tk-ribbon--tone-info { background: var(--ct-info, #22a7e0); }
.ct-tk-ribbon--tone-success { background: var(--ct-success, #1f9d55); }
.ct-tk-ribbon--tone-warning { background: var(--ct-warning, #de9400); }
.ct-tk-ribbon--tone-danger { background: var(--ct-danger, #c0392b); }
.dark .ct-tk-ribbon { box-shadow: 0 -1px 2px rgba(0,0,0,.3); }
/* Status accent stripe (left edge) + a subtle surface tint — the at-a-glance
   lifecycle marker on every task card. A DONE card is NOT dimmed (kept fully
   readable): it reads "done" from the green stripe + faint tint + the pill. */
.ct-task[class*="ct-task--st-"] { border-left-width: 4px; }
/* Active work (new / in-progress / waiting-approval) stays CLEAN (white) — the
   coloured left border says which stage. Paused + the finished states carry a
   soft full-card wash so a scroll reads "not active work" at a glance. */
.ct-task--st-new { border-left-color: #b0b4bb; }
.ct-task--st-in_progress { border-left-color: var(--ct-info, #22a7e0); }
.ct-task--st-waiting_approval { border-left-color: var(--ct-warning, #de9400); }
.ct-task--st-paused { border-left-color: #e0872a; background: rgba(224,135,42,.10); }
.dark .ct-task--st-paused { background: rgba(224,135,42,.17); }
.ct-task--st-done { border-left-color: var(--ct-success, #12b76a); background: rgba(18,183,106,.085); }
.dark .ct-task--st-done { background: rgba(18,183,106,.15); }
.ct-task--st-cancelled { border-left-color: #9aa0a6; background: rgba(154,160,166,.11); }
.dark .ct-task--st-cancelled { background: rgba(154,160,166,.15); }
.ct-task--st-declined { border-left-color: var(--ct-danger, #dc2626); background: rgba(220,38,38,.08); }
.dark .ct-task--st-declined { background: rgba(220,38,38,.15); }
/* High / very-important OPEN tasks get a bolder left edge so urgency reads from
   the side too — a wider stripe + a priority-coloured glow (the stripe keeps its
   STATUS colour). Added only while the task is active (a finished one stays calm). */
.ct-task.ct-task--prio-high { border-left-color: var(--ct-warning, #de9400); border-left-width: 6px; box-shadow: -3px 0 10px -4px rgba(222,148,0,.55); }
.ct-task.ct-task--prio-very_important { border-left-color: var(--ct-danger, #dc2626); border-left-width: 7px; box-shadow: -3px 0 12px -3px rgba(220,38,38,.6); }
.dark .ct-task.ct-task--prio-high { box-shadow: -3px 0 12px -4px rgba(240,182,77,.5); }
.dark .ct-task.ct-task--prio-very_important { box-shadow: -3px 0 14px -3px rgba(240,138,138,.55); }
.ct-task-num { font-size: 1.15rem; font-weight: 700; color: #9aa0a6; min-width: 1.1rem; text-align: center; }
.ct-task-assignee { font-size: .82rem; font-weight: 600; }
.ct-task-titlerow { font-size: .85rem; margin-top: .5rem; }
.ct-task-titlerow strong { font-weight: 700; }
.ct-task-commentbar { width: 100%; text-align: left; margin-top: .55rem; font-size: .75rem; color: #5a738e; background: rgba(0,0,0,.03); border: none; border-radius: .4rem; padding: .3rem .55rem; cursor: pointer; }
.dark .ct-task-commentbar { background: rgba(255,255,255,.05); color: #9fb6d4; }
.ct-task-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font-size: .78rem; font-weight: 600; padding: .4rem .6rem; border-radius: .5rem; cursor: pointer; border: 1px solid transparent; }
.ct-task-go--start { background: transparent; border-color: var(--ct-accent, #486db4); color: var(--ct-accent, #486db4); }
.ct-task-go--start:hover { background: rgba(72,109,180,.08); }
.ct-task-go--done { background: var(--ct-accent, #486db4); color: #fff; }
.ct-task-go--done:hover { background: #3b5b99; }
.ct-task-actions-more { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.ct-task-li-go { color: #1f9d57; border-color: rgba(31,157,87,.5) !important; }
.ct-task-li-done { color: #fff !important; background: #1f9d57 !important; border-color: #1f9d57 !important; font-weight: 700; }
.ct-task-head { display: flex; align-items: flex-start; gap: .5rem; }
.ct-task-title { font-size: .9rem; font-weight: 600; flex: 1; }
.ct-task-meta { font-size: .75rem; color: #86868b; margin-top: .3rem; }
.ct-task-li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .78rem; padding: .2rem 0; border-bottom: 1px dashed rgba(0,0,0,.06); }
.dark .ct-task-li { border-bottom-color: rgba(255,255,255,.08); }
.ct-task-li-name { display: inline-flex; align-items: center; gap: .35rem; }
.ct-task-li-right { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ct-task-li-check { color: #1f9d57; font-weight: 700; }
.ct-task-li-appr { color: #de9400; }
.ct-task-li-decl { color: #c0392b; font-weight: 700; }
.ct-task-li-struck { text-decoration: line-through; color: #9aa0a6; }
.ct-task-li-no { color: #c0392b; border-color: rgba(192,57,43,.4) !important; }
.ct-task-li-btn { font-size: .68rem; padding: .1rem .4rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: transparent; color: inherit; cursor: pointer; }
.dark .ct-task-li-btn { border-color: rgba(255,255,255,.18); }
.ct-task-li-btn:hover { background: rgba(0,0,0,.05); }
.dark .ct-task-li-btn:hover { background: rgba(255,255,255,.07); }
.ct-task-li-total { margin-top: .3rem; font-size: .8rem; font-weight: 600; text-align: right; }
.ct-task-items { margin-top: .55rem; }
.ct-task-comment { font-size: .78rem; margin-top: .4rem; padding-left: .6rem; border-left: 2px solid rgba(34,167,224,.3); }
.ct-task-comment small { color: #86868b; }
.ct-task-atts { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
.ct-task-atts a { font-size: .72rem; }
.ct-task-atts img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: .35rem; }
.ct-task-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.ct-task-btn { display: inline-flex; align-items: center; gap: .25rem; font-size: .73rem; font-weight: 500; padding: .25rem .55rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); cursor: pointer; background: transparent; color: inherit; }
.dark .ct-task-btn { border-color: rgba(255,255,255,.16); }
.ct-task-btn:hover { background: rgba(0,0,0,.04); }
.dark .ct-task-btn:hover { background: rgba(255,255,255,.06); }
.ct-task-btn--danger { color: #c0392b; }
.ct-task-reorder { display: inline-flex; flex-direction: column; line-height: .7; }
.ct-task-reorder button { background: none; border: none; cursor: pointer; color: #86868b; padding: 0 .15rem; transition: color .12s ease, opacity .12s ease; }
.ct-task-reorder button:hover:not(:disabled) { color: inherit; }
/* Edge arrows (first up / last down) are disabled — greyed + non-interactive. */
.ct-task-reorder button:disabled { opacity: .3; cursor: default; pointer-events: none; }

/* Board card's clickable vehicle mini-header (shown when the card isn't already
   under a vehicle). Hidden on the vehicle page. */
.ct-task-veh { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; margin: -.1rem 0 .55rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.dark .ct-task-veh { border-bottom-color: rgba(255,255,255,.08); }
.ct-task-veh:hover .ct-task-veh-ymm { color: var(--ct-accent, #486db4); }
.ct-task-veh-photo { width: 3rem; height: 2.25rem; flex: none; border-radius: .4rem; object-fit: cover; background: rgba(0,0,0,.05); }
.dark .ct-task-veh-photo { background: rgba(255,255,255,.06); }
.ct-task-veh-ph { display: grid; place-items: center; color: #b0b4bb; font-size: .85rem; }
.ct-task-veh-ymm { font-size: .82rem; font-weight: 700; line-height: 1.1; }
.ct-task-veh-vin { font-size: .7rem; color: #86868b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ct-task-veh-sep { opacity: .55; }
.ct-task-veh-odo { white-space: nowrap; }
/* Strip layout: photo · main (title+labels / vin·stock·odo) · right rail
   (recon status + key). CONTRACT: the VIN · stock · miles line NEVER collapses
   — main has NO min-width:0, so its automatic flex minimum floors at the nowrap
   vin line's natural width (the ymm title still ellipsizes: it keeps min-width:0
   inside l1). The RIGHT rail is what shrinks when space runs out — its key chip
   fades out instead of stealing room from the info line. */
.ct-task-veh-main { flex: 1 1 auto; }
.ct-task-veh-l1 { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.ct-task-veh-l1 .ct-task-veh-ymm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ct-task-veh-l1 .ct-lbl { flex: none; font-size: .56rem; padding: .07rem .4rem; }
.ct-task-veh-right { flex: 0 1 auto; min-width: 0; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; padding-left: .4rem; }
/* The key chip yields to the info line: capped to the rail, and when the label
   doesn't fit it's clipped with a FADE-OUT tail ("shaded") — the padding-right
   trick keeps a FITTING label fully opaque (overflow clips at the padding edge,
   so the fade zone covers empty padding when it fits, glyphs only when it
   doesn't). The full record stays readable on the hover-card, which is a
   SIBLING of .ct-invr-chip-txt so the clip never touches it. */
.ct-task-veh-right .ct-invr-chip { max-width: 100%; }
.ct-task-veh-right .ct-invr-chip-txt { overflow: hidden; white-space: nowrap; padding-right: .5rem; margin-right: -.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - .5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - .5rem), transparent); }
.ct-task-veh-right .ct-invr-pop { left: auto; right: 0; }
.ct-task-veh-status { font-size: .62rem; font-weight: 650; padding: .12rem .5rem; border-radius: 999px; background: rgba(72,109,180,.12); color: var(--ct-accent-strong, #3a5a99); white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.dark .ct-task-veh-status { background: rgba(148,178,235,.16); color: #a9c4ee; }
.ct-task-veh-status small { font-weight: 500; opacity: .75; font-size: .58rem; }
/* Delayed: the car has sat past its recon-stage target. Red, matching the
   dashboard delay badge (.ctd-stage-stuck) — tokens carry their own dark
   values. The tooltip says how far over goal. */
.ct-task-veh-status--delayed { background: var(--ct-danger-soft); color: var(--ct-danger); }
.ct-task-veh-key { display: inline-flex; align-items: center; gap: .28rem; font-size: .6rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: rgba(0,0,0,.05); color: #6b7280; white-space: nowrap; }
.dark .ct-task-veh-key { background: rgba(255,255,255,.08); color: #b0b4bb; }
.ct-task-veh-key--out { background: rgba(180,83,9,.12); color: #b45309; }
.dark .ct-task-veh-key--out { background: rgba(245,158,11,.14); color: #f59e0b; }

/* Tasks board chrome — toolbar + grid + group headers. */
.ct-tb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ct-tb-search { flex: 1; min-width: 12rem; }
.ct-tb-search input { width: 100%; font-size: .82rem; padding: .45rem .7rem; border-radius: .6rem; border: 1px solid rgba(0,0,0,.12); background: var(--ct-surface, #fff); color: inherit; }
.dark .ct-tb-search input { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.ct-tb-sel { font-size: .8rem; padding: .42rem .6rem; border-radius: .6rem; border: 1px solid rgba(0,0,0,.12); background: var(--ct-surface, #fff); color: inherit; }
.dark .ct-tb-sel { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.ct-tb-chip { font-size: .76rem; font-weight: 600; padding: .4rem .7rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: transparent; color: var(--ct-muted, #6b7280); cursor: pointer; }
.dark .ct-tb-chip { border-color: rgba(255,255,255,.16); }
.ct-tb-chip--on { background: var(--ct-accent, #486db4); border-color: var(--ct-accent, #486db4); color: #fff; }
/* Row gap must clear the status/priority ribbons, which are absolutely
   positioned above each card's top edge (translateY(-100%), ~1.15rem tall) —
   a tight gap let a card's "NEW" ribbon overlap the card above. Column gap is
   a touch wider than the row default for horizontal breathing room. */
.ct-tb-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(27.5rem, 1fr)); gap: 1.6rem 1.2rem; align-items: start; }
@media (max-width: 720px) { .ct-tb-board { grid-template-columns: 1fr; } }
.ct-tb-group-h { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: #5a738e; margin: .4rem 0 -.2rem; }
.dark .ct-tb-group-h { color: #9fb6d4; }
.ct-tb-more { display: flex; justify-content: center; margin-top: 1rem; }

/* Expandable step strip (.ct-tstep) — chevron + the "done when" timestamp. */
.ct-tstep-chev { font-size: .68rem; color: #b0b4bb; transition: transform .15s ease; margin-left: .15rem; }
.ct-tstep-chev--open { transform: rotate(180deg); }
.ct-tstep-when { font-size: .67rem; color: #9aa0a6; margin-left: auto; }
.ct-tstep-when + .ct-tstep-pill { margin-left: .4rem; }

/* ============================================================================
   Task card 2026-07 redesign (.ct-tk-*) — the professional, modal-ready card:
   #id head band + tool icons (v1), labeled params row, sectioned body
   (Checklist / Parts / Inspection items), a footer bar with collapsible
   inline notes, and INLINE add/edit forms (no modals). Light + dark.
   Extends the .ct-task* block above; the line row gained a wrapper
   (.ct-task-li-row) so a row can also hold its own inline edit grid.
   ========================================================================== */

/* Dashboard task tiles still accent priority on the left edge (they carry no
   status stripe). The redesigned task CARD uses the status stripe above +
   a priority CHIP in the head band (below), so it doesn't take these. */
.ct-task--high { border-left: 3px solid var(--ct-warning, #de9400); }
.ct-task--urgent { border-left: 3px solid var(--ct-danger, #dc2626); }
/* An overdue card keeps its STATUS stripe (left edge); overdue reads from the
   red tint (below) + the "OVERDUE" pill in the params — not a left border. */

/* Priority chip in the head band — shown for non-normal priorities so a card's
   urgency is legible at a glance next to the status pill. */
.ct-tk-prio { display: inline-flex; align-items: center; gap: .28rem; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .44rem; border-radius: var(--ct-r-pill, 999px); white-space: nowrap; flex: none; }
.ct-tk-prio i { font-size: .62rem; }
.ct-tk-prio--very_important { background: rgba(220,38,38,.13); color: #c02626; }
.ct-tk-prio--high { background: rgba(222,148,0,.15); color: #a86800; }
.ct-tk-prio--low { background: rgba(154,160,166,.16); color: #6b7280; }
.dark .ct-tk-prio--very_important { background: rgba(220,38,38,.22); color: #f08a8a; }
.dark .ct-tk-prio--high { background: rgba(222,148,0,.22); color: #f0b64d; }
.dark .ct-tk-prio--low { background: rgba(154,160,166,.2); color: #b6bcc6; }

/* — Head band: #id chip · title/sub · status pill · tool icons — */
/* — Zoned card: the HEADER (id · title · tools, + the vehicle strip on the
     board) and the FOOTER (actions · notes · total) are softly TINTED bands
     bleeding to the card edges, bookending the plain body — one card, not
     separate blocks. The tints are translucent so the status-tinted card
     backgrounds (done/cancelled/declined) keep their hue underneath. — */
.ct-tk-hd { display: flex; align-items: center; gap: .55rem; margin: -.85rem -1rem 0; padding: .75rem 1rem .6rem; background: linear-gradient(180deg, rgba(72,109,180,.115), rgba(72,109,180,.045)); border-bottom: 1px solid rgba(72,109,180,.14); border-radius: .7rem .7rem 0 0; }
.dark .ct-tk-hd { background: linear-gradient(180deg, rgba(148,178,235,.13), rgba(148,178,235,.05)); border-bottom-color: rgba(255,255,255,.1); }
/* The vehicle strip CONTINUES the header zone (board cards) — the head hands
   its divider down to the strip so the two read as ONE band. */
.ct-tk-hd:has(+ .ct-task-veh) { border-bottom: 0; padding-bottom: .3rem; }
.ct-tk-hd + .ct-task-veh { margin: -.6rem -1rem .1rem; padding: .15rem 1rem .55rem; background: linear-gradient(180deg, rgba(72,109,180,.045), rgba(72,109,180,.028)); border-bottom: 1px solid rgba(72,109,180,.14); }
.dark .ct-tk-hd + .ct-task-veh { background: linear-gradient(180deg, rgba(148,178,235,.05), rgba(148,178,235,.03)); border-bottom-color: rgba(255,255,255,.1); }

/* #id — a subtle record-identifier chip (a plain label, not a link) */
/* The #id — a BLOCK spanning the header's title + byline lines (align-self:
   stretch), sized like the vehicle thumbnail below it (3rem wide, .4rem-ish
   radius) so the two leading blocks read as one aligned column. */
.ct-tk-id { flex: none; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 2.1rem; padding: .2rem .45rem; border-radius: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ct-accent-strong, #3a5a99); background: rgba(72,109,180,.13); }
.dark .ct-tk-id { background: rgba(148,178,235,.16); color: #a9c4ee; }
/* Do-order sticker — a small numbered "work me Nth" badge pinned to the card's
   TOP-LEFT CORNER (vehicle-page ordered list only), overhanging like a sticker
   slapped on the corner. White rim + drop shadow to lift it off the card;
   z-index above the head band. */
.ct-tk-order { position: absolute; top: -.55rem; left: -.55rem; z-index: 6; display: grid; place-items: center;
    min-width: 1.65rem; height: 1.65rem; padding: 0 .34rem; border-radius: var(--ct-r-pill, 999px);
    background: var(--ct-primary, #486db4); color: #fff; font-size: .82rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 5px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.4); }
.dark .ct-tk-order { box-shadow: 0 2px 6px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.3); }
/* Nudge the #id clear of the overhanging sticker so they never touch. */
.ct-tk-hd:has(> .ct-tk-order) .ct-tk-id { margin-left: .55rem; }

/* provenance mark — how the task was created (manual / workflow / AI / feed); the tooltip carries the detail */
.ct-tk-prov { flex: none; font-size: .72rem; color: var(--ct-text-faint, #9aa0a6); cursor: help; }

.ct-tk-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .08rem; }
.ct-tk-title { font-size: .9rem; font-weight: 650; line-height: 1.3; color: var(--ct-text-strong, #1d1d1f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-tk-sub { font-size: .68rem; font-weight: 500; line-height: 1.2; letter-spacing: .01em; color: var(--ct-text-faint, #86868b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "created by · when" — who created the task and when, under the name. Name +
   time sit TOGETHER (the name truncates only when very long); no gap between. */
.ct-tk-by { display: flex; align-items: center; gap: .3rem; margin-top: .1rem; font-size: .68rem; font-weight: 500; line-height: 1.2; color: var(--ct-text-faint, #86868b); }
.ct-tk-by i { font-size: .62rem; opacity: .8; flex: none; }
.ct-tk-by-who { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tk-by-when { flex: none; white-space: nowrap; }
.ct-tk-by-when::before { content: "·"; opacity: .55; margin-right: .3rem; }

/* status pill + tool icons ride together on the right */
.ct-tk-hd > .ct-pill { flex: none; }
.ct-tk-tools { display: inline-flex; align-items: center; gap: .08rem; flex: none; }
.ct-tk-tool { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; border: none; background: transparent; color: var(--ct-text-faint, #9aa0a6); font-size: .76rem; cursor: pointer; text-decoration: none; transition: background .12s ease, color .12s ease; }
.ct-tk-tool:hover { background: var(--ct-accent-soft, rgba(72,109,180,.10)); color: var(--ct-accent-strong, #3a5a99); }
.ct-tk-tool:active { transform: translateY(.5px); }

/* — Labeled params (the v1 lbl/val row) — */
.ct-tk-params { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; margin-top: .6rem; }
.ct-tk-param { display: inline-flex; flex-direction: column; gap: .06rem; min-width: 0; }
.ct-tk-lbl { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9aa0a6; }
.ct-tk-val { font-size: .78rem; font-weight: 600; }
.ct-tk-val--high { color: var(--ct-warning, #de9400); }
.ct-tk-val--urgent { color: var(--ct-danger, #dc2626); }
.ct-tk-val--overdue { color: var(--ct-danger, #dc2626); font-weight: 700; }
.ct-tk-desc { font-size: .78rem; color: #6b7280; margin-top: .5rem; }
.dark .ct-tk-desc { color: #9aa0a6; }
.ct-tk-declined { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; color: #c0392b; background: rgba(192,57,43,.07); border-radius: .5rem; padding: .4rem .6rem; margin-top: .5rem; }
.ct-tk-paused { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; color: #b45309; background: rgba(180,83,9,.08); border-radius: .5rem; padding: .4rem .6rem; margin-top: .5rem; }
.dark .ct-tk-paused { color: #f59e0b; background: rgba(245,158,11,.1); }
.ct-tk-paused-meta { margin-left: auto; font-weight: 500; opacity: .75; white-space: nowrap; font-size: .68rem; }

/* — Body sections — */
.ct-tk-sec { margin-top: .65rem; }
.ct-tk-sec-h { display: flex; align-items: baseline; gap: .4rem; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9aa0a6; margin-bottom: .25rem; }
/* Section-header mini action — the Parts section's "Parts hub" opener. */
.ct-tk-sec-h .ct-tk-sech-act { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .62rem; font-weight: 650; letter-spacing: .02em; text-transform: none; color: var(--ct-accent, #486db4); background: none; border: 0; cursor: pointer; padding: 0; }
.ct-tk-sec-h .ct-tk-sech-act:hover { text-decoration: underline; }
/* Editable part-status pill (card) — the hub's invisible-overlay-select trick:
   a native select stretched over the pill so its dropdown opens un-clipped and
   the pill itself is the visible control. */
.ct-tkp-pill { position: relative; cursor: pointer; padding-right: 1.15rem; }
.ct-tkp-chevron { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-size: .5rem; opacity: .7; }
.ct-tkp-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; border: 0; }
.ct-tk-sec-h span { font-weight: 600; color: #b0b4bb; letter-spacing: 0; }
.ct-tk-sec-link { margin-left: auto; font-size: .68rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ct-accent, #486db4); text-decoration: none; }
.ct-tk-sec-link:hover { text-decoration: underline; }

/* — Make decision (§A1): the ONE consolidated approve/decline panel — */
.ct-tk-decide { margin-top: .4rem; }
.ct-tk-decide-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; color: #fff; background: var(--ct-warning, #d98a00); border: none; border-radius: .5rem; padding: .34rem .8rem; cursor: pointer; }
.ct-tk-decide-btn:hover { filter: brightness(.94); }
.ct-tk-decide-btn span { font-size: .66rem; background: rgba(255,255,255,.28); border-radius: 999px; padding: .05rem .4rem; }
.ct-tk-decide-panel { margin-top: .4rem; border: 1px solid rgba(217,138,0,.4); background: rgba(217,138,0,.06); border-radius: .6rem; padding: .5rem .6rem; }
.dark .ct-tk-decide-panel { background: rgba(217,138,0,.1); }
.ct-tk-decide-h { font-size: .68rem; font-weight: 600; color: #9a6b00; margin-bottom: .4rem; }
.dark .ct-tk-decide-h { color: #e0b978; }
.ct-tk-decide-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .18rem 0; }
.ct-tk-decide-name { font-size: .78rem; color: #374151; min-width: 0; }
.dark .ct-tk-decide-name { color: #d5d8dd; }
.ct-tk-decide-name small { color: #9aa0a6; font-variant-numeric: tabular-nums; margin-left: .3rem; }
.ct-tk-decide-pick { display: inline-flex; gap: .3rem; flex: none; }
.ct-tk-decide-yes, .ct-tk-decide-no { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; border-radius: .45rem; border: 1px solid rgba(0,0,0,.14); background: #fff; color: #9aa0a6; cursor: pointer; }
.dark .ct-tk-decide-yes, .dark .ct-tk-decide-no { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.ct-tk-decide-yes.is-on { background: #1f9d57; border-color: #1f9d57; color: #fff; }
.ct-tk-decide-no.is-on { background: #c0392b; border-color: #c0392b; color: #fff; }
.ct-tk-decide-foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; padding-top: .45rem; border-top: 1px solid rgba(217,138,0,.25); }
.ct-tk-decide-all { font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: .5rem; border: 1px solid transparent; cursor: pointer; }
.ct-tk-decide-all--ok { color: #1f9d57; border-color: rgba(31,157,87,.45); background: rgba(31,157,87,.08); }
.ct-tk-decide-all--ok:hover { background: rgba(31,157,87,.16); }
.ct-tk-decide-all--no { color: #c0392b; border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.07); }
.ct-tk-decide-all--no:hover { background: rgba(192,57,43,.15); }
.ct-tk-decide-foot .ct-tk-ghost { margin-left: auto; }

/* Line rows: a wrapped row can also hold its inline edit grid. */
.ct-task-li:has(> .ct-task-li-row) { display: block; }
.ct-task-li-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ct-task-li-ok { color: #1f9d57; font-size: .6rem; }
.ct-task-li-sub { color: #9aa0a6; font-weight: 400; }
.ct-task-li-sum { font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #6b7280; }
.dark .ct-task-li-sum { color: #9aa0a6; }
.ct-task-li-lockic { color: #1f9d57; font-size: .62rem; margin-right: .12rem; }

/* — V1-style line items: name + prominent state control, "Line item" header, zebra — */
.ct-tk-lihead { font-size: .74rem; font-weight: 600; color: #6b7280; padding: .2rem .35rem .28rem; border-bottom: 1px solid rgba(0,0,0,.1); }
.dark .ct-tk-lihead { color: #9aa0a6; border-bottom-color: rgba(255,255,255,.12); }
.ct-tk-lisec .ct-task-li { padding: .28rem .35rem; border-radius: .35rem; }
.ct-tk-lisec .ct-task-li-row { min-height: 1.7rem; }
.ct-task-li--alt { background: rgba(0,0,0,.028); }
.dark .ct-task-li--alt { background: rgba(255,255,255,.035); }
.ct-task-li-acts { display: inline-flex; align-items: center; gap: .28rem; }

/* the prominent Done pill (V1 green) */
.ct-li-done { display: inline-flex; align-items: center; justify-content: center; min-width: 2.7rem; height: 1.5rem; padding: 0 .7rem; border-radius: .45rem; border: none; background: #22c15e; color: #fff; font-size: .8rem; cursor: pointer; box-shadow: 0 1px 2px rgba(34,193,94,.3); }
.ct-li-done:hover { background: #1aa64f; }
/* The completion checkbox — an inviting OUTLINE ("needs to be clicked") when not
   done, a bold FILLED GREEN when done. */
.ct-li-check { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 1.65rem; border-radius: .5rem; border: 1.5px solid #c3ccd8; background: #fff; color: #c3ccd8; font-size: .82rem; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.dark .ct-li-check { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); color: #5c6b7d; }
.ct-li-check:hover { border-color: #22c15e; background: rgba(34,193,94,.1); color: #1aa64f; }
.ct-li-check--done { border-color: transparent; background: #22c15e; color: #fff; box-shadow: 0 1px 2px rgba(34,193,94,.35); cursor: default; }
.ct-li-check--done i { font-size: .84rem; }
/* Walk-back row (undo an approved/done line) — read-only cells + an undo (left)
   and a delete (right). */
.ct-tm-line-x--undo { color: var(--ct-accent, #486db4); }
.ct-tm-line-x--undo:hover { color: #3c5da0; background: rgba(72,109,180,.1); }
.ct-tm-line--ro .ct-tm-cell { align-items: center; padding: 0 .55rem; font-size: .74rem; color: #47566a; }
.dark .ct-tm-line--ro .ct-tm-cell { color: #b9c6d8; }
.ct-tm-line--ro .ct-tm-cell--name { font-weight: 600; }
.ct-tm-line-act.ct-tm-line-act--del { background: transparent; color: #86868b; }
.ct-tm-line-act.ct-tm-line-act--del:hover { background: rgba(192,57,43,.12); color: var(--ct-danger, #c0392b); }
.ct-li-delbtn { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: #86868b; background: transparent; border: none; cursor: pointer; padding: .2rem .3rem; }
.ct-li-delbtn:hover { color: var(--ct-danger, #c0392b); }
/* Settled (approved/done) line in the dialog — read-only. */
.ct-tm-line--locked { opacity: .72; }
.ct-tm-line-lock { display: inline-flex; align-items: center; justify-content: center; color: #86868b; }

/* inline approve/decline SELECTION on a pending line (V1: red ✗ / green ✓) */
.ct-li-pick { display: inline-flex; gap: .3rem; }
.ct-li-pick-yes, .ct-li-pick-no { width: 1.95rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .4rem; border: 1px solid rgba(0,0,0,.16); background: #fff; font-size: .74rem; cursor: pointer; }
.dark .ct-li-pick-yes, .dark .ct-li-pick-no { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.ct-li-pick-yes { color: #1f9d57; }
.ct-li-pick-no { color: #c0392b; }
.ct-li-pick-yes.is-on { background: #22c15e; border-color: #22c15e; color: #fff; }
.ct-li-pick-no.is-on { background: #e04b3a; border-color: #e04b3a; color: #fff; }

/* the ONE big amber Decision button (full-width, V1) */
.ct-li-decide { margin-top: .55rem; }
.ct-li-decide-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: .82rem; font-weight: 700; padding: .5rem .8rem; border-radius: .55rem; border: 1.5px solid var(--ct-warning, #e0a100); background: transparent; color: #b47e00; cursor: pointer; }
.ct-li-decide-btn:hover { background: rgba(224,161,0,.08); }
.dark .ct-li-decide-btn { color: #e5b64d; }
.ct-li-decide-btn.is-partial { border-color: rgba(0,0,0,.18); color: #9aa0a6; cursor: not-allowed; }
.dark .ct-li-decide-btn.is-partial { border-color: rgba(255,255,255,.16); }
.ct-li-decide-btn.is-ready { border-color: #1f9d57; color: #1f9d57; background: rgba(31,157,87,.06); }
.ct-li-decide-btn.is-ready:hover { background: rgba(31,157,87,.14); }
.ct-li-decide-all { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .45rem; border: 1.5px solid var(--ct-warning, #e0a100); border-radius: .55rem; background: rgba(224,161,0,.06); }
.ct-li-decide-lbl { font-size: .74rem; font-weight: 600; color: #9a6b00; }
.dark .ct-li-decide-lbl { color: #e0b978; }
.ct-li-all { font-size: .76rem; font-weight: 700; padding: .34rem .85rem; border-radius: .45rem; border: none; color: #fff; cursor: pointer; }
.ct-li-all--ok { background: #22c15e; }
.ct-li-all--ok:hover { background: #1aa64f; }
.ct-li-all--no { background: #e04b3a; }
.ct-li-all--no:hover { background: #c33d2d; }
.ct-li-all-x { margin-left: auto; border: none; background: transparent; color: #9aa0a6; cursor: pointer; font-size: .82rem; }

/* — Finish prompt: decide each remaining task-level line (done / skip) before
     the flat task is marked done. — */
.ct-tk-finish { margin-top: .55rem; padding: .6rem .7rem; border: 1.5px solid rgba(72,109,180,.35); border-radius: var(--ct-r-md, 10px); background: rgba(72,109,180,.05); }
.dark .ct-tk-finish { border-color: rgba(72,109,180,.5); background: rgba(72,109,180,.1); }
.ct-tk-finish-h { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #2b3440; margin-bottom: .5rem; }
.dark .ct-tk-finish-h { color: #dbe4ef; }
.ct-tk-finish-h i { color: var(--ct-accent, #486db4); }
.ct-tk-finish-list { display: flex; flex-direction: column; gap: .3rem; }
.ct-tk-finish-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .1rem; }
.ct-tk-finish-row + .ct-tk-finish-row { border-top: 1px dashed rgba(0,0,0,.08); }
.dark .ct-tk-finish-row + .ct-tk-finish-row { border-top-color: rgba(255,255,255,.1); }
.ct-tk-finish-nm { flex: 1 1 auto; min-width: 0; font-size: .8rem; font-weight: 500; color: #2b3440; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .ct-tk-finish-nm { color: #dbe4ef; }
.ct-tk-finish-nm small { color: #86868b; font-variant-numeric: tabular-nums; }
.ct-tk-finish-btns { flex: none; display: inline-flex; gap: .3rem; }
.ct-tk-fin-btn { display: inline-flex; align-items: center; gap: .3rem; font-size: .73rem; font-weight: 600; padding: .3rem .7rem; border-radius: var(--ct-r-pill, 999px); border: 1px solid rgba(0,0,0,.14); background: var(--ct-surface, #fff); color: #47566a; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.dark .ct-tk-fin-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #b9c6d8; }
.ct-tk-fin-btn:hover { border-color: rgba(0,0,0,.28); }
.ct-tk-fin-btn--done.is-on { background: #22c15e; border-color: #22c15e; color: #fff; }
.ct-tk-fin-btn--skip.is-on { background: #8a94a6; border-color: #8a94a6; color: #fff; }
.ct-tk-fin-btn--del.is-on { background: var(--ct-danger, #c0392b); border-color: var(--ct-danger, #c0392b); color: #fff; }
/* Offer-regulated part: opens the Parts hub to finalize (its status follows the offers). */
.ct-tk-fin-btn--hub { color: var(--ct-info, #22a7e0); border-color: color-mix(in srgb, var(--ct-info, #22a7e0) 45%, transparent); }
.ct-tk-fin-btn--hub:hover { background: color-mix(in srgb, var(--ct-info, #22a7e0) 12%, transparent); }
/* Finish-prompt extras: the Line items / Parts sub-labels, and the note on an
   offer-regulated part (its status follows the offers — the hub moves it). */
.ct-tk-finish-sub { font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9aa0a6; margin: .3rem 0 .1rem; }
.ct-tk-finish-hubnote { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--ct-text-faint, #86868b); font-style: italic; }
.ct-tk-finish-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid rgba(0,0,0,.08); }
.dark .ct-tk-finish-foot { border-top-color: rgba(255,255,255,.1); }
.ct-tk-finish-quick { display: inline-flex; gap: .4rem; }
.ct-tk-finish-quick button { font-size: .72rem; font-weight: 600; color: var(--ct-accent, #486db4); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ct-tk-finish-actions { display: inline-flex; gap: .4rem; margin-left: auto; align-items: center; }
.ct-tk-finish-actions .ct-task-go { flex: none; }
.ct-tk-finish-actions .ct-task-go:disabled { opacity: .5; cursor: not-allowed; }

/* — Footer bar + collapsible notes — */
/* The FOOTER zone — a brand-tinted band bleeding to the card's bottom edge (the
   card's own bottom padding is consumed by the negative margin). Brand-toned,
   not neutral gray — a gray band read like the PAGE background bleeding in. */
.ct-tk-foot { margin: .7rem -1rem -.85rem; padding: .55rem 1rem .75rem; border-top: 1px solid rgba(72,109,180,.14); background: linear-gradient(180deg, rgba(72,109,180,.05), rgba(72,109,180,.09)); border-radius: 0 0 .7rem .7rem; }
.dark .ct-tk-foot { border-top-color: rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(148,178,235,.05), rgba(148,178,235,.09)); }
.ct-tk-foot-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
/* Action pills are CENTERED in the footer band. */
.ct-tk-foot-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 auto; justify-content: center; }
.ct-tk-foot-actions .ct-tstep-nav-hint { padding: 0 .2rem; }
/* Compact step-position label / running Total at the left of the action row. */
.ct-tk-foot-step, .ct-tk-foot-total { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: #86868b; white-space: nowrap; }
.ct-tk-foot-step i { font-size: .7rem; opacity: .8; }
.ct-tk-foot-total b { font-size: .86rem; color: var(--ct-text-strong, #2b3440); font-variant-numeric: tabular-nums; }
.dark .ct-tk-foot-total b { color: #eaf0f7; }

/* ── UNIFORM action buttons — ONE shape/size for every task action (footer +
   step nav + the "+ Add"); only the COLOUR changes by what the action does.
   Soft-tinted pills so no single button shouts over the others. ─────────────── */
.ct-tk-act { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .75rem; font-weight: 600; line-height: 1; padding: .45rem .8rem; border-radius: .55rem; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.035); color: #47566a; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.ct-tk-act i { font-size: .72rem; }
.ct-tk-act:hover:not(:disabled) { background: rgba(0,0,0,.07); }
.ct-tk-act:disabled { opacity: .45; cursor: not-allowed; }
.dark .ct-tk-act { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #c2cfdf; }
.dark .ct-tk-act:hover:not(:disabled) { background: rgba(255,255,255,.09); }
/* done / complete — green */
.ct-tk-act--done { background: rgba(31,157,85,.12); border-color: rgba(31,157,85,.4); color: #167a49; }
.ct-tk-act--done:hover:not(:disabled) { background: rgba(31,157,85,.2); }
.dark .ct-tk-act--done { background: rgba(31,157,85,.2); border-color: rgba(31,157,85,.45); color: #6fe0a8; }
/* start / approve / next — blue (forward) */
.ct-tk-act--start { background: rgba(72,109,180,.12); border-color: rgba(72,109,180,.4); color: #3a5a99; }
.ct-tk-act--start:hover:not(:disabled) { background: rgba(72,109,180,.2); }
.dark .ct-tk-act--start { background: rgba(72,109,180,.24); border-color: rgba(72,109,180,.45); color: #a9c4ee; }
/* decline / delete — red */
.ct-tk-act--danger { background: rgba(192,57,43,.1); border-color: rgba(192,57,43,.34); color: #b23324; }
.ct-tk-act--danger:hover:not(:disabled) { background: rgba(192,57,43,.18); }
.dark .ct-tk-act--danger { background: rgba(192,57,43,.2); border-color: rgba(192,57,43,.4); color: #f0a79c; }
/* + Add — accent, a dashed edge so it reads as "add" */
.ct-tk-act--add { border-style: dashed; border-color: rgba(72,109,180,.45); color: #3a5a99; background: transparent; }
.ct-tk-act--add:hover:not(:disabled), .ct-tk-act--add.is-on { background: rgba(72,109,180,.1); border-style: solid; }
.dark .ct-tk-act--add { color: #a9c4ee; border-color: rgba(72,109,180,.5); }

/* The ONE unified line-item Decision control in the footer action row. BOTH the
   outer wrapper and the Approve/Decline-all sub-group are display:contents, so
   every decision button is a DIRECT flex item of the row and shares its exact
   height + centring (an inline-flex wrapper inflated the row height on toggle). */
.ct-tk-decide, .ct-tk-decide-all { display: contents; }
/* The rest of the action buttons — display:contents so they flow as direct flex
   items of the row (no nested-wrap change); hidden as a group while the Approve
   all / Decline all dialog is open, so the decision REPLACES them in place. */
.ct-tk-foot-rest { display: contents; }

/* The "+ Add" in the footer: a display:contents wrapper so its trigger sits in
   the button row while its editor drops to a full-width line below. */
.ct-tk-uadd--compact { display: contents; }
.ct-tk-uadd-trigger { position: relative; display: inline-flex; }
.ct-tk-uadd-pop { position: absolute; bottom: calc(100% + .3rem); right: 0; z-index: 20; display: flex; flex-direction: column; gap: .15rem; min-width: 10rem; padding: .3rem; background: var(--ct-surface, #fff); border: 1px solid rgba(0,0,0,.12); border-radius: .6rem; box-shadow: var(--ct-shadow-pop, 0 8px 24px rgba(0,0,0,.14)); }
.dark .ct-tk-uadd-pop { background: #23262b; border-color: rgba(255,255,255,.14); }
.ct-tk-uadd-pop-opt { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 600; color: #47566a; background: transparent; border: none; border-radius: .4rem; padding: .4rem .55rem; cursor: pointer; text-align: left; }
.ct-tk-uadd-pop-opt:hover { background: rgba(72,109,180,.1); color: var(--ct-accent, #486db4); }
.dark .ct-tk-uadd-pop-opt { color: #c2cfdf; }
.dark .ct-tk-uadd-pop-opt:hover { background: rgba(72,109,180,.2); }
.ct-tk-uadd-pop-opt i { width: 1rem; text-align: center; opacity: .8; }
/* The editors drop to their own full-width line under the buttons. */
.ct-tk-uadd--compact .ct-tm-lines, .ct-tk-uadd--compact .ct-tm-parts, .ct-tk-uadd--compact .ct-tm-dropdown-panel { flex-basis: 100%; width: 100%; order: 5; margin-top: .5rem; }
.ct-tk-uadd--compact .ct-tk-uadd-editing { align-self: center; }

/* Header tool icon — danger tint (the Delete icon next to Edit). */
.ct-tk-tool--danger { color: #c0392b; }
.ct-tk-tool--danger:hover { background: rgba(192,57,43,.1); color: #b23324; }
.dark .ct-tk-tool--danger { color: #e88a7d; }
.dark .ct-tk-tool--danger:hover { background: rgba(192,57,43,.2); }

/* The very-bottom strip: Notes (left) · History (right). */
.ct-tk-foot-meta { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid rgba(0,0,0,.06); }
.dark .ct-tk-foot-meta { border-top-color: rgba(255,255,255,.08); }
.ct-tk-foot-meta-r { margin-left: auto; }
.ct-tk-notes-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; color: #5a738e; background: transparent; border: none; border-radius: .45rem; padding: .25rem .45rem; cursor: pointer; }
.dark .ct-tk-notes-toggle { color: #9fb6d4; }
.ct-tk-notes-toggle:hover, .ct-tk-notes-toggle--on { background: rgba(0,0,0,.05); }
.dark .ct-tk-notes-toggle:hover, .dark .ct-tk-notes-toggle--on { background: rgba(255,255,255,.07); }
.ct-tk-notes-n { font-size: .66rem; font-weight: 700; background: rgba(0,0,0,.07); border-radius: 999px; padding: .05rem .4rem; }
.dark .ct-tk-notes-n { background: rgba(255,255,255,.1); }
.ct-tk-total { font-size: .76rem; color: #6b7280; }
.ct-tk-total b { font-size: .84rem; color: inherit; font-variant-numeric: tabular-nums; }
.dark .ct-tk-total { color: #9aa0a6; }
/* Slim "view inspection results" bar (icon · template name · quick info · View),
   shown before the line items for each completed mvi step. */
.ct-tk-inspbar { display: flex; align-items: center; gap: .5rem; margin: .1rem 0 .35rem; padding: .4rem .6rem; text-decoration: none; background: rgba(72,109,180,.06); border: 1px solid rgba(72,109,180,.16); border-radius: var(--ct-r-md, 10px); transition: background .12s, border-color .12s; }
.ct-tk-inspbar:hover { background: rgba(72,109,180,.12); border-color: rgba(72,109,180,.32); }
.dark .ct-tk-inspbar { background: rgba(72,109,180,.12); border-color: rgba(72,109,180,.24); }
.ct-tk-inspbar-ic { color: var(--ct-accent, #486db4); font-size: .82rem; }
.ct-tk-inspbar-nm { font-size: .78rem; font-weight: 700; color: #2b3440; white-space: nowrap; }
.dark .ct-tk-inspbar-nm { color: #eaf0f7; }
.ct-tk-inspbar-meta { font-size: .72rem; color: #86868b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tk-inspbar-view { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .73rem; font-weight: 600; color: var(--ct-accent, #486db4); white-space: nowrap; }
.dark .ct-tk-inspbar-view { color: #9db8e6; }

/* Completed-step recap — a slim green "done" bar per finished step that expands
   to its line items (done / skipped), sibling of the MVI results bar above. */
.ct-tk-donesteps { display: flex; flex-direction: column; gap: .3rem; margin: .1rem 0 .4rem; }
.ct-tk-donebar { border: 1px solid rgba(18,183,106,.22); background: rgba(18,183,106,.06); border-radius: var(--ct-r-md, 10px); overflow: hidden; }
.ct-tk-donebar.is-skip { border-color: rgba(134,134,139,.28); background: rgba(134,134,139,.07); }
.dark .ct-tk-donebar { background: rgba(18,183,106,.10); border-color: rgba(18,183,106,.24); }
.dark .ct-tk-donebar.is-skip { background: rgba(134,134,139,.12); border-color: rgba(134,134,139,.3); }
.ct-tk-donebar-h { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .38rem .6rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ct-tk-donebar-h[disabled] { cursor: default; }
.ct-tk-donebar-ic { color: var(--ct-success, #12b76a); font-size: .8rem; flex: none; }
.ct-tk-donebar.is-skip .ct-tk-donebar-ic { color: #86868b; }
.ct-tk-donebar-nm { font-size: .78rem; font-weight: 700; color: #2b3440; white-space: nowrap; }
.dark .ct-tk-donebar-nm { color: #eaf0f7; }
.ct-tk-donebar-meta { font-size: .72rem; color: #86868b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tk-donebar-chev { margin-left: auto; }
.ct-tk-donebar-lines { display: flex; flex-direction: column; gap: .1rem; padding: .1rem .6rem .45rem 1.9rem; }
.ct-tk-donebar-line { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: #47566a; }
.dark .ct-tk-donebar-line { color: #c4ccd6; }
.ct-tk-donebar-line i { font-size: .74rem; flex: none; }
.ct-tk-donebar-line-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tk-donebar-tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: .05rem .3rem; border-radius: var(--ct-r-pill, 999px); }
.ct-tk-donebar-amt { margin-left: auto; font-size: .72rem; color: #47566a; white-space: nowrap; }
.dark .ct-tk-donebar-amt { color: #c4ccd6; }
.ct-dl-done { color: var(--ct-success, #12b76a); }
.ct-tk-donebar-tag.ct-dl-done { background: rgba(18,183,106,.14); color: #0e9257; }
.ct-dl-skip { color: #86868b; text-decoration: line-through; }
.ct-tk-donebar-line-nm.ct-dl-skip, .ct-tk-donebar-line i.ct-dl-skip { text-decoration: none; }
.ct-tk-donebar-tag.ct-dl-skip { background: rgba(134,134,139,.16); color: #6b7280; text-decoration: none; }
.ct-dl-open { color: #b0b4bb; }
.ct-tk-donebar-tag.ct-dl-open { background: rgba(176,180,187,.18); color: #6b7280; }

/* ── Decision tasks / decision steps — the runtime choice block ─────────── */
.ct-tk-decide { display: flex; flex-direction: column; gap: .45rem; border: 1px solid rgba(72,109,180,.28); border-left: 3px solid var(--ct-accent, #486db4); border-radius: var(--ct-r-md, 10px); padding: .55rem .65rem; background: rgba(72,109,180,.05); }
.dark .ct-tk-decide { background: rgba(72,109,180,.12); border-color: rgba(110,146,214,.35); }
.ct-tk-decide-h { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; color: #2b3440; }
.dark .ct-tk-decide-h { color: #dbe4ef; }
.ct-tk-decide-h i { color: var(--ct-accent, #486db4); }
.ct-tk-decide-h--again { font-weight: 600; color: #6b7280; font-size: .7rem; }
.ct-tk-decide-done { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: #2b3440; }
.dark .ct-tk-decide-done { color: #dbe4ef; }
.ct-tk-decide-done i { color: var(--ct-success, #12b76a); }
.ct-tk-decide-notes { font-size: .7rem; color: #47566a; padding-left: 1.15rem; }
.dark .ct-tk-decide-notes { color: #b9c6d8; }
.ct-tk-decide-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.ct-tk-decide-opt { flex: 1 1 12rem; min-width: 11rem; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; padding: .5rem .6rem; border: 1px solid rgba(72,109,180,.35); border-radius: var(--ct-r-md, 10px); background: var(--ct-surface, #fff); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.ct-tk-decide-opt:hover { border-color: var(--ct-accent, #486db4); box-shadow: 0 2px 8px rgba(72,109,180,.18); transform: translateY(-1px); }
.ct-tk-decide-opt:disabled { opacity: .6; cursor: wait; transform: none; }
.dark .ct-tk-decide-opt { background: rgba(20,26,36,.55); border-color: rgba(110,146,214,.35); }
.ct-tk-decide-opt.is-picked { border-color: var(--ct-success, #12b76a); box-shadow: inset 0 0 0 1px var(--ct-success, #12b76a); }
.ct-tk-decide-opt-l { font-size: .78rem; font-weight: 700; color: #2b3440; }
.dark .ct-tk-decide-opt-l { color: #eaf0f7; }
.ct-tk-decide-opt-fx { font-size: .66rem; color: #6b7280; line-height: 1.35; }
.dark .ct-tk-decide-opt-fx { color: #9fb0c4; }

/* ── Decision options — the template-builder editor ─────────────────────── */
.ct-td-editor { display: flex; flex-direction: column; gap: .55rem; margin-top: .35rem; }
.ct-td-opt { border: 1px solid var(--ct-border, #e3e5ea); border-left: 3px solid var(--ct-accent, #486db4); border-radius: var(--ct-r-md, 10px); padding: .5rem .6rem; background: var(--ct-surface, #fff); display: flex; flex-direction: column; gap: .45rem; }
.dark .ct-td-opt { background: rgba(20,26,36,.45); border-color: rgba(110,146,214,.25); border-left-color: var(--ct-accent, #486db4); }
.ct-td-opt-head { display: flex; align-items: center; gap: .45rem; }
.ct-td-opt-no { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(72,109,180,.14); color: var(--ct-accent, #486db4); font-size: .7rem; font-weight: 700; }
.ct-td-opt-label { flex: 1 1 auto; }
.ct-td-opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .45rem .6rem; }
.ct-td-fx { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ct-td-fx .mb-sub-label { display: flex; align-items: center; gap: .3rem; }
.ct-td-flat { margin-top: .45rem; }

/* Decision option effects as compact CHIPS — only the set effects show; a small
   "+ Effect" menu adds the rest. Pills use x-show so wire bindings stay live. */
.ct-td-fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ct-td-pill {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%;
    padding: .12rem .2rem .12rem .5rem; border: 1px solid var(--ct-border, #e3e5ea);
    border-radius: 999px; background: var(--ct-surface-sunken, #f5f7fa);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ct-td-pill:focus-within { border-color: var(--ct-accent, #486db4); box-shadow: 0 0 0 2px rgba(72,109,180,.14); background: var(--ct-surface, #fff); }
.dark .ct-td-pill { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark .ct-td-pill:focus-within { background: rgba(72,109,180,.12); }
.ct-td-pill-ic { flex: 0 0 auto; color: var(--ct-accent, #486db4); font-size: .72rem; }
.ct-td-pill-sel {
    border: none; background: transparent; color: inherit; cursor: pointer;
    font-size: .74rem; font-weight: 500; padding: .18rem 0; max-width: 12rem;
    text-overflow: ellipsis; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.ct-td-pill-sel:focus { outline: none; }
.ct-td-pill-x {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; border: none; background: transparent; cursor: pointer;
    color: var(--ct-text-faint, #9aa2af); font-size: .95rem; line-height: 1; border-radius: 999px;
}
.ct-td-pill-x:hover { color: var(--ct-danger, #c0392b); background: rgba(192,57,43,.12); }
.ct-td-noeffect { font-size: .7rem; font-style: italic; color: var(--ct-text-faint, #9aa2af); padding: 0 .15rem; }
/* Add-effect chip + dropdown menu. */
.ct-td-add-wrap { position: relative; display: inline-flex; }
.ct-td-add {
    display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem;
    border: 1px dashed var(--ct-border, #cdd2db); border-radius: 999px; background: transparent;
    color: var(--ct-accent, #486db4); font-size: .72rem; font-weight: 600; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ct-td-add:hover { border-style: solid; background: rgba(72,109,180,.09); }
.ct-td-add i { font-size: .68rem; }
.ct-td-menu {
    position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; min-width: 13rem;
    padding: .3rem; display: flex; flex-direction: column; gap: .05rem;
    background: var(--ct-surface, #fff); border: 1px solid var(--ct-border, #e3e5ea);
    border-radius: var(--ct-r-md, 10px); box-shadow: var(--ct-shadow-md, 0 10px 28px rgba(20,30,55,.16));
}
.dark .ct-td-menu { background: #1c222c; border-color: rgba(255,255,255,.1); }
.ct-td-menu-item {
    display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
    padding: .38rem .5rem; border: none; background: transparent; border-radius: 7px;
    font-size: .76rem; color: inherit; cursor: pointer; transition: background .1s ease;
}
.ct-td-menu-item i { flex: 0 0 auto; width: 1rem; text-align: center; color: var(--ct-accent, #486db4); font-size: .78rem; }
.ct-td-menu-item:hover { background: var(--ct-accent, #486db4); color: #fff; }
.ct-td-menu-item:hover i { color: #fff; }

/* Decision GROUPS + option CHIPS (one effect per chip, function-first add). */
.ct-tdg { border: 1px solid var(--ct-border, #e3e5ea); border-left: 3px solid var(--ct-accent, #486db4); border-radius: var(--ct-r-md, 10px); padding: .5rem .6rem; background: var(--ct-surface, #fff); margin-bottom: .5rem; }
.dark .ct-tdg { background: rgba(20,26,36,.45); border-color: rgba(110,146,214,.25); border-left-color: var(--ct-accent, #486db4); }
.ct-tdg-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.ct-tdg-no { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(72,109,180,.14); color: var(--ct-accent, #486db4); font-size: .7rem; font-weight: 700; }
.ct-tdg-label { flex: 1 1 auto; font-weight: 600; }
.ct-td-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ct-td-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .1rem .15rem .1rem .5rem; border: 1px solid var(--ct-border, #e3e5ea); border-radius: 999px; background: var(--ct-surface-sunken, #f5f7fa); transition: border-color .12s ease, box-shadow .12s ease; }
.ct-td-chip:focus-within { border-color: var(--ct-accent, #486db4); box-shadow: 0 0 0 2px rgba(72,109,180,.14); background: var(--ct-surface, #fff); }
.dark .ct-td-chip { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.ct-td-chip-ic { flex: 0 0 auto; color: var(--ct-accent, #486db4); font-size: .72rem; }
.ct-td-chip-label { border: none; background: transparent; color: inherit; font-size: .74rem; font-weight: 600; padding: .18rem .1rem; max-width: 11rem; min-width: 4rem; }
.ct-td-chip-label:focus { outline: none; }
.ct-td-chip-label::placeholder { font-weight: 400; color: var(--ct-text-faint, #9aa2af); }
.ct-td-chip-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border: none; background: transparent; cursor: pointer; color: var(--ct-text-faint, #9aa2af); font-size: .95rem; line-height: 1; border-radius: 999px; }
.ct-td-chip-x:hover { color: var(--ct-danger, #c0392b); background: rgba(192,57,43,.12); }
/* Two-level add menu (effect ▸ value). */
.ct-td-branch { position: relative; }
.ct-td-branch-caret { margin-left: auto; font-size: .6rem; opacity: .5; }
.ct-td-submenu { margin: .1rem 0 .2rem .9rem; padding-left: .5rem; border-left: 2px solid var(--ct-hairline-soft, #eef0f4); display: flex; flex-direction: column; gap: .05rem; max-height: 14rem; overflow-y: auto; }
.ct-td-menu-empty { padding: .3rem .5rem; font-size: .72rem; font-style: italic; color: var(--ct-text-faint, #9aa2af); }
.ct-td-menu-item--plain { border-top: 1px solid var(--ct-hairline-soft, #eef0f4); margin-top: .15rem; }

/* Total row shown after the line-items + parts sections. */
.ct-tk-sectotal { text-align: right; font-size: .78rem; color: #47566a; padding: .1rem .1rem .2rem; }
.ct-tk-sectotal b { font-size: .9rem; font-variant-numeric: tabular-nums; color: #2b3440; }
.dark .ct-tk-sectotal { color: #b9c6d8; }
.dark .ct-tk-sectotal b { color: #eaf0f7; }
.ct-tk-deleted { font-size: .74rem; color: #86868b; display: inline-flex; align-items: center; gap: .35rem; }
.ct-tk-notes { margin-top: .5rem; padding: .55rem .65rem; background: rgba(0,0,0,.025); border-radius: .55rem; }
.dark .ct-tk-notes { background: rgba(255,255,255,.04); }
.ct-tk-notes .ct-task-comment:first-child { margin-top: 0; }
.ct-tk-notes-empty { font-size: .74rem; color: #9aa0a6; }
.ct-tk-composer { display: flex; align-items: flex-end; gap: .45rem; margin-top: .55rem; }
.ct-tk-composer textarea { flex: 1; resize: vertical; }

/* — Inline add / edit forms: ONE nicely-framed line (accent-edged strip),
     no stacked labels — placeholders + tooltips carry the meaning. — */
.ct-tk-add { margin-top: .35rem; }
/* The +Add / running-Total row — moved OUT of the clipped body so the board's
   even-height fade never washes over it (it's a persistent bottom action bar).
   Plain (flows after the content) off-board; a thin separator on the board. */
.ct-tk-addrow { margin-top: .15rem; }
.ct-tb-board .ct-task > .ct-tk-addrow { padding-top: .45rem; border-top: 1px solid rgba(0,0,0,.06); }
.dark .ct-tb-board .ct-task > .ct-tk-addrow { border-top-color: rgba(255,255,255,.07); }
/* Card ADD block — reuses the dialog's .ct-tm-* editors (add-bar + line/part/mvi). */
.ct-tk-uwrap { margin-top: .25rem; }
.ct-tk-uwrap .ct-tm-lines, .ct-tk-uwrap .ct-tm-parts, .ct-tk-uwrap .ct-tm-dropdown-panel { margin-top: .4rem; }
/* On the (narrow) card: wider NAME, tighter number columns, + a small save/add
   icon as the last cell of the row (no full-width button, no repeated header). */
.ct-tk-uwrap .ct-tm-lines-head, .ct-tk-uwrap .ct-tm-line { grid-template-columns: 1.4rem minmax(0, 1fr) 3rem 7.4rem 3.6rem 2rem; }
.ct-tm-line-act { display: inline-flex; align-items: center; justify-content: center; border: none; border-left: 1px solid var(--ct-hairline-soft); background: var(--ct-accent, #486db4); color: #fff; cursor: pointer; font-size: .74rem; transition: background .12s; }
.ct-tm-line-act:hover { background: #3c5da0; }
.ct-tk-uadd-go { display: flex; justify-content: flex-end; margin-top: .4rem; }
.ct-tk-uadd-go .ct-tm-btn { flex: none; width: auto; }
/* The "+ Add" and the running Total share ONE row (no wasted vertical space). */
.ct-tk-uadd-head { display: flex; align-items: center; gap: .5rem; min-height: 1.8rem; }
.ct-tk-uadd-total { margin-left: auto; }
.ct-tk-uadd-editing { font-size: .74rem; font-weight: 600; color: #86868b; display: inline-flex; align-items: center; gap: .35rem; }
.ct-tk-uadd-editing i { font-size: .66rem; }
/* Unified "+ Add" — one row of type chips instead of three stacked add buttons. */
.ct-tk-uadd { margin-top: .5rem; }
.ct-tk-uadd-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.ct-tk-uadd-lbl { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #86868b; }
.ct-tk-uadd-opt { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: #5a738e; background: transparent; border: 1px dashed rgba(0,0,0,.18); border-radius: .5rem; padding: .26rem .55rem; cursor: pointer; transition: color .12s, border-color .12s; }
.dark .ct-tk-uadd-opt { color: #9fb6d4; border-color: rgba(255,255,255,.2); }
.ct-tk-uadd-opt:hover { color: var(--ct-accent, #486db4); border-color: var(--ct-accent, #486db4); }
.ct-tk-uadd-opt i { opacity: .8; }
/* Compact "+ Add" trigger that reveals the small option chips. */
.ct-tk-uadd-plus { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #5a738e; background: transparent; border: 1px dashed rgba(0,0,0,.2); border-radius: .5rem; padding: .28rem .6rem; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.dark .ct-tk-uadd-plus { color: #9fb6d4; border-color: rgba(255,255,255,.2); }
.ct-tk-uadd-plus:hover, .ct-tk-uadd-plus.is-on { color: var(--ct-accent, #486db4); border-color: var(--ct-accent, #486db4); background: rgba(72,109,180,.06); }
.ct-tk-uadd-opts { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.ct-tk-add-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; color: #86868b; background: transparent; border: 1px dashed rgba(0,0,0,.18); border-radius: .5rem; padding: .28rem .6rem; cursor: pointer; }
.dark .ct-tk-add-toggle { border-color: rgba(255,255,255,.2); }
.ct-tk-add-toggle:hover { color: var(--ct-accent, #486db4); border-color: var(--ct-accent, #486db4); }
.ct-tk-addgrid { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .6rem; background: var(--ct-surface, #fff); border: 1px solid rgba(72,109,180,.3); border-left: 3px solid var(--ct-accent, #486db4); border-radius: .55rem; }
.dark .ct-tk-addgrid { background: rgba(255,255,255,.03); border-color: rgba(140,165,210,.3); border-left-color: var(--ct-accent, #486db4); }
.ct-tk-addgrid--edit { margin-top: .35rem; }
.ct-tk-addgrid .ct-tm-input, .ct-tk-addgrid .ct-tm-select { padding: .32rem .5rem; font-size: .75rem; }
.ct-tk-in--grow { flex: 1 1 9rem; min-width: 7rem; }
.ct-tk-in--sm { width: 7rem; }
.ct-tk-num { width: 5.2rem; }
.ct-tk-qty { width: 3.6rem; }
.ct-tk-chk { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; color: #6b7280; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; padding: .26rem .6rem; cursor: pointer; white-space: nowrap; user-select: none; }
.dark .ct-tk-chk { color: #9aa0a6; border-color: rgba(255,255,255,.16); }
.ct-tk-chk:has(input:checked) { color: var(--ct-warning, #de9400); border-color: var(--ct-warning, #de9400); background: rgba(222,148,0,.08); }
/* Legacy stacked-label wrappers (kept harmless for any straggler usage). */
.ct-tk-f { display: flex; flex-direction: column; gap: .12rem; }
.ct-tk-f > span { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa0a6; }
.ct-tk-f--grow { flex: 1 1 11rem; min-width: 9rem; }
.ct-tk-f--check { justify-content: flex-end; padding-bottom: .2rem; }
.ct-tk-add-btns { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; }
.ct-tk-go { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .34rem .8rem; border-radius: .5rem; border: 1px solid var(--ct-accent, #486db4); background: var(--ct-accent, #486db4); color: #fff; cursor: pointer; }
.ct-tk-go:hover { background: #3b5b99; }
.ct-tk-ghost { display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; padding: .34rem .55rem; border-radius: .5rem; border: 1px solid rgba(0,0,0,.12); background: transparent; color: #86868b; cursor: pointer; }
.dark .ct-tk-ghost { border-color: rgba(255,255,255,.16); }
.ct-tk-ghost:hover { background: rgba(0,0,0,.05); color: inherit; }
.dark .ct-tk-ghost:hover { background: rgba(255,255,255,.07); }

/* Compact icon actions on line rows (Approve/Decline/Done/Reopen/Edit as
   one-glyph buttons with tooltips) + the approved price-lock glyph. */
.ct-task-li-acts { display: inline-flex; align-items: center; gap: .18rem; }
.ct-task-li-ibtn { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: .42rem; border: 1px solid rgba(0,0,0,.1); background: transparent; color: #86868b; font-size: .66rem; cursor: pointer; }
.dark .ct-task-li-ibtn { border-color: rgba(255,255,255,.16); }
.ct-task-li-ibtn:hover { background: rgba(0,0,0,.05); color: inherit; }
.dark .ct-task-li-ibtn:hover { background: rgba(255,255,255,.08); }
.ct-task-li-ibtn--ok { color: #1f9d57; border-color: rgba(31,157,87,.45); }
.ct-task-li-ibtn--ok:hover { background: rgba(31,157,87,.12); color: #1f9d57; }
.ct-task-li-ibtn--no { color: #c0392b; border-color: rgba(192,57,43,.4); }
.ct-task-li-ibtn--no:hover { background: rgba(192,57,43,.1); color: #c0392b; }
.ct-task-li-lock { font-size: .58rem; color: #1f9d57; margin-left: .2rem; }
.ct-task-li-skip { color: #9aa0a6; font-style: italic; }
.ct-task-li-skipic { color: #b0b4bb; font-size: .62rem; }

/* ════════════════════════════════════════════════════════════════════════
   Tasks BOARD — even-height cards with a shaded, expandable body.
   ────────────────────────────────────────────────────────────────────────
   Every board card is capped to ONE uniform height so the grid rows are even
   (no more "tallest card in the row" gaps). The variable body (zones 4-11:
   step detail / line items / parts / inspection items / +Add) is wrapped in an
   INNER .ct-tk-body that clips + fades; a "Show all" control expands it in
   place. The clip is on the INNER element, so .ct-task keeps overflow:visible
   and the priority box-shadow glow (above) is never clipped.

   EVERYTHING here is scoped to .ct-tb-board, so the SAME _task-card renders
   UNCAPPED on the vehicle page / task-detail page / TaskViewModal (none carry
   .ct-tb-board): off-board .ct-tk-body is a plain flex-GROWING column (no cap,
   no clip — spare height from an equal-height row lands inside the body so the
   footer pins to the card bottom) and .ct-tk-bodyctl is hidden.
   ════════════════════════════════════════════════════════════════════════ */

/* The uniform baseline height (tune to taste). A card fills it; an expanded
   (.is-open) card drops the cap and grows in place — only its own grid row
   grows, siblings stay put (align-items:start on the board). */
.ct-tb-board { --tk-h: 27rem; }
.ct-tb-board > .ct-task { height: var(--tk-h); }
.ct-tb-board > .ct-task.is-open { height: auto; }

/* The body wrapper — a flex COLUMN in BOTH contexts, sharing the card's .6rem
   rhythm gap, and FLEX-GROWING: when a host stretches cards to equal heights
   (the vehicle page's side-by-side tasks grid, the board's uniform rows) the
   spare height lands INSIDE the body, so the bottom zone (step strip · footer
   · notes/total) is ALWAYS pinned to the card's bottom — never a blank band
   under the footer. ON-BOARD it additionally caps + clips + fades (below);
   off-board it just grows, uncapped. */
.ct-tk-body { display: flex; flex-direction: column; gap: .6rem; flex: 1 1 auto; min-height: 0; }
.ct-tb-board .ct-task > .ct-tk-body {
    display: flex; flex-direction: column; gap: .6rem;
    flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
    /* Reserve the pull-up zone: the step strip / footer overlap the body's
       bottom ~1.15rem by design (the tight seam) — this padding keeps CONTENT
       out of that band, so a card whose content fills the cap exactly is never
       covered by the strip (it clips into the fade + Show-all instead). */
    padding-bottom: 1.2rem;
}
.ct-tb-board .ct-task.is-open > .ct-tk-body { overflow: visible; padding-bottom: 0; }
/* While an input inside the body holds focus (typing a line item — the only
   time the library autocomplete dropdown shows) the clip relaxes so the
   dropdown isn't swallowed by the even-height cap. */
.ct-tb-board .ct-task > .ct-tk-body:focus-within { overflow: visible; }

/* ═══ Card-body vertical RHYTHM — one owner, never per-block margins. ═══
   The body's blocks are spaced by their container's FLEX GAP in BOTH contexts
   — off-board they flow into the .ct-task root column (gap .6rem, through the
   display:contents body), on-board the .ct-tk-body column above carries the
   SAME gap. Direct body children must not bring their own vertical margins:
   ad-hoc per-block margins are exactly how two blocks end up glued (the
   completed-step records sat .1rem under the inspection items) or double-
   spaced — this reset makes every current AND future body block participate
   in the uniform rhythm. Nested elements keep their own margins. */
.ct-tk-body > * { margin-top: 0; margin-bottom: 0; }

/* Bottom fade — only on an OVERFLOWING, collapsed card (tk-has-over, set by the
   card's ResizeObserver). Fades toward the card's real background so there's no
   hard cut; pointer-events:none so it never eats a tap on the last visible row. */
.ct-tb-board .ct-task > .ct-tk-body::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3rem;
    pointer-events: none; opacity: 0; transition: opacity .18s ease;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 65%);
}
.ct-tb-board .ct-task.tk-has-over:not(.is-open) > .ct-tk-body::after { opacity: 1; }
.dark .ct-tb-board .ct-task > .ct-tk-body::after { background: linear-gradient(to bottom, rgba(32,32,35,0), #202023 65%); }
/* fade toward the tinted status backgrounds (paused/done/cancelled/declined) — no seam */
.ct-tb-board .ct-task--st-paused > .ct-tk-body::after    { background: linear-gradient(to bottom, rgba(252,243,234,0), #fcf3ea 65%); }
.ct-tb-board .ct-task--st-done > .ct-tk-body::after      { background: linear-gradient(to bottom, rgba(235,249,242,0), #ebf9f2 65%); }
.ct-tb-board .ct-task--st-cancelled > .ct-tk-body::after { background: linear-gradient(to bottom, rgba(244,244,245,0), #f4f4f5 65%); }
.ct-tb-board .ct-task--st-declined > .ct-tk-body::after  { background: linear-gradient(to bottom, rgba(252,237,238,0), #fcedee 65%); }
.dark .ct-tb-board .ct-task--st-paused > .ct-tk-body::after    { background: linear-gradient(to bottom, rgba(64,49,36,0), #403124 65%); }
.dark .ct-tb-board .ct-task--st-done > .ct-tk-body::after      { background: linear-gradient(to bottom, rgba(30,55,46,0), #1e372e 65%); }
.dark .ct-tb-board .ct-task--st-cancelled > .ct-tk-body::after { background: linear-gradient(to bottom, rgba(50,51,55,0), #323337 65%); }
.dark .ct-tb-board .ct-task--st-declined > .ct-tk-body::after  { background: linear-gradient(to bottom, rgba(60,33,35,0), #3c2123 65%); }

/* Show-all / Show-less — hidden off-board + gated by x-show. The control is a
   COMPACT FLOATING CHIP overlaid on the body's bottom fade: the wrapper takes
   (almost) zero card height, so the row the old full-width control consumed
   shows real content instead, and the chip + fade together read as "there's
   more" without hiding an extra line. */
.ct-tk-bodyctl { display: none; }
/* ⚠️ align-items must NOT stretch — the zero-height wrapper would squash the
   chip to its padding (a 5px "line" with the text spilling out). flex-start
   keeps the chip's natural height; translateY(-100%) lifts it above the line. */
.ct-tb-board .ct-task .ct-tk-bodyctl { display: flex; justify-content: center; align-items: flex-start; position: relative; z-index: 2; height: 0; margin-top: -.6rem; overflow: visible; }
/* …and the zone after it pulls up too, so the faded edge meets the footer band
   with just a small breath (the flex gap alone left a dead ~1.5rem strip).
   ⚠️ Explicit adjacency — the hidden `.ct-tk-finish` (display:none, but still a
   DOM sibling) sits between the ctl and the footer on flat cards and would
   swallow a bare `+ *` pull; the strip→foot join rule stays untouched. */
.ct-tb-board .ct-task .ct-tk-bodyctl + .ct-tk-foot,
.ct-tb-board .ct-task .ct-tk-bodyctl + .ct-tk-finish + .ct-tk-foot { margin-top: -.35rem; }
.ct-tb-board .ct-task .ct-tk-bodyctl + .ct-tstep-bar { margin-top: -.55rem; }
/* OPEN: nothing is faded, so give the chip a compact strip below the content
   instead of floating it over the last row (no translate — it sits IN the strip). */
.ct-tb-board .ct-task.is-open .ct-tk-bodyctl { height: 1.3rem; margin-top: -.3rem; }
.ct-tb-board .ct-task.is-open .ct-tk-showall { transform: none; }
.ct-tk-showall { display: inline-flex; align-items: center; gap: .3rem; font-size: .67rem; font-weight: 650; cursor: pointer; color: var(--ct-accent, #486db4); background: var(--ct-surface, #fff); border: 1px solid rgba(72,109,180,.28); border-radius: 999px; padding: .1rem .6rem; box-shadow: 0 1px 4px rgba(0,0,0,.1); transform: translateY(-100%); transition: background .12s ease, border-color .12s ease; }
.ct-tk-showall:hover { background: var(--ct-accent-soft, rgba(72,109,180,.10)); border-color: rgba(72,109,180,.45); }
.dark .ct-tk-showall { color: #a9c4ee; background: #232327; border-color: rgba(148,178,235,.35); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.dark .ct-tk-showall:hover { background: rgba(72,109,180,.25); }
@media (pointer: coarse) { .ct-tk-showall { padding: .3rem .8rem; font-size: .74rem; } }

/* Single-column (phones + narrow tablets): the even-grid concern is moot in one
   column, so DROP the cap entirely — every card shows full height, no fade, no
   "Show all" (you can see them all unfolded). Kept in step with the board going
   single-column (~900px with the wider 27.5rem min). */
@media (max-width: 900px) {
    .ct-tb-board { grid-template-columns: 1fr; }
    .ct-tb-board > .ct-task, .ct-tb-board > .ct-task.is-open { height: auto; }
    .ct-tb-board .ct-task > .ct-tk-body { overflow: visible; }
    .ct-tb-board .ct-task > .ct-tk-body::after { display: none; }
    .ct-tb-board .ct-task .ct-tk-bodyctl { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────
   System → Message templates — the whole panel reads as ONE solid card: the
   category filter tabs + foldable search are a full-width HEADER strip flush
   on top of the table body (no floating pill, no gap). The search collapses
   to just its magnifier icon and expands on hover / focus. Scoped to the
   resource so nothing leaks to other tables.
   ──────────────────────────────────────────────────────────────────────── */
/* Close the schema-grid gap between the tabs and the table → they touch. */
.fi-resource-email-templates .fi-sc.fi-grid { gap: 0; }
.fi-resource-email-templates .fi-sc-tabs { position: relative; z-index: 2; }

/* Tabs → a full-width header strip: the top of the one card. */
.fi-resource-email-templates nav.fi-tabs {
    margin: 0;
    background: var(--ct-surface-raised);
    border: 1px solid var(--ct-hairline);
    border-bottom: 1px solid var(--ct-hairline);   /* the header / body divider */
    border-radius: var(--ct-r-lg) var(--ct-r-lg) 0 0;
    box-shadow: none;
    min-height: 3.25rem;
    align-items: center;
    padding: 0.35rem 6rem 0.35rem 0.6rem;          /* right room for the lifted search */
}
/* Table body → bottom of the same card: no top rounding / border (joins the tabs). */
.fi-resource-email-templates .fi-ta-ctn {
    border-top: 0;
    border-radius: 0 0 var(--ct-r-lg) var(--ct-r-lg);
}

/* Lift the table's header toolbar (search + column toggle) up into the tabs
   header strip, right-aligned; the empty area passes clicks through to tabs. */
.fi-resource-email-templates .fi-ta-header-toolbar {
    margin-top: -3.15rem;
    padding: 0 0.6rem 0 0;
    justify-content: flex-end;
    position: relative;
    z-index: 3;
    pointer-events: none;
    border: 0;
}
.fi-resource-email-templates .fi-ta-header-toolbar > * { pointer-events: auto; }
.fi-resource-email-templates .fi-ta-header-toolbar .fi-ta-actions.fi-align-start { display: none; }

/* Foldable search: an icon at rest, expanding to a full field on interaction. */
.fi-resource-email-templates .fi-ta-search-field {
    width: 2.6rem;
    min-width: 2.6rem;
    transition: width .2s ease, min-width .2s ease;
    overflow: hidden;
}
.fi-resource-email-templates .fi-ta-search-field:hover,
.fi-resource-email-templates .fi-ta-search-field:focus-within {
    width: 20rem;
    min-width: 20rem;
}
/* Keep the magnifier icon centred while collapsed; input text hidden until open. */
.fi-resource-email-templates .fi-ta-search-field .fi-input {
    padding-inline-start: 2.2rem;
}

/* ============================================================================
   Shared media LIGHTBOX (.ct-lb-*) — the global click-to-enlarge gallery.
   ONE instance per page (include filament.partials.ct-lightbox); any thumbnail
   opens it by dispatching a `ct-lightbox` window event ({items,type,url,name}).
   Promoted from the MVI subsystem so vehicle photos / inventory cards / task
   media all share the same viewer (mvi/_styles keeps an identical copy for the
   MVI pages — the rules are byte-identical, duplication is harmless).
   Deliberately theme-agnostic: a dark scrim + white controls in BOTH themes.
   ========================================================================== */
.ct-lb { position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:.7rem; padding:3.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background:rgba(8,11,18,.92); }
.ct-lb-stage { display:flex; align-items:center; justify-content:center; max-width:100%; min-height:0; flex:1; }
.ct-lb-media { max-width:92vw; max-height:80vh; width:auto; height:auto; border-radius:10px;
    object-fit:contain; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.55); }
.ct-lb-x { position:fixed; z-index:2; top:calc(1rem + env(safe-area-inset-top, 0px)); right:1.15rem; width:2.75rem; height:2.75rem; display:flex;
    align-items:center; justify-content:center; border:0; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.13); color:#fff; font-size:1.15rem; transition:background .12s ease; }
.ct-lb-x:hover { background:rgba(255,255,255,.27); }
.ct-lb-nav { position:fixed; z-index:2; top:50%; transform:translateY(-50%); width:3rem; height:3rem; display:flex;
    align-items:center; justify-content:center; border:0; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.13); color:#fff; font-size:1.1rem; transition:background .12s ease; }
.ct-lb-nav:hover { background:rgba(255,255,255,.27); }
.ct-lb-prev { left:1rem; } .ct-lb-next { right:1rem; }
.ct-lb-cap { display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.85); font-size:.82rem;
    max-width:90vw; }
.ct-lb-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-lb-count { flex:0 0 auto; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }

/* Hi-res zoom: the stage owns wheel/pinch/drag; the media carries the transform.
   NO transform transition — it would animate every load-time fit change into a
   zoom lurch; instead the image FADES IN (is-settling) once measured. */
.ct-lb-stage { position:relative; touch-action:none; overflow:hidden; align-self:stretch; }
/* NO will-change here: the img is laid out at NATURAL size (7500px panoramas)
   so a persistently promoted layer would hold a ~200MB raster. */
.ct-lb-media { transition:opacity .18s ease; user-select:none; -webkit-user-drag:none; }
.ct-lb-media.is-settling { opacity:0; transition:none; }
.ct-lb-media.is-zoomed { cursor:grab; }
.ct-lb-media.is-drag { cursor:grabbing; }
.ct-lb-zoom { flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; border:0; cursor:pointer;
    border-radius:999px; padding:.28rem .65rem; background:rgba(255,255,255,.13); color:rgba(255,255,255,.85);
    font-size:.78rem; font-variant-numeric:tabular-nums; transition:background .12s ease; }
.ct-lb-zoom:hover { background:rgba(255,255,255,.27); }

/* Filmstrip — pick any picture in the row; the active one is ringed + kept in view. */
.ct-lb-strip { display:flex; gap:.45rem; max-width:min(92vw, 64rem); overflow-x:auto; padding:.15rem .25rem
    calc(.3rem + env(safe-area-inset-bottom, 0px)); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.ct-lb-thumb { flex:0 0 auto; width:3.6rem; height:2.7rem; padding:0; border:2px solid transparent; border-radius:8px;
    overflow:hidden; cursor:pointer; background:rgba(255,255,255,.06); opacity:.6; transition:opacity .12s ease, border-color .12s ease; }
.ct-lb-thumb:hover { opacity:.9; }
.ct-lb-thumb[data-active="1"] { border-color:#fff; opacity:1; }
.ct-lb-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ct-lb-thumb-vid { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.8); font-size:.85rem; }

@media (max-width:640px) { .ct-lb-nav { width:2.5rem; height:2.5rem; } .ct-lb-media { max-height:72vh; }
    .ct-lb-thumb { width:3rem; height:2.25rem; } }
/* Any thumbnail that opens the lightbox advertises it. */
.ct-zoom { cursor: zoom-in; }

/* ============================================================================
   Recon stage PATH bar (.ct-path*) — the vehicle page's CLICKABLE pipeline
   (the Salesforce-Path pattern): one chevron segment per status placed in the
   vehicle's category pipe, in pipeline order. Click a stage = move the vehicle
   there directly (Vehicle::setReconStatus enforce:true — the mandatory gate
   refuses with a toast, never silently). The current stage is filled with its
   macro-phase colour (inline --seg); visited stages carry a ✓. Scrolls
   horizontally on narrow screens so it works in the app embed too.
   ========================================================================== */
.ct-path-wrap { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem; container-type:inline-size; }
.ct-path { display:flex; align-items:stretch; overflow-x:auto; padding:.1rem 0 .35rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.ct-path-seg { position:relative; flex:1 1 auto; min-width:5.25rem; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.05rem; margin-left:-0.55rem; border:0; font:inherit;
    padding:.4rem 1.1rem .36rem 1.35rem; font-size:.74rem; font-weight:600; line-height:1.25;
    color:var(--ct-text-muted); background:var(--ct-surface-sunken); white-space:nowrap;
    clip-path:polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%, .7rem 50%);
    transition:background .12s ease, color .12s ease, filter .12s ease; }
.ct-path-seg:first-child { margin-left:0; padding-left:1.05rem; border-radius:.55rem 0 0 .55rem;
    clip-path:polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%); }
.ct-path-seg:last-child { padding-right:1.05rem; border-radius:0 .55rem .55rem 0;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, .7rem 50%); }
.ct-path-seg:only-child { border-radius:.55rem; clip-path:none; }
button.ct-path-seg { cursor:pointer; }
button.ct-path-seg:hover { background:var(--ct-accent-soft); color:var(--ct-accent); }
.ct-path-seg--done { background:color-mix(in srgb, var(--seg, var(--ct-accent)) 18%, var(--ct-surface)); color:var(--ct-text); }
/* The current stage is a DEEP fill of its marker colour with white text + a
   soft shadow — legible on amber / green / purple alike. (Plain white failed
   contrast on the lighter markers; dark ink read murky on the mid-tone green,
   so we darken the fill ~15% and go white.) */
.ct-path-seg--current { background:color-mix(in srgb, var(--seg, var(--ct-accent)) 85%, #000); color:#fff; text-shadow:0 1px 1.5px rgba(0,0,0,.5); }
button.ct-path-seg--current:hover { background:color-mix(in srgb, var(--seg, var(--ct-accent)) 85%, #000); color:#fff; filter:brightness(1.1); }
.ct-path-seg--current .ct-path-sub { color:inherit; opacity:.85; }
.ct-path-name { display:inline-flex; align-items:center; gap:.3rem; max-width:14rem; overflow:hidden; text-overflow:ellipsis; }
.ct-path-name i { font-size:.6rem; opacity:.8; }
/* Completion-tracked marker on a stage (beside the mandatory ★). */
.ct-path-name .ct-path-trk { font-size:.55rem; color:var(--ct-accent); opacity:.85; }
/* The latest visit's Done/Skipped outcome tag on a visited stage. */
.ct-path-outc { display:inline-block; padding:0 .35rem; border-radius:999px; font-size:.55rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; line-height:1.6; }
.ct-path-outc--done { background:var(--ct-success-soft); color:var(--ct-success); }
.ct-path-outc--skipped { background:var(--ct-neutral-soft, rgba(120,120,128,.18)); color:var(--ct-text-muted); }
.ct-path-outc--pending { background:var(--ct-warning-soft, rgba(217,119,6,.15)); color:var(--ct-warning, #b45309); }
.ct-path-sub { font-size:.66rem; font-weight:600; color:var(--ct-text-muted); }
.ct-path-seg--done .ct-path-sub { color:color-mix(in srgb, var(--seg, var(--ct-success)) 32%, var(--ct-text)); }
/* Dim-while-moving feedback (wire:loading.class — NOT a Tailwind utility;
   the panels have no build, so the rule must live here). */
.ct-path--busy { opacity:.6; pointer-events:none; }
.ct-path-seg[disabled] { cursor:default; }
/* A current status that isn't placed on this category's pipe (or no status). */
.ct-path-note { font-size:.7rem; color:var(--ct-text-faint); display:inline-flex; align-items:center; gap:.35rem; }
.ct-path-note i { font-size:.62rem; }
/* When the bar's OWN width (not the viewport — the panel sidebar makes viewport
   breakpoints lie) can't hold the chevron row, drop it and lay every stage out
   as a WRAPPING GRID of equal-width pills: as many equal columns as fit, onto as
   many equal-height rows as the pipeline needs. Nothing is ever clipped or
   scrolled off — labels + durations WRAP and stay fully visible. A left bar in
   the stage's phase colour makes each status noticeable and groups them by phase
   (in-transit / recon / frontline-ready). */
@container (max-width:1024px) {
    .ct-path { display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5rem, 1fr));
        gap:.4rem; overflow-x:visible; align-items:stretch; }
    .ct-path-seg {
        min-width:0; margin-left:0; font-size:.72rem; align-items:flex-start; text-align:left;
        padding:.5rem .55rem .5rem .65rem; border-radius:.5rem; clip-path:none; overflow:visible;
        white-space:normal;
        border-left:3px solid var(--seg, var(--ct-accent));
        background:color-mix(in srgb, var(--seg, var(--ct-accent)) 10%, var(--ct-surface)); }
    /* Reset the chevron geometry on the end pills only — NO background/colour here,
       so the state rules below still win (a :first/:last selector out-specifies a
       lone .ct-path-seg--current). */
    .ct-path-seg:first-child, .ct-path-seg:last-child { margin-left:0; border-radius:.5rem; clip-path:none; }
    /* Full name + duration, wrapped — nothing hidden behind an ellipsis. */
    .ct-path-seg .ct-path-name { max-width:100%; white-space:normal; overflow:visible; text-overflow:clip; }
    .ct-path-seg .ct-path-sub { white-space:normal; }
    /* States re-asserted AFTER the base so they win by source order: visited is a
       stronger phase tint, the current stage keeps its deep fill + white text. */
    .ct-path-seg--done { background:color-mix(in srgb, var(--seg, var(--ct-accent)) 22%, var(--ct-surface)); }
    .ct-path-seg--current { background:color-mix(in srgb, var(--seg, var(--ct-accent)) 85%, #000); border-left-color:color-mix(in srgb, var(--seg, var(--ct-accent)) 85%, #000); }
}

/* ============================================================================
   Vehicle record page (.ct-veh-*) — promoted here from the page's inline
   <style> and rebuilt on tokens (the inline block had hardcoded hexes and
   dark-mode gaps). Layout: highlights strip → path bar → 2fr/1fr grid of
   cards; the right rail's cards all share .ct-veh-card + h3.
   ========================================================================== */
.ct-veh-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:1rem; align-items:start; }
@media (max-width:1024px) { .ct-veh-grid { grid-template-columns:1fr; } }
.ct-veh-col { display:flex; flex-direction:column; gap:1rem; min-width:0; }

.ct-veh-card { background:var(--ct-surface); border:1px solid var(--ct-hairline-soft);
    border-radius:var(--ct-r-lg); padding:1.1rem 1.25rem; box-shadow:var(--ct-shadow-sm); }
.dark .ct-veh-card { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
/* Bare variant — no surface/border/padding: the content (e.g. the Tasks tiles,
   which are cards themselves) sits directly on the page and takes the full
   column width instead of swimming in a white box. */
.ct-veh-card--bare, .dark .ct-veh-card--bare { background:none; border:none; border-radius:0; padding:0; box-shadow:none; }
/* headroom for the first row's overhanging do-order stickers / status pills
   (they sit -.55rem above the tiles; without this they'd poke past the rail top) */
#fv-tasks.ct-veh-card--bare { padding-top:.7rem; }
.ct-veh-card h3 { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ct-text-faint); margin-bottom:.875rem; display:flex; align-items:center; gap:.4rem; }
.ct-veh-card h3 i { font-size:.68rem; color:var(--ct-text-faint); }
.ct-veh-count { font-weight:600; color:var(--ct-text-muted); text-transform:none; letter-spacing:normal; }

/* — Highlights strip: the identity facts, always above the fold — */
.ct-veh-hl { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:.7rem; }
.ct-veh-hli { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .65rem;
    border-radius:var(--ct-r-md); background:var(--ct-surface); border:1px solid var(--ct-hairline-soft);
    box-shadow:var(--ct-shadow-sm); font-size:.76rem; color:var(--ct-text-muted); white-space:nowrap; }
.dark .ct-veh-hli { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
.ct-veh-hli i { color:var(--ct-text-faint); font-size:.7rem; }
.ct-veh-hli b { color:var(--ct-text-strong); font-weight:650; }
.ct-veh-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; }
.ct-veh-copy { border:0; background:none; padding:0 .05rem; color:var(--ct-text-faint); cursor:pointer;
    font-size:.7rem; transition:color .12s ease; }
.ct-veh-copy:hover { color:var(--ct-accent); }
.ct-veh-hli--age-warn b { color:var(--ct-warning); }
.ct-veh-hli--age-hot b { color:var(--ct-danger); }

/* — Facts grid (Details / Location / Keybox cards) — */
.ct-veh-facts { display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:.875rem 1.5rem; }
.ct-veh-fact dt { font-size:.6875rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-text-faint); }
.ct-veh-fact dd { font-size:.875rem; font-weight:500; margin-top:.125rem; color:var(--ct-text-strong); }
.ct-veh-empty { color:var(--ct-text-faint); font-weight:400; }
/* Vehicle Notes card — free-form notes on a car. */
.ct-veh-note-add { display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.75rem; }
.ct-veh-note-input { flex:1; min-width:0; border:1px solid var(--ct-hairline,#e5e7eb); border-radius:var(--ct-r-sm,.4rem); padding:.4rem .55rem; font:inherit; background:var(--ct-surface,#fff); color:inherit; resize:vertical; }
.ct-veh-note { padding:.5rem 0; border-top:1px solid var(--ct-hairline,#e5e7eb); }
.ct-veh-note:first-of-type { border-top:0; }
.ct-veh-note-body { white-space:pre-wrap; word-break:break-word; }
.ct-veh-note-meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.2rem; font-size:.72rem; color:var(--ct-text-faint,#86868b); }
.ct-veh-note-del { border:0; background:none; color:var(--ct-text-faint,#86868b); cursor:pointer; padding:.15rem .3rem; border-radius:.3rem; }
.ct-veh-note-del:hover { color:var(--ct-danger,#c0392b); background:color-mix(in srgb, var(--ct-danger,#c0392b) 10%, transparent); }
/* @-mention composer (ct-mentions.js) + rendered mention chips — shared by any note/comment thread. */
.ct-mention .ct-mention-field { position:relative; flex:1; min-width:0; }
.ct-mention .ct-mention-field > textarea, .ct-mention .ct-mention-field > input, .ct-mention .ct-mention-field > .ct-mention-ed { width:100%; box-sizing:border-box; }
/* The contenteditable composer — reuses the host input class for border/padding/
   bg/font; these add the editable essentials + the (CSS) placeholder. */
.ct-mention-ed { min-height:2.4em; cursor:text; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.ct-mention-ed:focus { outline:none; }
.ct-mention-ed.is-empty::before { content:attr(data-ph); color:var(--ct-text-faint,#86868b); pointer-events:none; }
/* A picked member renders as an atomic, non-editable pill (name only; the user id
   lives in data-id) — same look as a saved .ct-note-mention chip. */
.ct-mention-chip { user-select:none; cursor:default; white-space:nowrap; }
.ct-mention-menu { position:absolute; z-index:40; left:0; right:0; top:calc(100% + .2rem); max-height:14rem; overflow-y:auto; padding:.25rem; border:1px solid var(--ct-hairline,#e5e7eb); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface,#fff); box-shadow:var(--ct-shadow-pop,0 12px 34px rgba(0,0,0,.18)); }
.ct-mention-opt { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; border:0; background:none; color:inherit; cursor:pointer; padding:.35rem .5rem; border-radius:var(--ct-r-sm,.4rem); font-size:.82rem; }
.ct-mention-opt.is-active, .ct-mention-opt:hover { background:var(--ct-primary-soft, color-mix(in srgb, var(--ct-primary,#486db4) 12%, transparent)); }
.ct-mention-av { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--ct-primary,#486db4); color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.02em; }
.ct-mention-nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-note-mention { font-weight:600; color:var(--ct-primary,#486db4); background:var(--ct-primary-soft, color-mix(in srgb, var(--ct-primary,#486db4) 12%, transparent)); border-radius:var(--ct-r-sm,.35rem); padding:0 .2rem; }
.dark .ct-note-mention { color:#9bb6ea; }
/* Arrival-location confirmation prompt (in-transit → first recon status). */
.ct-arrival-ovl { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); }
.ct-arrival-box { background:var(--ct-surface,#fff); color:inherit; border-radius:var(--ct-r-lg,.8rem); padding:1.25rem 1.4rem; width:min(24rem, 92vw); box-shadow:var(--ct-shadow-pop,0 18px 50px rgba(0,0,0,.28)); }
.ct-arrival-box h3 { margin:0 0 .4rem; font-size:1.05rem; }
.ct-arrival-box p { margin:0 0 .75rem; color:var(--ct-text-faint,#86868b); font-size:.85rem; }
.ct-arrival-sel { width:100%; border:1px solid var(--ct-hairline,#e5e7eb); border-radius:var(--ct-r-sm,.4rem); padding:.45rem .55rem; font:inherit; background:var(--ct-surface,#fff); color:inherit; }
.ct-arrival-acts { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }
.ct-arrival-gps { color:var(--ct-primary,#486db4); font-size:.78rem; white-space:nowrap; }
/* Frontline open-tasks prompt (manual move into frontline ready with open tasks) —
   the arrival overlay's sibling, but a task LIST with per-row Complete / Cancel. */
/* z-index 34 — above the panel chrome (z-30), BELOW the TaskViewModal card
   (.ct-audit-modal-overlay--card z-35) so "view task" opens ON TOP of this
   dialog, and below Filament's action modals (z-40/50). */
.ct-flt-ovl { position:fixed; inset:0; z-index:34; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(15,23,42,.5); backdrop-filter:blur(2px); }
.ct-flt-box { background:var(--ct-surface,#fff); color:inherit; border:1px solid var(--ct-border); border-radius:var(--ct-r-lg,.8rem); width:min(37rem, 94vw); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--ct-shadow-pop,0 18px 50px rgba(0,0,0,.28)); }
.ct-flt-head { flex:0 0 auto; display:flex; align-items:center; gap:.75rem; padding:1rem 1.15rem .85rem; border-bottom:1px solid var(--ct-hairline,#e5e7eb); }
.ct-flt-flag { flex:0 0 auto; width:2.3rem; height:2.3rem; border-radius:.65rem; display:grid; place-items:center; background:var(--ct-accent-soft, rgba(72,109,180,.14)); color:var(--ct-accent, #486db4); font-size:.95rem; }
.ct-flt-head-txt { min-width:0; }
.ct-flt-head-txt h3 { margin:0; font-size:1rem; line-height:1.2; }
.ct-flt-head-txt p { margin:.15rem 0 0; font-size:.76rem; color:var(--ct-text-faint,#86868b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-flt-x { margin-left:auto; flex:0 0 auto; background:none; border:0; cursor:pointer; font-size:1.25rem; line-height:1; color:var(--ct-text-faint,#86868b); padding:.2rem .35rem; border-radius:var(--ct-r-sm,.4rem); }
.ct-flt-x:hover { color:var(--ct-text-strong); background:var(--ct-neutral-soft, rgba(120,120,128,.12)); }
.ct-flt-body { flex:1 1 auto; overflow-y:auto; padding:.9rem 1.15rem; }
.ct-flt-sechead { display:flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ct-text-muted); margin:0 0 .5rem; }
.ct-flt-sechead + .ct-flt-list + .ct-flt-sechead, .ct-flt-list + .ct-flt-sechead { margin-top: 1rem; }
.ct-flt-sechead i { color:var(--ct-accent); font-size:.72rem; }
.ct-flt-n { display:inline-block; min-width:1.15rem; text-align:center; padding:0 .3rem; border-radius:999px; background:var(--ct-neutral-soft, rgba(120,120,128,.14)); color:var(--ct-text-muted); font-size:.66rem; }
.ct-flt-sechint { margin-left:auto; font-weight:500; letter-spacing:0; text-transform:none; font-size:.7rem; color:var(--ct-text-faint,#86868b); }
.ct-flt-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; }
.ct-flt-row { display:flex; align-items:center; gap:.55rem; border:1px solid var(--ct-hairline,#e5e7eb); border-radius:var(--ct-r-md,.55rem); padding:.5rem .65rem; font-size:.82rem; background:var(--ct-canvas, transparent); transition:border-color .12s ease, background .12s ease; }
.ct-flt-row:hover { border-color:var(--ct-accent-soft, rgba(72,109,180,.35)); background:var(--ct-surface,#fff); }
.ct-flt-open { display:flex; align-items:center; gap:.45rem; min-width:0; flex:1 1 auto; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left; }
.ct-flt-tid { flex:0 0 auto; font-weight:800; font-size:.76rem; color:var(--ct-accent, #486db4); }
.ct-flt-title { font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-flt-open:hover .ct-flt-title { color:var(--ct-accent); text-decoration:underline; }
.ct-flt-open .fa-eye { flex:0 0 auto; font-size:.72rem; color:var(--ct-text-faint,#86868b); opacity:0; transition:opacity .12s ease; }
.ct-flt-row:hover .ct-flt-open .fa-eye { opacity:1; }
.ct-flt-st, .ct-flt-pr { flex:0 0 auto; padding:.08rem .5rem; border-radius:999px; font-size:.66rem; font-weight:700; white-space:nowrap; }
.ct-flt-st--new { background:var(--ct-info-soft, rgba(34,167,224,.14)); color:var(--ct-info, #22a7e0); }
.ct-flt-st--in_progress { background:var(--ct-success-soft); color:var(--ct-success); }
.ct-flt-st--waiting_approval { background:var(--ct-warning-soft, rgba(217,119,6,.15)); color:var(--ct-warning, #b45309); }
.ct-flt-st--paused, .ct-flt-st--cancelled, .ct-flt-st--done, .ct-flt-st--declined { background:var(--ct-neutral-soft, rgba(120,120,128,.14)); color:var(--ct-text-muted); }
.ct-flt-pr--high, .ct-flt-pr--very_important { background:var(--ct-danger-soft, rgba(220,38,38,.12)); color:var(--ct-danger, #dc2626); }
.ct-flt-pr--low { background:var(--ct-neutral-soft, rgba(120,120,128,.14)); color:var(--ct-text-muted); }
.ct-flt-steplbl { display:flex; align-items:center; gap:.4rem; font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-flt-steplbl i { color:var(--ct-warning, #b45309); font-size:.8rem; }
.ct-flt-meta { color:var(--ct-text-faint,#86868b); font-size:.72rem; white-space:nowrap; }
.ct-flt-acts { margin-left:auto; display:flex; gap:.35rem; flex:0 0 auto; }
.ct-flt-btn { display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--ct-border,#d1d5db); background:var(--ct-surface,#fff); color:var(--ct-text); border-radius:var(--ct-r-sm,.45rem); padding:.3rem .6rem; font-size:.72rem; font-weight:650; cursor:pointer; transition:border-color .12s ease, background .12s ease, color .12s ease; }
.ct-flt-btn:hover { border-color:var(--ct-accent); color:var(--ct-accent); }
.ct-flt-btn--ok { border-color:color-mix(in srgb, var(--ct-success) 45%, transparent); color:var(--ct-success); }
.ct-flt-btn--ok:hover { background:var(--ct-success-soft); border-color:var(--ct-success); color:var(--ct-success); }
.ct-flt-foot { flex:0 0 auto; display:flex; align-items:center; gap:.75rem; padding:.75rem 1.15rem; border-top:1px solid var(--ct-hairline,#e5e7eb); }
.ct-flt-hint { margin-right:auto; font-size:.72rem; color:var(--ct-text-faint,#86868b); }

/* — Status pills (sold / category / recon / labels row) — */
.ct-veh-pills { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ct-veh-pill { padding:.2rem .7rem; border-radius:var(--ct-r-pill); font-size:.75rem; font-weight:600;
    color:var(--ct-accent); background:var(--ct-accent-soft); }
.ct-veh-pill--sale { color:var(--ct-success); background:var(--ct-success-soft); }
.ct-veh-pill--sold { color:var(--ct-danger); background:var(--ct-danger-soft); }
.ct-veh-pill--recon { color:var(--ct-info); background:var(--ct-info-soft); }
.ct-veh-pill--muted { color:var(--ct-text-muted); background:var(--ct-neutral-soft); }
/* Unregistered key still in the box — blinking amber alert (won't show in a keybox search). */
.ct-veh-pill--alert { color:var(--ct-warning); background:var(--ct-warning-soft);
    animation:ct-label-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ct-veh-pill--alert { animation:none; } }

/* — Photo gallery: hero + filmstrip, click-through to the lightbox — */
.ct-veh-gal-hero { position:relative; border-radius:var(--ct-r-md); overflow:hidden; aspect-ratio:16 / 9;
    background:var(--ct-surface-sunken); border:0; padding:0; width:100%; display:block; }
.ct-veh-gal-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ct-veh-gal-n { position:absolute; bottom:.5rem; right:.5rem; display:inline-flex; align-items:center; gap:.3rem;
    padding:.15rem .55rem; border-radius:var(--ct-r-pill); font-size:.7rem; font-weight:600; color:#fff;
    background:rgba(0,0,0,.55); }
.ct-veh-gal-strip { display:flex; gap:.4rem; overflow-x:auto; margin-top:.5rem; padding-bottom:.2rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.ct-veh-gal-th { flex:0 0 auto; width:5.4rem; height:4rem; border-radius:.5rem; overflow:hidden; padding:0;
    border:1px solid var(--ct-hairline-soft); background:var(--ct-surface-sunken); }
.ct-veh-gal-th img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .15s ease; }
.ct-veh-gal-th:hover img { transform:scale(1.06); }

/* — Inspections rows — */
.ct-veh-insp-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem .25rem;
    border-bottom:1px solid var(--ct-hairline-soft); text-decoration:none; color:inherit; transition:background .1s;
    border-radius:4px; }
.ct-veh-insp-row:hover { background:var(--ct-hover); }
.ct-veh-insp-row:last-child { border-bottom:none; }
.ct-veh-insp-info { display:flex; flex-direction:column; gap:1px; }
.ct-veh-insp-name { font-size:.84rem; font-weight:500; color:var(--ct-text-strong); }
.ct-veh-insp-meta { font-size:.74rem; color:var(--ct-text-faint); }

/* — Activity timeline (with client-side filter chips) — */
.ct-veh-actfilters { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.7rem; }
.ct-veh-actchip { border:1px solid var(--ct-hairline); background:transparent; color:var(--ct-text-muted);
    font-size:.68rem; font-weight:600; padding:.18rem .55rem; border-radius:var(--ct-r-pill); cursor:pointer;
    transition:background .12s ease, color .12s ease, border-color .12s ease; }
.ct-veh-actchip:hover { border-color:var(--ct-accent); color:var(--ct-accent); }
.ct-veh-actchip--on { background:var(--ct-accent); border-color:var(--ct-accent); color:#fff; }
.dark .ct-veh-actchip--on { color:#0f1117; }
.ct-veh-step { display:flex; gap:.75rem; position:relative; padding-bottom:1rem; }
.ct-veh-step:last-child { padding-bottom:0; }
.ct-veh-dot { width:.625rem; height:.625rem; border-radius:999px; background:var(--ct-info-soft);
    margin-top:.3rem; flex-shrink:0; }
.ct-veh-step:first-child .ct-veh-dot { background:#22a7e0; }
.ct-veh-step::before { content:''; position:absolute; left:.27rem; top:1rem; bottom:0; width:1px;
    background:var(--ct-info-soft); }
.ct-veh-step:last-child::before { display:none; }
.ct-veh-step b { font-size:.8125rem; font-weight:600; display:block; color:var(--ct-text-strong); }
.ct-veh-step small { font-size:.71875rem; color:var(--ct-text-faint); }

/* — Quote list rows — */
.ct-veh-qrow { padding:.45rem 0; border-top:1px solid var(--ct-hairline-soft); }
.ct-veh-qhead { display:flex; justify-content:space-between; gap:.5rem; }
.ct-veh-qopts { margin-top:.3rem; display:flex; flex-wrap:wrap; gap:.35rem; }

/* ============================================================================
   Inventory list (.ct-inv-*) — promoted here from the page's inline <style>
   and rebuilt on tokens; adds the filter bar (scope chips with live counts +
   category / status / sort selects), icon quick-actions with tooltips, and
   aging-tier colouring on the time-in-inventory chip.
   ========================================================================== */
/* Inventory filter panel — three tiers: controls · facet pills · active chips. */
.ct-inv-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; margin-bottom:.7rem; }
.ct-inv-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem; }
.ct-inv-spring { flex:1 1 auto; }
.ct-inv-search { flex:1 1 16rem; min-width:12rem; max-width:26rem; padding:.5rem .875rem; font-size:.875rem;
    border-radius:var(--ct-r-md); border:1px solid var(--ct-hairline); background:var(--ct-surface);
    color:var(--ct-text-strong); outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.ct-inv-search::placeholder { color:var(--ct-text-faint); }
.ct-inv-search:focus { border-color:var(--ct-accent); box-shadow:0 0 0 3px var(--ct-accent-soft); }
.ct-inv-count { font-size:.8125rem; color:var(--ct-text-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Muted "N completed hidden — show" reveal hint next to the task count. */
.ct-inv-hint { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:500; color:var(--ct-text-faint); background:none; border:none; padding:0 .1rem; cursor:pointer; white-space:nowrap; font-variant-numeric:tabular-nums; text-decoration:underline dotted; text-underline-offset:2px; }
.ct-inv-hint:hover { color:var(--ct-accent); }
.ct-inv-hint i { opacity:.6; }
.ct-inv-hint--on { color:var(--ct-accent); text-decoration:none; font-weight:600; }
.ct-inv-hint--on i { opacity:1; }
.ct-inv-scope { display:inline-flex; gap:.3rem; }
/* Scope chips (Active / Sold / All) with live counts. */
.ct-inv-fchip { display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:600;
    padding:.34rem .7rem; border-radius:var(--ct-r-pill); border:1px solid var(--ct-hairline);
    background:transparent; color:var(--ct-text-muted); cursor:pointer;
    transition:background .12s ease, color .12s ease, border-color .12s ease; }
.ct-inv-fchip:hover { border-color:var(--ct-accent); color:var(--ct-accent); }
.ct-inv-fchip--on { background:var(--ct-accent); border-color:var(--ct-accent); color:#fff; }
.dark .ct-inv-fchip--on { color:#0f1117; }
.ct-inv-fchip small { font-weight:700; font-size:.64rem; opacity:.75; font-variant-numeric:tabular-nums; }
.ct-inv-fsel { font-size:.8rem; padding:.42rem .6rem; border-radius:var(--ct-r-md);
    border:1px solid var(--ct-hairline); background:var(--ct-surface); color:var(--ct-text-strong); }
.ct-inv-sortdir { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
    border:1px solid var(--ct-hairline); background:var(--ct-surface); color:var(--ct-text-faint);
    border-radius:var(--ct-r-md); font-size:.8rem; cursor:pointer; }
.ct-inv-sortdir:hover { color:var(--ct-text-strong); }
.ct-inv-sortdir.is-active { color:var(--ct-accent); border-color:var(--ct-accent); }
.ct-inv-freset { display:inline-flex; align-items:center; gap:.3rem; border:0; background:none;
    color:var(--ct-text-faint); font-size:.76rem; font-weight:600; cursor:pointer; padding:.3rem .5rem; border-radius:var(--ct-r-md); }
.ct-inv-freset:hover { color:var(--ct-danger); background:var(--ct-danger-soft); }

/* ── Facet pills row ── */
.ct-inv-facets { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem; }
.ct-ff-lead { display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700;
    color:var(--ct-text-faint); margin-right:.15rem; }
.ct-ff-lead i { font-size:.72rem; }
.ct-ff { position:relative; }
.ct-ff-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600;
    padding:.38rem .7rem; border-radius:var(--ct-r-pill); border:1px solid var(--ct-hairline);
    background:var(--ct-surface); color:var(--ct-text-muted); cursor:pointer; white-space:nowrap;
    transition:border-color .12s ease, color .12s ease, background .12s ease; }
.dark .ct-ff-btn { background:var(--ct-surface-raised); }
.ct-ff-btn > i:first-child { font-size:.72rem; color:var(--ct-text-faint); }
.ct-ff-btn:hover { border-color:var(--ct-accent); color:var(--ct-accent); }
.ct-ff-btn:hover > i:first-child { color:var(--ct-accent); }
.ct-ff-caret { font-size:.6rem; opacity:.6; }
.ct-ff-btn.is-active { border-color:var(--ct-accent); color:var(--ct-accent);
    background:var(--ct-accent-soft); }
.ct-ff-btn.is-active > i:first-child { color:var(--ct-accent); }
.ct-ff-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.05rem; height:1.05rem;
    padding:0 .28rem; border-radius:999px; background:var(--ct-accent); color:#fff; font-size:.6rem; font-weight:800;
    font-variant-numeric:tabular-nums; }
.dark .ct-ff-badge { color:#0f1117; }

/* ── Facet dropdown popover ── */
.ct-ff-pop { position:absolute; top:calc(100% + 5px); left:0; z-index:50; width:16rem; max-width:min(20rem, 82vw);
    display:flex; flex-direction:column; background:var(--ct-surface); border:1px solid var(--ct-hairline);
    border-radius:var(--ct-r-md); box-shadow:var(--ct-shadow-pop); overflow:hidden; }
.dark .ct-ff-pop { background:var(--ct-surface-raised); }
.ct-ff-pop-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    padding:.5rem .7rem; font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color:var(--ct-text-faint); border-bottom:1px solid var(--ct-hairline-soft); }
.ct-ff-clear { border:0; background:none; color:var(--ct-accent); font-size:.68rem; font-weight:700;
    text-transform:none; letter-spacing:0; cursor:pointer; padding:0; }
.ct-ff-clear:hover { text-decoration:underline; }
.ct-ff-search { display:flex; align-items:center; gap:.45rem; padding:.4rem .6rem; border-bottom:1px solid var(--ct-hairline-soft); }
.ct-ff-search i { font-size:.7rem; color:var(--ct-text-faint); }
.ct-ff-search input { flex:1 1 auto; min-width:0; border:0; background:none; outline:none;
    font-size:.8rem; color:var(--ct-text-strong); }
.ct-ff-search input::placeholder { color:var(--ct-text-faint); }
.ct-ff-list { display:flex; flex-direction:column; max-height:17rem; overflow-y:auto; padding:.25rem; }
.ct-ff-opt { display:flex; align-items:center; gap:.5rem; padding:.34rem .45rem; border-radius:var(--ct-r-sm);
    cursor:pointer; user-select:none; }
.ct-ff-opt:hover { background:var(--ct-accent-soft); }
.ct-ff-cb { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.ct-ff-box { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem;
    border:1.5px solid var(--ct-hairline); border-radius:.28rem; color:#fff; transition:background .1s ease, border-color .1s ease; }
.ct-ff-box i { font-size:.55rem; opacity:0; transform:scale(.6); transition:opacity .1s ease, transform .1s ease; }
.ct-ff-cb:checked ~ .ct-ff-box { background:var(--ct-accent); border-color:var(--ct-accent); }
.dark .ct-ff-cb:checked ~ .ct-ff-box i { color:#0f1117; }
.ct-ff-cb:checked ~ .ct-ff-box i { opacity:1; transform:none; }
.ct-ff-cb:focus-visible ~ .ct-ff-box { box-shadow:0 0 0 3px var(--ct-accent-soft); }
.ct-ff-txt { flex:1 1 auto; min-width:0; font-size:.8rem; color:var(--ct-text-strong);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-ff-n { flex:0 0 auto; font-size:.68rem; font-weight:700; color:var(--ct-text-faint);
    font-variant-numeric:tabular-nums; }
.ct-ff-cb:checked ~ .ct-ff-txt { color:var(--ct-accent); font-weight:650; }
.ct-ff-none { padding:.6rem .7rem; font-size:.76rem; color:var(--ct-text-faint); text-align:center; }
.ct-ff-more { padding:.5rem .7rem; margin-top:.25rem; font-size:.72rem; color:var(--ct-text-faint); text-align:center; border-top:1px solid var(--ct-border); }

/* ── Active-filter chips ── */
.ct-inv-active { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
    padding-top:.5rem; border-top:1px solid var(--ct-hairline-soft); }
.ct-ff-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600;
    padding:.26rem .3rem .26rem .55rem; border-radius:var(--ct-r-pill); border:1px solid transparent;
    background:var(--ct-accent-soft); color:var(--ct-accent); cursor:pointer;
    transition:border-color .12s ease; }
.ct-ff-chip:hover { border-color:var(--ct-accent); }
.ct-ff-chip-k { font-weight:700; opacity:.7; margin-right:.1rem; }
.ct-ff-chip i { font-size:.66rem; width:1rem; height:1rem; display:inline-flex; align-items:center;
    justify-content:center; border-radius:999px; background:color-mix(in srgb, var(--ct-accent) 18%, transparent); }
.ct-ff-clearall { border:0; background:none; color:var(--ct-text-faint); font-size:.72rem; font-weight:700;
    cursor:pointer; padding:.26rem .5rem; }
.ct-ff-clearall:hover { color:var(--ct-danger); }

.ct-inv-list { display:flex; flex-direction:column; gap:.75rem; }

/* — Card — */
/* minmax(0, …) on the flexible track (not a bare 1fr) so a wide/unbreakable
   child — a long VIN, a nowrap props row — can't grow the track past the card
   and blow the width:100% photo up to full min-content height (the classic
   grid "1fr won't shrink" trap; on mobile the single column hit it hardest). */
.ct-inv-card { display:grid; grid-template-columns:11rem minmax(0, 1fr); gap:0 1.25rem; background:var(--ct-surface);
    border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-lg); padding:1rem 1.25rem;
    cursor:pointer; box-shadow:var(--ct-shadow-sm); transition:border-color .12s ease, box-shadow .12s ease; }
.ct-inv-card > * { min-width:0; }

/* Bulk multi-select (Inventory rows/cards + Tasks board) — a corner checkbox
   overlay + a sticky bulk-action bar shared by both boards. */
.ct-invr, .ct-inv-card { position: relative; }
.ct-inv-sel { position:absolute; top:.4rem; left:.4rem; z-index:4; display:inline-flex; align-items:center; justify-content:center;
    width:1.4rem; height:1.4rem; border-radius:.4rem; background:color-mix(in srgb, var(--ct-surface,#fff) 82%, transparent);
    box-shadow:0 1px 3px rgba(0,0,0,.18); cursor:pointer;
    /* Small + dim by default for a cleaner grid; zooms to full size on hover
       (and stays full while selected). Anchored to its top-left corner. */
    transform:scale(.76); transform-origin:top left; opacity:.55;
    transition:transform .12s ease, opacity .12s ease; }
.ct-invr:hover .ct-inv-sel, .ct-inv-card:hover .ct-inv-sel, .ct-inv-sel:hover,
.ct-inv-sel:has(input:checked) { transform:scale(1); opacity:1; }
/* Touch devices have no hover — keep it full-size + visible so it stays tappable. */
@media (hover: none), (pointer: coarse) { .ct-inv-sel { transform:none; opacity:1; } }
.ct-inv-sel input, .ct-tk-sel { accent-color:var(--ct-primary,#486db4); cursor:pointer; }
.ct-inv-sel input { width:1rem; height:1rem; margin:0; }
/* Bulk-select checkbox — last item in the card's tool row (after Delete). A
   hairline divider sets it off from the icons; the box is centered to match. */
.ct-tk-sel-wrap { display:grid; place-items:center; width:1.75rem; height:1.75rem; flex:none; margin-left:.15rem; padding-left:.3rem; border-left:1px solid var(--ct-hairline,rgba(0,0,0,.08)); border-radius:0; cursor:pointer; }
.ct-tk-sel { width:1rem; height:1rem; margin:0; flex:none; }
/* Floating bulk-action toolbar — shared by the Inventory + Tasks boards.
   A refined neutral surface (not a saturated blob): raised card, hairline
   border, soft elevation, compact chip buttons, accent only on Sold/Delete. */
.ct-inv-bulk { position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:45;
    display:flex; flex-wrap:nowrap; align-items:center; gap:.3rem;
    max-width:calc(100vw - 1.5rem); overflow-x:auto; overscroll-behavior:contain; scrollbar-width:none;
    margin:0; padding:.45rem .5rem;
    background:var(--ct-surface-raised,#fff); border:1px solid var(--ct-hairline,#e5e7eb);
    border-radius:var(--ct-r-lg,.85rem);
    box-shadow:0 1px 2px rgba(15,23,42,.08), 0 14px 30px -8px rgba(15,23,42,.26);
    animation:ct-bulk-in .18s cubic-bezier(.2,.8,.3,1); }
.ct-inv-bulk::-webkit-scrollbar { display:none; }
@keyframes ct-bulk-in { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }

.ct-inv-bulk-n { display:inline-flex; align-items:center; gap:.45rem; padding:0 .5rem 0 .4rem;
    font-size:.8rem; font-weight:500; color:var(--ct-text-muted,#6b7280); white-space:nowrap; }
.ct-inv-bulk-count { display:inline-flex; align-items:center; justify-content:center;
    min-width:1.35rem; height:1.35rem; padding:0 .35rem; border-radius:999px;
    background:var(--ct-primary,#486db4); color:#fff; font-size:.75rem; font-weight:700; }

.ct-inv-bulk-div { flex:0 0 1px; align-self:stretch; margin:.25rem .2rem; background:var(--ct-hairline,#e5e7eb); }

.ct-inv-bulk-btn { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; cursor:pointer; line-height:1;
    padding:.44rem .66rem; border:1px solid var(--ct-hairline,#e5e7eb); border-radius:var(--ct-r-sm,.45rem);
    background:var(--ct-surface,#fff); color:var(--ct-text-strong,#1f2937); font-size:.81rem; font-weight:600;
    transition:background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .06s ease; }
.ct-inv-bulk-btn i { font-size:.85em; color:var(--ct-text-faint,#9ca3af); transition:color .13s ease; }
.ct-inv-bulk-btn:hover { background:var(--ct-surface-sunken,#f3f4f6); border-color:var(--ct-hairline-soft,#d1d5db); box-shadow:0 1px 2px rgba(15,23,42,.06); }
.ct-inv-bulk-btn:active { transform:translateY(.5px); }

.ct-inv-bulk-btn--good { color:var(--ct-success,#16a34a); background:var(--ct-success-soft,#effdf3); border-color:transparent; }
.ct-inv-bulk-btn--good i { color:currentColor; }
.ct-inv-bulk-btn--good:hover { background:var(--ct-success,#16a34a); color:#fff; border-color:transparent; }

.ct-inv-bulk-btn--danger { color:var(--ct-danger,#dc2626); background:var(--ct-danger-soft,#fef2f2); border-color:transparent; }
.ct-inv-bulk-btn--danger i { color:currentColor; }
.ct-inv-bulk-btn--danger:hover { background:var(--ct-danger,#dc2626); color:#fff; border-color:transparent; }

.ct-inv-bulk-btn--ghost { background:transparent; border-color:transparent; color:var(--ct-text-muted,#6b7280); font-weight:500; }
.ct-inv-bulk-btn--ghost:hover { background:var(--ct-surface-sunken,#f3f4f6); border-color:transparent; box-shadow:none; color:var(--ct-text-strong,#1f2937); }
.ct-inv-bulk-btn--icon { padding:.44rem .52rem; }
.ct-inv-bulk-btn--icon i { font-size:.95em; }
.dark .ct-inv-card { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
.ct-inv-card:hover { border-color:color-mix(in srgb, var(--ct-accent) 40%, transparent);
    box-shadow:0 2px 12px var(--ct-accent-soft); }
@media (max-width:800px) { .ct-inv-card { grid-template-columns:minmax(0, 1fr); gap:.75rem 0; } }

/* — Media column: photo + timeline — */
.ct-inv-photo { position:relative; aspect-ratio:4 / 3; border-radius:.625rem; overflow:hidden;
    background:linear-gradient(160deg, var(--ct-accent-soft), color-mix(in srgb, var(--ct-accent) 16%, transparent));
    display:flex; align-items:center; justify-content:center;
    color:color-mix(in srgb, var(--ct-accent) 45%, transparent); border:0; padding:0; width:100%; }
.ct-inv-photo svg, .ct-inv-photo i { width:2.25rem; height:2.25rem; font-size:1.9rem; }
.ct-inv-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ct-inv-photo-count { position:absolute; bottom:.375rem; right:.375rem; display:inline-flex; align-items:center;
    gap:.25rem; padding:.125rem .5rem; border-radius:999px; font-size:.6875rem; font-weight:600; color:#fff;
    background:rgba(0,0,0,.55); }
.ct-inv-photo-count svg { width:.75rem; height:.75rem; }
.ct-inv-tlbar { display:flex; gap:2px; margin-top:.5rem; height:10px; }
.ct-inv-tlbar span { min-width:8px; border-radius:2px;
    background-image:linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,.05)); }
.ct-inv-tllegend { display:flex; flex-wrap:wrap; gap:.25rem .75rem; margin-top:.375rem; font-size:.625rem;
    color:var(--ct-text-muted); }
.ct-inv-tllegend b { display:inline-block; padding:0 .4rem; margin-right:.25rem; border-radius:3px; color:#fff;
    font-weight:600; }

/* — Details column — */
.ct-inv-markers { display:flex; flex-wrap:wrap; gap:.375rem; justify-content:flex-end; float:right; }
/* Phones: the floated chip cluster would squeeze the title to one word per
   line — un-float it into its own leading row instead. */
@media (max-width:800px) {
    .ct-inv-markers { float:none; justify-content:flex-start; margin-bottom:.4rem; }
}
.ct-inv-chip { display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .625rem; border-radius:.375rem;
    font-size:.75rem; font-weight:600; color:var(--ct-success); background:var(--ct-success-soft); }
.ct-inv-chip--none { color:var(--ct-text-muted); background:var(--ct-neutral-soft); }
.ct-inv-chip--sold { color:var(--ct-danger); background:var(--ct-danger-soft); }
/* Delayed recon stage — the status chip goes red and shows how far over goal. */
.ct-inv-chip--late { color:var(--ct-danger); background:var(--ct-danger-soft); }
.ct-inv-chip-over { font-weight:700; }
.ct-inv-chip--keyout { color:var(--ct-warning); background:var(--ct-warning-soft); }
.ct-inv-chip--keyin { color:var(--ct-text-muted); background:var(--ct-neutral-soft); }
.ct-inv-chip--appt { color:var(--ct-info); background:var(--ct-info-soft); }
/* Unregistered key — the SAME filled neutral chip as "key in box" (--keyin),
   icon-only (no text); the reason + in/out live in the title tooltip. Pin the
   height to a text chip's (icon-only has no text line-box) so it matches. */
.ct-inv-chip--keyunreg { color:var(--ct-text-muted); background:var(--ct-neutral-soft);
    padding:0 .5rem; min-height:calc(.25rem + 1.5 * .75rem); }
/* CRITICAL: unregistered AND in the box (won't show in a keybox search) —
   a blinking amber key+! chip so it can't be missed. */
.ct-inv-chip--keyalert { color:var(--ct-warning); background:var(--ct-warning-soft);
    padding:0 .5rem; min-height:calc(.25rem + 1.5 * .75rem);
    animation:ct-label-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ct-inv-chip--keyalert { animation:none; } }
.ct-inv-chip--vtamber { color:var(--ct-warning); background:var(--ct-warning-soft); }
.ct-inv-chip--vtred { color:var(--ct-danger); background:var(--ct-danger-soft); }
.ct-inv-chip img { width:.8125rem; height:.8125rem; object-fit:contain; }

.ct-inv-titlerow { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .625rem; }
.ct-inv-title { font-size:1rem; font-weight:650; color:var(--ct-text-strong); }
.ct-inv-trim { font-weight:400; color:var(--ct-text-faint); }
.ct-inv-stock { font-size:.75rem; font-weight:600; color:var(--ct-text-muted); }

.ct-inv-props { display:flex; flex-wrap:wrap; align-items:center; margin-top:.5rem; font-size:.75rem;
    color:var(--ct-text-muted); }
.ct-inv-props strong { font-weight:700; }
.ct-inv-prop { display:inline-flex; align-items:center; gap:.25rem; }
.ct-inv-prop + .ct-inv-prop::before { content:'·'; padding:0 .625rem; color:var(--ct-hairline); }
.ct-inv-vin { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; }
.ct-inv-vin .v8 { color:#5078fe; }
.dark .ct-inv-vin .v8 { color:#8fa8ff; }
.ct-inv-vin .v6 { font-weight:700; }
/* Aging tiers on the time-in-inventory chip: quiet <30d, amber 30–59, red 60+. */
.ct-inv-age--warn { color:var(--ct-warning); font-weight:700; }
.ct-inv-age--hot { color:var(--ct-danger); font-weight:700; }

/* Compact "how long" duration (x-ct-duration): bigger leading unit, smaller
   trailing d/h. The unit letter is smaller than its number; the second (smaller)
   segment is smaller + lighter still, so "3w 2d" reads big-then-small. */
.ct-dur { white-space:nowrap; font-variant-numeric:tabular-nums; }
.ct-dur-seg + .ct-dur-seg { margin-left:.22em; }
.ct-dur-n { font-weight:700; }
.ct-dur-u { font-size:.78em; font-weight:600; opacity:.75; margin-left:.06em; }
.ct-dur-sub { font-size:.85em; opacity:.72; }
.ct-dur-sub .ct-dur-n { font-weight:600; }
/* Aging tiers colour the whole duration when it stands in for the age chip. */
.ct-inv-age--warn .ct-dur-u, .ct-inv-age--hot .ct-dur-u { opacity:.85; }

.ct-inv-feed { padding:.0625rem .4rem; border-radius:.25rem; background:var(--ct-accent-soft); font-weight:600;
    font-size:.6875rem; }
.ct-inv-feed--in { color:var(--ct-success); background:var(--ct-success-soft); }
.ct-inv-feed--out { color:var(--ct-warning); background:var(--ct-warning-soft); }

.ct-inv-status-btn { display:inline-flex; align-items:center; gap:.25rem; border:none; background:none; padding:0;
    font:inherit; color:inherit; cursor:pointer; }
.ct-inv-status-btn:hover strong { color:var(--ct-accent); }

.ct-inv-labels { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.5rem; }

/* — Icon quick-actions: compact one-glyph buttons with tooltips; larger tap
     targets on touch (the app embed / phones have no hover). — */
.ct-inv-actions { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.625rem; align-items:center; }
.ct-inv-ibtn { position:relative; display:grid; place-items:center; width:2rem; height:2rem; border-radius:.5rem;
    border:1px solid var(--ct-hairline); background:none; color:var(--ct-text-muted); font-size:.78rem;
    cursor:pointer; text-decoration:none; transition:border-color .12s ease, color .12s ease, background .12s ease; }
.ct-inv-ibtn:hover { border-color:var(--ct-accent); color:var(--ct-accent); background:var(--ct-accent-soft); }
.ct-inv-ibtn-n { position:absolute; top:-.35rem; right:-.35rem; min-width:1rem; height:1rem; padding:0 .2rem;
    display:grid; place-items:center; border-radius:.5rem; background:var(--ct-primary,#486db4); color:#fff;
    font-size:.6rem; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--ct-surface,#fff); }
@media (pointer:coarse) { .ct-inv-ibtn { width:2.6rem; height:2.6rem; font-size:.9rem; } }

.ct-inv-sentinel { padding:1rem; text-align:center; font-size:.8125rem; color:var(--ct-text-faint); }
/* Invisible mid-scroll prefetch trigger — zero-height, and a negative margin
   cancels the .ct-inv-rows flex gap so inserting it shifts nothing. */
.ct-inv-prefetch { height:0; margin:-.5rem 0 0; padding:0; pointer-events:none; }
.ct-inv-empty { padding:3rem 1rem; text-align:center; color:var(--ct-text-faint); background:var(--ct-surface);
    border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-lg); }
.dark .ct-inv-empty { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
/* View toggle (list | cards) — two joined icon buttons. */
.ct-inv-views { display:inline-flex; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); overflow:hidden; }
.ct-inv-view { display:grid; place-items:center; width:2.2rem; height:2.1rem; border:0; background:transparent;
    color:var(--ct-text-faint); font-size:.8rem; cursor:pointer; transition:background .12s ease, color .12s ease; }
.ct-inv-view + .ct-inv-view { border-left:1px solid var(--ct-hairline); }
.ct-inv-view:hover { color:var(--ct-accent); background:var(--ct-hover); }
.ct-inv-view--on { background:var(--ct-accent); color:#fff; }
.dark .ct-inv-view--on { color:#0f1117; }

/* ============================================================================
   Inventory COMPACT ROW view (.ct-invr-*) — the v1-style table-like line:
   small thumb + a recon bar no wider than the picture (detail in tooltips),
   a title line, a dense dot-separated meta line, and a per-row TOOL STRIP
   where every operation works straight from the line via modals. The strip
   horizontal-scrolls on phones; labels drop to icons on narrow screens.
   ========================================================================== */
.ct-inv-rows { display:flex; flex-direction:column; gap:.5rem; }
.ct-invr { display:grid; grid-template-columns:6rem minmax(0, 1fr) auto; gap:.15rem .85rem; align-items:start;
    background:var(--ct-surface); border:1px solid var(--ct-hairline-soft); border-radius:.7rem;
    padding:.55rem .8rem .55rem .6rem; box-shadow:var(--ct-shadow-sm);
    transition:border-color .12s ease, box-shadow .12s ease; }
.dark .ct-invr { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
.ct-invr:hover { border-color:color-mix(in srgb, var(--ct-accent) 35%, transparent); box-shadow:0 2px 10px var(--ct-accent-soft); }

/* — Media cell: thumb + the recon bar, never wider than the picture — */
.ct-invr-media { grid-row:1 / span 3; display:flex; flex-direction:column; gap:.3rem; width:6rem; }
.ct-invr-thumb { position:relative; width:6rem; height:4.1rem; border-radius:.5rem; overflow:hidden; border:0; padding:0;
    background:linear-gradient(160deg, var(--ct-accent-soft), color-mix(in srgb, var(--ct-accent) 15%, transparent));
    display:flex; align-items:center; justify-content:center; color:color-mix(in srgb, var(--ct-accent) 45%, transparent); }
.ct-invr-thumb i, .ct-invr-thumb svg { font-size:1.3rem; width:1.5rem; height:1.5rem; }
.ct-invr-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Lazily-resolved thumbnail — ct-thumb.js fills a photo-less placeholder
   (.ct-invr-thumb / .ct-inv-photo / .ct-rcb-photo) with an aggregated (UVeye)
   cover on scroll-into-view; the img fades in and the "needs photos" tint is
   dropped (the slot now shows a real picture). */
.ct-thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; animation:ctThumbIn .25s ease; }
.ct-rcb-photo .ct-thumb-img { position:static; }
@keyframes ctThumbIn { from { opacity:0; } to { opacity:1; } }
.ct-thumb-filled { border-color:var(--ct-border,rgba(0,0,0,.1)) !important; background:transparent !important; }
.ct-invr-thumb-n { position:absolute; bottom:2px; right:2px; display:inline-flex; align-items:center; gap:.2rem;
    padding:0 .3rem; border-radius:999px; font-size:.58rem; font-weight:700; color:#fff; background:rgba(0,0,0,.55); }

/* Photo-goal colour states (per category thresholds). Placed after both badge
   base rules so they win on source order. Red = below the initial goal, amber
   = shoot started but short of a full set, green = full set complete. The
   --needs tints flag a goal-bearing car that has NO photos at all. */
.ct-inv-photo-count.ct-photo--none, .ct-invr-thumb-n.ct-photo--none { background:#dc2626; color:#fff; }
.ct-inv-photo-count.ct-photo--partial, .ct-invr-thumb-n.ct-photo--partial { background:#f59e0b; color:#3d2b00; }
.ct-inv-photo-count.ct-photo--complete, .ct-invr-thumb-n.ct-photo--complete { background:#16a34a; color:#fff; }
/* Cover pulled from recon photos (no retail photos yet) — an info-blue tag. */
.ct-inv-photo-count--recon, .ct-invr-thumb-n--recon { background:var(--ct-info,#22a7e0); color:#fff; }
.ct-inv-photo--needs { background:linear-gradient(160deg, rgba(220,38,38,.15), rgba(220,38,38,.30)) !important;
    color:rgba(220,38,38,.85) !important; }
.ct-invr-thumb--needs { background:linear-gradient(160deg, rgba(220,38,38,.14), rgba(220,38,38,.28)) !important;
    color:rgba(220,38,38,.8) !important; }
.dark .ct-inv-photo--needs, .dark .ct-invr-thumb--needs { color:rgba(248,113,113,.9) !important; }
.ct-invr-bar { display:flex; gap:1.5px; height:7px; width:6rem; max-width:6rem; overflow:hidden; }
.ct-invr-bar span { min-width:4px; border-radius:1.5px;
    background-image:linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,.05)); }

/* — Line 1: title · #stock · chips · the phase/age readout right — */
.ct-invr-l1 { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .55rem; min-width:0; }
.ct-invr-title { font-size:.92rem; font-weight:700; color:var(--ct-accent); text-decoration:none; line-height:1.25; }
.ct-invr-title:hover { text-decoration:underline; }
.ct-invr-stock { font-size:.72rem; font-weight:700; color:var(--ct-text-muted); }
.ct-invr-l1 .ct-lbl { font-size:.6rem; padding:.1rem .45rem; }
.ct-invr-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.08rem .45rem; border-radius:.35rem;
    font-size:.64rem; font-weight:700; }
.ct-invr-chip img { width:.7rem; height:.7rem; object-fit:contain; }
/* The chip's visible label — the host's clip/fade seam (the shared key chip
   wraps its icon+text here so a tight host can hide/fade the LABEL while the
   .ct-invr-pop hover-card, its sibling, stays unclipped). */
.ct-invr-chip-txt { display:inline-flex; align-items:center; gap:.25rem; min-width:0; }
.ct-invr-keymin .ct-invr-chip-txt { gap:0; }
.ct-invr-chip--sold { color:var(--ct-danger); background:var(--ct-danger-soft); }
.ct-invr-chip--warn { color:var(--ct-warning); background:var(--ct-warning-soft); }
.ct-invr-chip--quiet { color:var(--ct-text-muted); background:var(--ct-neutral-soft); }
/* CRM appointment — "a customer is coming for this car" (info-soft pill,
   matching the key/diagnostic badges' height so it sits inline with them). */
.ct-invr-chip--appt { color:var(--ct-info); background:var(--ct-info-soft); }
.ct-invr-chip--appt small { font-weight:600; opacity:.7; }
/* Unregistered key — the SAME filled neutral pill as the registered "in box"
   chip (--quiet), just a little key sign with no text (the hover-card carries
   "unregistered" + in/out). An icon has no text line-box, so pin the height to
   the text pills' (.08rem padding + 1.5 × .64rem line) — else it collapses to a
   squished mini-chip that reads as "from a different world". */
.ct-invr-keymin { gap:0; padding:0 .45rem; min-height:calc(.16rem + 1.5 * .64rem); }
/* CRITICAL: unregistered AND still in the box — it won't show in a keybox
   search, so it can't be located. A blinking amber key+! pill so it can't be
   missed. */
.ct-invr-keymin--alert { color:var(--ct-warning); background:var(--ct-warning-soft);
    gap:.12rem; animation:ct-label-blink 1.2s ease-in-out infinite; }
.ct-invr-keymin-x { font-size:.56rem; }
@media (prefers-reduced-motion: reduce) { .ct-invr-keymin--alert { animation:none; } }
.ct-invr-phase { margin-left:auto; font-size:.7rem; font-weight:700; white-space:nowrap; display:inline-flex;
    align-items:baseline; gap:.35rem; }
.ct-invr-phase small { font-size:.66rem; font-weight:600; color:var(--ct-text-faint); }
/* Delayed recon stage — the marker turns red and carries the over-goal amount. */
.ct-invr-phase-warn { font-size:.62rem; color:var(--ct-danger); }
.ct-invr-late { color:var(--ct-danger); font-weight:700; }
/* Right rail on line 1: the phase/time status marker on top, the KEY status
   stacked beneath it — two right-aligned lines. The key hover-card right-anchors
   here so a far-right chip's popup never clips off the row's right edge. */
.ct-invr-r { grid-column:3; grid-row:1 / span 2; justify-self:end; align-self:start;
    display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; min-width:0; }
.ct-invr-r .ct-invr-phase { margin-left:0; }
.ct-invr-r .ct-invr-pop { left:auto; right:0; }

/* — Line 2: the dense meta line, v1's dotted separators — */
.ct-invr-l2 { display:flex; flex-wrap:wrap; align-items:center; row-gap:.15rem; font-size:.73rem;
    color:var(--ct-text-muted); min-width:0; }
.ct-invr-m { display:inline-flex; align-items:center; gap:.25rem; min-width:0; }
.ct-invr-m + .ct-invr-m::before { content:'\22EE'; padding:0 .5rem; color:var(--ct-hairline); font-size:.7rem; }
.ct-invr-m strong { font-weight:700; color:var(--ct-text-strong); }
.ct-invr-m i { font-size:.64rem; color:var(--ct-text-faint); }
.ct-invr-mbtn { border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer;
    display:inline-flex; align-items:center; gap:.25rem; }
.ct-invr-mbtn:hover, .ct-invr-mbtn:hover strong, .ct-invr-mbtn:hover i { color:var(--ct-accent); }
/* Per-STATUS overstay flag on the meta-line status (past this status's own goal) —
   red, independent of the right-rail phase-group delay. */
.ct-invr-status-over { color:var(--ct-danger); font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; gap:.2rem; }
.ct-invr-mbtn--over strong { color:var(--ct-danger); }
.ct-invr-mbtn--over:hover .ct-invr-status-over, .ct-invr-status-over i { color:var(--ct-danger); }
/* Vehicle-page per-status overstay banner. */
.ct-veh-status-over { display:flex; align-items:center; gap:.5rem; margin:0 0 .85rem; padding:.5rem .7rem; border-radius:var(--ct-r-md,.55rem); font-size:.82rem; color:var(--ct-danger); background:var(--ct-danger-soft); border:1px solid color-mix(in srgb, var(--ct-danger,#9f3a38) 35%, transparent); }

/* ── Recon stats card (filament.dealer.partials.vehicle-stats) ─────────────── */
/* Bare — no card block. It sits tight under the stage path as just a header +
   bar; the details reveal in a white box on click. */
.ct-stats { margin:0 0 .85rem; }
/* Header doubles as the expand/collapse control — the section is clean (just the
   bar) until opened. Padding (not margin) on collapsing regions so x-collapse
   animates the gap away too, leaving no phantom space when closed. */
.ct-stats-hd { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; cursor:pointer; user-select:none; border-radius:var(--ct-r-sm,.4rem); outline:none; }
.ct-stats-hd h3 { margin:0; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ct-text-faint); display:flex; align-items:center; gap:.4rem; }
.ct-stats-hd h3 i { font-size:.68rem; color:var(--ct-text-faint); }
.ct-stats-hd:hover .ct-stats-toggle, .ct-stats-hd:focus-visible .ct-stats-toggle { color:var(--ct-accent); }
.ct-stats-hd:focus-visible { box-shadow:0 0 0 2px var(--ct-accent-soft); }
.ct-stats-toggle { display:inline-flex; align-items:center; gap:.32rem; flex:0 0 auto; font-size:.7rem; font-weight:600; color:var(--ct-text-muted); text-transform:none; letter-spacing:normal; transition:color .12s ease; }
.ct-stats-chev { font-size:.64rem; transition:transform .2s ease; }
.ct-stats-chev--up { transform:rotate(180deg); }
.ct-stats-track--closed { cursor:pointer; }
/* Details box — the collapsing WRAPPER carries no border/bg (so x-collapse leaves
   no line when closed); the inner .ct-stats-box is the white card. Padding-top on
   the wrapper animates the open gap away too. */
.ct-stats-boxwrap { padding-top:.6rem; }
.ct-stats-box { background:var(--ct-surface); border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.75rem); padding:.85rem 1rem; box-shadow:var(--ct-shadow-sm); }
.dark .ct-stats-box { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
/* Headline tiles — at the foot of the box, set off by a hairline. */
.ct-stats-heads { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; padding-top:.75rem; border-top:1px solid var(--ct-hairline-soft); }
.ct-stats-heads:first-child { margin-top:0; padding-top:0; border-top:none; }
.ct-stats-head { flex:1 1 8rem; min-width:7rem; padding:.5rem .65rem; border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); }
.ct-stats-head--warn { background:var(--ct-warning-soft); border-color:color-mix(in srgb, var(--ct-warning) 30%, transparent); }
.ct-stats-head--danger { background:var(--ct-danger-soft); border-color:color-mix(in srgb, var(--ct-danger) 30%, transparent); }
.ct-stats-head-n { display:block; font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.ct-stats-head-l { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-muted); margin-top:.1rem; }
.ct-stats-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .7rem; }
.ct-stats-tab { display:inline-flex; align-items:baseline; gap:.35rem; padding:.3rem .6rem; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--ct-text-muted); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); cursor:pointer; }
.ct-stats-tab small { font-weight:500; opacity:.8; }
.ct-stats-tab--on { color:#fff; background:var(--ct-accent); border-color:var(--ct-accent); }
.ct-stats-tab--total { font-weight:700; }
.ct-stats-tab--total:not(.ct-stats-tab--on) { color:var(--ct-accent); border-color:color-mix(in srgb, var(--ct-accent) 40%, transparent); }
.ct-stats-typelabel { font-size:.78rem; color:var(--ct-text-muted); margin-bottom:.5rem; }
.ct-stats-typelabel i { color:var(--ct-accent); margin-right:.25rem; }
/* the status bar — one rounded segment per stage, split into the within-goal
   part (solid stage colour) and the over-goal part (hatched red) */
.ct-stats-track { display:flex; gap:2px; height:.85rem; margin:.1rem 0 0; }
/* Segment wrapper = the flex-sized, positioned host for the hover card; the
   inner .ct-stats-seg keeps the clipped rounded fill. Hover / focus / tap (the
   wrapper is focusable) opens the designed popover (reuses .ct-rt-pop styles). */
.ct-stats-segw { position:relative; display:flex; min-width:4px; cursor:default; outline:none; transition:transform .1s ease; }
.ct-stats-segw > .ct-stats-seg { flex:1 1 auto; width:100%; }
.ct-stats-segw:hover { z-index:2; transform:translateY(-1px); }
.ct-stats-segw:hover > .ct-stats-seg, .ct-stats-segw:focus-visible > .ct-stats-seg { box-shadow: inset 0 0 0 1px var(--ct-accent); }
.ct-stats-segw:hover > .ct-rt-pop, .ct-stats-segw:focus > .ct-rt-pop, .ct-stats-segw:focus-within > .ct-rt-pop { display:flex; }
.ct-stats-seg { display:flex; min-width:4px; border-radius:.28rem; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.ct-stats-seg-in { min-width:2px; }
.ct-stats-seg-over { min-width:2px; background-color:var(--ct-danger,#9f3a38); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.4) 0 2px, transparent 2px 5px); }
/* The bar's hover card — a touch narrower than the recon-tip default. */
.ct-stats-pop { min-width:12.5rem; }
.ct-stats-pop .ct-rt-share { margin-left:auto; color:var(--ct-text-faint); font-size:.62rem; font-weight:600; }
.ct-stats-pop .ct-stats-re { margin-left:.1rem; background:var(--ct-neutral-soft); border-radius:999px; padding:0 .32rem; font-size:.6rem; font-weight:800; color:var(--ct-text-muted); }
/* state pills — one per stage */
.ct-stats-pills { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.ct-stats-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.24rem .55rem; border-radius:999px; font-size:.75rem; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); }
.ct-stats-pill-lbl { font-weight:600; }
.ct-stats-pill-tm { font-weight:700; letter-spacing:-.01em; }
.ct-stats-pill-st { display:inline-flex; align-items:center; gap:.2rem; font-size:.68rem; font-weight:600; }
.ct-stats-pill--goal { border-color:color-mix(in srgb, var(--ct-success) 35%, transparent); }
.ct-stats-pill--goal .ct-stats-pill-st { color:var(--ct-success); }
.ct-stats-pill--over { background:var(--ct-danger-soft); border-color:color-mix(in srgb, var(--ct-danger) 38%, transparent); }
.ct-stats-pill--over .ct-stats-pill-st { color:var(--ct-danger); }
.ct-stats-pill--limbo { font-style:italic; color:var(--ct-text-faint); }
.ct-stats-re { display:inline-flex; align-items:center; padding:0 .32rem; border-radius:999px; font-size:.64rem; font-weight:700; color:var(--ct-accent); background:var(--ct-accent-soft); }
/* phase-group chips */
.ct-stats-gchips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.55rem; }
.ct-stats-gchip { display:inline-flex; align-items:center; gap:.3rem; padding:.24rem .55rem; border-radius:.45rem; font-size:.73rem; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); }
.ct-stats-gchip-st { display:inline-flex; align-items:center; gap:.2rem; color:var(--ct-danger); font-weight:700; font-size:.68rem; }
.ct-stats-gchip--over { background:var(--ct-danger-soft); border-color:color-mix(in srgb, var(--ct-danger) 38%, transparent); }
.ct-stats-gchip--goal { border-color:color-mix(in srgb, var(--ct-success) 30%, transparent); }
.ct-stats-ok { color:var(--ct-success); }
/* details toggle + panel */
.ct-stats-more { display:inline-flex; align-items:center; gap:.35rem; margin:.1rem 0 .2rem; padding:.15rem .1rem; font-size:.74rem; font-weight:600; color:var(--ct-accent); background:none; border:none; cursor:pointer; }
.ct-stats-more:hover { text-decoration:underline; }
.ct-stats-detail { margin-top:.4rem; }
.ct-stats-frozen { font-size:.66rem; font-weight:600; color:var(--ct-text-muted); }
/* ── Itemised "Lost to overstays" — one figure, broken into its non-overlapping
   parts (each phase group's cost past goal + limbo). Sums to the headline. */
.ct-stats-loss { margin:0 0 .6rem; padding:.5rem .65rem; border-radius:var(--ct-r-md,.55rem); background:color-mix(in srgb, var(--ct-danger) 6%, var(--ct-surface-sunken)); border:1px solid color-mix(in srgb, var(--ct-danger) 22%, transparent); }
.ct-stats-loss-hd { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.74rem; font-weight:700; color:var(--ct-danger); }
.ct-stats-loss-hd i { margin-right:.3rem; }
.ct-stats-loss-hd b { font-size:.9rem; font-variant-numeric:tabular-nums; }
.ct-stats-loss-items { list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:.15rem; }
.ct-stats-loss-items li { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.76rem; color:var(--ct-text-muted); }
.ct-stats-loss-items li > span { display:inline-flex; align-items:center; min-width:0; }
.ct-stats-loss-items li b { font-variant-numeric:tabular-nums; color:var(--ct-text); }
.ct-stats-loss--limbo { font-style:italic; }
.ct-stats-loss-items li[title] { cursor:help; }
.ct-stats-tbl { width:100%; border-collapse:collapse; font-size:.8rem; }
.ct-stats-tbl th { text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); font-weight:600; padding:.2rem .4rem; border-bottom:1px solid var(--ct-hairline); }
.ct-stats-tbl th:not(:first-child), .ct-stats-tbl td:not(:first-child) { text-align:right; white-space:nowrap; }
.ct-stats-tbl td { padding:.32rem .4rem; border-bottom:1px solid var(--ct-hairline-soft); }
.ct-stats-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:2px; margin-right:.4rem; vertical-align:-1px; }
.ct-stats-muted { color:var(--ct-text-faint); }
.ct-stats-row--over td { color:var(--ct-danger); }
.ct-stats-row--limbo td { color:var(--ct-text-faint); font-style:italic; }
.ct-stats-grouphead td { padding-top:.5rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); font-weight:600; border-bottom:none; }
.ct-stats-groups tr:last-child td { border-bottom:none; }
.ct-stats-postsale { display:flex; align-items:center; gap:.5rem; margin-top:.8rem; padding:.45rem .65rem; border-radius:var(--ct-r-md,.55rem); font-size:.76rem; color:var(--ct-text-muted); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); }
.ct-stats-postsale i { color:var(--ct-accent); }
/* ── Recon-timing hover card (filament.dealer.partials.recon-tip) — the nicely
   formatted replacement for the cramped native `title` on the recon status pill /
   row marker. The host adds .ct-rt (position context) + tabindex to its trigger. */
/* The wrapper (NOT the trigger itself — the pill/button clips overflow for its
   label ellipsis, which would clip the popover). */
.ct-rt { position:relative; display:inline-flex; align-items:center; min-width:0; }
.ct-rt-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:14rem; max-width:20rem;
    display:none; flex-direction:column; gap:.26rem; padding:.55rem .7rem; text-align:left; cursor:default;
    background:var(--ct-surface); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md);
    box-shadow:var(--ct-shadow-pop); font-size:.72rem; font-weight:500; color:var(--ct-text-muted);
    white-space:normal; line-height:1.4; letter-spacing:0; text-transform:none; }
.ct-rt:hover > .ct-rt-pop, .ct-rt:focus > .ct-rt-pop, .ct-rt:focus-within > .ct-rt-pop { display:flex; }
/* Right-anchored variant (the inventory right rail sits at the row's right edge). */
.ct-rt--r > .ct-rt-pop { left:auto; right:0; }
.ct-rt-title { font-weight:700; font-size:.72rem; color:var(--ct-text-strong); display:flex; align-items:center; gap:.4rem; padding-bottom:.22rem; margin-bottom:.05rem; border-bottom:1px solid var(--ct-hairline-soft); }
.ct-rt-title i { color:var(--ct-accent); font-size:.7rem; }
.ct-rt-row { display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; color:var(--ct-text-muted); }
.ct-rt-row b { color:var(--ct-text-strong); font-weight:650; }
.ct-rt-k { color:var(--ct-text-faint); flex:0 0 auto; text-transform:uppercase; font-size:.6rem; font-weight:700; letter-spacing:.04em; align-self:center; }
.ct-rt-line { display:flex; align-items:center; gap:.32rem; padding-left:.15rem; }
.ct-rt-line i { font-size:.64rem; flex:0 0 auto; }
.ct-rt-over { color:var(--ct-danger); font-weight:700; }
.ct-rt-ok { color:var(--ct-success); font-weight:600; }
.ct-rt-since { margin-top:.15rem; padding-top:.22rem; border-top:1px solid var(--ct-hairline-soft); color:var(--ct-text-faint); font-size:.66rem; }

/* — Line 3: the tool strip — every operation from the line — */
.ct-invr-tools { display:flex; align-items:center; gap:.3rem; margin-top:.25rem; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:.1rem; }
.ct-invr-tools::-webkit-scrollbar { display:none; }
.ct-invr-tool { flex:0 0 auto; display:inline-flex; align-items:center; gap:0; height:1.75rem; padding:0 .55rem;
    border-radius:.45rem; border:1px solid var(--ct-hairline); background:transparent; color:var(--ct-text-muted);
    font-size:.7rem; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:border-color .12s ease, color .12s ease, background .12s ease; }
.ct-invr-tool:hover { border-color:var(--ct-accent); color:var(--ct-accent); background:var(--ct-accent-soft); }
.ct-invr-tool i { font-size:.66rem; }
/* Icon-only at rest — the label slides out on THAT pill's hover/focus (the
   tooltip still carries it for touch, where hover doesn't exist). */
.ct-invr-tool .lbl { max-width:0; opacity:0; overflow:hidden; margin-left:0;
    transition:max-width .18s ease, opacity .12s ease, margin-left .18s ease; }
.ct-invr-tool:hover .lbl, .ct-invr-tool:focus-visible .lbl,
.ct-invr-tool--split:hover .lbl, .ct-invr-tool--split:focus-within .lbl { max-width:7rem; opacity:1; margin-left:.32rem; }
.ct-invr-tool .ct-invr-n { margin-left:.32rem; }
.ct-invr-tool--attn { color:var(--ct-warning); border-color:color-mix(in srgb, var(--ct-warning) 55%, transparent); }
.ct-invr-tool--attn:hover { border-color:var(--ct-warning); color:var(--ct-warning); background:var(--ct-warning-soft); }
.ct-invr-n { font-size:.6rem; font-weight:800; background:var(--ct-neutral-soft); border-radius:999px;
    padding:.05rem .32rem; min-width:.95rem; text-align:center; line-height:1.2; }
.ct-invr-tool--attn .ct-invr-n { background:var(--ct-warning-soft); color:var(--ct-warning); }

/* Designed hover-card (the key chip &co): a structured popover — title +
   icon rows — instead of a bare title tooltip. Opens on hover/focus; the
   wrapper is focusable (tabindex) so touch taps open it too. */
.ct-invr-hov { position:relative; }
.ct-invr-pop { position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:15rem; max-width:21rem;
    display:none; flex-direction:column; gap:.32rem; padding:.6rem .75rem; text-align:left; cursor:default;
    background:var(--ct-surface); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md);
    box-shadow:var(--ct-shadow-pop); font-size:.72rem; font-weight:500; color:var(--ct-text-muted);
    white-space:normal; line-height:1.4; }
.ct-invr-hov:hover .ct-invr-pop,
.ct-invr-hov:focus .ct-invr-pop,
.ct-invr-hov:focus-within .ct-invr-pop { display:flex; }
.ct-invr-pop-title { font-weight:700; font-size:.74rem; color:var(--ct-text-strong); display:flex;
    align-items:center; gap:.4rem; padding-bottom:.15rem; border-bottom:1px solid var(--ct-hairline-soft); }
.ct-invr-pop-row { display:flex; align-items:baseline; gap:.45rem; }
.ct-invr-pop-row i { width:.95rem; flex:0 0 auto; text-align:center; color:var(--ct-text-faint); font-size:.64rem; }
.ct-invr-pop-row b { color:var(--ct-text-strong); font-weight:650; }
/* The recon bar's per-stage colour dot (the bar's stats hover card). */
.ct-invr-pop-dot { width:.55rem; height:.55rem; border-radius:2px; flex:0 0 auto; align-self:center; }
.ct-invr-media .ct-invr-hov { outline:none; }
.ct-invr-pop-body { display:flex; flex-direction:column; gap:.32rem; min-width:0; }
/* OUT card with a checkout snapshot: two columns — the facts on the left, the
   cabinet camera's picture of who took the key on the right (dormant until the
   keybox exposes it). */
.ct-invr-pop--img { flex-direction:row; align-items:flex-start; gap:.7rem; min-width:19rem; }
.ct-invr-pop-img-wrap { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.ct-invr-pop-img-wrap img { width:5.5rem; height:5.5rem; object-fit:cover; border-radius:var(--ct-r-sm);
    border:1px solid var(--ct-hairline); }
.ct-invr-pop-img-cap { font-size:.6rem; color:var(--ct-text-faint); display:inline-flex; align-items:center; gap:.25rem; }

/* A transaction's cabinet-camera snapshot in the key-history modal (dormant
   until Keyper serves images) — a square thumb with a camera badge,
   click-to-enlarge through the shared lightbox. */
.ct-keyimg { position:relative; width:2.6rem; height:2.6rem; flex:0 0 auto; padding:0; border:0;
    border-radius:.5rem; overflow:hidden; background:var(--ct-surface-sunken); cursor:zoom-in; }
.ct-keyimg img { width:100%; height:100%; object-fit:cover; display:block; }
.ct-keyimg-badge { position:absolute; bottom:0; right:0; display:flex; align-items:center; justify-content:center;
    width:1rem; height:1rem; font-size:.55rem; color:#fff; background:rgba(0,0,0,.6); border-top-left-radius:.35rem; }
/* A cabinet snapshot that's still being fetched (the async portal scrape) —
   a subtle spinning placeholder sized like the thumb, no zoom cursor. */
.ct-keyimg--loading { display:flex; align-items:center; justify-content:center;
    cursor:default; color:var(--ct-text-faint); font-size:.85rem; }

/* Click-to-copy (VIN / stock #): the value itself copies on click; the little
   copy glyph reveals on hover (faintly always-on for touch). .ct-copy adds
   the behaviour without touching the host's chrome; --bare is the reset for
   inline text (a raw <button> brings UA borders/padding). */
.ct-copy { cursor:copy; font:inherit; }
.ct-copy:hover { color:var(--ct-accent); }
.ct-copy--bare { border:0; background:none; padding:0; color:inherit;
    display:inline-flex; align-items:center; gap:.3rem; text-align:left; }
.ct-copy-ic { opacity:0; font-size:.62rem; color:var(--ct-text-faint); transition:opacity .12s ease; }
.ct-copy:hover .ct-copy-ic { opacity:1; color:var(--ct-accent); }
.ct-copy-ic .fa-check { color:var(--ct-success); }
@media (pointer:coarse) { .ct-copy-ic { opacity:.55; } }
/* --ovl: NO reserved icon space — the confirmation is a brief "✓ Copied" pill
   OVERLAYING the value itself on click (used where horizontal room is tight,
   e.g. the task card's VIN/stock line). Hover hints with a dotted underline. */
.ct-copy--ovl { position:relative; }
.ct-copy--ovl:hover { text-decoration:underline dotted; text-underline-offset:2px; }
.ct-copy-ovl { position:absolute; inset:-2px -5px; display:inline-flex; align-items:center; justify-content:center; gap:.3rem;
    background:var(--ct-success, #16a34a); color:#fff; border-radius:.4rem; font-size:.62rem; font-weight:700; letter-spacing:.02em; z-index:2; font-family:var(--ct-font, Inter, sans-serif); }
/* The vehicle-page highlights + facts: their copy buttons reveal on hover too. */
.ct-veh-hli .ct-veh-copy, .ct-veh-fact .ct-veh-copy { opacity:0; transition:opacity .12s ease, color .12s ease; }
.ct-veh-hli:hover .ct-veh-copy, .ct-veh-fact:hover .ct-veh-copy, .ct-veh-copy:focus { opacity:1; }
@media (pointer:coarse) { .ct-veh-hli .ct-veh-copy, .ct-veh-fact .ct-veh-copy { opacity:.55; } }

/* Split tool (Tasks): the main area opens the view modal; a "+" second target
   reveals on hover / focus (always visible on touch — no hover there). */
.ct-invr-tool--split { padding:0; overflow:hidden; }
.ct-invr-split-main { display:inline-flex; align-items:center; gap:0; height:100%; padding:0 .55rem;
    border:0; background:none; color:inherit; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap; }
.ct-invr-split-plus { display:inline-flex; align-items:center; justify-content:center; height:100%; width:0;
    padding:0; border:0; border-left:0 solid var(--ct-hairline); background:none; color:inherit; cursor:pointer;
    opacity:0; overflow:hidden; transition:width .15s ease, opacity .15s ease; }
.ct-invr-tool--split:hover .ct-invr-split-plus,
.ct-invr-tool--split:focus-within .ct-invr-split-plus { width:1.7rem; opacity:1; border-left-width:1px; }
.ct-invr-split-plus:hover { color:var(--ct-accent); background:var(--ct-accent-soft); }
.ct-invr-split-plus i { font-size:.66rem; }

@media (pointer:coarse) {
    .ct-invr-tool { height:2.25rem; font-size:.78rem; }
    .ct-invr-tool:not(.ct-invr-tool--split) { padding:0 .65rem; }
    .ct-invr-split-main { padding:0 .65rem; }
    .ct-invr-tool i { font-size:.8rem; }
    /* Touch has no hover — the "+" target is always out. */
    .ct-invr-split-plus { width:2.1rem; opacity:1; border-left-width:1px; }
}
@media (max-width:640px) {
    /* Phone layout — EXPLICIT areas (auto-placement once dropped the meta line
       into the 4.6rem thumb column, stacking every item in a ~70px sliver):
       thumb + bar left · title then the phase/key rail beside it · meta line
       and tool strip full-width below. */
    .ct-invr { position:relative; grid-template-columns:4.6rem minmax(0, 1fr); gap:.2rem .6rem;
        grid-template-areas:'media l1' 'media r' 'l2 l2' 'tools tools'; }
    .ct-invr-media { grid-area:media; width:4.6rem; }
    .ct-invr-thumb, .ct-invr-bar { width:4.6rem; }
    .ct-invr-thumb { height:3.2rem; }
    .ct-invr-l1 { grid-area:l1; align-content:flex-start; }
    /* The right rail tucks under the title, beside the thumb — one wrapping
       line: phase + time-in-stage, then the key chip. */
    .ct-invr-r { grid-area:r; justify-self:start; align-self:start;
        flex-direction:row; flex-wrap:wrap; align-items:center; gap:.2rem .55rem; }
    .ct-invr-l2 { grid-area:l2; row-gap:.25rem; }
    /* The meta line wraps constantly on phones, so a "divider" glyph (⋮) would
       orphan at the start of every wrapped line. A centred middot reads as an
       intentional bullet wherever it lands — including a line start. */
    .ct-invr-m + .ct-invr-m::before { content:'\00B7'; padding:0; margin:0 .42rem;
        color:var(--ct-text-faint); font-size:1rem; line-height:0; }
    .ct-invr-tools { grid-area:tools; }
    /* Popovers become card-wide sheets: the hover wrapper goes STATIC so the
       CARD is the containing block — left/right pin the width to the card and
       top drops the panel just below the row. Never clips off a phone screen. */
    .ct-invr-hov { position:static; }
    .ct-invr-pop, .ct-invr-r .ct-invr-pop { top:calc(100% + 4px); left:.35rem; right:.35rem;
        min-width:0; max-width:none; }
}

/* ============================================================================
   System user details (.ct-us-*) — the access-summary rail on the user edit
   page: memberships, linked sign-ins, API tokens, notification setup. Follows
   the user-activity component's vocabulary (section labels + bordered rows).
   ========================================================================== */
.ct-us-rows { display:flex; flex-direction:column; gap:.45rem; }
.ct-us-row { display:flex; align-items:center; gap:.65rem; padding:.5rem .7rem; border-radius:var(--ct-r-md);
    border:1px solid var(--ct-hairline-soft); background:var(--ct-surface); }
.dark .ct-us-row { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
.ct-us-row > i { width:1rem; text-align:center; color:var(--ct-text-faint); font-size:.85rem; flex:0 0 auto; }
.ct-us-main { flex:1 1 auto; min-width:0; }
.ct-us-title { font-size:.8rem; font-weight:600; color:var(--ct-text-strong); display:flex; align-items:center;
    flex-wrap:wrap; gap:.35rem; }
.ct-us-meta { font-size:.7rem; color:var(--ct-text-faint); margin-top:.05rem; }
.ct-us-empty { font-size:.78rem; color:var(--ct-text-faint); }
.ct-us-facts { display:flex; flex-wrap:wrap; gap:.3rem; }

/* ============================================================================
   Dark-mode gap fixes for existing components (global-search pills + icon
   badges, tasks-board chrome) — the light values live at their definitions;
   these append the missing .dark variants so both themes read correctly.
   ========================================================================== */
.dark .ct-gs-pill--info    { background:rgba(34,167,224,.22); color:#8fd6f5; }
.dark .ct-gs-pill--success { background:rgba(22,163,74,.24);  color:#7fd6a8; }
.dark .ct-gs-pill--warning { background:rgba(217,119,6,.26);  color:#f3c66f; }
.dark .ct-gs-pill--danger  { background:rgba(220,38,38,.24);  color:#f2a09d; }
.dark .ct-gs-pill--neutral { background:rgba(255,255,255,.08); color:#a1a1a6; }
.dark .ic-task     { background:rgba(139,92,246,.2);  color:#c4b0f7; }
.dark .ic-note     { background:rgba(217,119,6,.2);   color:#f0c184; }
.dark .ic-location { background:rgba(22,163,74,.2);   color:#7fd6a8; }
.dark .ic-account  { background:rgba(72,109,180,.24); color:#a9c4ee; }
.dark .ic-user     { background:rgba(148,163,184,.18); color:#b8c4d4; }
.dark .ic-part     { background:rgba(249,115,22,.2);  color:#f8b98a; }
.dark .ct-gs-acc--cur { color:#7fd6a8; }

/* Tasks board: an overdue card can't hide behind its left border alone — a
   faint danger wash backs the whole card, both themes. Reorder chevrons
   became FontAwesome (they were bare unicode ▲▼). */
.ct-task--overdue { background:rgba(220,38,38,.035); }
.dark .ct-task--overdue { background:rgba(220,38,38,.09); }
.ct-task-reorder button i { font-size:.6rem; }
/* Touch has no hover and no precision — enlarge the tiny controls (same
   treatment the inventory icon buttons get). */
@media (pointer:coarse) {
    .ct-task-reorder button { padding:.3rem .45rem; }
    .ct-task-reorder button i { font-size:.8rem; }
    .ct-veh-copy { padding:.35rem .45rem; font-size:.85rem; }
}

/* ============================================================================
   Activity / audit — clickable history-row links (WHO + the caused-by Task #)
   and the shared body-level "peek" modals (task view + user info). Used by the
   vehicle Activity card, the inventory History modal, and the dealer Activity
   log. Light + dark via the --ct-* tokens.
   ========================================================================== */
.ct-audit-tasklink,
.ct-audit-actor {
    appearance:none; background:none; border:none; padding:0; margin:0;
    font:inherit; color:var(--ct-accent); cursor:pointer; text-decoration:none;
}
.ct-audit-tasklink { font-weight:600; }
.ct-audit-tasklink:hover,
.ct-audit-actor:hover { text-decoration:underline; }

.ct-audit-modal-overlay {
    position:fixed; inset:0; z-index:60;
    display:flex; align-items:flex-start; justify-content:center;
    padding:5vh 1rem; overflow-y:auto;
}
.ct-audit-modal-backdrop {
    position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(2px);
}
.ct-audit-modal {
    position:relative; width:100%; max-width:620px;
    background:var(--ct-surface); color:var(--ct-text);
    border:1px solid var(--ct-border); border-radius:var(--ct-r-lg);
    box-shadow:var(--ct-shadow-pop);
    max-height:90vh; display:flex; flex-direction:column;
}
.ct-audit-modal--wide { max-width:760px; }
/* Task-view modal hosts the FULL interactive task card: wider, and its overlay
   sits BELOW Filament's action-modal layer (backdrop z-40 / window z-50) so the
   card's own action modals render ON TOP — while still above the panel chrome
   (sidebar/topbar z-30). The edit modal (.ct-tm-overlay z-9999) also stacks above. */
.ct-audit-modal-overlay--card { z-index:35; }
.ct-audit-modal--card { max-width:880px; max-height:94vh; }
.ct-audit-modal--card .ct-audit-modal-body { padding:1rem; background:var(--ct-canvas); }
.ct-audit-modal-headr { display:flex; align-items:center; gap:.75rem; flex:0 0 auto; }
.ct-audit-openpage { font-size:.8125rem; white-space:nowrap; }
.ct-audit-modal-head {
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.9rem 1.15rem; border-bottom:1px solid var(--ct-border); flex:0 0 auto;
}
.ct-audit-modal-head h3 { margin:0; font-size:1rem; font-weight:700; color:var(--ct-text-strong); }
.ct-audit-modal-x {
    appearance:none; background:none; border:none; cursor:pointer;
    font-size:1.5rem; line-height:1; color:var(--ct-text-muted);
}
.ct-audit-modal-x:hover { color:var(--ct-text-strong); }
.ct-audit-modal-body { padding:1.15rem; overflow-y:auto; }
.ct-audit-modal-foot {
    padding:.8rem 1.15rem; border-top:1px solid var(--ct-border);
    display:flex; justify-content:flex-end; flex:0 0 auto;
}
.ct-audit-empty { color:var(--ct-text-muted); font-size:.875rem; }
.ct-audit-note {
    margin-top:1rem; padding:.65rem .8rem; border-radius:var(--ct-r-md);
    background:var(--ct-surface-sunken); color:var(--ct-text-muted); font-size:.8125rem;
    display:flex; gap:.5rem; align-items:center;
}

/* Task-view summary */
.ct-audit-tk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.85rem; }
.ct-audit-tk-title { font-size:1.05rem; font-weight:650; color:var(--ct-text-strong); }
.ct-audit-tk-pills { display:flex; gap:.35rem; flex-wrap:wrap; flex:0 0 auto; }
.ct-audit-tk-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem .9rem; margin:0 0 1rem; }
.ct-audit-tk-meta dt { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); }
.ct-audit-tk-meta dd { margin:.1rem 0 0; font-size:.875rem; color:var(--ct-text); }
.ct-audit-tk-histhead { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); margin:.25rem 0 .55rem; }

/* User-info identity card */
.ct-audit-idcard { display:flex; gap:.9rem; align-items:center; }
.ct-audit-avatar { width:56px; height:56px; border-radius:var(--ct-r-pill); object-fit:cover; flex:0 0 auto; background:var(--ct-surface-sunken); }
.ct-audit-idname { font-size:1.05rem; font-weight:650; color:var(--ct-text-strong); }
.ct-audit-idrow { font-size:.85rem; color:var(--ct-text-muted); display:flex; gap:.45rem; align-items:center; margin-top:.15rem; }
.ct-audit-idpills { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.4rem; }
.ct-audit-idactivity { margin-top:1.1rem; border-top:1px solid var(--ct-border); padding-top:1rem; }

/* Dealer activity log — the merged who-did-what feed */
.ct-audit-feed { display:flex; flex-direction:column; margin-top:.9rem; border:1px solid var(--ct-border); border-radius:var(--ct-r-lg); overflow:hidden; background:var(--ct-surface); }
.ct-audit-row { display:flex; align-items:flex-start; gap:.8rem; padding:.7rem .95rem; border-top:1px solid var(--ct-hairline-soft); }
.ct-audit-row:first-child { border-top:none; }
.ct-audit-ricon {
    flex:0 0 auto; width:30px; height:30px; border-radius:var(--ct-r-pill);
    display:flex; align-items:center; justify-content:center;
    background:var(--ct-surface-sunken); color:var(--ct-text-muted); font-size:.8rem; margin-top:.05rem;
}
.ct-audit-row--task .ct-audit-ricon { color:var(--ct-info); }
.ct-audit-row--part .ct-audit-ricon { color:var(--ct-accent); }
.ct-audit-row--recon .ct-audit-ricon { color:var(--ct-success); }
.ct-audit-row--location .ct-audit-ricon { color:var(--ct-warning); }
.ct-audit-row--label .ct-audit-ricon { color:var(--ct-text-muted); }
.ct-audit-row--category .ct-audit-ricon { color:var(--ct-info); }
.ct-audit-row--mvi .ct-audit-ricon { color:var(--ct-success); }
.ct-audit-row--expense .ct-audit-ricon { color:var(--ct-warning); }
.ct-audit-rmain { min-width:0; flex:1 1 auto; }
.ct-audit-rtitle { font-size:.875rem; color:var(--ct-text-strong); font-weight:550; }
.ct-audit-titlelink {
    appearance:none; background:none; border:none; padding:0; margin:0; font:inherit; font-weight:550;
    color:var(--ct-text-strong); cursor:pointer; text-align:left;
}
.ct-audit-titlelink:hover { color:var(--ct-accent); text-decoration:underline; }
.ct-audit-rmeta { font-size:.75rem; color:var(--ct-text-muted); margin-top:.15rem; display:flex; flex-wrap:wrap; align-items:center; gap:.28rem; }
.ct-audit-rmeta .ct-audit-actor,
.ct-audit-rmeta .ct-audit-tasklink { font-size:.75rem; }
.ct-audit-veh { color:var(--ct-text-muted); text-decoration:none; display:inline-flex; align-items:center; gap:.28rem; }
.ct-audit-veh:hover { color:var(--ct-accent); text-decoration:underline; }
.ct-audit-sep { opacity:.5; }
.ct-audit-via {
    flex:0 0 auto; align-self:center; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    padding:.15rem .45rem; border-radius:var(--ct-r-pill); background:var(--ct-surface-sunken); color:var(--ct-text-muted);
}
.ct-audit-via--workflow { background:var(--ct-info-soft); color:var(--ct-info); }
.ct-audit-via--ai { background:var(--ct-accent-soft); color:var(--ct-accent); }
.ct-audit-via--feed,
.ct-audit-via--system { background:var(--ct-neutral-soft); color:var(--ct-text-muted); }
.ct-audit-more { text-align:center; padding:1rem; font-size:.8125rem; color:var(--ct-text-muted); }

/* ───────────────────────── Vehicle alerts (the vehicle-page watch bell) ──
   .ct-vw-* — the highlights-strip Alerts chip + its teleported modal (my
   alerts on this vehicle + the add-alert form). Modeled on the .ct-nc-*
   notification-center modal. Rendered by livewire/dealer/vehicle-watch-bell. */
.ct-vw { display:inline-flex; }
.ct-vw-btn { cursor:pointer; transition:border-color .12s ease, color .12s ease; }
.ct-vw-btn:hover { border-color:var(--ct-accent); }
.ct-vw-btn:hover i, .ct-vw-btn:hover b { color:var(--ct-accent); }
.ct-vw-btn--on i { color:var(--ct-accent); }
.ct-vw-n { min-width:1.05rem; height:1.05rem; display:inline-flex; align-items:center; justify-content:center;
    padding:0 .25rem; border-radius:var(--ct-r-pill); background:var(--ct-accent); color:#fff;
    font-size:.62rem; font-weight:700; line-height:1; }

.ct-vw-overlay { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-start;
    justify-content:center; padding:5vh 1rem 1rem; background:rgba(15,23,42,.45);
    backdrop-filter:blur(2px); }
.ct-vw-modal { width:36rem; max-width:100%; max-height:86vh; display:flex; flex-direction:column;
    background:var(--ct-surface); border:1px solid var(--ct-border); border-radius:var(--ct-r-lg);
    box-shadow:var(--ct-shadow-pop); overflow:hidden; }
.ct-vw-head { display:flex; align-items:center; gap:.55rem; padding:.9rem 1.1rem;
    border-bottom:1px solid var(--ct-border); font-size:.95rem; font-weight:650; color:var(--ct-text-strong); }
.ct-vw-head i { color:var(--ct-accent); }
.ct-vw-x { margin-left:auto; width:1.9rem; height:1.9rem; display:inline-flex; align-items:center;
    justify-content:center; border:0; border-radius:var(--ct-r-md); background:transparent; cursor:pointer;
    color:var(--ct-text-muted); font-size:.9rem; transition:background .12s ease, color .12s ease; }
.ct-vw-x:hover { background:var(--ct-surface-raised); color:var(--ct-text-strong); }
.ct-vw-body { overflow-y:auto; padding:.4rem 0 .9rem; }
.ct-vw-empty { padding:1.4rem 1.1rem .6rem; font-size:.8125rem; color:var(--ct-text-muted); }

.ct-vw-list { display:flex; flex-direction:column; padding:.4rem 0 .2rem; }
.ct-vw-item { display:flex; align-items:flex-start; gap:.65rem; padding:.6rem 1.1rem; }
.ct-vw-item + .ct-vw-item { border-top:1px solid var(--ct-hairline-soft); }
.ct-vw-item--fired { opacity:.72; }
.ct-vw-ic { flex:0 0 auto; width:2rem; height:2rem; display:inline-flex; align-items:center;
    justify-content:center; border-radius:50%; background:var(--ct-surface-sunken);
    color:var(--ct-text-muted); font-size:.78rem; }
.ct-vw-main { display:flex; flex-direction:column; gap:.18rem; min-width:0; flex:1 1 auto; }
.ct-vw-title { font-size:.8125rem; font-weight:600; color:var(--ct-text-strong); }
.ct-vw-meta { font-size:.72rem; color:var(--ct-text-muted); }
.ct-vw-tag { margin-left:.35rem; padding:.08rem .38rem; border-radius:var(--ct-r-pill);
    background:var(--ct-info-soft); color:var(--ct-info); font-size:.6rem; font-weight:600;
    text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; }
.ct-vw-deliv { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.2rem; }
.ct-vw-dchip { padding:.14rem .45rem; border-radius:var(--ct-r-pill); font-size:.64rem; font-weight:600; cursor:default; }
.ct-vw-dchip--success { background:var(--ct-success-soft); color:var(--ct-success); }
.ct-vw-dchip--info    { background:var(--ct-info-soft); color:var(--ct-info); }
.ct-vw-dchip--warning { background:var(--ct-warning-soft); color:var(--ct-warning); }
.ct-vw-dchip--danger  { background:var(--ct-danger-soft); color:var(--ct-danger); }
.ct-vw-dchip--neutral { background:var(--ct-neutral-soft); color:var(--ct-text-muted); }
.ct-vw-acts { margin-left:auto; display:inline-flex; gap:.25rem; flex:0 0 auto; }
.ct-vw-act { width:1.7rem; height:1.7rem; display:inline-flex; align-items:center; justify-content:center;
    border:0; border-radius:var(--ct-r-md); background:transparent; cursor:pointer;
    color:var(--ct-text-muted); font-size:.78rem; transition:background .12s ease, color .12s ease; }
.ct-vw-act:hover { background:var(--ct-surface-raised); color:var(--ct-text-strong); }
.ct-vw-act--x:hover { color:var(--ct-danger); }

.ct-vw-add { display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem;
    padding:.75rem 1.1rem 0; border-top:1px solid var(--ct-border); }
.ct-vw-add-label { font-size:.72rem; font-weight:650; color:var(--ct-text-strong);
    text-transform:uppercase; letter-spacing:.04em; }
.ct-vw-add-label i { color:var(--ct-accent); margin-right:.25rem; font-size:.66rem; }
.ct-vw-add-row { display:flex; align-items:center; flex-wrap:wrap; gap:.45rem; }
.ct-vw-select, .ct-vw-num { padding:.42rem .6rem; border:1px solid var(--ct-border);
    border-radius:var(--ct-r-md); background:var(--ct-surface); color:var(--ct-text);
    font-size:.78rem; max-width:100%; }
.ct-vw-select:focus, .ct-vw-num:focus { outline:none; border-color:var(--ct-accent); }
.ct-vw-num { width:6.5rem; }
.ct-vw-opts { row-gap:.35rem; }
.ct-vw-check { display:inline-flex; align-items:center; gap:.32rem; font-size:.74rem;
    color:var(--ct-text-muted); cursor:pointer; white-space:nowrap; }
.ct-vw-check input { accent-color:var(--ct-accent); }
.ct-vw-check--off { opacity:.55; }
.ct-vw-sep { width:1px; height:1rem; background:var(--ct-hairline-soft); margin:0 .2rem; }
.ct-vw-addbtn { margin-left:auto; padding:.42rem .85rem; border:0; border-radius:var(--ct-r-md);
    background:var(--ct-accent); color:#fff; font-size:.76rem; font-weight:650; cursor:pointer;
    transition:filter .12s ease; }
.ct-vw-addbtn:hover { filter:brightness(1.08); }
.ct-vw-addbtn:disabled { opacity:.45; cursor:not-allowed; }
.ct-vw-hint { font-size:.7rem; color:var(--ct-text-faint); }
.ct-vw-warn { display:inline-flex; align-items:flex-start; gap:.35rem; font-size:.72rem;
    color:var(--ct-warning); margin-top:.15rem; }
.ct-vw-warn i { margin-top:.12rem; font-size:.66rem; }
.ct-vw-item--editing { background:var(--ct-accent-soft); border-radius:var(--ct-r-md); }
.ct-vw-editcancel { border:0; background:none; padding:0; margin-left:.45rem; cursor:pointer;
    font-size:.66rem; font-weight:600; color:var(--ct-text-muted); text-transform:none; letter-spacing:0; }
.ct-vw-editcancel:hover { color:var(--ct-danger); text-decoration:underline; }
.ct-vw-note { font-size:.72rem; font-style:italic; color:var(--ct-text-muted); }
.ct-vw-text { width:100%; padding:.42rem .6rem; border:1px solid var(--ct-border);
    border-radius:var(--ct-r-md); background:var(--ct-surface); color:var(--ct-text); font-size:.78rem; }
.ct-vw-text:focus { outline:none; border-color:var(--ct-accent); }
.ct-vw-text::placeholder { color:var(--ct-text-faint); }
.ct-vw-tagcode { margin-left:.3rem; padding:.05rem .3rem; border:0; border-radius:var(--ct-r-sm);
    background:var(--ct-surface-sunken); font-size:.66rem; color:var(--ct-text-muted); cursor:pointer;
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace; transition:background .12s ease, color .12s ease; }
.ct-vw-tagcode:hover { background:var(--ct-accent-soft); color:var(--ct-accent); }
.ct-vw-preview { display:flex; align-items:flex-start; gap:.35rem; padding:.4rem .55rem;
    border-radius:var(--ct-r-md); background:var(--ct-surface-sunken); font-size:.74rem;
    color:var(--ct-text); }
.ct-vw-preview i { margin-top:.15rem; font-size:.62rem; color:var(--ct-text-faint); }

/* ============================================================
   Dealer dashboard page layer (.ctd-*)
   Page-scoped layout for filament/dealer/pages/dashboard.blade.php on top
   of the shared .ct-* library. Tokens only — light + dark safe. Scoped
   names so nothing leaks into the shared vocabulary.
   ============================================================ */

/* Page chrome: the (suppressed) Filament header keeps its slot small and the
   section gap stays ours — scoped to pages that actually contain the dashboard. */
.fi-page:has(.ctd-page) .fi-page-header-main-ctn { padding-top: 1.125rem; }
.fi-page:has(.ctd-page) .fi-page-content { gap: 0; }

.ctd-page { display: flex; flex-direction: column; gap: var(--ct-gap); }
.ctd-num { font-variant-numeric: tabular-nums; }
.ctd-push { margin-left: auto; }
.ctd-meta { font-size: .72rem; color: var(--ct-text-faint); }
.ctd-meta-link { text-decoration: none; }
.ctd-meta-link:hover { color: var(--ct-text-muted); text-decoration: underline; }
/* Stuck-card holding summary — totals read darker than the meta text around them. */
.ctd-holdsum b { color: var(--ct-text-strong); font-weight: 650; }
.ctd-holdsum .ctd-holdsum-over { color: var(--ct-danger); }
.ctd-dim { color: var(--ct-text-faint); }
.ctd-sec-label { margin-top: .9rem; }

/* --- page head ------------------------------------------------ */
.ctd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ctd-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--ct-text-strong); }
.ctd-sub { font-size: .75rem; color: var(--ct-text-faint); margin-top: .15rem; }
.ctd-head-actions { display: flex; gap: .5rem; align-items: center; }

/* --- KPI strip ------------------------------------------------- */
.ctd-stats { display: grid; gap: var(--ct-gap); grid-template-columns: repeat(7, 1fr); }
.ctd-stats .ct-stat-value { font-size: 1.45rem; }
.ctd-perday { font-size: .7rem; font-weight: 550; color: var(--ct-text-faint); margin-left: .15rem; }
.ctd-stat--alert { border-left: 3px solid var(--ct-danger); }
/* Clickable KPI tile (Over target → Inventory's Delayed view). */
a.ct-stat { text-decoration: none; }
.ctd-stat--link { cursor: pointer; transition: background .12s, border-color .12s; }
.ctd-stat--link:hover { background: var(--ct-hover); }
.ctd-stat--link:focus-visible { outline: 2px solid var(--ct-focus-ring); outline-offset: -2px; }
.ctd-delta { font-weight: 650; }
.ctd-delta--good { color: var(--ct-success); }
.ctd-delta--bad { color: var(--ct-danger); }

/* --- recon pipeline -------------------------------------------- */
.ctd-pipe { gap: .75rem; }
/* Mini-map + its hover legend (the old sparkline tooltip, CSS-only). The
   map's padding/negative-margin pair widens the thin bar's hover target
   without shifting layout; the legend ignores the pointer so it can't
   flicker while the cursor moves along the bar. */
.ctd-pipe-map { position: relative; padding: .2rem 0; margin: -.2rem 0; }
/* Standalone page-top variant (no card behind it) — a touch taller, tucked
   up under the page head so it reads as part of the header band. */
.ctd-pipe-map--page { margin-top: -.5rem; }
.ctd-pipe-map--page .ctd-pipe-bar { height: .625rem; }
.ctd-pipe-bar { display: flex; gap: 3px; height: .5rem; }
.ctd-pipe-bar span, .ctd-pipe-bar a { display: block; height: 100%; border-radius: var(--ct-r-pill); }
.ctd-pipe-bar a { transition: filter .12s; }
.ctd-pipe-bar a:hover { filter: brightness(1.12); }
.ctd-pipe-tip { position: absolute; top: calc(100% + .35rem); left: 50%; transform: translateX(-50%); z-index: 30;
                display: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1rem;
                width: max-content; max-width: 100%; padding: .5rem .8rem;
                background: var(--ct-surface); border: 1px solid var(--ct-hairline-soft);
                border-radius: var(--ct-r-md); box-shadow: var(--ct-shadow-pop); pointer-events: none; }
.ctd-pipe-map:hover .ctd-pipe-tip { display: flex; }
.ctd-pipe-tip-h { font-size: .72rem; font-weight: 700; color: var(--ct-text-muted); }
.ctd-pipe-tip-i { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--ct-text-strong); white-space: nowrap; }
.ctd-pipe-tip-i i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ctd-pipe-tip-i b { font-weight: 650; }
.ctd-pipe-tip-i small { color: var(--ct-text-faint); font-size: .66rem; font-weight: 500; }
.ctd-stages { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); }
.ctd-stage { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem .55rem; min-width: 0;
             background: var(--ct-surface-sunken); border: 1px solid var(--ct-hairline-soft); border-radius: var(--ct-r-sm);
             text-decoration: none; color: inherit; transition: background .12s, border-color .12s; }
.ctd-stage:hover { background: var(--ct-hover); border-color: var(--ct-hairline); }
.ctd-stage:focus-visible { outline: 2px solid var(--ct-focus-ring); outline-offset: -2px; }
/* Frontline-ready tile — tinted like its (purple) phase, not the success green. */
.ctd-stage--final { background: rgba(124, 108, 214, .10); }
.ctd-stage--final .ctd-stage-count { color: #6a59cc; }
.dark .ctd-stage--final { background: rgba(124, 108, 214, .22); }
.dark .ctd-stage--final .ctd-stage-count { color: #b3a7ee; }
.ctd-stage--empty { opacity: .55; }
.ctd-stage-name { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .72rem; font-weight: 600; color: var(--ct-text-muted); }
.ctd-stage-name .ct-dot { width: .45rem; height: .45rem; flex: 0 0 auto; }
.ctd-stage-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctd-stage-stuck { margin-left: auto; flex: 0 0 auto; font-size: .62rem; font-weight: 700; line-height: 1.15rem;
                   color: var(--ct-danger); background: var(--ct-danger-soft); border-radius: var(--ct-r-pill); padding: 0 .4rem; }
/* The badge doubles as its own link (stage's delayed vehicles) inside the tile anchor. */
.ctd-stage-stuck[role="link"] { cursor: pointer; transition: background .12s, color .12s; }
.ctd-stage-stuck[role="link"]:hover { background: var(--ct-danger); color: #fff; }
.ctd-stage-stuck[role="link"]:focus-visible { outline: 2px solid var(--ct-focus-ring); outline-offset: 1px; }
/* Open-tasks badge on the Frontline-ready KPI tile — a "ready" car that still
   has open work (ready ≠ done). Right-aligned in the label row (like the
   pipeline stage badges); amber for attention, distinct from the red delay. */
.ctd-stat-badge { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem;
                  font-size: .62rem; font-weight: 700; line-height: 1.1rem; color: var(--ct-warning);
                  background: var(--ct-warning-soft); border-radius: var(--ct-r-pill); padding: 0 .4rem; cursor: pointer;
                  transition: background .12s, color .12s; }
.ctd-stat-badge i { font-size: .55rem; }
.ctd-stat-badge:hover { background: var(--ct-warning); color: #fff; }
.ctd-stat-badge:focus-visible { outline: 2px solid var(--ct-focus-ring); outline-offset: 1px; }
/* Inline click-through segments of the "Needs your action" sub-line — each opens
   its own queue while the card as a whole opens the tasks board. */
.ctd-substat { cursor: pointer; border-radius: 3px; transition: color .12s; }
.ctd-substat:hover { color: var(--ct-text-muted); text-decoration: underline; }
.ctd-substat:focus-visible { outline: 2px solid var(--ct-focus-ring); outline-offset: 1px; }
.ctd-stage-count { font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; color: var(--ct-text-strong); }
.ctd-stage-dwell { font-size: .66rem; color: var(--ct-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctd-stage-track { height: 3px; border-radius: 2px; background: var(--ct-neutral-soft); margin-top: .4rem; overflow: hidden; }
.ctd-stage-track i { display: block; height: 100%; border-radius: 2px; }
.ctd-pipe-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem;
                 padding-top: .65rem; border-top: 1px solid var(--ct-hairline-soft); font-size: .7rem; color: var(--ct-text-faint); }
.ctd-pipe-foot b { color: var(--ct-text-muted); font-weight: 650; }
.ctd-foot-link { color: inherit; text-decoration: none; }
.ctd-foot-link:hover { color: var(--ct-text-muted); text-decoration: underline; }
/* Anchor targets (the Needs-your-action KPI jumps here) land below the topbar. */
.ctd-anchor { scroll-margin-top: 5.5rem; }

/* --- main grid -------------------------------------------------- */
.ctd-main { display: grid; gap: var(--ct-gap); grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr); align-items: start; }
.ctd-col { display: flex; flex-direction: column; gap: var(--ct-gap); min-width: 0; }
.ctd-duo { display: grid; gap: var(--ct-gap); grid-template-columns: 1fr 1fr; align-items: start; }
.ctd-duo .ct-svc-head { margin-top: .75rem; }

/* --- data tables ------------------------------------------------ */
.ctd-tablewrap { overflow-x: auto; margin: .25rem -.4rem 0; padding: 0 .4rem; }
.ctd-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ctd-table th { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ct-text-faint);
                text-align: left; padding: .45rem .65rem; border-bottom: 1px solid var(--ct-hairline-soft); white-space: nowrap; }
.ctd-table td { padding: .55rem .65rem; border-bottom: 1px solid var(--ct-hairline-soft); vertical-align: middle; color: var(--ct-text-muted); }
.ctd-table tbody tr:last-child td { border-bottom: 0; }
.ctd-table tbody tr:hover td { background: var(--ct-hover); }
.ctd-table .r { text-align: right; }
.ctd-veh-link { text-decoration: none; color: inherit; display: block; min-width: 0; }
.ctd-veh-link:hover .ctd-veh-name { color: var(--ct-accent); }
.ctd-veh-name { display: block; font-size: .82rem; font-weight: 600; color: var(--ct-text-strong); }
a.ctd-veh-name { text-decoration: none; }
a.ctd-veh-name:hover { color: var(--ct-accent); }
.ctd-veh-sub { display: block; font-size: .68rem; color: var(--ct-text-faint); margin-top: .05rem; }
.ctd-days { font-weight: 700; }
.ctd-days--warn { color: var(--ct-warning); }
.ctd-days--bad { color: var(--ct-danger); }
/* Stuck-table time-in-stage — the shared x-ct-duration component (big number,
   small unit, weeks/months), uppercased + colour-coded by how far over target. */
.ctd-age { text-transform: uppercase; }
.ctd-age .ct-dur-n { font-size: 1.05rem; font-weight: 700; }
.ctd-age--warn { color: var(--ct-warning); }
.ctd-age--bad { color: var(--ct-danger); }
.ctd-where { font-size: .75rem; color: var(--ct-text-muted); }

/* --- needs-you action rail -------------------------------------- */
.ctd-acts { display: flex; flex-direction: column; margin-top: .25rem; }
.ctd-act { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: var(--ct-r-sm);
           text-decoration: none; color: inherit; }
.ctd-act:hover { background: var(--ct-hover); }
.ctd-act:focus-visible { outline: 2px solid var(--ct-focus-ring); outline-offset: -2px; }
.ctd-act + .ctd-act { border-top: 1px solid var(--ct-hairline-soft); }
.ctd-act-count { min-width: 2.4rem; height: 2.4rem; padding: 0 .4rem; border-radius: var(--ct-r-sm); flex: 0 0 auto;
                 display: flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 700; }
.ctd-act-count--danger { background: var(--ct-danger-soft); color: var(--ct-danger); }
.ctd-act-count--warning { background: var(--ct-warning-soft); color: var(--ct-warning); }
.ctd-act-count--accent { background: var(--ct-accent-soft); color: var(--ct-accent); }
.ctd-act-count--info { background: var(--ct-info-soft); color: var(--ct-info); }
.ctd-act-body { flex: 1; min-width: 0; }
.ctd-act-title { display: block; font-size: .82rem; font-weight: 650; color: var(--ct-text-strong); }
.ctd-act-sub { display: block; font-size: .7rem; color: var(--ct-text-faint); margin-top: .05rem;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctd-act-arrow { color: var(--ct-text-faint); font-size: 1rem; flex: 0 0 auto; }

/* --- rail cards -------------------------------------------------- */
.ctd-gauge { gap: .25rem; }
.ctd-mixlegend { display: flex; flex-wrap: wrap; gap: .25rem .85rem; justify-content: center; margin-top: -.35rem; padding-bottom: .2rem; }
.ctd-mixlegend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ct-text-muted); text-decoration: none; }
a.ctd-mixlegend-item:hover { color: var(--ct-text-strong); }
a.ctd-mixlegend-item:hover b { text-decoration: underline; }
.ctd-mixlegend-item i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ctd-mixlegend-item b { color: var(--ct-text-strong); font-weight: 650; }
.ctd-trendcap { display: flex; justify-content: space-between; font-size: .66rem; color: var(--ct-text-faint); padding: .2rem .2rem 0; }
.ctd-today-card { gap: .25rem; }
.ctd-today { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ctd-today > div, .ctd-today > a { padding: .8rem .5rem; }
.ctd-today > * + * { border-left: 1px solid var(--ct-hairline-soft); }
/* Each cell deep-links to the vehicles/tasks it counts. */
.ctd-today-cell { display: block; color: inherit; text-decoration: none; border-radius: var(--ct-r-sm); transition: background .12s; }
.ctd-today-cell:hover { background: var(--ct-hover); }
.ctd-today-num { font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; color: var(--ct-text-strong); }
.ctd-today-num--good { color: var(--ct-success); }
.ctd-today-cap { font-size: .66rem; color: var(--ct-text-faint); margin-top: .1rem; }

/* --- misc -------------------------------------------------------- */
.ctd-scrolly { max-height: 20rem; overflow: auto; margin: 0 -.4rem; padding: 0 .4rem; }
.ctd-grid--tasks { display: grid; gap: var(--ct-gap); grid-template-columns: 1fr 1fr; }

/* --- responsive --------------------------------------------------- */
@media (max-width: 1500px) {
    .ctd-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .ctd-main { grid-template-columns: 1fr; }
    .ctd-grid--tasks { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .ctd-stats { grid-template-columns: repeat(2, 1fr); }
    .ctd-duo { grid-template-columns: 1fr; }
    .ctd-stages { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
    .ctd-table .ctd-where { display: none; }
}

/* --- pipeline category switcher ---------------------------------- */
.ctd-pipe .ct-card-head { flex-wrap: wrap; }
.ctd-seg { display: inline-flex; border: 1px solid var(--ct-hairline); border-radius: var(--ct-r-sm); overflow: hidden; background: var(--ct-surface); }
.ctd-seg button { border: 0; background: transparent; color: var(--ct-text-muted); font: inherit; font-size: .72rem; font-weight: 600;
                  padding: .3rem .7rem; cursor: pointer; white-space: nowrap; }
.ctd-seg button + button { border-left: 1px solid var(--ct-hairline-soft); }
.ctd-seg button:hover { background: var(--ct-hover); }
.ctd-seg button.on { background: var(--ct-accent-soft); color: var(--ct-accent); }
.ctd-seg-n { font-weight: 700; color: var(--ct-text-faint); margin-left: .1rem; }
.ctd-seg button.on .ctd-seg-n { color: inherit; }

/* ============================================================
   Recon pipeline builder — targets + compact chips
   Per-chip target badge (.ct-rb-tgtb, display-only, modal-edited), the
   section-head phase-target line, and compact-chip overrides for the
   .ct-rb-* builder block. Tokens only.
   ============================================================ */
/* Compact chips — tighter type, spacing and controls so long pipes fit. */
.ct-rb-chip { gap: .25rem; padding: .1rem .4rem; font-size: .7rem; }
.ct-rb-chip .ct-rb-dot { width: .4rem; height: .4rem; }
.ct-rb-chip-count { min-width: 1rem; font-size: .6rem; padding: 0 .25rem; }
.ct-rb-x { font-size: .85rem; opacity: 0; transition: opacity .1s ease; }
.ct-rb-chip:hover .ct-rb-x { opacity: 1; }
/* Placed-chip edit pencil — same hover-reveal as the × (opens the shared step modal). */
.ct-rb-pen { background: none; border: 0; cursor: pointer; font-size: .6rem; line-height: 1; color: var(--ct-text-faint); padding: 0 .1rem; opacity: 0; transition: opacity .1s ease, color .12s ease; }
.ct-rb-chip:hover .ct-rb-pen { opacity: 1; }
.ct-rb-pen:hover { color: var(--ct-text-strong); }
/* Builder-chip completion-tracked marker (placed + palette chips). */
.ct-rb-trk { flex: 0 0 auto; font-size: .58rem; color: var(--ct-accent); opacity: .85; }
/* Recon-timeline Done/Skipped outcome badge (vehicle Activity card + History modal). */
.ct-veh-outc { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.ct-veh-outc--done { background: var(--ct-success-soft); color: var(--ct-success); }
.ct-veh-outc--skipped { background: var(--ct-neutral-soft, rgba(120,120,128,.14)); color: var(--ct-text-muted); }
.ct-veh-outc--pending { background: var(--ct-warning-soft, rgba(217,119,6,.15)); color: var(--ct-warning, #b45309); }
.ct-rb-star:not(.on) { opacity: 0; transition: opacity .1s ease; }
.ct-rb-chip:hover .ct-rb-star { opacity: 1; }
.ct-rb-col { min-width: 5.5rem; }

/* Stage-target badge on a placed chip — shows the value; the modal edits it. */
.ct-rb-tgtb { display: inline-flex; align-items: center; gap: .18rem; flex: 0 0 auto; border: 0; cursor: pointer;
              padding: 0 .3rem; border-radius: var(--ct-r-pill); font: inherit; font-size: .6rem; font-weight: 650;
              line-height: 1.05rem; background: transparent; color: var(--ct-text-faint); white-space: nowrap; }
.ct-rb-tgtb i { font-size: .58rem; }
.ct-rb-tgtb:hover { background: var(--ct-hover); color: var(--ct-text-strong); }
.ct-rb-tgtb.is-set { background: var(--ct-surface); color: var(--ct-text-muted); }

/* Phase target — its own value on the section head, click to edit. */
.ct-rb-section-head { flex-direction: column; gap: .15rem; }
.ct-rb-section-tgt { display: inline-flex; align-items: center; gap: .2rem; border: 0; cursor: pointer;
                     padding: .05rem .35rem; border-radius: var(--ct-r-pill); font: inherit; font-size: .58rem;
                     font-weight: 700; letter-spacing: 0; text-transform: none; background: rgba(255, 255, 255, .55);
                     color: inherit; white-space: nowrap; }
.dark .ct-rb-section-tgt { background: rgba(0, 0, 0, .25); }
.ct-rb-section-tgt i { font-size: .55rem; }
.ct-rb-section-tgt:hover { background: var(--ct-surface); }
/* Frontline receiving option — the per-PIPE "confirm tasks" toggle on the
   Frontline Ready section head (open-tasks prompt on arrival); dimmed until on. */
.ct-rb-section-conf { display: inline-flex; align-items: center; gap: .2rem; border: 0; cursor: pointer;
                      padding: .05rem .35rem; border-radius: var(--ct-r-pill); font: inherit; font-size: .58rem;
                      font-weight: 700; letter-spacing: 0; text-transform: none; background: rgba(255, 255, 255, .55);
                      color: inherit; white-space: nowrap; }
.dark .ct-rb-section-conf { background: rgba(0, 0, 0, .25); }
.ct-rb-section-conf i { font-size: .55rem; }
.ct-rb-section-conf:hover { background: var(--ct-surface); }
.ct-rb-section-conf--unset { opacity: .55; font-weight: 550; }
.ct-rb-board-total { font-size: .7rem; font-weight: 650; color: var(--ct-accent); background: var(--ct-accent-soft);
                     border-radius: var(--ct-r-pill); padding: .1rem .55rem; white-space: nowrap; text-transform: none; letter-spacing: 0; }
/* Daily holding cost pill — a button (opens the edit modal); dimmed until set. */
.ct-rb-board-cost { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 650;
                    color: var(--ct-success); background: var(--ct-success-soft); border: 0; cursor: pointer;
                    border-radius: var(--ct-r-pill); padding: .1rem .55rem; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.ct-rb-board-cost i { font-size: .6rem; }
.ct-rb-board-cost:hover { filter: brightness(.95); }
.ct-rb-board-cost--unset { color: var(--ct-text-faint); background: var(--ct-neutral-soft); font-weight: 550; }
.ct-rb-board-photos:not(.ct-rb-board-cost--unset) { color: var(--ct-info); background: var(--ct-info-soft); }
/* Hidden (deactivated) categories/statuses — the restore strip under the boards. */
.ct-rb-hiddenbar { display: flex; flex-direction: column; gap: .4rem; margin-top: 1rem; padding: .65rem .8rem;
                   border: 1px dashed var(--ct-hairline); border-radius: var(--ct-r-md); background: var(--ct-surface-sunken); }
.ct-rb-hidden-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.ct-rb-hidden-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600;
                     color: var(--ct-text-muted); background: var(--ct-surface); border: 1px solid var(--ct-hairline-soft);
                     border-radius: var(--ct-r-pill); padding: .15rem .3rem .15rem .55rem; opacity: .75; }
.ct-rb-hidden-item:hover { opacity: 1; }
.ct-rb-hidden-item small { color: var(--ct-text-faint); font-weight: 500; }

/* ── Sold-vehicle highlight — a RED "SOLD" corner STICKER sitting on the vehicle
   picture (NOT tilted), so a sold car is obvious at a glance across the task
   cards, the Inventory rows/cards and the task-create modal picker. A soft red
   card/row/strip wash backs it up. Appended last so it wins over the base
   .ct-invr / .ct-inv-card / .ct-task-veh rules at equal specificity. ────────── */
/* The sticker's positioning contexts (the picture wrappers). */
.ct-task-veh-photowrap, .ct-invr-media, .ct-inv-photowrap, .ct-tm-vehicle-pic { position:relative; }
.ct-task-veh-photowrap { flex:0 0 auto; display:inline-flex; }
.ct-sold-sticker { position:absolute; top:.28rem; left:.28rem; z-index:4; display:inline-flex; align-items:center; padding:.05rem .34rem; border-radius:var(--ct-r-sm,.35rem); font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.25; color:#fff; background:var(--ct-danger,#c0392b); box-shadow:0 1px 4px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.55); white-space:nowrap; pointer-events:none; /* deliberately NOT rotated */ }
.ct-sold-sticker--sm { top:.15rem; left:.15rem; padding:.02rem .26rem; font-size:.5rem; letter-spacing:.04em; }
/* Backing wash: soft red on the strip / row / card. */
.ct-task-veh--sold, .ct-tk-hd + .ct-task-veh--sold { background:var(--ct-danger-soft,rgba(159,58,56,.14)); border-bottom-color:color-mix(in srgb, var(--ct-danger,#9f3a38) 32%, transparent); }
.ct-invr--sold { background:color-mix(in srgb, var(--ct-danger,#9f3a38) 6%, transparent); box-shadow:inset 3px 0 0 var(--ct-danger,#9f3a38); border-radius:var(--ct-r-sm,.4rem); }
.ct-inv-card--sold { background:color-mix(in srgb, var(--ct-danger,#9f3a38) 6%, var(--ct-surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ct-danger,#9f3a38) 40%, transparent); }
/* Task-modal: the search-result SOLD badge (no picture there) + the post-sale warning — red. */
.ct-tm-sold { display:inline-flex; align-items:center; gap:.2rem; padding:.02rem .34rem; border-radius:var(--ct-r-pill,999px); font-size:.58rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:var(--ct-danger,#c0392b); white-space:nowrap; }
.ct-tm-sold-warn { display:flex; align-items:center; gap:.45rem; margin:.55rem 0 0; padding:.5rem .65rem; border-radius:var(--ct-r-md,.55rem); font-size:.78rem; line-height:1.35; color:var(--ct-danger,#9f3a38); background:var(--ct-danger-soft,rgba(159,58,56,.14)); border:1px solid color-mix(in srgb, var(--ct-danger,#9f3a38) 35%, transparent); }

/* ── Vehicle EXPENSES card (the consolidated recon-cost ledger) ─────────────
   The vehicle page's "Expenses" section: summary tiles + a compact itemized
   table (parts / labor / custom) with expandable custom rows. Reuses the
   .ct-veh-card wrapper; the per-expense history timeline is self-contained
   (.ct-vexp-tl-*) so it renders without the Parts hub's page-scoped styles. */
.ct-vexp-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
.ct-vexp-head h3 { margin:0; }
.ct-vexp-sum { display:grid; grid-template-columns:repeat(4, 1fr); gap:.55rem; }
@media (max-width: 720px) { .ct-vexp-sum { grid-template-columns:repeat(2, 1fr); } }
.ct-vexp-tile { display:flex; flex-direction:column; gap:.1rem; padding:.55rem .65rem; border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); }
.ct-vexp-tile-l { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-text-faint); }
.ct-vexp-tile-l small { text-transform:none; letter-spacing:0; font-weight:600; }
.ct-vexp-tile-v { font-size:1.02rem; font-weight:800; color:var(--ct-text); font-variant-numeric:tabular-nums; }
.ct-vexp-tile-v.ct-vexp-pend { color:var(--ct-warning,#b7791f); }
.ct-vexp-tile-v.ct-vexp-est { color:var(--ct-text-muted); }
.ct-vexp-tile--total { background:color-mix(in srgb, var(--ct-accent,#486db4) 10%, var(--ct-surface)); border-color:color-mix(in srgb, var(--ct-accent,#486db4) 40%, transparent); }
.ct-vexp-tile--total .ct-vexp-tile-v { color:var(--ct-accent,#486db4); }

.ct-vexp-tablewrap { margin-top:.8rem; overflow-x:auto; }
.ct-vexp-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.ct-vexp-table thead th { text-align:left; padding:.3rem .5rem; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); border-bottom:1px solid var(--ct-hairline); white-space:nowrap; }
.ct-vexp-table td { padding:.42rem .5rem; vertical-align:top; border-top:1px solid var(--ct-hairline-soft); }
.ct-vexp-table tbody:first-of-type tr:first-child td { border-top:none; }
.ct-vexp-row:hover td { background:color-mix(in srgb, var(--ct-accent,#486db4) 4%, transparent); }
.ct-vexp-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ct-vexp-num.ct-vexp-pend { color:var(--ct-warning,#b7791f); }
.ct-vexp-actcol { width:1%; white-space:nowrap; text-align:right; }
.ct-vexp-date { color:var(--ct-text-muted); white-space:nowrap; }
.ct-vexp-link, .ct-vexp-title { color:var(--ct-accent,#486db4); font-weight:600; text-decoration:none; background:none; border:none; padding:0; cursor:pointer; text-align:left; font-size:inherit; font-family:inherit; }
.ct-vexp-link:hover, .ct-vexp-title:hover { text-decoration:underline; }
.ct-vexp-sub { display:block; color:var(--ct-text-faint); font-size:.68rem; margin-top:.05rem; }
.ct-vexp-st { color:var(--ct-text-muted); font-size:.68rem; }
.ct-vexp-vendor { color:var(--ct-text-muted); }
.ct-vexp-type { display:inline-block; padding:.05rem .38rem; border-radius:var(--ct-r-pill,999px); font-size:.6rem; font-weight:700; letter-spacing:.02em; }
.ct-vexp-type--part { color:var(--ct-info,#22a7e0); background:color-mix(in srgb, var(--ct-info,#22a7e0) 14%, transparent); }
.ct-vexp-type--labor { color:#7c6cd6; background:color-mix(in srgb, #7c6cd6 15%, transparent); }
.ct-vexp-type--custom { color:var(--ct-accent,#486db4); background:color-mix(in srgb, var(--ct-accent,#486db4) 14%, transparent); }

.ct-vexp-acts { display:inline-flex; align-items:center; gap:.3rem; justify-content:flex-end; }
.ct-vexp-pill { display:inline-flex; align-items:center; padding:.08rem .4rem; border-radius:var(--ct-r-pill,999px); font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; border:1px solid transparent; cursor:default; }
button.ct-vexp-pill { cursor:pointer; }
.ct-vexp-pill--paid { color:var(--ct-success,#2f9e44); background:color-mix(in srgb, var(--ct-success,#2f9e44) 15%, transparent); }
.ct-vexp-pill--pending { color:var(--ct-warning,#b7791f); background:color-mix(in srgb, var(--ct-warning,#b7791f) 16%, transparent); }
.ct-vexp-ibtn { display:inline-flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; border:none; background:none; border-radius:var(--ct-r-sm,.4rem); color:var(--ct-text-muted); cursor:pointer; font-size:.72rem; }
.ct-vexp-ibtn:hover { background:var(--ct-surface-sunken); color:var(--ct-text); }
.ct-vexp-ibtn--del:hover { color:var(--ct-danger,#c0392b); }
.ct-vexp-chev i { transition:transform .15s ease; }
.ct-vexp-chev.is-open i { transform:rotate(180deg); }
.ct-vexp-clip { display:inline-flex; align-items:center; gap:.15rem; color:var(--ct-text-faint); font-size:.66rem; font-weight:700; cursor:pointer; }

.ct-vexp-detail td { background:var(--ct-surface-sunken); padding:.6rem .7rem; }
.ct-vexp-dref, .ct-vexp-ddesc { font-size:.76rem; color:var(--ct-text-muted); margin-bottom:.4rem; }
.ct-vexp-ddesc { white-space:pre-wrap; }
.ct-vexp-docs { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem; }
.ct-vexp-doc { display:inline-flex; align-items:center; gap:.2rem; padding:.15rem .4rem; border-radius:var(--ct-r-sm,.4rem); background:var(--ct-surface); border:1px solid var(--ct-hairline-soft); font-size:.7rem; }
.ct-vexp-doc a { color:var(--ct-text); text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; }
.ct-vexp-doc a:hover { color:var(--ct-accent,#486db4); }
.ct-vexp-doc-del { border:none; background:none; color:var(--ct-text-faint); cursor:pointer; font-size:.66rem; padding:0 .1rem; }
.ct-vexp-doc-del:hover { color:var(--ct-danger,#c0392b); }
.ct-vexp-hist-h { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); margin-bottom:.25rem; display:flex; align-items:center; gap:.3rem; }
.ct-vexp-tl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ct-vexp-tl-item { display:flex; align-items:flex-start; gap:.45rem; }
.ct-vexp-tl-ic { display:inline-flex; align-items:center; justify-content:center; width:1.1rem; height:1.1rem; flex:0 0 auto; color:var(--ct-text-faint); margin-top:.05rem; }
.ct-vexp-tl-body { display:flex; flex-direction:column; gap:.02rem; min-width:0; }
.ct-vexp-tl-text { font-size:.74rem; color:var(--ct-text); }
.ct-vexp-tl-meta { font-size:.66rem; color:var(--ct-text-faint); }
.ct-vexp-tl-dot { opacity:.6; }
.ct-vexp-foot { margin:.7rem 0 0; font-size:.72rem; line-height:1.4; color:var(--ct-text-muted); }
.ct-vexp-foot i { color:var(--ct-text-faint); margin-right:.2rem; }

/* ── Recon Photos & Docs card (vehicle page) — a source-tagged gallery of every
   NON-retail media item (manual uploads + MVI / UVeye / task / expense media). */
.ct-recmedia-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.6rem; }
.ct-recmedia-head h3 { margin:0; }
.ct-recmedia-filters { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.7rem; }
.ct-recmedia-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem; border-radius:var(--ct-r-pill,999px); border:1px solid var(--ct-hairline); background:var(--ct-surface); color:var(--ct-text-muted); font-size:.68rem; font-weight:600; cursor:pointer; }
.ct-recmedia-chip i { font-size:.64rem; }
.ct-recmedia-chip span { color:var(--ct-text-faint); font-weight:700; }
.ct-recmedia-chip.is-on { background:color-mix(in srgb, var(--ct-accent,#486db4) 12%, transparent); border-color:color-mix(in srgb, var(--ct-accent,#486db4) 45%, transparent); color:var(--ct-accent,#486db4); }
.ct-recmedia-chip.is-on span { color:var(--ct-accent,#486db4); }
.ct-recmedia-grid { display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:.4rem; }
.ct-recmedia-item { position:relative; display:flex; flex-direction:column; gap:.34rem; min-width:0; }

/* The tile — a clean, rounded image cell with a subtle hover lift. */
.ct-recmedia-thumb { position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:var(--ct-r-md,.6rem); border:1px solid var(--ct-hairline); background:var(--ct-surface-sunken); cursor:pointer; padding:0; color:var(--ct-text-faint); text-decoration:none; transition:border-color .13s ease, box-shadow .13s ease, transform .13s ease; }
.ct-recmedia-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .22s ease; }
.ct-recmedia-item:hover .ct-recmedia-thumb { border-color:color-mix(in srgb, var(--ct-accent,#486db4) 45%, transparent); box-shadow:var(--ct-shadow-sm); transform:translateY(-1px); }
.ct-recmedia-item:hover .ct-recmedia-thumb img { transform:scale(1.05); }
.ct-recmedia-thumb--vid, .ct-recmedia-thumb--doc { font-size:1.5rem; }
.ct-recmedia-thumb--vid { color:var(--ct-accent,#486db4); }

/* Cover tile — a small star badge (top-left). */
.ct-recmedia-cover { position:absolute; top:.22rem; left:.22rem; z-index:3; width:1.05rem; height:1.05rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ct-accent,#486db4); color:#fff; font-size:.5rem; box-shadow:var(--ct-shadow-sm); pointer-events:none; }

/* Hover/focus action cluster — stacked down the right edge (tiles are too
   narrow for a horizontal row): make-cover · open source · delete. */
.ct-recmedia-acts { position:absolute; top:.22rem; right:.22rem; z-index:4; display:flex; flex-direction:column; gap:.18rem; opacity:0; transition:opacity .12s ease; }
.ct-recmedia-item:hover .ct-recmedia-acts, .ct-recmedia-item:focus-within .ct-recmedia-acts { opacity:1; }
.ct-recmedia-act { width:1.2rem; height:1.2rem; display:flex; align-items:center; justify-content:center; border:none; border-radius:var(--ct-r-sm,.35rem); background:color-mix(in srgb, #000 60%, transparent); color:#fff; font-size:.54rem; cursor:pointer; text-decoration:none; transition:background .12s ease; }
.ct-recmedia-act:hover { background:var(--ct-accent,#486db4); }
.ct-recmedia-act--del:hover { background:var(--ct-danger,#c0392b); }

/* Drag handle (top-left, hover — layers over the cover star when present). */
.ct-recmedia-grip { position:absolute; top:.22rem; left:.22rem; z-index:5; width:1.15rem; height:1.15rem; display:flex; align-items:center; justify-content:center; border-radius:var(--ct-r-sm,.35rem); background:color-mix(in srgb, #000 55%, transparent); color:#fff; font-size:.52rem; cursor:grab; opacity:0; transition:opacity .12s ease; }
.ct-recmedia-item:hover .ct-recmedia-grip, .ct-recmedia-item:focus-within .ct-recmedia-grip { opacity:.95; }
.ct-recmedia-grip:active { cursor:grabbing; }
.ct-recmedia-ghost { opacity:.5; }

/* Source dot (bottom-left) — the caption row doesn't fit under half-size
   tiles, so the source keeps its colour code as a tiny corner chip; the name
   lives in the tile's title tooltip and in the lightbox. */
.ct-recmedia-srcdot { position:absolute; left:.22rem; bottom:.22rem; z-index:3; width:1.05rem; height:1.05rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, #000 55%, transparent); font-size:.5rem; color:#e8e8ec; pointer-events:none; backdrop-filter:blur(2px); }
.ct-recmedia-srcdot--recon { color:#6ec6ee; }
.ct-recmedia-srcdot--mvi { color:#a89cf0; }
.ct-recmedia-srcdot--uveye { color:#f0a75a; }
.ct-recmedia-srcdot--task { color:#7ecf82; }
.ct-recmedia-srcdot--expense { color:#d99ad9; }

/* Compact cover PREVIEW bar — a small image + label, NOT a full-width hero. */
.ct-recmedia-coverbar { display:flex; align-items:center; gap:.85rem; padding:.55rem; margin-bottom:.75rem; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md,.6rem); background:var(--ct-surface-sunken); }
.ct-recmedia-coverbar-img { flex:0 0 auto; width:9.5rem; height:6rem; padding:0; border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-sm,.4rem); overflow:hidden; cursor:pointer; background:var(--ct-surface); }
.ct-recmedia-coverbar-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .22s ease; }
.ct-recmedia-coverbar-img:hover img { transform:scale(1.04); }
.ct-recmedia-coverbar-txt { min-width:0; }
.ct-recmedia-coverbar-tag { display:inline-flex; align-items:center; gap:.34rem; padding:.16rem .5rem; border-radius:var(--ct-r-pill,999px); background:color-mix(in srgb, var(--ct-accent,#486db4) 14%, transparent); color:var(--ct-accent,#486db4); font-size:.66rem; font-weight:800; letter-spacing:.01em; }
.ct-recmedia-coverbar-sub { margin:.35rem 0 0; font-size:.7rem; line-height:1.4; color:var(--ct-text-muted); }
.ct-recmedia-coverbar-sub i { color:var(--ct-accent,#486db4); }

/* Card head actions (reset order + add) sit in a row. */
.ct-recmedia { position:relative; }
.ct-recmedia-head-actions { display:flex; align-items:center; gap:.4rem; }
.ct-recmedia-reset { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-pill,999px); background:var(--ct-surface); color:var(--ct-text-muted); font-size:.66rem; font-weight:700; cursor:pointer; }
.ct-recmedia-reset:hover { color:var(--ct-accent,#486db4); border-color:color-mix(in srgb, var(--ct-accent,#486db4) 45%, transparent); }

/* Progress spinner overlay (drag-save / cover / upload / delete in flight). */
.ct-recmedia-busy { display:none; position:absolute; inset:0; z-index:6; align-items:center; justify-content:center; background:color-mix(in srgb, var(--ct-surface) 74%, transparent); backdrop-filter:blur(1px); border-radius:var(--ct-r-lg,.7rem); }
.ct-recmedia-busy span { display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:700; color:var(--ct-accent,#486db4); }

/* A one-line hint above the grid telling users how to reorder / pick a cover. */
.ct-recmedia-hint { margin:.1rem 0 .6rem; font-size:.68rem; color:var(--ct-text-faint); }
.ct-recmedia-hint i { color:var(--ct-accent,#486db4); }

/* (The oversized cover hero + its badges/handles were replaced by the compact
   cover PREVIEW bar + the professional tile system defined above.) */

/* ── Unified Photos & Docs: the Retail / Recon type toggle + shared pieces ─────── */
.ct-recmedia-head-l { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; min-width:0; }
.ct-recmedia-seg { display:inline-flex; padding:.14rem; gap:.1rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); }
.ct-recmedia-seg-btn { display:inline-flex; align-items:center; gap:.34rem; padding:.24rem .72rem; border:none; border-radius:var(--ct-r-pill,999px); background:transparent; color:var(--ct-text-muted); font-size:.72rem; font-weight:700; cursor:pointer; transition:background .12s ease, color .12s ease, box-shadow .12s ease; }
.ct-recmedia-seg-btn i { font-size:.66rem; opacity:.85; }
.ct-recmedia-seg-btn span { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.1rem; padding:0 .3rem; border-radius:var(--ct-r-pill,999px); background:color-mix(in srgb, var(--ct-text-faint) 20%, transparent); color:var(--ct-text-muted); font-size:.6rem; font-weight:800; }
.ct-recmedia-seg-btn:hover:not(.is-on) { color:var(--ct-text); }
.ct-recmedia-seg-btn.is-on { background:var(--ct-surface); color:var(--ct-accent,#486db4); box-shadow:var(--ct-shadow-sm); }
.ct-recmedia-seg-btn.is-on i { opacity:1; }
.ct-recmedia-seg-btn.is-on span { background:color-mix(in srgb, var(--ct-accent,#486db4) 16%, transparent); color:var(--ct-accent,#486db4); }

/* A slim info line (retail-cover note / feed-sync note). */
.ct-recmedia-note { display:flex; align-items:baseline; gap:.4rem; margin:.6rem 0 .1rem; font-size:.7rem; line-height:1.35; color:var(--ct-text-muted); }
.ct-recmedia-note i { color:var(--ct-accent,#486db4); position:relative; top:.05rem; }
.ct-recmedia-link { border:none; background:none; padding:0; color:var(--ct-accent,#486db4); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; }
.ct-recmedia-link:hover { text-decoration:none; }

/* Per-type empty state. */
.ct-recmedia-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; padding:1.7rem 1.1rem; border:1px dashed var(--ct-hairline); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface-sunken); color:var(--ct-text-faint); }
.ct-recmedia-empty > i { font-size:1.55rem; color:var(--ct-text-faint); opacity:.7; }
.ct-recmedia-empty p { margin:.1rem 0 0; font-size:.84rem; font-weight:700; color:var(--ct-text-muted); }
.ct-recmedia-empty span { font-size:.72rem; max-width:24rem; line-height:1.4; }

/* ── UVeye "Service Report" (modal on the vehicle page / inventory row) ───────────
   Rich inspection view: tire cards + rim-damage/tread SVG overlays, undercarriage,
   exterior drive-through, recommended service, reconditioning. Light + dark. */
.ct-uv { font-size:.8125rem; color:var(--ct-text); }
.ct-uv-empty { font-size:.8125rem; color:var(--ct-text-faint); }
.ct-uv-ok { color:var(--ct-success,#2f9e44); font-weight:600; font-size:.78rem; display:inline-flex; align-items:center; gap:.35rem; }
.ct-uv-bad { color:var(--ct-danger,#c0392b); font-weight:600; font-size:.78rem; display:inline-flex; align-items:center; gap:.35rem; }

/* Hero */
.ct-uv-hero { display:flex; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.ct-uv-hero-img { position:relative; flex:1 1 15rem; min-width:0; padding:0; border:none; background:none; cursor:pointer; border-radius:var(--ct-r-md,.55rem); overflow:hidden; }
.ct-uv-hero-img img { width:100%; height:11rem; object-fit:cover; display:block; border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface-sunken); }
.ct-uv-asscanned { position:absolute; right:.4rem; bottom:.4rem; width:3.6rem; height:2.5rem; border-radius:var(--ct-r-sm,.4rem); overflow:hidden; border:2px solid #fff; box-shadow:var(--ct-shadow-sm); }
.ct-uv-asscanned img { width:100%; height:100%; object-fit:cover; border:none; border-radius:0; }
.ct-uv-hero-body { flex:2 1 20rem; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.ct-uv-hero-top { display:flex; gap:.75rem; align-items:flex-start; }
.ct-uv-hero-thumb { width:4rem; height:3rem; object-fit:cover; border-radius:var(--ct-r-sm,.4rem); border:1px solid var(--ct-hairline-soft); flex:0 0 auto; }
.ct-uv-hero-id { min-width:0; flex:1 1 auto; }
.ct-uv-hero-id .veh { font-size:1.05rem; font-weight:800; color:var(--ct-text-strong); line-height:1.15; }
.ct-uv-hero-id .sub { display:flex; flex-wrap:wrap; gap:.15rem .8rem; font-size:.72rem; color:var(--ct-text-faint); margin-top:.2rem; }
.ct-uv-hero-id .sub i { margin-right:.25rem; opacity:.75; }
.ct-uv-hero-right { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex:0 0 auto; }
.ct-uv-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:var(--ct-r-pill,999px); font-size:.72rem; font-weight:800; }
.ct-uv-pill--green { color:#1f9d3c; background:rgba(35,167,57,.12); }
.ct-uv-pill--amber { color:#b07207; background:rgba(214,167,7,.14); }
.ct-uv-pill--red { color:#c0392b; background:rgba(192,57,43,.12); }
.ct-uv-pill--grey { color:var(--ct-text-muted); background:var(--ct-surface-raised); }
.ct-uv-alerts { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:800; color:var(--ct-danger,#c0392b); background:color-mix(in srgb, var(--ct-danger,#c0392b) 12%, transparent); padding:.15rem .55rem; border-radius:var(--ct-r-pill,999px); }
.ct-uv-report-link { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:600; color:var(--ct-accent,#486db4); text-decoration:none; white-space:nowrap; }
.ct-uv-report-link:hover { text-decoration:underline; }

/* Tabs */
.ct-uv-tabs { display:flex; flex-wrap:wrap; gap:.35rem; border-bottom:1px solid var(--ct-hairline); margin-bottom:1rem; }
.ct-uv-tab { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border:none; background:none; cursor:pointer; font-size:.8rem; font-weight:600; color:var(--ct-text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.ct-uv-tab:hover { color:var(--ct-text); }
.ct-uv-tab.is-on { color:var(--ct-accent,#486db4); border-bottom-color:var(--ct-accent,#486db4); }
.ct-uv-tab i { font-size:.8rem; }
.ct-uv-tab-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.1rem; height:1.1rem; padding:0 .3rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-surface-sunken); color:var(--ct-text-muted); font-size:.62rem; font-weight:800; }
.ct-uv-tab.is-on .ct-uv-tab-badge { background:color-mix(in srgb, var(--ct-accent,#486db4) 16%, transparent); color:var(--ct-accent,#486db4); }

.ct-uv-sec { margin-top:1rem; }
.ct-uv-h { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-text-faint); margin:0 0 .55rem; }

/* Tire overview grid: 2 cards | diagram | 2 cards */
.ct-uv-tiregrid { display:grid; grid-template-columns:1fr minmax(9rem, 15rem) 1fr; grid-template-areas: "card1 diagram card2" "card3 diagram card4"; gap:.7rem; align-items:stretch; }
.ct-uv-diagram { display:flex; align-items:center; justify-content:center; }
.ct-uv-carsvg { width:100%; max-width:13rem; height:auto; }
.ct-uv-tcard { border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface); padding:.6rem .7rem; cursor:pointer; transition:box-shadow .12s ease, border-color .12s ease; }
.ct-uv-tcard:hover { box-shadow:var(--ct-shadow-sm); border-color:var(--ct-hairline); }
.ct-uv-tcard--warn { border-color:color-mix(in srgb, var(--ct-warning,#b7791f) 45%, transparent); }
.ct-uv-tcard--bad { border-color:color-mix(in srgb, var(--ct-danger,#c0392b) 45%, transparent); }
.ct-uv-tcard-hd { display:flex; align-items:center; gap:.5rem; margin-bottom:.45rem; }
.ct-uv-tcard-thumb { width:2.4rem; height:1.8rem; object-fit:cover; border-radius:var(--ct-r-sm,.4rem); border:1px solid var(--ct-hairline-soft); flex:0 0 auto; background:var(--ct-surface-sunken); }
.ct-uv-tcard-pos { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-strong); }
.ct-uv-tcard-open { display:inline-flex; align-items:center; gap:.3rem; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-accent,#486db4); border-top:1px solid var(--ct-hairline-soft); padding-top:.4rem; margin-top:.1rem; }
.ct-uv-dmgbadge { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem; padding:0 .3rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-danger,#c0392b); color:#fff; font-size:.62rem; font-weight:800; }
.ct-uv-tcard-body { display:flex; flex-direction:column; gap:.5rem; }
.ct-uv-tmeta { display:grid; grid-template-columns:1fr 1fr; gap:.3rem .6rem; }
.ct-uv-tmeta > div { display:flex; flex-direction:column; }
.ct-uv-tmeta .k { font-size:.58rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-faint); }
.ct-uv-tmeta .v { font-size:.76rem; font-weight:600; color:var(--ct-text-strong); }
.ct-uv-checklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--ct-hairline-soft); padding-top:.45rem; }
.ct-uv-check { display:flex; align-items:center; gap:.4rem; font-size:.74rem; }
.ct-uv-check i { width:.9rem; text-align:center; font-size:.7rem; }
.ct-uv-check .l { color:var(--ct-text-muted); }
.ct-uv-check .d { margin-left:auto; color:var(--ct-text-faint); font-size:.68rem; }
.ct-uv-check--ok i { color:var(--ct-success,#2f9e44); }
.ct-uv-check--warn i { color:var(--ct-warning,#b7791f); } .ct-uv-check--warn .l { color:var(--ct-warning,#b7791f); }
.ct-uv-check--bad i { color:var(--ct-danger,#c0392b); } .ct-uv-check--bad .l { color:var(--ct-danger,#c0392b); }
.ct-uv-dmgcount { margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-width:1.1rem; height:1.1rem; padding:0 .3rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-danger,#c0392b); color:#fff; font-size:.6rem; font-weight:800; }

/* Tire split-pane detail */
.ct-uv-tdetail-hd { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.7rem; }
.ct-uv-back { display:inline-flex; align-items:center; gap:.4rem; border:none; background:none; cursor:pointer; font-size:.78rem; font-weight:600; color:var(--ct-accent,#486db4); padding:0; }
.ct-uv-tdetail-pos { font-size:.9rem; font-weight:800; color:var(--ct-text-strong); }
.ct-uv-legend { margin-left:auto; display:flex; gap:.8rem; font-size:.68rem; color:var(--ct-text-muted); }
.ct-uv-legend span { display:inline-flex; align-items:center; gap:.3rem; }
.ct-uv-legend i { width:.7rem; height:.7rem; border-radius:2px; display:inline-block; }
.ct-uv-wheelswitch { display:flex; gap:.45rem; overflow-x:auto; padding-bottom:.4rem; margin-bottom:.7rem; }
.ct-uv-wswitch { position:relative; flex:0 0 auto; width:4.6rem; border:2px solid var(--ct-hairline-soft); border-radius:var(--ct-r-sm,.4rem); background:var(--ct-surface); padding:0; cursor:pointer; overflow:hidden; }
.ct-uv-wswitch.is-on { border-color:var(--ct-accent,#486db4); }
.ct-uv-wswitch img { width:100%; height:3rem; object-fit:cover; display:block; }
.ct-uv-wswitch-pos { display:block; font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ct-text-muted); padding:.12rem .2rem; text-align:center; }
.ct-uv-wswitch-badge { position:absolute; top:.2rem; right:.2rem; display:inline-flex; align-items:center; justify-content:center; min-width:1rem; height:1rem; padding:0 .25rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-danger,#c0392b); color:#fff; font-size:.56rem; font-weight:800; }
.ct-uv-split { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.ct-uv-pane { border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface); overflow:hidden; display:flex; flex-direction:column; }
.ct-uv-pane-h { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); padding:.45rem .6rem; border-bottom:1px solid var(--ct-hairline-soft); background:var(--ct-surface-sunken); }
/* The base image defines the box height (so the overlay coords, normalised to
   the image, track it 1:1 — preserveAspectRatio="none" needs the SVG box to
   equal the image box). A min-height keeps the box from collapsing to 0 before
   the (lazy) image loads — the fix for "marks on tires missing" (SVG over a
   0-height box). The split-pane loads the base image on click, so it's not the
   deferred kind, but the guard is cheap insurance. */
.ct-uv-overlaybox { position:relative; cursor:zoom-in; background:#0b0b0d; min-height:12rem; }
.ct-uv-overlaybox img { width:100%; display:block; }
.ct-uv-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ct-uv-boxlabel { position:absolute; transform:translateY(-100%); font-size:.56rem; font-weight:800; padding:.05rem .25rem; border-radius:2px; white-space:nowrap; color:#fff; pointer-events:none; line-height:1.2; }
.ct-uv-boxlabel.is-bad { background:var(--ct-danger,#c0392b); }
.ct-uv-boxlabel.is-warn { background:var(--ct-warning,#b7791f); }
.ct-uv-panefoot { padding:.5rem .6rem; display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-top:auto; }
.ct-uv-groovechip { display:inline-flex; align-items:center; padding:.05rem .35rem; border:1px solid; border-radius:var(--ct-r-pill,999px); font-size:.6rem; font-weight:700; }

/* Detection summary */
.ct-uv-collapse { display:inline-flex; align-items:center; gap:.45rem; border:none; background:none; cursor:pointer; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); padding:0; }
.ct-uv-collapse i { width:.8rem; }
.ct-uv-detgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(7rem, 1fr)); gap:.5rem; margin-top:.6rem; }
.ct-uv-detcard { border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.55rem); overflow:hidden; background:var(--ct-surface); }
.ct-uv-detcard--bad { border-color:color-mix(in srgb, var(--ct-danger,#c0392b) 40%, transparent); }
.ct-uv-detcard--warn { border-color:color-mix(in srgb, var(--ct-warning,#b7791f) 40%, transparent); }
.ct-uv-detimg { display:block; width:100%; padding:0; border:none; background:#0b0b0d; cursor:zoom-in; }
.ct-uv-detimg img { width:100%; height:4.5rem; object-fit:cover; display:block; }
.ct-uv-detimg--none { display:flex; align-items:center; justify-content:center; height:4.5rem; background:var(--ct-surface-sunken); color:var(--ct-text-faint); cursor:default; }
.ct-uv-detmeta { padding:.35rem .45rem; }
.ct-uv-detmeta .t { display:block; font-size:.7rem; font-weight:700; color:var(--ct-text-strong); }
.ct-uv-detmeta .p { display:block; font-size:.62rem; color:var(--ct-text-faint); }

/* Undercarriage + Exterior */
.ct-uv-pano { display:block; width:100%; padding:0; border:none; background:#0b0b0d; cursor:zoom-in; border-radius:var(--ct-r-md,.55rem); overflow:hidden; }
.ct-uv-pano img { width:100%; display:block; }
.ct-uv-note { margin-top:.6rem; font-size:.72rem; color:var(--ct-text-faint); display:flex; align-items:center; gap:.4rem; }
.ct-uv-covergrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr)); gap:.5rem; margin-bottom:1rem; }
.ct-uv-cover-thumb { display:block; padding:0; border:1px solid var(--ct-hairline-soft); background:#0b0b0d; cursor:zoom-in; border-radius:var(--ct-r-md,.55rem); overflow:hidden; }
.ct-uv-cover-thumb img { width:100%; height:7rem; object-fit:cover; display:block; }
.ct-uv-scrubber { border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface); padding:.7rem; }
.ct-uv-scrub-hd { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.6rem; }
.ct-uv-scrub-sides { display:inline-flex; gap:.2rem; background:var(--ct-surface-sunken); border-radius:var(--ct-r-pill,999px); padding:.15rem; }
.ct-uv-scrub-side { border:none; background:none; cursor:pointer; font-size:.7rem; font-weight:600; color:var(--ct-text-muted); padding:.2rem .6rem; border-radius:var(--ct-r-pill,999px); }
.ct-uv-scrub-side.is-on { background:var(--ct-surface); color:var(--ct-accent,#486db4); box-shadow:var(--ct-shadow-sm); }
.ct-uv-scrub-play { margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--ct-hairline-soft); background:var(--ct-surface); cursor:pointer; font-size:.72rem; font-weight:600; color:var(--ct-text); padding:.25rem .7rem; border-radius:var(--ct-r-pill,999px); }
/* Fixed-geometry stage — the frames are absolutely positioned + object-fit:contain,
   so advancing/loading a frame NEVER changes the stage height (no layout shift, so
   the modal never jumps when you step through the drive-through). */
.ct-uv-scrub-stage { position:relative; background:#0b0b0d; border-radius:var(--ct-r-sm,.4rem); overflow:hidden; aspect-ratio:16/9; min-height:9rem; max-height:22rem; }
.ct-uv-scrub-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ct-uv-scrub-range { width:100%; margin-top:.55rem; accent-color:var(--ct-accent,#486db4); }
.ct-uv-scrub-count { text-align:center; font-size:.68rem; color:var(--ct-text-faint); font-variant-numeric:tabular-nums; margin-top:.2rem; }
/* Three sides (left / top / right) animating together off one shared step control. */
.ct-uv-scrub-panes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem; }
@media (max-width:640px){ .ct-uv-scrub-panes { grid-template-columns:1fr; } }
.ct-uv-scrub-pane { display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.ct-uv-scrub-panelabel { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-faint); text-align:center; }
.ct-uv-scrub-panes .ct-uv-scrub-stage { min-height:0; max-height:none; }
.ct-uv-scrub-ctl { display:flex; align-items:center; gap:.5rem; margin-top:.55rem; }
.ct-uv-scrub-ctl .ct-uv-scrub-range { margin-top:0; flex:1 1 auto; width:auto; }
.ct-uv-scrub-step { flex:0 0 auto; width:1.9rem; height:1.9rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ct-hairline-soft); background:var(--ct-surface); color:var(--ct-text); border-radius:var(--ct-r-pill,999px); cursor:pointer; font-size:.72rem; }
.ct-uv-scrub-step:hover { background:var(--ct-surface-sunken); color:var(--ct-text-strong); }

/* Recommended service */
.ct-uv-services { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.ct-uv-service { display:flex; align-items:center; gap:.55rem; padding:.5rem .7rem; border:1px solid var(--ct-hairline-soft); border-left-width:3px; border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface); font-size:.8rem; color:var(--ct-text); }
.ct-uv-service .src { margin-left:auto; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-faint); }
.ct-uv-service--bad { border-left-color:var(--ct-danger,#c0392b); } .ct-uv-service--bad > i { color:var(--ct-danger,#c0392b); }
.ct-uv-service--warn { border-left-color:var(--ct-warning,#b7791f); } .ct-uv-service--warn > i { color:var(--ct-warning,#b7791f); }

/* Reconditioning (quote) */
.ct-uv-recon-hd { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.ct-uv-recon-total { font-size:.8rem; color:var(--ct-text-muted); } .ct-uv-recon-total b { color:var(--ct-accent,#486db4); }
.ct-uv-issue { padding:.6rem .75rem; border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.55rem); margin-bottom:.5rem; }
.ct-uv-issue .t { font-weight:700; color:var(--ct-text-strong); display:flex; justify-content:space-between; gap:1rem; }
.ct-uv-issue .t .cost { font-weight:800; color:var(--ct-accent,#486db4); white-space:nowrap; }
.ct-uv-issue .t .mod { font-size:.68rem; color:var(--ct-text-faint); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.ct-uv-issue .d { color:var(--ct-text-muted); margin-top:.15rem; font-size:.78rem; }
.ct-uv-thumbs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
.ct-uv-thumbbtn { padding:0; border:none; background:none; cursor:zoom-in; }
.ct-uv-thumb { width:4.5rem; height:3.4rem; object-fit:cover; border-radius:var(--ct-r-sm,.4rem); border:1px solid var(--ct-hairline-soft); display:block; }

@media (max-width: 640px) {
    .ct-uv-tiregrid { grid-template-columns:1fr; grid-template-areas: "diagram" "card1" "card2" "card3" "card4"; }
    .ct-uv-split { grid-template-columns:1fr; }
    .ct-uv-hero-right { align-items:flex-start; margin-left:0; width:100%; }
}

/* UVeye — graceful "image unavailable" placeholder (UVeye's /image endpoint goes
   transiently 500, so a proxy 404 must degrade to a clean tile, never the
   browser's broken-image ?). The wrapper holds the <img> + an absolutely-
   positioned placeholder; the img's x-on:error adds .ct-uv-img--failed, and
   :has() reveals the placeholder + hides the broken img. */
.ct-uv-imgwrap { position:relative; }
.ct-uv-imgfail { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; background:var(--ct-surface-sunken); color:var(--ct-text-faint); font-size:.68rem; font-weight:600; text-align:center; padding:.4rem; border-radius:inherit; }
.ct-uv-imgfail i { font-size:1.15rem; opacity:.7; }
.ct-uv-imgfail--mini span { display:none; }
.ct-uv-imgfail--mini i { font-size:.85rem; }
.ct-uv-imgfail--hero i { font-size:1.6rem; }
.ct-uv-img--failed { visibility:hidden; }
.ct-uv-imgwrap:has(img.ct-uv-img--failed) > .ct-uv-imgfail,
.ct-uv-imgwrap:has(> img.ct-uv-img--failed) .ct-uv-imgfail { display:flex; }
/* The mini variant (tiny thumbs / crops) keeps a min box so the placeholder shows. */
.ct-uv-tcard-thumbwrap { display:inline-flex; width:2.4rem; height:1.8rem; }
.ct-uv-tcard-thumbwrap .ct-uv-imgfail { border:1px solid var(--ct-hairline-soft); }
/* The drive-through stage placeholder sits behind the frames (revealed when the
   visible frame hides itself on error). */
.ct-uv-scrub-fail { position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; color:var(--ct-text-faint); font-size:.72rem; font-weight:600; }
.ct-uv-scrub-fail i { font-size:1.3rem; opacity:.7; }
.ct-uv-scrub-stage img { z-index:1; } /* stays above the fail placeholder; position set above (absolute) */

/* UVeye — per-image loading shimmer (so a slow proxied image shows a subtle
   pulse immediately and the report is usable the instant it opens; cleared on
   the img's x-on:load, replaced by the "Image unavailable" tile on x-on:error).
   A ::before pulse behind the img, shown while it carries .ct-uv-img--loading. */
.ct-uv-imgwrap::before {
    content:""; position:absolute; inset:0; border-radius:inherit; opacity:0;
    background:linear-gradient(100deg, var(--ct-surface-sunken) 30%, color-mix(in srgb, var(--ct-surface-sunken) 55%, var(--ct-surface)) 50%, var(--ct-surface-sunken) 70%);
    background-size:200% 100%; animation:ct-uv-shimmer 1.25s ease-in-out infinite;
    pointer-events:none; transition:opacity .2s ease;
}
.ct-uv-imgwrap:has(img.ct-uv-img--loading)::before { opacity:1; }
/* The shimmer sits behind the img; a still-loading img is transparent so the
   pulse shows through, and a failed/placeholder tile covers it. */
img.ct-uv-img--loading { opacity:0; }
.ct-uv-imgwrap > img, .ct-uv-imgwrap img { transition:opacity .25s ease; }
.ct-uv-imgwrap .ct-uv-imgfail, .ct-uv-imgwrap .ct-uv-asscanned { z-index:2; }
@keyframes ct-uv-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .ct-uv-imgwrap::before { animation:none; } }

/* "Inspection not loaded yet" hint — the cache-only modal opened before any
   pull, so nudge to Refresh instead of the heavier "no inspection" empty state. */
.ct-uv-notloaded { display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border:1px dashed var(--ct-hairline); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface-sunken); color:var(--ct-text-muted); }
.ct-uv-notloaded i { font-size:1.3rem; color:var(--ct-accent,#486db4); flex:0 0 auto; }
.ct-uv-notloaded p { margin:0; font-size:.82rem; line-height:1.4; }
.ct-uv-notloaded strong { color:var(--ct-text-strong); }
.ct-uv-notloaded em { font-style:normal; font-weight:600; color:var(--ct-accent,#486db4); }

/* ── UVeye "Diagram view" — the inspection mapped onto the shared MVI carbody +
      tires SVGs (App\Support\UVeye\UVeyeDiagram + partials/uveye-diagram), a
      read-only sibling of the detailed tabbed report, chosen via the view switch. ── */
.ct-uv-viewswitch { display:inline-flex; gap:.15rem; padding:.2rem; margin-bottom:1rem; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-pill,999px); }
.ct-uv-vs { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .95rem; font-size:.78rem; font-weight:700; color:var(--ct-text-faint); background:none; border:none; border-radius:var(--ct-r-pill,999px); cursor:pointer; transition:background .15s, color .15s; }
.ct-uv-vs:hover { color:var(--ct-text); }
.ct-uv-vs.is-on { background:var(--ct-surface); color:var(--ct-text-strong); box-shadow:var(--ct-shadow-sm); }

.uv-diag { display:flex; flex-direction:column; gap:1.4rem; }
.uv-diag-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; font-size:.74rem; color:var(--ct-text-faint); }
.uv-diag-leg { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--ct-text); }
.uv-diag-sw { width:.8rem; height:.8rem; border-radius:.25rem; border:1px solid rgba(0,0,0,.12); flex:0 0 auto; }
.uv-diag-leghint { margin-left:auto; }
.uv-diag-block { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1.1rem; align-items:start; padding:.9rem; border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md,.6rem); background:var(--ct-surface); }
@media (max-width:820px){ .uv-diag-block { grid-template-columns:1fr; } }
.uv-diag-head { font-size:.82rem; font-weight:800; color:var(--ct-text-strong); margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.uv-diag-svg { width:100%; }
.uv-diag-svg svg { width:100%; height:auto; max-height:26rem; display:block; }
.uv-diag-svg .uv-z { transition:fill .18s ease, filter .15s ease; }
.uv-diag-svg .uv-hl { filter:drop-shadow(0 0 3px rgba(0,0,0,.55)); stroke:var(--ct-text-strong); stroke-width:2; }
.uv-diag-r { display:flex; flex-direction:column; gap:.4rem; max-height:26rem; overflow:auto; }
.uv-diag-clean { font-size:.8rem; color:var(--ct-success); display:flex; align-items:center; gap:.4rem; padding:.5rem 0; }
.uv-diag-find { padding:.5rem .6rem; border:1px solid var(--ct-hairline-soft); border-left-width:3px; border-radius:var(--ct-r-sm,.4rem); cursor:pointer; transition:background .12s, box-shadow .12s; }
.uv-diag-find:hover, .uv-diag-find.is-sel { background:var(--ct-surface-sunken); }
.uv-diag-find.is-sel { box-shadow:0 0 0 1px var(--ct-accent,#486db4) inset; }
.uv-diag-find--damage { border-left-color:#DC2626; }
.uv-diag-find--advisory { border-left-color:#F59E0B; }
.uv-diag-find-hd { display:flex; align-items:center; gap:.45rem; }
.uv-diag-find-name { font-size:.8rem; font-weight:700; color:var(--ct-text-strong); }
.uv-diag-find-sub { font-size:.68rem; color:var(--ct-text-faint); }
.uv-diag-find-sev { margin-left:auto; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-faint); }
.uv-diag-find-note { font-size:.73rem; color:var(--ct-text); margin-top:.25rem; line-height:1.35; }
.uv-diag-thumbs { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.uv-diag-thumb { width:3.1rem; height:3.1rem; padding:0; border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-sm,.4rem); overflow:hidden; cursor:pointer; background:var(--ct-surface-sunken); }
.uv-diag-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.uv-diag-other { margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--ct-hairline); display:flex; flex-direction:column; gap:.4rem; }
.uv-diag-other-hd { font-size:.76rem; font-weight:800; color:var(--ct-text-strong); display:flex; align-items:center; gap:.4rem; }
.uv-diag-other-hd span { font-size:.66rem; background:var(--ct-surface-sunken); padding:.05rem .4rem; border-radius:var(--ct-r-pill,999px); }
.uv-diag-other-hint { font-size:.68rem; color:var(--ct-text-faint); margin:-.15rem 0 .1rem; }
/* Per-wheel spec table under the tires diagram (the MVI tires-table equivalent). */
.uv-diag-tiretbl { width:100%; border-collapse:collapse; margin-top:.7rem; font-size:.72rem; }
.uv-diag-tiretbl th { text-align:left; font-size:.58rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-faint); font-weight:700; padding:.2rem .45rem; border-bottom:1px solid var(--ct-hairline-soft); }
.uv-diag-tiretbl td { padding:.3rem .45rem; border-bottom:1px solid var(--ct-hairline-soft); color:var(--ct-text); font-variant-numeric:tabular-nums; }
.uv-diag-tiretbl tr:last-child td { border-bottom:none; }
.uv-diag-tiretbl td:first-child { font-weight:600; color:var(--ct-text-strong); white-space:nowrap; }
.uv-diag-tiretbl td:first-child .uv-diag-sw { display:inline-block; vertical-align:middle; margin-right:.35rem; width:.6rem; height:.6rem; }

/* ── Condition Report (CR) — the unified inspection modal (App\Support\Recon\ConditionReport;
      _condition-report-modal.blade.php). Read-only; all sub-state is client-side Alpine. ── */
.ct-cr { font-size:.86rem; color:var(--ct-text); max-height:74vh; overflow-y:auto; padding:.1rem .1rem .4rem; }
.ct-cr [x-cloak] { display:none !important; }
.ct-cr-empty { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:2.4rem 1rem; text-align:center; color:var(--ct-text-muted); }
.ct-cr-empty i { font-size:1.8rem; color:var(--ct-accent,#486db4); }
.ct-cr-empty p { margin:0; max-width:26rem; line-height:1.45; }

/* ① summary band — the synthetic grade + at-a-glance chips */
.ct-cr-summary { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; padding:.1rem .1rem .5rem; }
.ct-cr-grade { flex:0 0 auto; display:flex; align-items:baseline; gap:.2rem; padding:.4rem .7rem; border-radius:var(--ct-r-md,.6rem); border:1.5px solid var(--ct-hairline); background:var(--ct-surface-sunken); line-height:1; }
.ct-cr-grade--success { border-color:var(--ct-success); background:var(--ct-success-soft); }
.ct-cr-grade--warning { border-color:var(--ct-warning); background:var(--ct-warning-soft); }
.ct-cr-grade--danger { border-color:var(--ct-danger); background:var(--ct-danger-soft); }
.ct-cr-grade-score { font-size:1.5rem; font-weight:800; color:var(--ct-text-strong); font-variant-numeric:tabular-nums; }
.ct-cr-grade-scale { font-size:.72rem; font-weight:700; color:var(--ct-text-faint); }
.ct-cr-grade-label { margin-left:.35rem; align-self:center; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.ct-cr-grade--success .ct-cr-grade-label { color:var(--ct-success); }
.ct-cr-grade--warning .ct-cr-grade-label { color:var(--ct-warning); }
.ct-cr-grade--danger .ct-cr-grade-label { color:var(--ct-danger); }
.ct-cr-chips { flex:1 1 16rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.ct-cr-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .55rem; border-radius:var(--ct-r-md,.5rem); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); border-left:.22rem solid var(--ct-text-faint); }
.ct-cr-chip > i { font-size:.9rem; color:var(--ct-text-faint); }
.ct-cr-chip--ok { border-left-color:var(--ct-success); }
.ct-cr-chip--ok > i { color:var(--ct-success); }
.ct-cr-chip--warn { border-left-color:var(--ct-warning); }
.ct-cr-chip--warn > i { color:var(--ct-warning); }
.ct-cr-chip--bad { border-left-color:var(--ct-danger); }
.ct-cr-chip--bad > i { color:var(--ct-danger); }
.ct-cr-chip-txt { display:flex; flex-direction:column; line-height:1.15; }
.ct-cr-chip-l { font-size:.62rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700; color:var(--ct-text-faint); }
.ct-cr-chip-v { font-size:.8rem; font-weight:700; color:var(--ct-text-strong); }
.ct-cr-mktask { margin-left:auto; flex:0 0 auto; }
.ct-cr-gnote { display:flex; align-items:center; gap:.4rem; margin:.1rem .1rem .5rem; font-size:.72rem; color:var(--ct-text-faint); }
.ct-cr-gnote i { color:var(--ct-info,#22a7e0); }

/* section blocks (MVI · diagnostics) */
.ct-cr-block { margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--ct-hairline); }
.ct-cr-h3 { display:flex; align-items:center; gap:.45rem; margin:0 0 .6rem; font-size:.92rem; font-weight:800; color:var(--ct-text-strong); }
.ct-cr-h3 i { color:var(--ct-accent,#486db4); }
.ct-cr-mvi-head { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.ct-cr-mvi-head .ct-cr-h3 { margin:0; }
.ct-cr-select { flex:1 1 14rem; max-width:26rem; padding:.34rem .6rem; border-radius:var(--ct-r-md,.5rem); border:1px solid var(--ct-hairline); background:var(--ct-surface); color:var(--ct-text-strong); font-size:.8rem; font-weight:600; }
.ct-cr-legend { margin-left:auto; display:flex; flex-wrap:wrap; gap:.6rem; }
.ct-cr-leg { display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; color:var(--ct-text-muted); }
.ct-cr-leg-dot { width:.6rem; height:.6rem; border-radius:50%; background:var(--ct-text-faint); }
.ct-cr-leg-dot--ok { background:var(--ct-success); }
.ct-cr-leg-dot--warn { background:var(--ct-warning); }
.ct-cr-leg-dot--bad { background:var(--ct-danger); }

/* ② the visual inspection render (reuses the .ct-ins / .cl-* / .ext-* capture styles) */
.ct-cr-view { margin-top:.2rem; }
.ct-cr .ct-ins--cr { background:transparent; padding:0; min-height:0; }
.ct-cr .ct-ins--cr .ct-ins-body { padding:0; }
/* per-group OK|Attention|Problem tally beside a group title (CR only) */
.ct-cr .mb-group-title { display:flex; align-items:center; gap:.5rem; }
.ct-cr-gcount { margin-left:auto; display:inline-flex; gap:.2rem; }
.ct-cr-gc { min-width:1.3rem; text-align:center; padding:.02rem .3rem; border-radius:.3rem; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.ct-cr-gc--ok { background:var(--ct-success-soft); color:var(--ct-success); }
.ct-cr-gc--warn { background:var(--ct-warning-soft); color:var(--ct-warning); }
.ct-cr-gc--bad { background:var(--ct-danger-soft); color:var(--ct-danger); }

/* Mixed "what changed since the previous inspection" strip */
.ct-cr-changes { margin:.1rem 0 .6rem; padding:.55rem .7rem; border-radius:var(--ct-r-md,.5rem); background:var(--ct-accent-soft); border:1px solid var(--ct-hairline); }
.ct-cr-changes-h { display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); margin-bottom:.4rem; }
.ct-cr-changes-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.ct-cr-change { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-surface); border:1px solid var(--ct-hairline); font-size:.76rem; color:var(--ct-text); }
.ct-cr-change small { color:var(--ct-text-faint); }
.ct-cr-change-area { font-size:.6rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700; color:var(--ct-text-faint); }
.ct-cr-change-badge { font-size:.66rem; font-weight:800; text-transform:uppercase; }
.ct-cr-change--success { border-color:var(--ct-success); }
.ct-cr-change--success > i, .ct-cr-change--success .ct-cr-change-badge { color:var(--ct-success); }
.ct-cr-change--danger { border-color:var(--ct-danger); }
.ct-cr-change--danger > i, .ct-cr-change--danger .ct-cr-change-badge { color:var(--ct-danger); }
.ct-cr-change--neutral > i { color:var(--ct-text-faint); }

/* work-status strip — findings that already have a task (in progress / fixed) */
.ct-cr-work { margin:.1rem 0 .6rem; padding:.55rem .7rem; border-radius:var(--ct-r-md,.5rem); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); }
.ct-cr-work-h { display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); margin-bottom:.4rem; }
.ct-cr-work-h i { color:var(--ct-accent,#486db4); }
.ct-cr-work-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.ct-cr-work-item { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius:var(--ct-r-pill,999px); background:var(--ct-surface); border:1px solid var(--ct-hairline); font-size:.76rem; color:var(--ct-text); }
.ct-cr-work-badge { font-size:.66rem; font-weight:800; text-transform:uppercase; }
.ct-cr-work-item--done { border-color:var(--ct-success); }
.ct-cr-work-item--done > i, .ct-cr-work-item--done .ct-cr-work-badge { color:var(--ct-success); }
.ct-cr-work-item--active { border-color:var(--ct-warning); }
.ct-cr-work-item--active > i, .ct-cr-work-item--active .ct-cr-work-badge { color:var(--ct-warning); }

/* shared with the diagnostic blocks below */
.ct-cr-cost { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:700; color:var(--ct-text-strong); white-space:nowrap; }
.ct-cr-cost i { color:var(--ct-text-faint); }
.ct-cr-desc { font-size:.8rem; line-height:1.4; color:var(--ct-text-muted); }
.ct-cr-media { display:flex; flex-wrap:wrap; gap:.3rem; }
.ct-cr-thumb { width:2.6rem; height:2.6rem; object-fit:cover; border-radius:var(--ct-r-sm,.35rem); border:1px solid var(--ct-hairline); cursor:zoom-in; }

/* diagnostic blocks */
.ct-cr-diag { margin-top:.8rem; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md,.55rem); background:var(--ct-surface); overflow:hidden; }
.ct-cr-diag-head { width:100%; display:flex; align-items:center; gap:.55rem; padding:.55rem .8rem; background:var(--ct-surface-sunken); border:0; cursor:pointer; font-size:.86rem; color:var(--ct-text-strong); }
.ct-cr-diag-name { font-weight:700; }
.ct-cr-diag-caret { margin-left:auto; color:var(--ct-text-faint); font-size:.72rem; }
.ct-cr-diag-body { padding:.7rem .8rem .8rem; display:flex; flex-direction:column; gap:.6rem; }
.ct-cr-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr)); gap:.4rem; }
.ct-cr-tile { display:flex; flex-direction:column; gap:.1rem; padding:.4rem .55rem; border-radius:var(--ct-r-sm,.4rem); background:var(--ct-surface-sunken); border-left:.2rem solid var(--ct-text-faint); }
.ct-cr-tile--ok { border-left-color:var(--ct-success); }
.ct-cr-tile--warn { border-left-color:var(--ct-warning); }
.ct-cr-tile--bad { border-left-color:var(--ct-danger); }
.ct-cr-tile-ic { width:1rem; height:1rem; object-fit:contain; }
.ct-cr-tile-l { font-size:.66rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-faint); font-weight:700; }
.ct-cr-tile-v { font-size:.82rem; font-weight:700; color:var(--ct-text-strong); }
.ct-cr-flist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.28rem; }
.ct-cr-fitem { display:flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--ct-text); }
.ct-cr-fdot { width:.5rem; height:.5rem; border-radius:50%; flex:0 0 auto; background:var(--ct-text-faint); }
.ct-cr-fitem--bad .ct-cr-fdot { background:var(--ct-danger); }
.ct-cr-fitem--warn .ct-cr-fdot { background:var(--ct-warning); }
.ct-cr-fitem--ok .ct-cr-fdot { background:var(--ct-success); }
.ct-cr-defect, .ct-cr-fix { padding:.45rem .6rem; border-radius:var(--ct-r-sm,.4rem); background:var(--ct-surface-sunken); display:flex; flex-direction:column; gap:.3rem; }
.ct-cr-defect-h, .ct-cr-fix-h { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ct-text-strong); }
.ct-cr-defect-h .ct-cr-cost, .ct-cr-fix-h .ct-cr-cost { color:var(--ct-warning); }
.ct-cr-prob { font-size:.7rem; font-weight:700; color:var(--ct-text-faint); }
.ct-cr-dtc { display:flex; align-items:center; gap:.5rem; font-size:.8rem; padding:.2rem 0; }
.ct-cr-dtc--major .ct-cr-code { background:var(--ct-danger-soft); color:var(--ct-danger); }
.ct-cr-code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:700; font-size:.74rem; padding:.05rem .4rem; border-radius:.3rem; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); flex:0 0 auto; }
.ct-cr-dtc-txt { color:var(--ct-text-muted); }
.ct-cr-exc { font-size:.8rem; line-height:1.4; color:var(--ct-text); padding:.3rem 0; }
.ct-cr-exc--bad { display:flex; align-items:center; gap:.45rem; font-weight:700; color:var(--ct-danger); }
.ct-cr-diag-foot { display:flex; flex-wrap:wrap; gap:.5rem; padding-top:.3rem; }
/* UVeye recognized tire specs strip (brand / size / tread / pressure / age) */
.ct-cr-tires { margin-top:.2rem; }
.ct-cr-tires-h { display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); margin-bottom:.4rem; }
.ct-cr-tires-h i { color:var(--ct-text-faint); }
.ct-cr-tires-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(11rem, 1fr)); gap:.4rem; }
.ct-cr-tire { padding:.45rem .55rem; border-radius:var(--ct-r-sm,.4rem); background:var(--ct-surface-sunken); border-left:.22rem solid var(--ct-text-faint); }
.ct-cr-tire--warn { border-left-color:var(--ct-warning); }
.ct-cr-tire--bad { border-left-color:var(--ct-danger); }
.ct-cr-tire-pos { display:flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:800; color:var(--ct-text-strong); margin-bottom:.25rem; }
.ct-cr-tire-dot { width:.55rem; height:.55rem; border-radius:50%; background:var(--ct-success); flex:0 0 auto; }
.ct-cr-tire--warn .ct-cr-tire-dot { background:var(--ct-warning); }
.ct-cr-tire--bad .ct-cr-tire-dot { background:var(--ct-danger); }
.ct-cr-tire-dmg { margin-left:auto; background:var(--ct-danger-soft); color:var(--ct-danger); font-size:.66rem; font-weight:800; padding:0 .35rem; border-radius:999px; }
.ct-cr-tire-specs { display:flex; flex-wrap:wrap; gap:.15rem .7rem; font-size:.74rem; color:var(--ct-text-muted); }
.ct-cr-tire-specs b { color:var(--ct-text-faint); font-weight:700; font-size:.62rem; text-transform:uppercase; letter-spacing:.02em; margin-right:.2rem; }
/* UVeye scan COMBINED into the inspection view */
.ct-cr-uv { margin-top:.7rem; padding-top:.6rem; border-top:1px dashed var(--ct-hairline); display:flex; flex-direction:column; gap:.6rem; }
.ct-cr-subh { display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:800; color:var(--ct-text-strong); }
.ct-cr-subh > i:first-child { color:var(--ct-accent,#486db4); }
.ct-cr-subh-link { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--ct-accent,#486db4); text-decoration:none; white-space:nowrap; }
.ct-cr-uv-sub { display:flex; flex-direction:column; gap:.35rem; }
.ct-cr-subh2 { display:flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); }
.ct-cr-subh2 i { color:var(--ct-text-faint); }
.ct-cr-thumb--lg { width:5.5rem; height:4rem; }
.ct-cr-pano { display:block; width:100%; padding:0; border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md,.5rem); overflow:hidden; background:var(--ct-surface-sunken); cursor:zoom-in; }
.ct-cr-pano img { display:block; width:100%; height:auto; }
/* "Show/Hide unchecked" toggle — the CR view hides never-answered items by default */
.ct-cr-hidetgl { display:inline-flex; align-items:center; gap:.35rem; margin-left:auto; font-size:.72rem; font-weight:700; color:var(--ct-text-muted);
    background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); border-radius:999px; padding:.22rem .65rem; cursor:pointer; white-space:nowrap; }
.ct-cr-hidetgl:hover { color:var(--ct-accent,#486db4); border-color:var(--ct-accent,#486db4); }
/* UVeye attribution strip + details-block chrome */
.ct-cr-uv-note { font-size:.72rem; font-weight:500; color:var(--ct-text-faint); }
.ct-cr-uv-count { font-size:.7rem; font-weight:700; color:var(--ct-text-muted); background:var(--ct-surface); border-radius:999px; padding:.1rem .5rem; }

/* ── CR split-screen (.ct-crt) — the report left, the task builder right.
      The wrapper lives INSIDE the Filament CR modal; when the builder pane is
      present (tasks.create) the modal window widens past 7xl. Both panes keep
      their own 74vh scroll (the .ct-cr box already does). ─────────────────── */
.fi-modal-window:has(.ct-crt--split) { max-width:min(110rem, 96vw) !important; }
.ct-crt--split { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:0; align-items:start; }
.ct-crt--split > .ct-crt-panel { border-left:1px solid var(--ct-hairline); padding-left:1rem; margin-left:1rem; max-height:74vh; overflow-y:auto; }
@media (max-width: 1100px) {
    .ct-crt--split { grid-template-columns:1fr; }
    .ct-crt--split > .ct-crt-panel { border-left:0; padding-left:0; margin-left:0; border-top:1px solid var(--ct-hairline); margin-top:1rem; padding-top:1rem; max-height:none; }
}

/* ── CR task builder (.ct-crb) — issues tray → draft task cards.
      The draft cards replicate the v1 "Assignment of tasks" design
      (design samples/CR-TASK/mvi_task): its palette lives in --crb-* vars
      (v1 light values; .dark remaps them to the token world). ─────────────── */
.ct-crb {
    --crb-band:#cedcee; --crb-band2:#c3d6ef; --crb-band-line:#b8c4e3; --crb-band-glow:#dfe9f5;
    --crb-accent:#5078fe; --crb-soft:#f4f6fa; --crb-text:#4e5260;
    display:flex; flex-direction:column; gap:.8rem; font-size:.86rem; color:var(--ct-text); padding:.1rem .1rem .4rem; }
.dark .ct-crb {
    --crb-band:#2b3950; --crb-band2:#243146; --crb-band-line:#3a4a66; --crb-band-glow:rgba(255,255,255,.04);
    --crb-accent:#6b8afd; --crb-soft:var(--ct-surface-sunken); --crb-text:var(--ct-text); }
.ct-crb [x-cloak] { display:none !important; }
.ct-crb-head { display:flex; align-items:center; gap:.6rem; }
.ct-crb-h3 { display:flex; align-items:center; gap:.45rem; font-size:.95rem; font-weight:800; color:var(--ct-text-strong); }
.ct-crb-h3 i { color:var(--ct-accent,#486db4); }
.ct-crb-head-acts { margin-left:auto; display:flex; gap:.4rem; }

/* approval-lock banner */
.ct-crb-lock { border:1px solid var(--ct-warning,#d97706); border-radius:var(--ct-r-md,.5rem); background:var(--ct-warning-soft,rgba(217,119,6,.08)); padding:.55rem .7rem; display:flex; flex-direction:column; gap:.45rem; }
.ct-crb-lock-row { display:flex; align-items:flex-start; gap:.5rem; font-size:.8rem; }
.ct-crb-lock-row > i { color:var(--ct-warning,#d97706); margin-top:.15rem; }
.ct-crb-lock-txt strong { color:var(--ct-text-strong); }
.ct-crb-lock-acts { display:flex; gap:.4rem; flex-wrap:wrap; }
.ct-crb-lock-rej { display:flex; gap:.4rem; align-items:center; }
.ct-crb-lock-rej .ct-tm-input { flex:1; }

/* Issues tray — a self-contained card. A header BAND (fold toggle + select chips
   + batch actions) that, when open, connects seamlessly to the grouped list. */
.ct-crb-tray { display:flex; flex-direction:column; border:1px solid var(--ct-hairline); border-radius:10px; background:var(--ct-surface-raised); overflow:hidden; }
.ct-crb-tray-bar { display:flex; align-items:center; gap:.35rem .5rem; flex-wrap:wrap; padding:.35rem .45rem; background:var(--ct-surface-sunken); }
.ct-crb-tray--open .ct-crb-tray-bar { border-bottom:1px solid var(--ct-hairline); }
/* Chevron + "Issues" + count read as ONE forgiving toggle target. */
.ct-crb-tray-toggle { display:inline-flex; align-items:center; gap:.4rem; border:0; background:transparent; cursor:pointer; padding:.22rem .4rem; border-radius:7px; color:var(--ct-text-strong); line-height:1; }
.ct-crb-tray-toggle:hover { background:var(--ct-hover,rgba(0,0,0,.05)); }
.ct-crb-tray-chev { font-size:.64rem; width:.7rem; text-align:center; color:var(--ct-text-muted); }
.ct-crb-tray-title { font-size:.82rem; font-weight:800; letter-spacing:.01em; }
.ct-crb-tray-n { display:inline-flex; align-items:center; justify-content:center; min-width:1.2rem; height:1.05rem; padding:0 .35rem; border-radius:999px; background:var(--ct-surface); border:1px solid var(--ct-hairline); color:var(--ct-text-muted); font-size:.64rem; font-weight:800; line-height:1; }
.ct-crb-sel { display:inline-flex; align-items:center; gap:.3rem; }
.ct-crb-sel-l { font-weight:800; color:var(--ct-text-muted); text-transform:uppercase; letter-spacing:.03em; font-size:.6rem; }
.ct-crb-sel-b { border:1px solid var(--ct-hairline); background:var(--ct-surface); color:var(--ct-text-muted); font-size:.66rem; font-weight:700; padding:.1rem .55rem; border-radius:999px; cursor:pointer; line-height:1.3; }
.ct-crb-sel-b:hover, .ct-crb-sel-b.is-on { background:var(--crb-accent,#5078fe); color:#fff; border-color:var(--crb-accent,#5078fe); }
.ct-crb-tray-acts { margin-left:auto; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
/* Utility actions (blank task · merge) sit after a hairline divider so they read as
   "other" next to the primary create-from-findings buttons. */
.ct-crb-tray-util { display:inline-flex; align-items:center; gap:.35rem; padding-left:.45rem; border-left:1px solid var(--ct-hairline); }
.ct-crb-tray-acts .ct-btn--sm { line-height:1.25; }
.ct-crb-tray-body { display:flex; flex-direction:column; gap:.35rem; padding:.5rem .5rem .55rem; background:var(--ct-surface); }
.ct-crb-area-h { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); margin:.15rem 0 .18rem; }
/* status groups (Pending / Fixed) — collapsible, compact */
.ct-crb-grp { display:flex; flex-direction:column; gap:.15rem; }
.ct-crb-grp + .ct-crb-grp { margin-top:.25rem; }
.ct-crb-grp-h { display:flex; align-items:center; gap:.35rem; background:transparent; border:0; padding:.18rem .1rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); cursor:pointer; }
.ct-crb-grp-h > i { font-size:.6rem; width:.7rem; text-align:center; }
.ct-crb-grp-done { color:var(--ct-success,#16a34a); }
.ct-crb-grp-active { color:var(--ct-warning,#d97706); }
.ct-crb-grp-skip { color:var(--ct-text-faint); }
.ct-crb-grp-h > span > i { font-size:.66rem; }
.ct-crb-grp-body { display:flex; flex-direction:column; gap:.22rem; }
.ct-crb-issue--skipped { opacity:.55; }
.ct-crb-skip { flex:none; width:1.35rem; height:1.35rem; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ct-text-faint); cursor:pointer; border-radius:999px; font-size:.66rem; }
.ct-crb-skip:hover { color:var(--ct-text-strong); background:var(--ct-hover); }
.ct-crb-issue { display:flex; align-items:center; gap:.4rem; padding:.24rem .4rem; border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-sm,.375rem); background:var(--ct-surface); min-width:0; }
.ct-crb-issue--locked { opacity:.62; }
.ct-crb-issue--on { border-color:var(--crb-accent); background:color-mix(in srgb, var(--crb-accent) 8%, var(--ct-surface)); }
.ct-crb-check { flex:none; width:.9rem; height:.9rem; cursor:pointer; }
.ct-crb-check--ph { visibility:hidden; }
.ct-crb-dot { width:.55rem; height:.55rem; border-radius:999px; flex:none; }
.ct-crb-dot--ok { background:var(--ct-success,#16a34a); }
.ct-crb-dot--warn { background:var(--ct-warning,#d97706); }
.ct-crb-dot--bad { background:var(--ct-danger,#dc2626); }
.ct-crb-dot--na { background:var(--ct-text-faint); }
/* compact single-line row: title flexes + ellipsises, everything else is flex:none */
.ct-crb-issue-t { flex:1 1 auto; min-width:2.5rem; font-size:.78rem; font-weight:650; color:var(--ct-text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-crb-issue-area { flex:none; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--ct-text-faint); }
.ct-crb-st { flex:none; font-size:.74rem; line-height:1; }
.ct-crb-st--done { color:var(--ct-success,#16a34a); }
.ct-crb-st--active { color:var(--ct-warning,#d97706); }
.ct-crb-task-badge { flex:none; font-size:.66rem; font-weight:700; border-radius:999px; padding:.06rem .4rem; border:1px solid var(--ct-hairline); background:var(--ct-surface-sunken); color:var(--ct-text-muted); cursor:pointer; white-space:nowrap; }
.ct-crb-task-badge--success { color:var(--ct-success,#16a34a); border-color:var(--ct-success,#16a34a); }
.ct-crb-task-badge--warning { color:var(--ct-warning,#d97706); border-color:var(--ct-warning,#d97706); }
.ct-crb-task-badge--danger { color:var(--ct-danger,#dc2626); border-color:var(--ct-danger,#dc2626); }
.ct-crb-task-badge--info { color:var(--ct-info,#0284c7); border-color:var(--ct-info,#0284c7); }
.ct-crb-issue-act { flex:none; display:flex; align-items:center; gap:.3rem; color:var(--ct-text-faint); }
.ct-crb-add { width:1.55rem; height:1.55rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid var(--ct-accent,#486db4); color:var(--ct-accent,#486db4); background:transparent; cursor:pointer; }
.ct-crb-add:hover { background:var(--ct-accent-soft,rgba(72,109,180,.12)); }
.ct-crb-addwrap { position:relative; }
.ct-crb-menu { position:absolute; right:0; top:calc(100% + .25rem); z-index:20; min-width:11rem; display:flex; flex-direction:column; background:var(--ct-surface-raised); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md,.5rem); box-shadow:var(--ct-shadow-pop); overflow:hidden; }
.ct-crb-menu button { text-align:left; font-size:.78rem; font-weight:600; padding:.4rem .7rem; background:transparent; border:0; color:var(--ct-text); cursor:pointer; white-space:nowrap; }
.ct-crb-menu button:hover { background:var(--ct-hover); }
.ct-crb-menu button i { margin-right:.35rem; width:.9rem; text-align:center; color:var(--crb-accent,#5078fe); font-size:.72rem; }
.ct-crb-menu-lbl { font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-muted); padding:.35rem .7rem .1rem; }
/* opened near the scrollport bottom → flip upward so it stays reachable */
.ct-crb-menu--up { top:auto; bottom:calc(100% + .25rem); }
.ct-crb-hint { font-size:.78rem; color:var(--ct-text-muted); text-align:center; padding:.6rem; border:1px dashed var(--ct-hairline); border-radius:var(--ct-r-md,.5rem); }

/* ── Draft task cards — the v1 "Assignment of tasks" card (mvi_task template):
      banded header (#N · order chevrons · title · action icons), the blue tab
      bar (Parts · MVI Items · Line Items · Assignees), the settings panel
      (Priority · Deadline · Privacy · Move to · Copy to), the v1 line-item
      table with a Total column, gear-expandable part rows, and the v1
      color-coded attendant chips. ──────────────────────────────────────────── */
.ct-crb-tasks { display:grid; gap:.7rem; }
.ct-crb-task { background:var(--ct-surface-raised); border-radius:10px; border-bottom:1px solid var(--crb-band); box-shadow:0 10px 4px -10px rgba(0,0,0,.18); }
/* a card checked for merge — accent ring so the selection set reads at a glance */
.ct-crb-task--sel { box-shadow:0 0 0 2px var(--crb-accent), 0 10px 4px -10px rgba(0,0,0,.18); }

.ct-crb-t-head { background:var(--crb-band); display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:5px; padding:5px 6px; border-radius:10px 10px 0 0; box-shadow:inset 0 15px 20px var(--crb-band-glow); color:var(--crb-text); }
.ct-crb-t-order { font-size:1.5rem; line-height:1.5rem; font-weight:500; white-space:nowrap; }
.ct-crb-t-order > i { font-size:.85rem; vertical-align:middle; padding:0 4px; opacity:.75; }
.ct-crb-t-sort { display:flex; flex-direction:column; font-size:.6rem; }
.ct-crb-t-sort button { border:0; background:transparent; color:var(--crb-text); padding:1px 6px; cursor:pointer; border-radius:4px; line-height:1.1; }
.ct-crb-t-sort button:hover:not(:disabled) { background:var(--crb-accent); color:#fff; }
.ct-crb-t-sort button:disabled { opacity:.3; cursor:default; }
.ct-crb-t-title { min-width:0; border:0; background:transparent; font-size:1.05rem; font-weight:500; color:var(--crb-text); padding:2px 4px; border-radius:5px; }
.ct-crb-t-title:focus { outline:none; background:color-mix(in srgb, #fff 45%, transparent); }
.dark .ct-crb-t-title:focus { background:color-mix(in srgb, #000 30%, transparent); }
.ct-crb-t-hacts { display:flex; align-items:center; gap:2px; font-size:.95rem; }
.ct-crb-t-hgrp { display:inline-flex; align-items:center; gap:2px; }
.ct-crb-t-hacts button { border:0; background:transparent; color:var(--crb-text); padding:6px 7px; cursor:pointer; border-radius:5px; }
.ct-crb-t-hacts button:hover, .ct-crb-t-hacts button.is-on { background:var(--crb-accent); color:#fff; }
/* select-for-merge checkbox lit when the card is selected */
.ct-crb-t-hacts .ct-crb-t-sel.is-on { background:var(--crb-accent); color:#fff; }
/* the "merge selected here" button reads active (accent-filled) the moment a
   selection exists, so it's obvious which card the merge lands on */
.ct-crb-t-hacts .ct-crb-t-mergehere { background:var(--crb-accent); color:#fff; }
.ct-crb-t-hacts .ct-crb-t-mergehere:hover { filter:brightness(1.08); }
/* Uniform v1 toolbar icons — same footprint as the rest, just colour-cued: save
   (create) reads green, remove (×) reds on hover (v1 btn-close). */
.ct-crb-t-hacts .ct-crb-t-create { color:var(--ct-success,#16a34a); }
.ct-crb-t-hacts .ct-crb-t-create:hover:not(:disabled) { background:var(--ct-success,#16a34a); color:#fff; }
.ct-crb-t-hacts .ct-crb-t-create:disabled { opacity:.5; cursor:default; }
.ct-crb-t-hacts .ct-crb-t-discard:hover { background:var(--ct-danger,#dc2626); color:#fff; }

/* header add-bar — v1 .mvi-add-task-actions verbatim: glued flush under the header band
   (a direct child of .ct-crb-task, above the task text). flex space-around, flex-grow
   tabs, #c3d6ef band, 1px #b8c4e3 top/bottom, bottom-rounded 10px. Active (section has
   content / is open) = faint rgba(0,0,0,.05) overlay; inactive = transparent (band
   shows); hover/focus = solid #5078fe. */
.ct-crb-t-addbar { display:flex; gap:0; justify-content:space-around; align-items:center; background:var(--crb-band2); border-top:1px solid var(--crb-band-line); border-bottom:1px solid var(--crb-band-line); border-radius:0 0 10px 10px; overflow:hidden; }
.ct-crb-t-addbar button { flex-grow:2; border:0; background:transparent; color:var(--crb-text); padding:5px; font-size:12px; text-align:center; cursor:pointer; transition:all ease-in .2s; }
.ct-crb-t-addbar button.is-on { background:rgba(0,0,0,.05); }
.dark .ct-crb-t-addbar button.is-on { background:rgba(255,255,255,.06); }
.ct-crb-t-addbar button:hover, .ct-crb-t-addbar button:focus { background:var(--crb-accent); color:#fff; }
.ct-crb-t-sec { display:grid; gap:8px; padding-top:2px; }
.ct-crb-t-sech { display:flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ct-text-muted); }
.ct-crb-t-sech i { color:var(--crb-accent); }
.ct-crb-t-secn { margin-left:.1rem; min-width:1.1rem; text-align:center; padding:.02rem .3rem; border-radius:.3rem; background:var(--crb-band); color:var(--crb-text); font-size:.66rem; font-weight:800; }
/* Live parts subtotal shown in the section header. */
.ct-crb-t-sectot { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--crb-accent); text-transform:none; letter-spacing:0; }

.ct-crb-t-edits { display:grid; grid-template-columns:repeat(auto-fit, minmax(88px, 1fr)); gap:10px; padding:10px; border-bottom:1px solid var(--crb-band); background:linear-gradient(180deg, var(--ct-surface-raised) 0%, var(--ct-surface-sunken) 100%); }
.ct-crb-t-set { display:grid; gap:4px; font-size:.7rem; text-align:center; color:var(--ct-text-muted); min-width:0; align-content:start; }
.ct-crb-t-set > span { font-weight:600; }
.ct-crb-t-set select, .ct-crb-t-set input { width:100%; box-sizing:border-box; background:var(--crb-soft); border:1px solid var(--ct-hairline); border-radius:3px; font-size:.72rem; color:var(--crb-text); text-align:center; padding:3px; }

.ct-crb-t-body { display:grid; gap:10px; padding:10px 14px; }
.ct-crb-t-row { display:grid; gap:8px; }
.ct-crb-t-label { font-size:.72rem; color:var(--ct-text-muted); padding:0 0 0 4px; }
.ct-crb-t-desc { width:100%; box-sizing:border-box; resize:none; padding:6px; border-radius:5px; border:1px solid var(--crb-band); background:var(--ct-surface-raised); color:var(--ct-text); font-size:.8rem; }
.ct-crb-t-desc:focus { outline:none; border-color:var(--crb-accent); }
.ct-crb-t-empty { font-size:.74rem; color:var(--ct-text-faint); text-align:center; padding:.3rem; }
.ct-crb-t-x { border:0; background:transparent; color:var(--ct-text-faint); cursor:pointer; padding:2px; justify-self:center; }
.ct-crb-t-x:hover { color:var(--ct-danger,#dc2626); }

/* the v1 soft action button (.task-mvi-elements-selector) */
.ct-crb-t-btn { border:0; background:var(--crb-soft); color:var(--crb-accent); padding:9px 10px; font-size:.74rem; font-weight:600; border-radius:5px; width:100%; cursor:pointer; }
.ct-crb-t-btn:hover { background:var(--crb-accent); color:#fff; }

/* MVI items — v1 .added-mvi-element: [×][dot][name + inline line/gear actions][comment
   textarea]. Dot is v1's 15×10 rounded-rect status swatch (overrides the round dot). */
.ct-crb-t-mvi { display:grid; grid-template-columns:auto 16px minmax(0,42%) minmax(0,1fr); align-items:center; gap:10px; border-bottom:1px solid var(--crb-band-line); padding:0 0 10px 0; }
.ct-crb-t-mvi .ct-crb-dot { width:15px; height:10px; border-radius:3px; }
.ct-crb-t-mvi-name { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; color:var(--crb-text); }
.ct-crb-t-mvi-ttl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ct-crb-t-mvi-note { min-width:0; box-sizing:border-box; width:100%; padding:5px 8px; border-radius:5px; border:1px solid var(--crb-band); background:var(--ct-surface-raised); color:var(--ct-text); font-size:12px; line-height:1.3; font-family:inherit; resize:vertical; min-height:34px; }
.ct-crb-t-mvi-note:focus { outline:none; border-color:var(--crb-accent); }
.ct-crb-t-conv { display:inline-flex; gap:5px; flex-shrink:0; margin-left:2px; }
.ct-crb-t-conv button { border:0; background:transparent; color:var(--ct-text-faint); cursor:pointer; padding:3px; border-radius:4px; font-size:.78rem; }
.ct-crb-t-conv button:hover { color:var(--crb-accent); background:var(--crb-soft); }

/* line items — the v1 table: [x] name | Parts | Hours | H/r | Total | →part */
.ct-crb-t-line { display:grid; grid-template-columns:16px minmax(0,3.4fr) 1fr 1fr 1fr minmax(2.2rem,auto) 1.35rem; gap:2px 6px; align-items:center; border-bottom:1px solid var(--crb-band-line); padding:0 0 8px 0; }
.ct-crb-t-line--head { border-bottom:0; padding:0; font-size:.68rem; font-weight:600; color:var(--ct-text-muted); text-align:center; }
.ct-crb-t-line > span { min-width:0; text-align:center; }
.ct-crb-t-line input { width:100%; box-sizing:border-box; padding:5px 6px; border-radius:5px; border:1px solid var(--crb-band); background:var(--ct-surface-raised); color:var(--ct-text); font-size:.74rem; }
.ct-crb-t-total { font-size:.74rem; color:var(--crb-accent); white-space:nowrap; }
/* A line's flat Parts cost is superseded once a detailed Parts section exists (the
   server counts the Parts, not this) — dim it so it's clearly out of the total. */
.ct-crb-t-superseded { opacity:.45; text-decoration:line-through; }
.ct-crb-t-conv1 { font-size:.68rem; }
.ct-crb-t-conv1:hover { color:var(--crb-accent) !important; }
.ct-crb-t-grand { display:flex; justify-content:flex-end; gap:.5rem; font-size:.78rem; color:var(--crb-accent); font-weight:600; padding-right:2px; }

/* parts — [x][name][comment][gear] + the expandable v1 settings panel */
.ct-crb-t-part { display:grid; grid-template-columns:18px 1fr 1fr 22px; column-gap:8px; row-gap:8px; align-items:center; border-bottom:1px solid var(--crb-band-line); padding:0 0 8px 0; }
.ct-crb-t-part input { min-width:0; box-sizing:border-box; padding:5px 8px; border-radius:5px; border:1px solid var(--crb-band); background:var(--ct-surface-raised); color:var(--ct-text); font-size:.74rem; }
.ct-crb-t-gear { border:0; background:transparent; color:var(--ct-text-muted); cursor:pointer; padding:2px; }
.ct-crb-t-gear:hover, .ct-crb-t-gear.is-on { color:var(--crb-accent); }
.ct-crb-t-part-set { grid-column:1 / span 4; display:grid; grid-template-columns:repeat(auto-fit, minmax(70px, 1fr)); gap:8px; padding:8px; border-radius:0 0 8px 8px; background:linear-gradient(180deg, var(--ct-surface-raised) 0%, var(--ct-surface-sunken) 100%); border-bottom:1px solid var(--crb-band); }

/* attendants — new-dialog style: two buttons (Assignees · Approval), one grouped
   searchable dropdown, and the v1 color-coded chips */
.ct-crb-t-attend { display:grid; gap:8px; }
.ct-crb-t-abar { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ct-crb-t-abar button { border:1px solid var(--crb-band); background:var(--crb-soft); color:var(--crb-accent); padding:9px 6px; font-size:.74rem; font-weight:600; border-radius:6px; cursor:pointer; white-space:nowrap; }
.ct-crb-t-abar button:hover { background:color-mix(in srgb, var(--crb-accent) 15%, transparent); color:var(--crb-accent); border-color:var(--crb-accent); }
/* the OPEN list's button stays solid-filled (distinct from a light hover) so it always reads as active */
.ct-crb-t-abar button.is-on, .ct-crb-t-abar button.is-on:hover { background:var(--crb-accent); color:#fff; border-color:var(--crb-accent); }
.ct-crb-t-adrop { background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); border-radius:6px; padding:8px; display:grid; gap:6px; }
/* new-task-dialog picker parity: ONE scroll on the tab group (never per-category),
   accent-soft category banners glued to their lists, dotted-divider rows in 2 columns. */
.ct-crb-t-agroups { display:grid; gap:0; max-height:17rem; overflow-y:auto; }
.ct-crb-t-acat { text-align:center; padding:.2rem; margin-top:.5rem; background:var(--ct-accent-soft); color:var(--ct-text-strong); font-weight:600; font-size:.68rem; border-radius:var(--ct-r-sm,4px) var(--ct-r-sm,4px) 0 0; }
.ct-crb-t-acat:first-child { margin-top:0; }
.ct-crb-t-psearch { width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--ct-hairline); border-radius:5px; font-size:.74rem; background:var(--ct-surface-raised); color:var(--ct-text); }
.ct-crb-t-psearch:focus { outline:none; border-color:var(--crb-accent); }
.ct-crb-t-plist { display:grid; grid-template-columns:1fr 1fr; gap:0 .5rem; }
.ct-crb-t-plist a { display:flex; align-items:center; justify-content:space-between; gap:.3rem; min-width:0; width:100%; padding:.3rem .5rem; font-size:.7rem; color:var(--ct-text-muted); text-decoration:none; border:none; border-bottom:1px dotted var(--ct-hairline); cursor:pointer; }
.ct-crb-t-plist a > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-crb-t-plist a:hover { background:var(--crb-accent); color:#fff; border-radius:var(--ct-r-sm,4px); }
.ct-crb-t-plist a.is-added { color:var(--ct-text-faint); opacity:.7; }
.ct-crb-t-plist a.is-added:hover { background:color-mix(in srgb, var(--ct-danger,#dc2626) 14%, transparent); color:var(--ct-danger,#dc2626); opacity:1; }
.ct-crb-t-pick-ck { flex:none; font-size:.66rem; color:var(--ct-success,#16a34a); }
.ct-crb-t-plist a.is-added:hover .ct-crb-t-pick-ck { color:var(--ct-danger,#dc2626); }
.ct-crb-t-chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.ct-crb-t-chip { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--ct-hairline); border-radius:5px; padding:2px 10px; font-size:.72rem; }
.ct-crb-t-chip button { border:0; background:transparent; cursor:pointer; color:inherit; padding:0; opacity:.6; }
.ct-crb-t-chip button:hover { opacity:1; }
.ct-crb-t-chip--user { border-color:#d0b8d2; background:#faeffb; color:#7f6b81; }
.ct-crb-t-chip--appr { border-color:#b0c6ae; background:#f5fef4; color:#618368; }
.ct-crb-t-chip--dept { border-color:#beb8df; background:#f6f5fe; color:#6a6783; }
.ct-crb-t-chip--vend { border-color:#dab1bc; background:#fcedf1; color:#95757d; }
.dark .ct-crb-t-chip--user { border-color:#7f6b81; background:rgba(208,184,210,.14); color:#e3cfe5; }
.dark .ct-crb-t-chip--appr { border-color:#618368; background:rgba(176,198,174,.14); color:#cfe4cd; }
.dark .ct-crb-t-chip--dept { border-color:#6a6783; background:rgba(190,184,223,.14); color:#d9d5f0; }
.dark .ct-crb-t-chip--vend { border-color:#95757d; background:rgba(218,177,188,.14); color:#ecd0d8; }

.ct-crb-sorthint { text-align:center; font-size:.72rem; color:var(--ct-text-faint); }
.ct-crb-sorthint i { font-size:.6rem; }
.ct-crb-createall { display:flex; justify-content:center; padding:.2rem 0 .4rem; }

/* The task peek modal opened from INSIDE a Filament modal (the CR builder's
   task badges / Approval-task button): the --card overlay's normal z-35 sits
   BELOW the fi-modal layer (z-40), so it would open invisibly behind the CR.
   With any Filament modal open, lift it to 45 — still below the fi-modal
   stack's SECOND layer (z-50), which is where the card's own mounted action
   modals land in that scenario, so they keep rendering on top. */
body:has(.fi-modal-open) .ct-audit-modal-overlay--card { z-index:45; }

/* …but the task-peek (z-45) SPAWNS its own Filament modals (Mark done / Start /
   Cancel confirmations, history) via its own <x-filament-actions::modals />. Those
   land at the base fi-modal z-40 (they aren't a DOM sibling of the outer CR modal,
   so Filament's ~-sibling z-50 stacking never kicks in) — i.e. BEHIND the peek, so
   they can't be clicked. While the peek is open, lift every open fi-modal that is
   NOT the CR modal (the CR modal alone carries the .ct-crt split) above the peek. */
body:has(.ct-audit-modal-overlay--card) .fi-modal.fi-modal-open:not(:has(.ct-crt)) > .fi-modal-close-overlay,
body:has(.ct-audit-modal-overlay--card) .fi-modal.fi-modal-open:not(:has(.ct-crt)) > .fi-modal-window-ctn { z-index:55; }

/* the left pane's "+ task" affordance (CR view only — gated by $crTaskAdd /
   $crCanCreate): a clear little "＋ Task" pill, used on MVI element rows, diagram
   zones (incl. UVeye-only), and every diagnostic finding. Icon-only in the tight
   element toolbar; a UVeye tint on overlay-only zones + UVeye/VinTel/Appraisal. */
.ct-cr-addtask { display:inline-flex; align-items:center; gap:.25rem; flex:none; padding:.14rem .5rem;
    border-radius:999px; border:1px solid var(--ct-accent,#486db4); color:var(--ct-accent,#486db4);
    background:var(--ct-accent-soft,rgba(72,109,180,.1)); cursor:pointer; font-size:.66rem; font-weight:700; line-height:1.35; white-space:nowrap;
    transition:background .12s,color .12s,border-color .12s; }
.ct-cr-addtask i { font-size:.6rem; }
.ct-cr-addtask span { text-transform:uppercase; letter-spacing:.02em; }
.ct-cr-addtask:hover { background:var(--ct-accent,#486db4); color:#fff; }
.ct-cr-addtask--sm { margin-left:.4rem; padding:.08rem .45rem; }
.ct-cr-addtask--icon { width:1.5rem; height:1.5rem; justify-content:center; padding:0; }
.ct-cr-addtask--icon span { display:none; }
.ct-cr-addtask--icon i { font-size:.66rem; }
.ct-cr-addtask--uv { border-color:var(--ct-info,#0284c7); color:var(--ct-info,#0284c7); background:var(--ct-info-soft,rgba(2,132,199,.1)); }
.ct-cr-addtask--uv:hover { background:var(--ct-info,#0284c7); color:#fff; }
/* Diagram-summary rows are dense (swatch · name · meta · state · chevron), so
   the +task there is a compact ghost circle at rest — it only fills in on row
   hover / focus, keeping the resting list clean instead of jammed. */
.ct-cr-addtask--row { width:1.35rem; height:1.35rem; border-color:transparent; background:transparent; color:var(--ct-muted,#9aa); opacity:.5; }
.ext-row:hover .ct-cr-addtask--row, .ct-cr-addtask--row:focus-visible { opacity:1; border-color:var(--ct-accent,#486db4); background:var(--ct-accent-soft,rgba(72,109,180,.1)); color:var(--ct-accent,#486db4); }
.ct-cr-addtask--row.ct-cr-addtask--uv { color:var(--ct-info,#0284c7); }
.ext-row:hover .ct-cr-addtask--row.ct-cr-addtask--uv { border-color:var(--ct-info,#0284c7); background:var(--ct-info-soft,rgba(2,132,199,.1)); }
.ct-cr-addtask--row:hover { background:var(--ct-accent,#486db4) !important; border-color:var(--ct-accent,#486db4) !important; color:#fff !important; opacity:1; }
.ct-cr-addtask--row.ct-cr-addtask--uv:hover { background:var(--ct-info,#0284c7) !important; border-color:var(--ct-info,#0284c7) !important; }

/* an element/zone whose task is DONE — lit light-green. Diagram rows carry a
   green swatch that IS the marker (+ link to the task); text lines have no
   swatch, so they get a slim green left rail. Both are rounded pills with inner
   padding so nothing jams the lettering, and no separate checkmark icon. */
.ext-row--fixed { background:var(--ct-success-soft,rgba(22,163,74,.12)); border-radius:.45rem; padding:.25rem .45rem; }
.ext-row--fixed .ext-swatch { margin-right:.15rem; }
.ext-row--fixed .ext-row-name { color:var(--ct-success,#15803d); font-weight:600; }
.cl-el--fixed { background:var(--ct-success-soft,rgba(22,163,74,.1)); border-left:.2rem solid var(--ct-success,#16a34a);
    border-radius:.4rem; padding-left:.7rem; }
.cl-el-name--fixed { color:var(--ct-success,#16a34a); cursor:pointer; }
.cl-el-name--fixed:hover { text-decoration:underline; }
.ext-swatch--task { cursor:pointer; box-shadow:0 0 0 2px color-mix(in srgb, var(--ct-success,#16a34a) 45%, transparent); }
/* long panel names ellipsize instead of wrapping and shoving the trailing
   controls onto a second line */
.ext-row-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* inspection-group header: name + a "Task from group" affordance */
.ext-area-hd { display:flex; align-items:center; gap:.5rem; }
.ext-area-hd .ext-area-name { flex:1 1 auto; min-width:0; }
.ct-cr-addtask--group { flex:none; font-size:.62rem; padding:.1rem .45rem; }
.ct-cr .mb-group-title .ct-cr-addtask--group { margin-left:auto; }

/* Split "+task" control (_addtask.blade.php): a distinct fa-circle-plus button whose
   hover menu offers New task / Add to last / Add to existing #N. The menu is teleported
   to <body> and position:fixed (coords from the trigger) so no overflow ancestor clips
   it; hover survives the trigger→menu transit via a short JS close delay. */
.ct-cr-addtask-wrap { position:relative; display:inline-flex; }
.ct-cr-addtask--added { border-color:var(--ct-success,#16a34a) !important; color:var(--ct-success,#16a34a) !important; background:var(--ct-success-soft,rgba(22,163,74,.12)) !important; }
/* an already-drafted diagram row's "+task" stays visible (not ghosted) so its #N reads */
.ct-cr-addtask--row.ct-cr-addtask--added { opacity:1 !important; }
/* an in-progress finding's "+task" turns into an amber clock (click = view its task) */
.ct-cr-addtask--wip { border-color:var(--ct-warning,#d98a00) !important; color:var(--ct-warning,#d98a00) !important; background:var(--ct-warning-soft,rgba(214,158,46,.16)) !important; }
.ct-cr-addtask--row.ct-cr-addtask--wip { opacity:1 !important; }
.ct-cr-addtask-mi--view i { color:var(--ct-warning,#d98a00); }
.ct-cr-addtask-mi--view:hover { background:var(--ct-warning,#d98a00); }
.ct-cr-addtask-mi--view:hover i { color:#fff; }
/* "in task #N" corner badge — a sibling of the button so the diagram row's ghost opacity never dims it */
.ct-cr-addtask-num { position:absolute; top:-6px; right:-6px; z-index:2; box-sizing:border-box; min-width:.95rem; height:.95rem;
    padding:0 .2rem; border-radius:.5rem; background:var(--ct-success,#16a34a); color:#fff; font-size:.56rem; font-weight:800;
    line-height:.95rem; text-align:center; box-shadow:0 0 0 1.5px var(--ct-surface,#fff); pointer-events:none; }
.ct-cr-addtask-menu { position:fixed; z-index:9999; min-width:12rem; max-width:17rem; max-height:70vh; overflow-y:auto;
    background:var(--ct-surface,#fff); border:1px solid var(--ct-hairline); border-radius:9px;
    box-shadow:0 10px 30px -6px rgba(0,0,0,.28); padding:.3rem; display:grid; gap:1px; text-align:left; }
.ct-cr-addtask-menu[x-cloak] { display:none !important; }
.ct-cr-addtask-mi { display:flex; align-items:center; gap:.45rem; width:100%; text-align:left; border:0; background:transparent;
    color:var(--ct-text); padding:.4rem .55rem; font-size:.74rem; font-weight:500; border-radius:6px; cursor:pointer;
    text-transform:none; letter-spacing:0; line-height:1.2; white-space:nowrap; overflow:hidden; }
.ct-cr-addtask-mi i { flex:none; width:1rem; text-align:center; font-size:.72rem; color:var(--ct-accent,#486db4); }
.ct-cr-addtask-mi:hover { background:var(--ct-accent,#486db4); color:#fff; }
.ct-cr-addtask-mi:hover i { color:#fff; }
.ct-cr-addtask-grp { border-top:1px solid var(--ct-hairline); margin-top:.25rem; padding-top:.25rem; display:grid; gap:1px; max-height:12rem; overflow-y:auto; }
.ct-cr-addtask-lbl { font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-muted); padding:.15rem .55rem .25rem; }
.ct-cr-addtask-hash { flex:none; font-weight:800; font-size:.68rem; color:var(--ct-accent,#486db4); }
.ct-cr-addtask-mi--existing:hover .ct-cr-addtask-hash { color:#fff; }
.ct-cr-addtask-ttl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* ============================================================================
   VEHICLE PAGE REDESIGN (.fv-*) — the applied "final" prototype design.
   Page-scoped layer; reuses this file's shared --ct-* tokens + `.dark` selector.
   Added 2026-07-24. STAGE 1: identity header + full-width action bar (info tiles
   + action tiles). Pipeline / recon-details / body land in later stages.
   ============================================================================ */
:root { --on-accent:#fff; --on-danger:#fff; --on-warning:#fff; --on-success:#fff; }
.dark { --on-accent:#10131a; --on-danger:#2a0f0f; --on-warning:#2a1e08; --on-success:#08251a; }

/* ── identity header ── */
.fv-crumb { display:flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--ct-text-faint); margin-bottom:.35rem; }
.fv-crumb i { font-size:.6rem; }
.fv-crumb a { color:inherit; text-decoration:none; }
.fv-crumb a:hover { color:var(--ct-text-muted); }
.fv-crumb .fv-crumb-here { color:var(--ct-text-muted); }
.fv-title { font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--ct-text-strong); }
.fv-title-row { display:flex; align-items:center; justify-content:space-between; gap:.9rem 1.25rem; flex-wrap:wrap; margin:0 0 .6rem; }
.fv-titlewrap { display:flex; align-items:center; gap:.5rem .7rem; flex-wrap:wrap; min-width:0; }
.fv-labels { display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; }

/* ── chips + feeds row (pills line) ── */
.fv-idrow { display:flex; align-items:center; justify-content:flex-start; gap:.5rem .85rem; flex-wrap:wrap; }
.fv-idrow .ct-veh-hl { margin-bottom:0; }
.fv-idrow-recon { margin-left:auto; }

/* ── feed pills ── */
.fv-feeds { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.fv-feeds-lbl { display:inline-flex; align-items:center; gap:.34rem; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); }
.fv-feeds-lbl i { font-size:.72rem; }
.fv-feed { position:relative; display:inline-flex; align-items:center; gap:.32rem; padding:.22rem .55rem; border:0; border-radius:.42rem; font:inherit; font-size:.72rem; font-weight:650; cursor:pointer; background:var(--ct-accent-soft); color:var(--ct-accent); transition:box-shadow .12s ease, transform .12s ease; }
.fv-feed:hover { box-shadow:var(--ct-shadow-sm); transform:translateY(-1px); }
.fv-feed:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.fv-feed--in { color:var(--ct-success); background:var(--ct-success-soft); }
.fv-feed--out { color:var(--ct-warning); background:var(--ct-warning-soft); }
.fv-feed i { font-size:.68rem; }
.fv-feed-gone { font-weight:600; opacity:.9; }

/* ── full-width action bar (info tiles + action tiles built in as flush segments) ── */
.fv-tiles { display:flex; align-items:stretch; justify-content:flex-end; gap:.45rem; flex-wrap:wrap; margin-left:auto; }
.fv-tiles.fv-bar { width:100%; margin:.85rem 0 0; padding:.3rem; gap:.1rem; align-items:stretch; justify-content:flex-start; background:var(--ct-surface); border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-lg); box-shadow:var(--ct-shadow-sm); }
.dark .fv-tiles.fv-bar { background:var(--ct-surface-raised); border-color:var(--ct-hairline); }
.fv-tiles.fv-bar > .fv-tile, .fv-tiles.fv-bar > .fv-itile { flex:1 1 auto; background:transparent; border-color:transparent; box-shadow:none; position:relative; }
.fv-tiles.fv-bar > .fv-tile { min-width:4.75rem; }
.fv-tiles.fv-bar > .fv-itile { min-width:8.5rem; }
.fv-tiles.fv-bar > .fv-tile:not(:last-of-type)::after, .fv-tiles.fv-bar > .fv-itile::after { content:''; position:absolute; right:-.05rem; top:24%; bottom:24%; width:1px; background:var(--ct-hairline-soft); }
.fv-tiles.fv-bar > .fv-tile:hover, .fv-tiles.fv-bar > .fv-itile:hover { background:var(--ct-accent-soft); border-color:transparent; box-shadow:none; transform:none; }
.fv-tiles.fv-bar > .fv-tile:hover i, .fv-tiles.fv-bar > .fv-tile:hover .fv-tile-l { color:var(--ct-accent); }
.fv-tiles.fv-bar > .fv-tile--primary, .fv-tiles.fv-bar > .fv-tile--primary i { color:var(--ct-accent); }
.fv-tiles.fv-bar > .fv-tile--danger:hover { background:var(--ct-danger-soft); }
.fv-tiles.fv-bar > .fv-tile--danger:hover i, .fv-tiles.fv-bar > .fv-tile--danger:hover .fv-tile-l { color:var(--ct-danger); }
.fv-break { flex:0 0 100%; height:0; margin:0; }

.fv-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.32rem; min-width:4rem; padding:.5rem .6rem; font:inherit; font-size:.68rem; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; color:var(--ct-text-muted); background:var(--ct-surface); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); box-shadow:var(--ct-shadow-sm); transition:border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease; }
.dark .fv-tile { background:var(--ct-surface-raised); }
.fv-tile i { font-size:1.15rem; color:var(--ct-text-faint); transition:color .14s ease; }
.fv-tile-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.fv-tile-l { display:block; }
.fv-tile:hover { border-color:var(--ct-accent); color:var(--ct-text-strong); box-shadow:var(--ct-shadow-md); transform:translateY(-1px); }
.fv-tile:hover i { color:var(--ct-accent); }
.fv-tile:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.fv-tile--primary { background:var(--ct-accent-soft); border-color:color-mix(in srgb, var(--ct-accent) 38%, transparent); color:var(--ct-accent-strong); }
.fv-tile--primary i { color:var(--ct-accent-strong); }
.dark .fv-tile--primary { color:var(--ct-accent); }
.dark .fv-tile--primary i { color:var(--ct-accent); }
.fv-tile--primary:hover { background:var(--ct-accent); border-color:transparent; color:var(--on-accent); }
.fv-tile--primary:hover i { color:var(--on-accent); }
.fv-tile--danger:hover { border-color:var(--ct-danger); color:var(--ct-danger); }
.fv-tile--danger:hover i { color:var(--ct-danger); }
.fv-tile[data-locked] { opacity:.5; }

/* Tile dropdown (the Location tile: Change location / Request move) — anchored
   to the tile (.fv-tile is position:relative; the bar wraps, nothing clips).
   The tile's hover transform makes it a stacking context, so the MENU's
   z-index only counts inside it — the open tile itself must rise above the
   sections below (the recon pipeline), hence .fv-tile--menu-open. */
.fv-tile--menu-open { z-index:80; }
.fv-tile-menu { position:absolute; top:calc(100% + .35rem); left:50%; transform:translateX(-50%); z-index:80; min-width:11.5rem; padding:.3rem; display:flex; flex-direction:column; gap:.1rem; background:var(--ct-surface); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); box-shadow:var(--ct-shadow-md); cursor:default; }
.dark .fv-tile-menu { background:var(--ct-surface-raised); }
.fv-tile-menu-item { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; font:inherit; font-size:.78rem; font-weight:600; line-height:1.1; color:var(--ct-text-muted); background:transparent; border:0; border-radius:calc(var(--ct-r-md) - 2px); cursor:pointer; text-align:left; white-space:nowrap; }
.fv-tile-menu-item:hover { background:var(--ct-accent-soft); color:var(--ct-accent); }
.fv-tile-menu-item i { width:1.05rem; text-align:center; font-size:.9rem; }

/* CR tone-dot + count/time badges HUG the icon (inside .fv-tile-ico / .fv-itile-ico) */
.fv-tile-dot { position:absolute; top:-.22rem; right:-.34rem; width:.46rem; height:.46rem; border-radius:var(--ct-r-pill); box-shadow:0 0 0 2px var(--ct-surface); }
.dark .fv-tile-dot { box-shadow:0 0 0 2px var(--ct-surface-raised); }
.fv-tile-dot--attn { background:var(--ct-warning); }
.fv-tile-dot--prob { background:var(--ct-danger); }
.fv-nc-badge { position:absolute; top:-.62rem; right:-.66rem; min-width:1.05rem; height:1.05rem; padding:0 .25rem; display:inline-flex; align-items:center; justify-content:center; font-size:.61rem; font-weight:700; line-height:1; color:var(--on-accent); background:var(--ct-accent); border-radius:var(--ct-r-pill); box-shadow:0 0 0 2px var(--ct-surface); }
.dark .fv-nc-badge { box-shadow:0 0 0 2px var(--ct-surface-raised); }
.fv-itile-badge { position:absolute; top:-.5rem; right:-.4rem; min-width:1.15rem; height:1.15rem; padding:0 .34rem; display:inline-flex; align-items:center; justify-content:center; font-size:.63rem; font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--ct-text-muted); background:var(--ct-surface); border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-pill); box-shadow:0 0 0 2px var(--ct-surface-sunken); }
.dark .fv-itile-badge { background:var(--ct-surface-raised); box-shadow:0 0 0 2px var(--ct-surface); }
.fv-itile-badge--warn { color:var(--on-warning); background:var(--ct-warning); border-color:transparent; }

/* ── info tiles (location / recon cost / key) ── */
.fv-infoblock { display:inline-flex; align-items:stretch; gap:.45rem; flex-wrap:wrap; }
.fv-itile { display:inline-flex; align-items:center; gap:.55rem; position:relative; padding:.4rem .75rem; cursor:pointer; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); box-shadow:var(--ct-shadow-sm); font:inherit; text-align:left; transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.fv-itile:hover { border-color:var(--ct-accent); box-shadow:var(--ct-shadow-md); transform:translateY(-1px); }
.fv-itile:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.fv-itile-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.fv-itile-ico > i { font-size:1.05rem; color:var(--ct-text-faint); }
.fv-itile-txt { display:flex; flex-direction:column; gap:.06rem; min-width:0; line-height:1.15; }
.fv-itile-k { font-size:.575rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-faint); white-space:nowrap; }
.fv-itile-v { font-size:.82rem; font-weight:700; color:var(--ct-text-strong); letter-spacing:-.01em; white-space:nowrap; max-width:12rem; overflow:hidden; text-overflow:ellipsis; }
.fv-itile-s { font-size:.66rem; font-weight:600; color:var(--ct-text-muted); white-space:nowrap; }
.fv-itile-s--warn { color:var(--ct-warning); }
.fv-itile--ok .fv-itile-ico > i { color:var(--ct-success); }
.fv-itile--warn .fv-itile-ico > i, .fv-itile--warn .fv-itile-v { color:var(--ct-warning); }
.fv-tile-mark { position:absolute; top:-.4rem; left:-.3rem; width:1.15rem; height:1.15rem; border-radius:var(--ct-r-pill); display:inline-flex; align-items:center; justify-content:center; font-size:.56rem; color:#fff; background:var(--ct-info); box-shadow:0 0 0 2px var(--ct-surface); }
.dark .fv-tile-mark { box-shadow:0 0 0 2px var(--ct-surface-raised); }
.fv-tile-sep { align-self:stretch; width:1px; margin:.25rem .2rem; background:var(--ct-hairline); flex:0 0 auto; }

hr.fv-div { border:0; border-top:1px solid var(--ct-hairline-soft); margin:1.1rem 0; }
@media (max-width:640px){ .fv-tiles { flex:1 1 100%; justify-content:flex-start; } }

/* hide Filament's native page header on the redesigned vehicle page — it renders
   its own breadcrumb + title inside the content (#fv-vd-head). Scoped so no other
   page is affected. */
.fi-main:has(#fv-vd-head) .fi-header,
.fi-page:has(#fv-vd-head) .fi-header { display: none !important; }

/* Recon stats → collapse to a single "View recon details" button (the redesign);
   the timeline bar + breakdown live in the block it toggles open. */
.fv-rs-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem; font:inherit; font-size:.8rem; font-weight:650; cursor:pointer;
  color:var(--ct-text-muted); background:var(--ct-surface); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); box-shadow:var(--ct-shadow-sm);
  transition:border-color .14s ease, color .14s ease, background .14s ease; }
.dark .fv-rs-btn { background:var(--ct-surface-raised); }
.fv-rs-btn:hover { border-color:var(--ct-accent); color:var(--ct-text-strong); background:var(--ct-accent-soft); }
.fv-rs-btn > i:first-child { color:var(--ct-accent); font-size:.85rem; }
.fv-rs-btn:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.fv-rs-btn .ct-stats-frozen { margin-left:.2rem; }
.ct-stats-track-lbl { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-text-faint); margin:.7rem 0 .35rem; }

/* ── Wired recon pipeline (page-only redesign) — phase-coloured circular nodes on
   a wire; current node glows (red when past its goal), overstayed nodes get a red
   dot, time-in-status under each. Fed by StagePath ($path) + $stats overstay. ── */
.fv-wire-scroll { overflow-x:auto; padding:.6rem 0 .2rem; max-width:100%; }
.fv-wire { display:flex; align-items:flex-start; min-width:min-content; padding-top:.4rem; }
.fv-wire--busy { opacity:.55; pointer-events:none; }
.fv-wire-col { flex:1 1 0; min-width:5.5rem; display:flex; flex-direction:column; align-items:center; padding:0 .1rem; background:none; border:0; font:inherit; cursor:default; }
button.fv-wire-col { cursor:pointer; }
button.fv-wire-col:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; border-radius:var(--ct-r-md); }
.fv-wire-row { display:flex; align-items:center; justify-content:center; width:100%; height:2.4rem; }
.fv-wire-track { flex:1 1 auto; height:2px; background:var(--ct-hairline); }
.fv-wire-track.is-done { background:var(--seg, var(--ct-accent)); }
.fv-wire-track.is-hidden { visibility:hidden; }
.fv-wire-node { position:relative; z-index:1; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--ct-surface-sunken); color:var(--seg); border:1.5px solid var(--seg); box-shadow:0 0 0 3px var(--ct-canvas, var(--ct-surface)); font-size:.8rem; transition:transform .1s ease; }
.fv-wire-col--done .fv-wire-node, .fv-wire-col--current .fv-wire-node { background:var(--seg); color:var(--seg-ink, #fff); border-color:var(--seg); }
.fv-wire-col--current .fv-wire-node { box-shadow:0 0 0 3px var(--ct-canvas, var(--ct-surface)), 0 0 0 7px color-mix(in srgb, var(--seg) 45%, transparent); animation:fvwpulse 1.9s infinite; }
@keyframes fvwpulse { 0%,100% { box-shadow:0 0 0 3px var(--ct-canvas, var(--ct-surface)), 0 0 0 6px color-mix(in srgb, var(--seg) 55%, transparent); }
                     50% { box-shadow:0 0 0 3px var(--ct-canvas, var(--ct-surface)), 0 0 0 12px color-mix(in srgb, var(--seg) 12%, transparent); } }
.fv-wire-col--delayed .fv-wire-node { border-color:var(--ct-danger); animation:fvwpulse-red 1.7s infinite; }
@keyframes fvwpulse-red { 0%,100% { box-shadow:0 0 0 3px var(--ct-canvas, var(--ct-surface)), 0 0 0 6px color-mix(in srgb, var(--ct-danger) 66%, transparent); }
                         50% { box-shadow:0 0 0 3px var(--ct-canvas, var(--ct-surface)), 0 0 0 14px color-mix(in srgb, var(--ct-danger) 14%, transparent); } }
.fv-wire-dot { position:absolute; top:-2px; right:-2px; width:.62rem; height:.62rem; border-radius:50%; background:var(--ct-danger); box-shadow:0 0 0 2px var(--ct-canvas, var(--ct-surface)); z-index:2; }
button.fv-wire-col:hover .fv-wire-node { transform:translateY(-2px); }
.fv-wire-lab { text-align:center; margin-top:.45rem; padding:0 .15rem; }
.fv-wire-n { display:block; font-size:.68rem; font-weight:750; line-height:1.16; color:var(--ct-text-strong); }
.fv-wire-col--future .fv-wire-n { color:var(--ct-text-muted); font-weight:650; }
.fv-wire-col--current .fv-wire-n { font-weight:800; }
.fv-wire-d { display:block; font-size:.6rem; font-weight:600; color:var(--ct-text-faint); margin-top:.12rem; }
.fv-wire-d--over { color:var(--ct-danger); font-weight:750; }
.fv-wire-note { display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; font-size:.76rem; color:var(--ct-text-muted); font-style:italic; }
.fv-wire-note i { color:var(--ct-text-faint); font-style:normal; }

/* ══ Wired recon pipeline (page redesign, ported from the design prototype) ══
   Serpentine phase-shaded circular nodes on a wire; JS renders from a data blob
   (partials/vehicle-pipeline-wired). Supersedes the earlier flat .fv-wire-*. */
:root { --wire-idle: rgba(17,24,39,0.20); }
.dark { --wire-idle: rgba(255,255,255,0.22); }
.wire-scroll { overflow-x:auto; min-width:0; max-width:100%; padding:.5rem 0 .3rem; }
.wire-stage { position:relative; }
.wire-stage.wrapped { padding:0 1.15rem; }
.wire-row { display:flex; align-items:flex-start; min-width:min-content; padding-top:.6rem; }
.wire-row + .wire-row { margin-top:2rem; }
.wire-col { flex:1 1 0; min-width:90px; display:flex; flex-direction:column; align-items:center; position:relative; }
.uturn { position:absolute; z-index:0; pointer-events:none; border:2px solid var(--wire-idle); background:none; }
.uturn.right { border-left:none; border-radius:0 14px 14px 0; }
.uturn.left { border-right:none; border-radius:14px 0 0 14px; }
.wire-noderow { position:relative; width:100%; height:2.6rem; display:flex; align-items:center; justify-content:center; }
.wire-noderow::before, .wire-noderow::after { content:""; position:absolute; top:50%; height:2px; transform:translateY(-50%); background:var(--wire-idle); z-index:0; }
.wire-noderow::before { left:0; right:calc(100% - var(--meet, 50%)); }
.wire-noderow::after { left:var(--meet, 50%); right:0; }
.wire-col.lw-done .wire-noderow::before { background:var(--nb, var(--ct-hairline)); }
.wire-col.rw-done .wire-noderow::after { background:var(--nb, var(--ct-hairline)); }
.wire-col.lw-hide .wire-noderow::before { display:none; }
.wire-col.rw-hide .wire-noderow::after { display:none; }
.wire-node { position:relative; z-index:1; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; cursor:pointer; font:inherit; flex:0 0 auto; padding:0; background:var(--ct-surface-sunken); color:var(--ct-text-faint); border:1.5px solid var(--ct-hairline); box-shadow:0 0 0 3px var(--ct-canvas); transition:transform .1s ease; }
.wire-node i { font-size:.82rem; }
.wire-node:hover { transform:translateY(-1px); }
.wire-node:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.wire-col.is-done .wire-node { background:var(--nc); color:var(--ni, #fff); border-color:var(--nc); }
.wire-col.is-future .wire-node { background:var(--ct-surface-sunken); color:var(--nb); border-color:color-mix(in srgb, var(--nb) 45%, transparent); }
.wire-col.is-current .wire-node { background:var(--nc); color:var(--ni, #fff); border-color:var(--nc); box-shadow:0 0 0 3px var(--ct-canvas), 0 0 0 4px color-mix(in srgb, var(--nb) 30%, transparent); }
.wire-col.is-current .wire-node.wire-delayed { border-color:var(--ct-danger); box-shadow:0 0 0 3px var(--ct-canvas), 0 0 0 4px color-mix(in srgb, var(--ct-danger) 36%, transparent); }
/* Looped RADAR glow — rings emanate outward from the node and fade, forever (not
   breathing out-and-back). Composited: transform+opacity only, no box-shadow repaint.
   Two rings (::before + ::after) offset by half the cycle so one is always emerging. */
.wire-col.is-current .wire-node::before, .wire-col.is-current .wire-node::after,
.wire-sub.is-current .sc::before, .wire-sub.is-current .sc::after {
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nb) 62%, transparent);
  animation:wpulse-radar 2.4s linear infinite; will-change:transform, opacity; }
.wire-col.is-current .wire-node::before, .wire-sub.is-current .sc::before { animation-delay:-1.2s; }
.wire-col.is-current .wire-node.wire-delayed::before, .wire-col.is-current .wire-node.wire-delayed::after,
.wire-sub.is-current .sc.wire-delayed::before, .wire-sub.is-current .sc.wire-delayed::after {
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ct-danger) 64%, transparent); animation-duration:2s; }
.wire-col.is-current .wire-node.wire-delayed::before, .wire-sub.is-current .sc.wire-delayed::before { animation-delay:-1s; }
/* TRAPEZOID opacity: flat-0 shoulders [0–8%] & [92–100%], linear ramps, flat top
   [42–58%]. The shoulders hold each ring fully invisible while it teleports scale
   2.1→1 to restart, so the reset is never seen (kills the "jump every 2nd loop"). The
   linear complementary ramps mean two half-offset trapezoids sum to EXACTLY constant
   brightness (.78) — no throb. Rings stay at well-separated radii, so they barely
   overlap and source-over blending ≈ additive (stacking order can't show a seam). */
@keyframes wpulse-radar {
  0%   { transform:scale(1);     opacity:0; }
  8%   { transform:scale(1.088); opacity:0; }
  42%  { transform:scale(1.462); opacity:.78; }
  58%  { transform:scale(1.638); opacity:.78; }
  92%  { transform:scale(2.012); opacity:0; }
  100% { transform:scale(2.1);   opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .wire-col.is-current .wire-node::after, .wire-sub.is-current .sc::after { animation:none; opacity:.5; }
  .wire-col.is-current .wire-node::before, .wire-sub.is-current .sc::before { display:none; } }
.wire-lab { margin-top:.5rem; text-align:center; padding:0 .2rem .35rem; }
.wire-lab .n { font-size:.68rem; font-weight:750; line-height:1.16; color:var(--ct-text-strong); }
.wire-lab .d { font-size:.6rem; font-weight:600; color:var(--ct-text-faint); margin-top:.12rem; }
/* Step-config markers beside the node label: ★ mandatory · 📋 completion-tracked. */
.wire-lab .wire-mand, .wire-sub .wire-mand { font-size:.5rem; margin-left:.22rem; color:var(--ct-danger); vertical-align:2px; }
.wire-lab .wire-trkm, .wire-sub .wire-trkm { font-size:.56rem; margin-left:.24rem; color:var(--ct-accent); vertical-align:1px; }
.wire-tip .wt-mark { display:flex; align-items:center; gap:.35rem; margin-bottom:.3rem; color:var(--ct-text-muted); font-size:.72rem; }
/* Done/Skipped/needs-answer outcome tag under a node's label (docs/RECON.md §8.1). */
.wire-outc { display:inline-block; margin-top:.16rem; padding:0 .38rem; border-radius:999px; font-size:.54rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; line-height:1.6; }
.wire-outc.is-done { background:var(--ct-success-soft); color:var(--ct-success); }
.wire-outc.is-skipped { background:var(--ct-neutral-soft, rgba(120,120,128,.18)); color:var(--ct-text-muted); }
.wire-outc.is-pending { background:var(--ct-warning-soft, rgba(217,119,6,.15)); color:var(--ct-warning, #b45309); }
/* The current step shown although NOT placed on this pipe (spliced in dashed). */
.wire-outc.is-off { background:var(--ct-neutral-soft, rgba(120,120,128,.18)); color:var(--ct-text-muted); }
.wire-col.is-offpipe .wire-node, .wire-sub.is-offpipe .sc { outline:2px dashed var(--ct-text-faint); outline-offset:2px; }
.ct-path-seg--off { outline:2px dashed var(--ct-text-faint); outline-offset:-2px; }
.wire-sub .wire-outc { margin:0 0 0 .3rem; vertical-align:1px; }
.wire-tip .wt-outc { display:flex; align-items:center; gap:.35rem; margin-bottom:.35rem; font-weight:700; }
.wire-tip .wt-outc.is-done { color:var(--ct-success); }
.wire-tip .wt-outc.is-skipped { color:var(--ct-text-muted); }
.wire-tip .wt-outc.is-pending { color:var(--ct-warning, #b45309); }
.wire-col.is-future .wire-lab .n { color:var(--ct-text-muted); font-weight:650; }
.wire-col.is-current .wire-lab .n { color:var(--ct-text-strong); font-weight:800; }
.wire-col.is-current .wire-lab .d { color:var(--ct-text-strong); font-weight:750; }
.wire-over-dot { position:absolute; top:-3px; right:-3px; width:.62rem; height:.62rem; border-radius:50%; background:var(--ct-danger); box-shadow:0 0 0 2px var(--ct-canvas); z-index:3; }
.wire-lab .d.wire-over { color:var(--ct-danger) !important; font-weight:800 !important; }
.wire-note { display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem; font-size:.74rem; color:var(--ct-text-muted); font-style:italic; }
.wire-note i { color:var(--ct-text-faint); font-style:normal; }

/* wired pipeline — multi-status STEP (junction on the wire → vertical bus → stacked
   sub-circles) + skipped nodes + the hover tooltip. */
.wire-col.is-multi { align-items:stretch; min-width:11.5rem; }
.wire-col.is-multi .wire-noderow { justify-content:flex-start; }
.wire-col.is-skipped .wire-node { background:var(--ct-surface-sunken); color:var(--ct-text-faint); border:1.5px dashed color-mix(in srgb, var(--ct-text-faint) 45%, transparent); }
.wire-col.is-skipped .wire-node i { opacity:.6; }
.wire-col.is-skipped .wire-lab .n, .wire-col.is-future .wire-lab .n { color:var(--ct-text-muted); font-weight:650; }
.wire-junc { position:relative; z-index:1; width:1rem; height:1rem; border-radius:50%; flex:0 0 auto;
  margin-left:calc(var(--meet, 50%) - 0.5rem); background:var(--ct-surface-sunken); border:2px solid var(--ct-hairline); box-shadow:0 0 0 3px var(--ct-canvas); }
.wire-col.is-multi.is-done .wire-junc, .wire-col.is-multi.is-current .wire-junc { background:var(--nb); border-color:var(--nb); }
.wire-col.is-multi.is-future .wire-junc { border-color:color-mix(in srgb, var(--nb) 45%, transparent); }
.wire-col.is-multi.is-skipped .wire-junc { border-style:dashed; opacity:.55; }
.wire-sub-stack { position:relative; width:100%; margin-top:.05rem; }
.wire-sub-stack::before { content:""; position:absolute; left:var(--meet, 1.6rem); top:-.75rem; bottom:.95rem; width:2px; transform:translateX(-1px); background:var(--wire-idle); z-index:0; }
.wire-col.is-multi.is-done .wire-sub-stack::before, .wire-col.is-multi.is-current .wire-sub-stack::before { background:color-mix(in srgb, var(--nb) 60%, var(--ct-hairline)); }
.wire-sub { position:relative; z-index:1; display:flex; align-items:center; gap:.55rem; width:100%; padding:.16rem .2rem .16rem calc(var(--meet, 1.6rem) - 0.85rem); margin-bottom:.1rem; border:0; background:transparent; font:inherit; text-align:left; cursor:pointer; border-radius:var(--ct-r-sm); }
.wire-sub:hover { background:var(--ct-hover); }
.wire-sub:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:1px; }
.wire-sub .sc { position:relative; z-index:1; width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center; font-size:.64rem; flex:0 0 auto; background:var(--ct-surface-sunken); color:var(--ct-text-faint); border:1.5px solid var(--ct-hairline); box-shadow:0 0 0 3px var(--ct-canvas); }
.wire-sub.is-done .sc { background:var(--nc); color:var(--ni, #fff); border-color:var(--nc); }
.wire-sub.is-future .sc { background:var(--ct-surface-sunken); color:var(--nb); border-color:color-mix(in srgb, var(--nb) 45%, transparent); }
.wire-sub.is-current .sc { background:var(--nc); color:var(--ni, #fff); border-color:var(--nc); box-shadow:0 0 0 3px var(--ct-canvas), 0 0 0 5px color-mix(in srgb, var(--nb) 40%, transparent); }
.wire-sub.is-current .sc.wire-delayed { border-color:var(--ct-danger); box-shadow:0 0 0 3px var(--ct-canvas), 0 0 0 5px color-mix(in srgb, var(--ct-danger) 46%, transparent); }
.wire-sub.is-skipped .sc { background:var(--ct-surface-sunken); color:var(--ct-text-faint); border:1.5px dashed color-mix(in srgb, var(--ct-text-faint) 45%, transparent); }
.wire-sub .sl { display:flex; flex-direction:column; min-width:0; }
.wire-sub .sl .n { font-size:.64rem; font-weight:700; line-height:1.14; color:var(--ct-text-strong); }
.wire-sub .sl .d { font-size:.56rem; font-weight:600; color:var(--ct-text-faint); margin-top:.04rem; }
.wire-sub .sl .d.wire-over { color:var(--ct-danger); font-weight:800; }
.wire-sub.is-current .sl .n { color:var(--ct-text-strong); font-weight:800; }
.wire-sub.is-skipped .sl .n, .wire-sub.is-future .sl .n { color:var(--ct-text-muted); font-weight:650; }
.wire-tip { position:fixed; z-index:250; top:0; left:0; min-width:12rem; max-width:19rem; padding:.6rem .7rem; background:var(--ct-surface-raised); color:var(--ct-text-strong); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); box-shadow:var(--ct-shadow-pop); font-size:.74rem; line-height:1.35; opacity:0; transform:translateY(3px); pointer-events:none; transition:opacity .12s ease, transform .12s ease; }
.wire-tip.on { opacity:1; transform:none; }
.wire-tip .wt-h { font-weight:800; font-size:.8rem; margin-bottom:.2rem; }
.wire-tip .wt-total { color:var(--ct-text-muted); font-weight:600; margin-bottom:.35rem; }
.wire-tip .wt-total b { color:var(--ct-text-strong); font-weight:800; }
.wire-tip .wt-over { display:flex; align-items:center; gap:.35rem; margin-bottom:.35rem; color:var(--ct-danger); font-weight:700; }
.wire-tip .wt-sub { color:var(--ct-text-muted); }
.wire-tip .wt-since { margin-top:.15rem; padding-top:.22rem; border-top:1px solid var(--ct-hairline-soft); color:var(--ct-text-faint); font-size:.68rem; }

/* wired-pipeline tooltip — the per-visit history list (when · duration · who). */
.wire-tip .wt-list { display:flex; flex-direction:column; gap:.12rem; border-top:1px solid var(--ct-hairline-soft); padding-top:.3rem; margin-top:.1rem; max-height:13rem; overflow-y:auto; }
.wire-tip .wt-row { display:grid; grid-template-columns:1fr auto; gap:.1rem .6rem; align-items:baseline; }
.wire-tip .wt-when { color:var(--ct-text-strong); font-weight:650; font-size:.7rem; }
.wire-tip .wt-dur { color:var(--ct-accent); font-weight:700; font-variant-numeric:tabular-nums; }
.wire-tip .wt-by { grid-column:1 / -1; color:var(--ct-text-faint); font-size:.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:.15rem; }

/* Recon analytics = extra info on demand. The "Recon details" toggle HANGS off the
   action bar's bottom-center edge; clicking it unfolds the breakdown inline
   (accordion) below the pipeline — no modal, the page just grows. The scope is a
   flex column with a fixed gap so the tab hangs into a known bar→pipeline space. */
.fv-recon-scope { display:flex; flex-direction:column; gap:1.7rem; }
.fv-recon-scope > * { min-width:0; }
/* The bar sits ABOVE the tab (opaque bg + higher z-index) so the tab reads as coming
   from UNDER it; #fv-vd-head is the tab's positioning anchor + an isolate so those two
   z-indexes only compete with each other. */
#fv-vd-head { position:relative; isolation:isolate; }
/* …but while the Location tile's dropdown is open, the whole isolated head band
   must float above the sections below (the pipeline paints over it otherwise —
   inside an isolate no descendant z-index can escape on its own). */
#fv-vd-head:has(.fv-tile--menu-open) { z-index:40; }
.fv-tiles.fv-bar { position:relative; z-index:2; }
/* "Recon details" pull-tab hangs from the bar's bottom-center and tucks UP behind it
   (top edge hidden → emerges line-in-line at the bar's bottom). Rounded only at the
   bottom; a top-dark gradient + INSET top shadow make it feel lit/shadowed from the
   bar above. Compact. */
.fv-recon-tabrow { position:absolute; left:50%; top:100%; margin-top:-4px; transform:translateX(-50%); z-index:1; }
.fv-recon-tab { display:inline-flex; align-items:center; gap:.34rem; cursor:pointer; padding:.3rem .72rem .26rem;
  font-size:.69rem; font-weight:650; color:var(--ct-text-strong);
  background:linear-gradient(180deg, var(--ct-surface-sunken), var(--ct-surface) 72%);
  border:1px solid var(--ct-hairline); border-top-color:transparent;
  border-radius:0 0 .7rem .7rem;
  box-shadow:inset 0 5px 7px -5px rgba(15,23,42,.2), 0 5px 10px -7px rgba(15,23,42,.16);
  transition:color .14s ease, background .14s ease, box-shadow .14s ease; }
.dark .fv-recon-tab { background:linear-gradient(180deg, var(--ct-surface-sunken), var(--ct-surface-raised) 72%);
  box-shadow:inset 0 5px 7px -5px rgba(0,0,0,.38), 0 5px 10px -7px rgba(0,0,0,.4); }
.fv-recon-tab:hover { background:linear-gradient(180deg, var(--ct-accent-soft), var(--ct-surface) 78%); }
.fv-recon-tab--on { color:var(--ct-accent); border-color:var(--ct-accent); border-top-color:transparent;
  background:linear-gradient(180deg, var(--ct-accent-soft), var(--ct-surface) 78%); }
.fv-recon-tab > i:first-child { color:var(--ct-accent); font-size:.69rem; }
.fv-recon-tab-cv { font-size:.56rem; color:var(--ct-text-muted); transition:transform .16s ease; }
.fv-recon-tab--on .fv-recon-tab-cv { transform:rotate(180deg); }
.fv-recon-pipe { min-width:0; }
/* Recon-details reveal: animate grid-template-rows 0fr→1fr (browser-native, smooth)
   instead of Alpine x-collapse's per-frame JS height writes; the inner content fades
   + slides on the compositor (opacity/transform). */
.fv-recon-stats { display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.22,.61,.36,1); }
.fv-recon-stats--open { grid-template-rows:1fr; }
.fv-recon-stats-inner { overflow:hidden; min-height:0; }
.fv-recon-stats-inner > * { opacity:0; transform:translateY(-5px);
  transition:opacity .24s ease, transform .3s cubic-bezier(.22,.61,.36,1); }
.fv-recon-stats--open .fv-recon-stats-inner > * { opacity:1; transform:none; }
.fv-recon-stats-inner .ct-stats { margin-top:.45rem; }
@media (prefers-reduced-motion:reduce) { .fv-recon-stats { transition:none; } .fv-recon-stats-inner > * { transition:none; } }

/* ═══ Vehicle page · pipeline-template row (chip + picker/customize — .fv-pipe-*) ═══
   Sits at the top of the pipeline block: a chip naming the followed template (only
   when it's not the category default) + two ghost buttons mounting the page's
   pipeline / customizePipeline actions. */
.fv-pipe-row { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; margin:0 0 .55rem; }
.fv-pipe-chip { display:inline-flex; align-items:center; gap:.35rem; margin-right:auto; padding:.22rem .6rem;
  font-size:.68rem; font-weight:700; color:var(--ct-accent); background:var(--ct-accent-soft);
  border:1px solid color-mix(in srgb, var(--ct-accent) 30%, transparent); border-radius:var(--ct-r-pill,999px); }
.fv-pipe-chip > i { font-size:.6rem; }
.fv-pipe-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.24rem .62rem; font:inherit; font-size:.68rem;
  font-weight:650; white-space:nowrap; cursor:pointer; color:var(--ct-text-muted); background:none;
  border:1px solid var(--ct-hairline); border-radius:var(--ct-r-pill,999px);
  transition:color .14s ease, border-color .14s ease, background .14s ease; }
.fv-pipe-btn:hover { color:var(--ct-accent); border-color:color-mix(in srgb, var(--ct-accent) 40%, transparent); background:var(--ct-accent-soft); }
.fv-pipe-btn:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.fv-pipe-btn > i { font-size:.62rem; }

/* ═══ Vehicle page · Activity card "View all" (full history opens the modal) ═══ */
.ct-veh-actmore { display:inline-flex; align-items:center; gap:.45rem; margin-top:.6rem; padding:.42rem .8rem; font:inherit; font-size:.74rem; font-weight:700; white-space:nowrap; cursor:pointer; color:var(--ct-accent); background:var(--ct-accent-soft); border:1px solid color-mix(in srgb, var(--ct-accent) 32%, transparent); border-radius:var(--ct-r-md,.55rem); transition:background .14s ease, box-shadow .14s ease, transform .14s ease; }
.ct-veh-actmore:hover { box-shadow:var(--ct-shadow-sm); transform:translateY(-1px); }
.ct-veh-actmore:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }

/* ═══ Vehicle page · location history — click a stay to see THAT spot on the map ═══ */
.ct-locseg-now { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .55rem; font:inherit; font-size:.68rem; font-weight:700; cursor:pointer; color:var(--ct-accent); background:var(--ct-accent-soft); border:1px solid color-mix(in srgb, var(--ct-accent) 30%, transparent); border-radius:var(--ct-r-pill,999px); text-transform:none; letter-spacing:normal; }
.ct-locseg-now:hover { box-shadow:var(--ct-shadow-sm); }
.ct-locseg-list { list-style:none; margin:.3rem 0 0; padding:0; }
.ct-locseg { display:flex; align-items:baseline; gap:.5rem; width:100%; padding:.36rem .45rem; font:inherit; font-size:.8rem; text-align:left; color:inherit; cursor:pointer; background:none; border:none; border-top:1px solid var(--ct-hairline-soft); }
.ct-locseg-list li:first-child .ct-locseg { border-top:none; }
.ct-locseg:hover { background:var(--ct-accent-soft); border-radius:var(--ct-r-sm,.4rem); }
.ct-locseg--on { background:var(--ct-accent-soft); border-radius:var(--ct-r-sm,.4rem); box-shadow:inset 2.5px 0 0 var(--ct-accent); }
.ct-locseg--inert { cursor:default; }
.ct-locseg--inert:hover { background:none; border-radius:0; }
.ct-locseg:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:-2px; border-radius:var(--ct-r-sm,.4rem); }
.ct-locseg-name { flex:1 1 auto; font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-locseg-nowpill { display:inline-block; margin-left:.3rem; padding:.05rem .38rem; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-success); background:color-mix(in srgb, var(--ct-success) 14%, transparent); border-radius:var(--ct-r-pill,999px); }
.ct-locseg-by { flex-shrink:1; max-width:7.5rem; overflow:hidden; text-overflow:ellipsis; font-size:.68rem; color:var(--ct-text-faint); white-space:nowrap; }
.ct-locseg-by i { font-size:.62rem; }
.ct-locseg-when { flex-shrink:0; margin-left:auto; font-size:.72rem; color:var(--ct-text-muted); white-space:nowrap; }
.ct-locseg-when b { margin-left:.25rem; font-weight:700; color:var(--ct-text-strong); }
.ct-locseg-pin { flex-shrink:0; align-self:center; font-size:.68rem; color:var(--ct-accent); opacity:0; transition:opacity .12s ease; }
.ct-locseg:hover .ct-locseg-pin, .ct-locseg--on .ct-locseg-pin { opacity:1; }

/* ═══ Vehicle page · Transfers card (pending moves + move history) ═══ */
.ct-xfer-list { list-style:none; margin:0; padding:0; }
.ct-xfer { display:flex; align-items:flex-start; gap:.55rem; padding:.5rem 0; border-top:1px solid var(--ct-hairline-soft); }
.ct-xfer:first-child { border-top:none; padding-top:.15rem; }
.ct-xfer-st { flex-shrink:0; margin-top:.08rem; padding:.14rem .5rem; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; border-radius:var(--ct-r-pill,999px); }
.ct-xfer-st--pending { color:var(--ct-warning); background:color-mix(in srgb, var(--ct-warning) 15%, transparent); }
.ct-xfer-st--done { color:var(--ct-success); background:color-mix(in srgb, var(--ct-success) 14%, transparent); }
.ct-xfer-st--off { color:var(--ct-text-muted); background:var(--ct-surface-sunken); }
.ct-xfer-body { flex:1; min-width:0; }
.ct-xfer-route { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; font-size:.8rem; font-weight:650; }
.ct-xfer-route i { font-size:.68rem; color:var(--ct-text-faint); }
.ct-xfer-meta { margin-top:.12rem; font-size:.72rem; color:var(--ct-text-muted); }

/* ═══ Vehicle page · media HERO stage (the cover, big; every tile — hero and
   thumbnails alike — opens the ct-lightbox gallery) ═══ */
.ct-recmedia-hero { position:relative; display:block; width:100%; min-height:9rem; padding:0; overflow:hidden; cursor:zoom-in; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md,.6rem); }
.ct-recmedia-herocell { grid-column:span 5; grid-row:span 4; aspect-ratio:3/2; }
@media (max-width:640px) { .ct-recmedia-grid { grid-template-columns:repeat(8, minmax(0,1fr)); } .ct-recmedia-herocell { grid-column:1 / -1; grid-row:auto; aspect-ratio:16/9; } }
.ct-recmedia-hero img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.ct-recmedia-hero:hover img { transform:scale(1.02); }
.ct-recmedia-hero:focus-visible { outline:2px solid var(--ct-focus-ring); outline-offset:2px; }
.ct-recmedia-hero-src { position:absolute; left:.6rem; bottom:.6rem; padding:.2rem .6rem; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:rgba(15,18,24,.55); border-radius:var(--ct-r-pill,999px); backdrop-filter:blur(4px); }
.ct-recmedia-hero-cover { position:absolute; left:.6rem; top:.6rem; display:inline-flex; align-items:center; gap:.32rem; padding:.2rem .6rem; font-size:.64rem; font-weight:800; color:#1b1b1f; background:rgba(255,255,255,.88); border-radius:var(--ct-r-pill,999px); backdrop-filter:blur(4px); }
.ct-recmedia-hero-cover i { color:#d99a06; }
.ct-recmedia-hero-zoom { position:absolute; right:.6rem; top:.6rem; display:grid; place-items:center; width:1.9rem; height:1.9rem; color:#fff; background:rgba(15,18,24,.55); border-radius:50%; opacity:0; transition:opacity .15s ease; backdrop-filter:blur(4px); }
.ct-recmedia-hero:hover .ct-recmedia-hero-zoom, .ct-recmedia-hero:focus-visible .ct-recmedia-hero-zoom { opacity:1; }
/* Tasks card in the RIGHT rail — TWO columns MAX (owner: on a big monitor the
   cards must stay BIG — half the rail each — not shrink into 3-4 skinny tracks),
   ONE column when a half-width card would dip under 21rem (~336px; owner-tuned
   upward repeatedly — two-up below that wraps titles and reads jammed). The
   max() track min (≥ half the container) is what caps the count at two;
   container-based, so no viewport breakpoints and a collapsed sidebar counts
   too. */
.ct-veh-grid > .ct-veh-col:last-child .ct-tasks-grid { grid-template-columns:repeat(auto-fill, minmax(max(21rem, calc(50% - .35rem)), 1fr)); gap:1rem .7rem; }
/* …and the cards are ~205px there: compact the fixed-width header (smaller id
   chip + tool buttons, drop the relative timestamp — it lives in the hover
   title) and let line-item price/action tails wrap under the name instead of
   bleeding past the card edge. */
.ct-veh-grid > .ct-veh-col:last-child .ct-tk-hd { gap:.4rem; padding-left:.8rem; padding-right:.8rem; }
.ct-veh-grid > .ct-veh-col:last-child .ct-tk-id { min-width:2.4rem; padding:.2rem .32rem; font-size:.72rem; }
.ct-veh-grid > .ct-veh-col:last-child .ct-tk-tool { width:1.4rem; height:1.5rem; font-size:.68rem; }
.ct-veh-grid > .ct-veh-col:last-child .ct-tk-by-when { display:none; }
.ct-veh-grid > .ct-veh-col:last-child .ct-task-li-row { flex-wrap:wrap; }
.ct-veh-grid > .ct-veh-col:last-child .ct-task-li { flex-wrap:wrap; }
.ct-veh-grid > .ct-veh-col:last-child .ct-task-li-right { margin-left:auto; }
.ct-veh-grid > .ct-veh-col:last-child .ct-tk-foot-meta { flex-wrap:wrap; row-gap:.15rem; }

/* ═══ Vehicle page · Files & documents card (non-image recon media + upload) ═══ */
.ct-vfile { display:flex; align-items:center; gap:.55rem; padding:.42rem 0; font-size:.8rem; border-top:1px solid var(--ct-hairline-soft); }
.ct-vfile:first-of-type { border-top:none; }
.ct-vfile-ico { flex-shrink:0; display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:var(--ct-r-sm,.4rem); background:var(--ct-surface-sunken); color:var(--ct-text-muted); font-size:.8rem; }
.ct-vfile-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font:inherit; font-weight:600; color:var(--ct-accent); background:none; border:none; padding:0; cursor:pointer; text-decoration:none; }
.ct-vfile-name:hover { text-decoration:underline; }
.ct-vfile-src { flex-shrink:0; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ct-text-faint); }
.ct-vfile-del { flex-shrink:0; display:grid; place-items:center; width:1.55rem; height:1.55rem; font-size:.72rem; color:var(--ct-text-faint); background:none; border:none; border-radius:var(--ct-r-sm,.4rem); cursor:pointer; }
.ct-vfile-del:hover { color:var(--ct-danger); background:var(--ct-danger-soft); }

/* ═══ Vehicle page · combined Inspections panel (template rows + start/continue) ═══ */
.ct-vinsp { display:flex; align-items:center; gap:.55rem; padding:.5rem 0; border-top:1px solid var(--ct-hairline-soft); }
.ct-vinsp:first-of-type { border-top:none; }
.ct-vinsp-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:.14rem; }
.ct-vinsp-name { font-size:.82rem; font-weight:700; }
.ct-vinsp-meta { font-size:.7rem; color:var(--ct-text-muted); }
.ct-vinsp-meta--none { font-style:italic; color:var(--ct-text-faint); }
.ct-vinsp-acts { flex-shrink:0; display:inline-flex; align-items:center; gap:.4rem; }
.ct-vinsp-btn { display:inline-flex; align-items:center; gap:.32rem; padding:.3rem .65rem; font:inherit; font-size:.7rem; font-weight:700; white-space:nowrap; cursor:pointer; color:var(--ct-accent); background:var(--ct-accent-soft); border:1px solid color-mix(in srgb, var(--ct-accent) 32%, transparent); border-radius:var(--ct-r-pill,999px); text-decoration:none; transition:box-shadow .14s ease, transform .14s ease; }
.ct-vinsp-btn:hover { box-shadow:var(--ct-shadow-sm); transform:translateY(-1px); }
.ct-vinsp-btn--go { color:var(--ct-success); background:color-mix(in srgb, var(--ct-success) 12%, transparent); border-color:color-mix(in srgb, var(--ct-success) 32%, transparent); }
.ct-vinsp-orphans { margin-top:.6rem; padding-top:.5rem; border-top:1px dashed var(--ct-hairline); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ct-text-faint); }

/* ═══ Vehicle page · compact Location card ═══ */
/* Location — THREE separate blocks (bare MAP / history card / transfers card)
   laid out as THREE COLUMNS side by side (owner), collapsing by CONTAINER
   width: under ~580px → map|history over a full-width transfers block; under
   ~420px → a single stack. The move-task banner always spans the full row. */
.ct-veh-grid > .ct-veh-col:first-child { container-type:inline-size; }
.ct-loc-stack { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; min-width:0; }
.ct-loc-stack--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ct-loc-span { grid-column:1 / -1; }
@container (max-width:760px) {
    .ct-loc-stack { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ct-loc-stack .ct-loc-xferblock { grid-column:1 / -1; }
}
@container (max-width:420px) {
    .ct-loc-stack, .ct-loc-stack--2 { grid-template-columns:1fr; }
    .ct-loc-stack .ct-loc-xferblock { grid-column:auto; }
}
/* blocks in a row STRETCH to equal height (grid default); the map fills its
   stretched block via the 100% height chain, never shorter than 260px. */
.ct-loc-mapblock { border-radius:var(--ct-r-lg); overflow:hidden; border:1px solid var(--ct-hairline-soft); box-shadow:var(--ct-shadow-sm); line-height:0; min-height:260px; }
.dark .ct-loc-mapblock { border-color:var(--ct-hairline); }
.ct-loc-mapblock .ct-veh-map { margin:0; border-radius:0; height:100%; }
/* narrow columns: stay rows wrap — name (pin at its end) on line 1, cause + dates on line 2 */
.ct-loc-stack .ct-locseg { flex-wrap:wrap; align-items:center; row-gap:.04rem; padding:.3rem .4rem; font-size:.78rem; }
.ct-loc-stack .ct-locseg-name { flex:1 1 100%; display:flex; align-items:center; gap:.3rem; }
.ct-loc-stack .ct-locseg-name .ct-locseg-pin { margin-left:auto; }
.ct-loc-stack .ct-locseg-by { max-width:none; }

/* Pipeline move-in-flight — INSTANT click feedback: a spinner ring on the
   clicked circle, every other node locked (one move at a time) and the stage
   slightly dimmed until the server answers and the rebuild lands. Composited
   (transform-only) like the radar glow; scoped to non-current nodes so it can
   never collide with the glow's ::before/::after (those are .is-current-only). */
.wire-stage.is-moving [data-move] { pointer-events:none; }
.wire-moving::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid transparent; border-top-color:var(--ct-accent,#486db4); border-right-color:color-mix(in srgb, var(--ct-accent,#486db4) 40%, transparent); animation:fv-wspin .6s linear infinite; will-change:transform; }
@keyframes fv-wspin { to { transform:rotate(360deg); } }

/* Map layer SQUARE (read-only maps) — the compact map⇄satellite toggle with a
   preview of the OTHER view; replaces the stock dropdown control. */
.ct-map-layerbtn { width:3.4rem; height:3.4rem; margin:0 0 10px 10px; padding:0; border:2px solid #fff; border-radius:.55rem; background:#e5e3df center/cover no-repeat; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; position:relative; overflow:hidden; }
.ct-map-layerbtn span { position:absolute; left:0; right:0; bottom:0; padding:.5rem 0 .15rem; font-size:.56rem; font-weight:700; color:#fff; text-align:center; background:linear-gradient(transparent, rgba(0,0,0,.62)); pointer-events:none; }
.ct-map-layerbtn:hover { box-shadow:0 2px 8px rgba(0,0,0,.45); }
.ct-locseg-more { display:inline-flex; align-items:center; gap:.35rem; margin-top:.3rem; padding:.24rem .6rem; font:inherit; font-size:.68rem; font-weight:700; cursor:pointer; color:var(--ct-accent); background:none; border:none; }
.ct-locseg-more:hover { text-decoration:underline; }

/* ============================================================
   Member permissions modal (dealer Users page) — .ct-mperm-*
   ============================================================ */
.ct-mperm { display:flex; flex-direction:column; gap:1rem; font-size:.85rem; }
.ct-mperm-head { display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline-soft); border-radius:var(--ct-r-md); }
.ct-mperm-badge { display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:var(--ct-r-md); font-size:1rem; flex:none; }
.ct-mperm-badge.is-full { background:var(--ct-success-soft); color:var(--ct-success); }
.ct-mperm-badge.is-partial { background:var(--ct-accent-soft); color:var(--ct-accent); }
.ct-mperm-badge.is-none { background:var(--ct-neutral-soft); color:var(--ct-text-faint); }
.ct-mperm-headtxt { min-width:0; flex:1; }
.ct-mperm-title { font-weight:700; color:var(--ct-text-strong); }
.ct-mperm-sub { font-size:.75rem; color:var(--ct-text-muted); }
.ct-mperm-role { flex:none; padding:.2rem .65rem; border-radius:var(--ct-r-pill); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ct-mperm-role.is-owner { background:var(--ct-success-soft); color:var(--ct-success); }
.ct-mperm-role.is-admin { background:var(--ct-info-soft); color:var(--ct-info); }
.ct-mperm-role.is-user { background:var(--ct-neutral-soft); color:var(--ct-text-muted); }
.ct-mperm-note { display:flex; gap:.5rem; align-items:flex-start; padding:.6rem .8rem; border-radius:var(--ct-r-sm); background:var(--ct-accent-soft); color:var(--ct-accent-strong); font-size:.78rem; }
.ct-mperm-note i { margin-top:.15rem; }
.ct-mperm-sec-title { font-weight:700; color:var(--ct-text-strong); margin-bottom:.4rem; }
.ct-mperm-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.ct-mperm-chip { padding:.22rem .7rem; border-radius:var(--ct-r-pill); background:var(--ct-accent-soft); color:var(--ct-accent); font-size:.74rem; font-weight:600; }
.ct-mperm-hint { margin-top:.4rem; font-size:.74rem; color:var(--ct-text-faint); }
.ct-mperm-groups { display:grid; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); gap:.8rem; align-items:start; }
.ct-mperm-group { border:1px solid var(--ct-hairline); border-radius:var(--ct-r-md); background:var(--ct-surface); overflow:hidden; }
.ct-mperm-group-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .8rem; background:var(--ct-surface-sunken); border-bottom:1px solid var(--ct-hairline-soft); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ct-text-muted); }
.ct-mperm-group-count { font-size:.68rem; font-weight:700; color:var(--ct-text-faint); }
.ct-mperm-group-count.is-some { color:var(--ct-success); }
.ct-mperm-list { list-style:none; margin:0; padding:.35rem 0; }
.ct-mperm-row { display:flex; align-items:baseline; gap:.55rem; padding:.28rem .8rem; }
.ct-mperm-mark { flex:none; width:1rem; text-align:center; font-size:.72rem; }
.ct-mperm-row.is-on .ct-mperm-mark { color:var(--ct-success); }
.ct-mperm-row.is-off .ct-mperm-mark { color:var(--ct-text-faint); opacity:.55; }
.ct-mperm-row.is-on .ct-mperm-perm { color:var(--ct-text-strong); font-weight:600; }
.ct-mperm-row.is-off .ct-mperm-perm { color:var(--ct-text-faint); }
.ct-mperm-srcs { display:inline-flex; flex-wrap:wrap; gap:.25rem; margin-left:auto; justify-content:flex-end; }
.ct-mperm-src { padding:.08rem .5rem; border-radius:var(--ct-r-pill); background:var(--ct-neutral-soft); color:var(--ct-text-muted); font-size:.64rem; font-weight:600; white-space:nowrap; }
.ct-mperm-src.is-extra { background:var(--ct-warning-soft); color:var(--ct-warning); }

/* Transfer-request quick actions (vehicle page's Transfer requests card) */
.ct-xfer-acts { display:flex; gap:.4rem; margin-top:.35rem; }
.ct-xfer-act { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .6rem; font:inherit; font-size:.68rem; font-weight:700; color:var(--ct-text-muted); background:var(--ct-surface-sunken); border:1px solid var(--ct-hairline); border-radius:var(--ct-r-pill); cursor:pointer; }
.ct-xfer-act:hover { color:var(--ct-text-strong); background:var(--ct-hover); }
.ct-xfer-act--go { color:var(--ct-success); background:var(--ct-success-soft); border-color:transparent; }
.ct-xfer-act--go:hover { color:var(--ct-success); filter:brightness(.96); background:var(--ct-success-soft); }