/*
 * technificationDev.css — styles for the redesigned Technification (DEV) dashboard.
 *
 * Layout: a full-bleed 3D plant viewer fills the page; glass widgets float in the
 * corners around it (left/right columns + bottom strip), echoing the reference
 * "Integrated Plant Intelligence Dashboard" mock. Scoped under .tdev- prefixes so
 * it cannot collide with the production technification.css.
 */

.tdev-root {
    position: relative;
    width: 100%;
    /* Fill the full height of the layout's content area (.content-inner is a
       flex column with height:100%) so no light layout background ever shows
       below the bottom strip — adapts to any screen size. */
    height: 100%;
    flex: 1 1 auto;
    min-height: 520px;
    /* No border-radius: the panel fills the content box edge-to-edge so the
       light layout background never peeks through rounded corners. */
    border-radius: 0;
    /* Blue-tinted dark navy instead of near-black — softer, never pitch black. */
    background: radial-gradient(circle at 50% 40%, #14304d 0%, #0a1b2e 70%);
    color: #cfe6ee;
    font-family: var(--atlas-font-sans);
    overflow: hidden;
}

/* The 3D canvas sits behind every widget. */
.tdev-viewport {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tdev-viewport canvas {
    display: block;
}

/* No scrollbars anywhere inside the dashboard — everything must fit in one view. */
.tdev-root *::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tdev-root * { scrollbar-width: none; -ms-overflow-style: none; }

/* Loading veil shown until Three.js + the scene are ready. */
.tdev-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #0a1b2e;
    color: var(--atlas-cyan);
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: opacity 0.6s ease;
}

.tdev-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.tdev-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(0, 229, 255, 0.2);
    border-top-color: var(--atlas-cyan);
    border-radius: 50%;
    animation: tdev-spin 0.9s linear infinite;
}

@keyframes tdev-spin {
    to { transform: rotate(360deg); }
}

/* Top header bar. */
.tdev-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    background: linear-gradient(180deg, rgba(10, 27, 46, 0.92) 0%, rgba(10, 27, 46, 0) 100%);
    pointer-events: none;
}

.tdev-header .tdev-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--atlas-mist-100);
    text-transform: uppercase;
}

.tdev-header .tdev-sub {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--atlas-cyan);
    opacity: 0.85;
}

/* Island context chip: appears under the title when the 3D map (Upper Zakum) is
   zoomed into one island. Clicking it pulls back out to the three-island view. */
.tdev-island-back {
    pointer-events: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 9px;
    border-radius: 20px;
    border: 1px solid rgba(0, 229, 255, 0.45);
    background: rgba(0, 229, 255, 0.12);
    color: var(--atlas-mist-100);
    cursor: pointer;
    font: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tdev-island-back:hover {
    background: rgba(0, 229, 255, 0.22);
    border-color: rgba(0, 229, 255, 0.8);
}

.tdev-island-back i {
    font-size: 14px;
    color: var(--atlas-cyan);
}

.tdev-island-back .tdev-island-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tdev-island-back .tdev-island-hint {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--atlas-mist-400);
    opacity: 0.9;
}

.tdev-badge-dev {
    pointer-events: auto;
    border: 1px solid rgba(0, 229, 255, 0.5);
    color: var(--atlas-cyan);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.tdev-clock {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--atlas-mist-400);
}

/* Environment strip — elongated, icon-only bar centred just under the top bar. */
.tdev-envbar {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(16, 38, 61, 0.62);
    border: 1px solid rgba(0, 229, 255, 0.22);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    pointer-events: auto;
}

.tdev-env-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.tdev-env-item:last-child { border-right: none; }
.tdev-env-item i { font-size: 17px; color: var(--atlas-cyan); }
.tdev-env-item .v {
    font-size: 14px;
    font-weight: 700;
    color: var(--atlas-mist-100);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tdev-env-item .v small { font-size: 10px; color: var(--atlas-mist-600); font-weight: 600; margin-left: 2px; }

/* Floating widget columns. */
.tdev-col {
    position: absolute;
    top: 62px;
    bottom: 172px;          /* clears the bottom strip so columns never overlap it */
    width: 300px;           /* original narrow width — the L-foot protrudes beyond it */
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;      /* let the bottom pair stick out of the column (L shape) */
    padding: 2px;
    pointer-events: none;
}

/* Widgets size to their own content so nothing gets clipped; the column
   spreads them across the full height to fill the side margin. */
.tdev-col > .tdev-widget {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Pack the cards together with the smallest possible gap (both columns),
   keeping every widget's content fully visible. */
.tdev-col { justify-content: flex-start; gap: 8px; }

/* Bottom pair sits side by side but the row is wider than the column, so the
   outer widget sticks out into the centre — the column + foot form an "L".
   stretch keeps both halves the same height. */
.tdev-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    min-height: 0;
    height: 200px;         /* fixed so every bottom card matches Augmented Reality's height */
    /* Three equal cards (flex:1 1 0 below). Kept narrow enough that the left and
       right L-feet don't protrude far enough to overlap in the centre on common
       laptop widths — overlap was making Laser Scan render behind AR. */
    width: 752px;
}
.tdev-row > .tdev-widget {
    flex: 1 1 0;
    min-width: 0;          /* allow shrinking so text ellipsises instead of overflowing */
    display: flex;
    flex-direction: column;
}

/* Left column: foot protrudes to the right. Right column: foot protrudes left. */
.tdev-col-left .tdev-row  { align-self: flex-start; }
.tdev-col-right .tdev-row { align-self: flex-end; }

/* Terminals (first left-row card) sits over the column, so it matches the width
   of the stacked column cards (Virtual Gatekeepers); Vehicles + Laser Scan split
   the protruding remainder. */
.tdev-col-left .tdev-row > .tdev-widget:first-child { flex: 0 0 296px; }

/* Cameras (last right-row card) sits over the right column, so it matches the
   width of the stacked column cards (Smart Material System); Augmented Reality +
   Robots split the protruding remainder. */
.tdev-col-right .tdev-row > .tdev-widget:last-child { flex: 0 0 296px; }

/* Alerts Log (top of the right column) grows to fill the spare column height,
   pushing the Robots|Cameras pair to the very bottom of the column. */
.tdev-col-right > .tdev-widget:first-child { flex: 1 1 auto; }

/* Cameras is trimmed (few metrics + short list) so it stays as small as Robots;
   align-items:stretch on the row then makes both halves exactly the same size. */
.cam-list { max-height: 44px; }

.tdev-col-left {
    left: 16px;
    /* Four cards on the left need more room than the bottom strip allows, so
       run this column down to the page edge (the bottom strip group is centred
       and never reaches the left margin). */
    bottom: 228px;          /* clears the continuous bottom strip (200px + margins) */
}
.tdev-col-right {
    right: 16px;
    /* Four cards on the right too — extend to the page edge (the centred bottom
       strip never reaches the right margin). */
    bottom: 228px;          /* clears the continuous bottom strip (200px + margins) */
}

/* Bottom strip of horizontal cards. */
.tdev-bottom {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 8;
    display: flex;
    align-items: stretch;      /* every card the same height */
    gap: 8px;
    height: 200px;
    pointer-events: none;
}

/* The four middle cards (Vehicles, Laser Scan, AR, Robots) share the space
   equally → identical widths and no centre gap. */
.tdev-bottom > .tdev-widget {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Terminals (first) and Cameras (last) sit over the side columns, fixed at the
   column-card width. */
.tdev-bottom > .tdev-widget:first-child,
.tdev-bottom > .tdev-widget:last-child {
    flex: 0 0 296px;
}

/* Robots/Drones stack: takes one middle slot (same width as the other middle
   cards) and splits it into two cards sharing the strip height equally. */
.tdev-bottom > .tdev-bottom-stack {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tdev-bottom-stack > .tdev-widget {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Glassmorphic widget card. */
.tdev-widget {
    pointer-events: auto;
    background: rgba(16, 38, 61, 0.62);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    padding: 9px 12px;
}

.tdev-widget-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--atlas-cyan-muted);
    margin-bottom: 6px;
}

.tdev-widget-title i { color: var(--atlas-cyan); }
/* Inline drone glyph — matches the Phosphor icon size/colour in widget titles. */
.tdev-drone-ico { width: 13px; height: 13px; color: var(--atlas-cyan); flex: none; }
.tdev-widget-title .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--atlas-cyan); box-shadow: 0 0 8px var(--atlas-cyan); margin-left: auto;
}

/* Metric rows. */
.tdev-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tdev-metric:last-child { border-bottom: none; }
.tdev-metric .label { font-size: 10.5px; color: var(--atlas-mist-500); letter-spacing: 0.4px; }
.tdev-metric .value { font-size: 14px; font-weight: 700; color: var(--atlas-mist-100); font-variant-numeric: tabular-nums; }
.tdev-metric .value small { font-size: 10px; color: var(--atlas-mist-600); font-weight: 600; margin-left: 3px; }

.tdev-metric .value.accent { color: var(--atlas-cyan); }
.tdev-metric .value.warn { color: var(--atlas-dash-amber); }
.tdev-metric .value.danger { color: var(--atlas-dash-red); }

/* "Plant scanned" progress bar — sits below the Laser Scan metrics, full width,
   contained inside the widget (never overflows). */
.tdev-scan-progress {
    margin-top: 7px;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(0, 229, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.18);
    overflow: hidden;
}
.tdev-scan-progress-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.55) 0%, var(--atlas-cyan) 100%);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    transition: width 0.6s ease;
}

/* Augmented Reality card sits in the lower half of the Laser+AR stack, so its
   content height is fixed. Tighten the title and the three metric rows (and clip
   as a last resort) so all the info always fits inside the card. */
.tdev-ar { overflow: hidden; padding: 7px 12px; }
.tdev-ar .tdev-widget-title { margin-bottom: 4px; }
.tdev-ar .tdev-metric { padding: 1px 0; }
.tdev-ar .tdev-metric .label { font-size: 10px; }
.tdev-ar .tdev-metric .value { font-size: 13px; }

/* Mini bar chart (CSS-only sparkline-ish). */
.tdev-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 46px;
    margin-top: 4px;
}
.tdev-bars span {
    flex: 1 1 0;
    background: linear-gradient(180deg, var(--atlas-cyan) 0%, rgba(0, 229, 255, 0.15) 100%);
    border-radius: 2px 2px 0 0;
    min-height: 3px;
    opacity: 0.85;
}

/* Status pills / log lines. */
.tdev-log {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.tdev-log-line {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10.5px;
    color: #aebfc7;
}
.tdev-log-line .time { color: #5d7681; font-variant-numeric: tabular-nums; }
.tdev-log-line .sev { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tdev-log-line .sev.ok { background: var(--atlas-dash-green); }
.tdev-log-line .sev.warn { background: var(--atlas-dash-amber); }
.tdev-log-line .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 7px var(--atlas-dash-red); }

/* Compact list rows (terminals / robots / cameras). */
.tdev-listcol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.tdev-listrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--atlas-mist-300);
}
.tdev-listrow .sev { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tdev-listrow .sev.ok { background: var(--atlas-dash-green); }
.tdev-listrow .sev.warn { background: var(--atlas-dash-amber); }
.tdev-listrow .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 6px var(--atlas-dash-red); }
.tdev-listrow .ln { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdev-listrow .bt { font-variant-numeric: tabular-nums; color: var(--atlas-mist-400); width: 34px; text-align: right; }
.tdev-listrow .time { color: #5d7681; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdev-listrow .cam-tag {
    flex: none;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--atlas-cyan-muted);
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 9px;
    padding: 1px 7px;
    white-space: nowrap;
}

/* Battery bar. */
.tdev-battery {
    flex: none;
    width: 34px;
    height: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    padding: 1px;
    position: relative;
}
.tdev-battery .bf { display: block; height: 100%; border-radius: 1px; }
.tdev-battery .bf.ok { background: var(--atlas-dash-green); }
.tdev-battery .bf.warn { background: var(--atlas-dash-amber); }
.tdev-battery .bf.danger { background: var(--atlas-dash-red); }

/* Donut gauge. */
.tdev-gauge { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tdev-gauge svg { transform: rotate(-90deg); }
.tdev-gauge .g-label { font-size: 10px; color: var(--atlas-mist-500); }
.tdev-gauge .g-value { font-size: 18px; font-weight: 800; color: var(--atlas-mist-100); }

/* ---- Training Module (enhanced) ---- */
/* Grow to fill the spare left-column height so the Terminals|Vehicles row is
   pushed down until it touches the bottom. */
.tdev-col-left > .tdev-widget:nth-child(2),
.tdev-col-left > .tdev-widget:nth-child(3) { flex: 1 1 auto; }

.tdev-training {
    display: flex;
    flex-direction: column;
}

/* Big centred donut with the % inside it. */
.train-gauge {
    position: relative;
    flex: 1 1 auto;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 10px;
}
.train-gauge svg {
    width: 100%;
    height: 100%;
    max-height: 160px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
}
.train-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.train-center .g-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--atlas-mist-100);
    font-variant-numeric: tabular-nums;
}
.train-center .g-value small { font-size: 14px; font-weight: 700; color: var(--atlas-cyan-muted); margin-left: 1px; }
.train-center .g-label {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--atlas-mist-500);
}

/* Three stat chips below the gauge. */
.train-stats {
    display: flex;
    gap: 6px;
    flex: none;
}
.train-stats .ts {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.train-stats .v { font-size: 15px; font-weight: 800; color: var(--atlas-mist-100); font-variant-numeric: tabular-nums; }
.train-stats .v.warn { color: var(--atlas-dash-amber); }
.train-stats .v.ok { color: var(--atlas-dash-green); }
.train-stats .k {
    font-size: 8.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--atlas-mist-500);
}

/* ---- Robots list: keep battery bar, % and status in aligned columns ---- */
/* The name flexes/ellipsises; battery, % and status get fixed widths so every
   row lines up vertically. */
/* Robots/drones widget scrolls when it lists many units (all islands at the overview),
   but the scrollbar is hidden — scroll by dragging with the mouse (see enableDragScroll). */
.robot-list {
    overflow-y: auto;
    cursor: grab;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge */
    touch-action: pan-y;
}
.robot-list::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* Chromium/WebKit */
.robot-list.drag-scrolling { cursor: grabbing; }
.robot-list .tdev-listrow .ln { flex: 1 1 auto; min-width: 0; }
.robot-list .tdev-listrow .tdev-battery { flex: none; width: 34px; }
.robot-list .tdev-listrow .bt { flex: none; width: 32px; text-align: right; }
.robot-list .tdev-listrow .time {
    flex: none;
    width: 56px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Vehicles (enhanced) ---- */
/* Yard occupancy bar. */
.veh-bar {
    height: 8px;
    border-radius: 5px;
    background: rgba(0, 229, 255, 0.10);
    overflow: hidden;
    margin: 6px 0 3px;
}
.veh-bar > span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--atlas-cyan) 0%, var(--atlas-dash-green) 100%);
}
.veh-bar-cap {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--atlas-mist-500);
    margin-bottom: 8px;
}

/* Vehicle-type breakdown chips. */
.veh-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 8px;
}
.veh-types .vt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 2px;
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.veh-types .vt i { font-size: 15px; color: var(--atlas-cyan); }
.veh-types .vt .n { font-size: 13px; font-weight: 800; color: var(--atlas-mist-100); font-variant-numeric: tabular-nums; }
.veh-types .vt .k { font-size: 8px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--atlas-mist-500); }

/* ---- Clickable widgets (open a detail flyout) ---- */
.tdev-clickable {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.tdev-clickable:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.55);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 255, 0.25);
}
.tdev-clickable .tdev-expand {
    margin-left: 6px;
    color: var(--atlas-cyan);
    font-size: 12px;
    opacity: 0.55;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* When the title has a .dot (margin-left:auto), the chevron follows it on the
   far right; otherwise push it there explicitly. */
.tdev-widget-title .dot + .tdev-expand { margin-left: 6px; }
.tdev-widget-title > .tdev-expand:not(.dot + .tdev-expand) { margin-left: auto; }
.tdev-clickable:hover .tdev-expand { opacity: 1; transform: translateX(2px); }

/* Active state — widget whose markers are currently shown on the 3D map. */
.tdev-widget.tdev-active {
    border-color: rgba(0, 229, 255, 0.7);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 255, 0.4), 0 0 22px rgba(0, 229, 255, 0.18);
}
.tdev-widget.tdev-active .tdev-expand { opacity: 1; color: var(--atlas-cyan); }

/* Robot info card — floats over the 3D map when a marker is clicked. */
.tdev-robot-card {
    position: absolute;
    /* The clicked marker is zoomed to the centre of the viewport, so the card
       pops just to its right, vertically centred. */
    top: 50%;
    left: 52%;
    transform: translateY(-50%);
    z-index: 22;
    width: min(320px, 88%);
    background: linear-gradient(165deg, rgba(17, 41, 66, 0.96) 0%, rgba(9, 24, 40, 0.96) 100%);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 14px;
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 229, 255, 0.12);
    overflow: hidden;
    animation: tdev-robot-card-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tdev-robot-card-in {
    from { opacity: 0; transform: translate(-16px, -50%); }
    to   { opacity: 1; transform: translate(0, -50%); }
}
.tdev-robot-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.14);
}
.tdev-robot-card-head .sev { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tdev-robot-card-head .sev.ok { background: var(--atlas-dash-green); box-shadow: 0 0 8px var(--atlas-dash-green); }
.tdev-robot-card-head .sev.warn { background: var(--atlas-dash-amber); box-shadow: 0 0 8px var(--atlas-dash-amber); }
.tdev-robot-card-head .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 8px var(--atlas-dash-red); }
.tdev-robot-card-head > i { font-size: 17px; color: var(--atlas-cyan-muted); }
.tdev-robot-card-head .rname {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--atlas-mist-100);
    text-transform: uppercase;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Robot type shown beside the name in the header (e.g. SPOT 01 · Quadruped). */
.tdev-rname-type {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--atlas-cyan-muted);
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.28);
    border-radius: 999px;
    padding: 2px 9px;
    white-space: nowrap;
}
/* Manufacturer · model, to the right of the type chip on the title line. */
.tdev-rname-model {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--atlas-cyan-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tdev-robot-card-close {
    flex: none;
    margin-left: auto;
    width: 26px; height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--atlas-mist-400);
    cursor: pointer;
    display: grid; place-items: center;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
/* Normalise the glyph box so the X sits dead-centre in the square. */
.tdev-robot-card-close i { display: block; line-height: 1; font-size: 15px; }
.tdev-robot-card-close:hover { background: rgba(255, 77, 109, 0.18); color: var(--atlas-dash-red); transform: rotate(90deg); }
.tdev-robot-card-body { padding: 10px 14px 14px; }
.tdev-robot-card-body .rc-battery { margin: 2px 0 8px; height: 7px; }

/* ---- Scaffold (Virtual Gatekeepers) status banner ---- */
/* Headline state at the top of the scaffold info card: colour follows the ScaffTag
   status — green safe / amber restricted / red alarm. */
.tdev-scaf-status {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; margin: 2px 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(0, 229, 255, 0.14);
    background: rgba(0, 229, 255, 0.05);
}
.tdev-scaf-status > i { font-size: 22px; flex-shrink: 0; }
.tdev-scaf-status-t { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; }
.tdev-scaf-status-s { font-size: 11px; opacity: 0.8; margin-top: 1px; }
.tdev-scaf-tag {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
    padding: 3px 9px; border-radius: 999px;
}
.tdev-scaf-ok    { border-color: rgba(37, 208, 125, 0.4);  background: rgba(37, 208, 125, 0.1); }
.tdev-scaf-ok    > i { color: var(--atlas-dash-green); }
.tdev-scaf-warn  { border-color: rgba(255, 176, 32, 0.45); background: rgba(255, 176, 32, 0.1); }
.tdev-scaf-warn  > i { color: var(--atlas-dash-amber); }
.tdev-scaf-crit  { border-color: rgba(255, 77, 109, 0.5);  background: rgba(255, 77, 109, 0.12); }
.tdev-scaf-crit  > i { color: var(--atlas-dash-red); }
.tdev-tag-ok   { background: var(--atlas-dash-green); color: #06121e; }
.tdev-tag-warn { background: var(--atlas-dash-amber); color: #06121e; }
.tdev-tag-crit { background: var(--atlas-dash-red); color: var(--atlas-white); box-shadow: 0 0 10px rgba(255, 77, 109, 0.6); }

/* ---- Heat stress (env strip → heat-stress flyout) ---- */
/* The whole environment strip is clickable and opens the heat-stress panel. */
.tdev-envbar.tdev-env-click { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.tdev-envbar.tdev-env-click:hover { border-color: rgba(0, 229, 255, 0.5); background: rgba(16, 38, 61, 0.78); }
.tdev-envbar.tdev-active { border-color: var(--atlas-cyan); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 229, 255, 0.5); }
.tdev-env-more { font-size: 14px; color: var(--atlas-cyan); opacity: 0.7; margin-left: 2px; }
/* 24h temperature curve: orange line (the workers curve is cyan). */
.tdev-heat-curve svg path.line.heat { stroke: #ff7a59; }
/* Work/rest row matching the current WBGT band. */
.tdev-heat-active { background: rgba(255, 122, 89, 0.1); border-radius: 6px; }

/* ---- Laser-scan zones card ---- */
/* Pinned to the left so the centred top-down plant view stays unobstructed. */
.tdev-laser-card {
    top: 50%;
    left: 24px;
    width: min(300px, 84%);
}
.tdev-laser-zones { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.tdev-laser-row {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.07);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.tdev-laser-row:hover { background: rgba(0, 229, 255, 0.06); border-radius: 6px; }
.tdev-laser-row:last-child { border-bottom: none; }
.tdev-laser-row .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.tdev-laser-row .ln { flex: 1 1 auto; color: var(--atlas-mist-100); font-weight: 600; }
.tdev-laser-row .ar { color: var(--atlas-mist-400); font-variant-numeric: tabular-nums; }
.tdev-laser-hint {
    display: flex; align-items: flex-start; gap: 7px;
    color: var(--atlas-mist-400); font-size: 12px; line-height: 1.45;
    margin-bottom: 12px;
}
.tdev-laser-hint i { color: var(--atlas-cyan); font-size: 15px; flex: none; margin-top: 1px; }
.tdev-laser-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tdev-laser-btn {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    cursor: pointer;
    border: 1px solid rgba(0, 229, 255, 0.3);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tdev-laser-btn.primary { background: rgba(0, 229, 255, 0.16); color: var(--atlas-cyan-soft); }
.tdev-laser-btn.primary:hover { background: rgba(0, 229, 255, 0.28); }
.tdev-laser-btn.ghost { background: rgba(255, 255, 255, 0.05); color: var(--atlas-mist-400); border-color: rgba(255, 255, 255, 0.12); }
.tdev-laser-btn.ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--atlas-mist-100); }
.tdev-laser-row.active { background: rgba(0, 229, 255, 0.1); border-radius: 6px; }
.tdev-laser-row.active .ln { color: var(--atlas-cyan-soft); }

/* Per-zone "last scan" detail, shown when a zone row is selected. */
.tdev-laser-scan {
    margin: 2px 0 12px;
    padding: 9px 11px;
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 9px;
    background: rgba(0, 229, 255, 0.05);
}
.tdev-laser-scan-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--atlas-cyan-muted); margin-bottom: 8px;
}
.tdev-laser-scan-head i { color: var(--atlas-cyan); font-size: 14px; }
.tdev-laser-scan-grid { display: flex; flex-direction: column; gap: 4px; }
.tdev-laser-scan-grid .lsi {
    display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 3px;
}
.tdev-laser-scan-grid .lsi:last-child { border-bottom: none; padding-bottom: 0; }
.tdev-laser-scan-grid .k { font-size: 10.5px; color: var(--atlas-mist-500); letter-spacing: 0.4px; }
.tdev-laser-scan-grid .v {
    font-size: 12.5px; font-weight: 700; color: var(--atlas-mist-100);
    font-variant-numeric: tabular-nums; text-align: right;
}
.tdev-laser-scan-grid .v.accent { color: var(--atlas-cyan); }

/* Clickable "Total scans" row → opens the scan register panel. */
.tdev-laser-scan-grid .lsi-click { cursor: pointer; border-radius: 5px; transition: background 0.12s ease; }
.tdev-laser-scan-grid .lsi-click:hover { background: rgba(0, 229, 255, 0.08); }
.tdev-laser-scan-grid .lsi-click .v i {
    font-size: 11px; margin-left: 3px; vertical-align: middle;
    transition: transform 0.15s ease; display: inline-block;
}
.tdev-laser-scan-grid .lsi-click.open .v i { transform: rotate(90deg); }

/* Scan register panel — sits just to the right of the laser card. */
.tdev-scanlog-card {
    left: calc(24px + min(300px, 84%) + 12px);
    width: min(290px, 80%);
}
.tdev-scanlog-card .tdev-robot-card-head .sw {
    width: 11px; height: 11px; border-radius: 3px; flex: none;
}
.tdev-scanlog-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; }
.tdev-scanlog-row {
    display: flex; align-items: baseline; gap: 9px;
    padding: 7px 4px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.07);
    font-size: 12px;
}
.tdev-scanlog-row:last-child { border-bottom: none; }
.tdev-scanlog-row .n { color: var(--atlas-mist-600); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; width: 30px; }
.tdev-scanlog-row .dt { flex: 1 1 auto; color: var(--atlas-mist-300); font-variant-numeric: tabular-nums; }
.tdev-scanlog-row .ar { color: var(--atlas-cyan-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.tdev-scanlog-row.latest .dt { color: var(--atlas-mist-100); }
.tdev-scanlog-row.latest .n { color: var(--atlas-cyan); }

/* Zone-name input shown while a zone is selected. */
.tdev-laser-field { margin: 4px 0 10px; }
.tdev-laser-field label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #7fb6c7; margin-bottom: 5px;
}
.tdev-laser-field label i { color: var(--atlas-cyan); font-size: 13px; }
.tdev-laser-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(2, 12, 22, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: var(--atlas-mist-100);
    font-size: 13px; font-weight: 600;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tdev-laser-input:focus { border-color: var(--atlas-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15); }
.tdev-laser-input::placeholder { color: #5b7e8c; font-weight: 400; }

/* ---- Laser mode: hide every other widget until the view is closed. ---- */
.tdev-laser-mode .tdev-col,
.tdev-laser-mode .tdev-envbar,
.tdev-laser-mode .tdev-bottom {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ---- Camera / robot mode: while a camera's or robot's detail card is open,
   hide every other widget (columns, env strip, bottom strip) until it's closed. ---- */
.tdev-camera-mode .tdev-col,
.tdev-camera-mode .tdev-envbar,
.tdev-camera-mode .tdev-bottom,
.tdev-robot-mode .tdev-col,
.tdev-robot-mode .tdev-envbar,
.tdev-robot-mode .tdev-bottom {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ---- Robot detail: info on the left, model figure on the right ---- */
/* Widen the card only when it holds the two-column robot body. */
/* Wider, shorter card: the info splits into two columns so the technical sheet and
   mission history sit side by side instead of stacking into one tall column. */
.tdev-robot-card:has(.tdev-robot-body) { width: min(860px, 96%); max-height: 92vh; }
.tdev-robot-body {
    display: flex;
    gap: 14px;
    /* Two equal-height columns: the menu (left) and the type/status/figure side (right).
       Both stretch to the same height so neither leaves dead space. */
    align-items: stretch;
    /* Keep the card within the viewport and let the body scroll if it still overflows. */
    max-height: calc(92vh - 56px);
    overflow-y: auto;
}
/* Left column — the section menu fills the available width and height. */
.tdev-robot-body .tdev-robot-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Right column — type chip, status and the render stacked; the figure grows to take
   whatever height is left so the column always fills the card beside the menu. */
.tdev-rc-side {
    flex: 0 0 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tdev-rc-side .tdev-rc-stats { flex-direction: column; gap: 6px; }

/* Robot type chip — shown first, prominent. */
.tdev-rc-type {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
}
.tdev-rc-type i { color: var(--atlas-cyan); font-size: 18px; }
.tdev-rc-type .t { font-size: 15px; font-weight: 800; color: var(--atlas-mist-100); letter-spacing: 0.3px; }
.tdev-rc-type .m { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--atlas-cyan-muted); }

/* Status + battery: two metrics on one row, no per-row divider. */
.tdev-rc-stats { display: flex; gap: 18px; }
.tdev-rc-stats .tdev-metric { flex: 1 1 0; padding: 0; border-bottom: none; }

/* Technical sheet: two compact spec columns that fit the card width. */
.tdev-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 18px; }
.tdev-spec-grid .sp {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tdev-spec-grid .sp-wide { grid-column: 1 / -1; }
.tdev-spec-grid .k { flex: none; font-size: 10px; color: var(--atlas-mist-500); letter-spacing: 0.3px; }
.tdev-spec-grid .v {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--atlas-mist-100);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Incursions + mission history side by side. */
.tdev-rc-logs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tdev-rc-logs .tdev-incursions { margin-top: 0; padding-top: 8px; }

/* Robot-card section menu (tabs). Only the active section's panel is shown, so each
   section gets the full card width and reads bigger instead of three cramped columns. */
.tdev-rc-tabs { display: flex; gap: 8px; margin-top: 4px; }
.tdev-rc-tab {
    /* Grow to share the row but never shrink below the label — the full title
       ("Historical Missions") must always fit, no ellipsis. */
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--atlas-mist-400);
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tdev-rc-tab i { font-size: 18px; flex: none; }
.tdev-rc-tab .lbl { white-space: nowrap; }
.tdev-rc-tab .cnt {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    color: var(--atlas-cyan);
    background: rgba(0, 229, 255, 0.14);
    border-radius: 999px;
    padding: 1px 8px;
}
.tdev-rc-tab:hover { background: rgba(0, 229, 255, 0.12); color: var(--atlas-mist-100); }
.tdev-rc-tab.active {
    color: #04121b;
    background: linear-gradient(180deg, var(--atlas-cyan), #1bb8d6);
    border-color: var(--atlas-cyan);
}
.tdev-rc-tab.active i,
.tdev-rc-tab.active .cnt { color: #04121b; }
.tdev-rc-tab.active .cnt { background: rgba(4, 18, 27, 0.25); }
.tdev-rc-tabpanel {
    margin-top: 6px;
    /* Grows to fill the left column so the active section reads big instead of
       collapsing to its content height. */
    flex: 1 1 auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}
.tdev-rc-tabpanel > * { flex: 1 1 auto; }
.tdev-rc-tabpanel .tdev-incursions { margin-top: 0; padding-top: 8px; }

/* Mission detail: a historical timelapse alongside the live camera feed. */
.tdev-mission-feeds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 8px 0 4px;
}
.tdev-mission-feed { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tdev-mini-feed { aspect-ratio: 16 / 9; }
.tdev-mission-feed-cap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--atlas-mist-400);
}
.tdev-mission-feed-cap i { color: var(--atlas-cyan); font-size: 13px; }
/* Timelapse badge reads cyan (recorded) vs the red LIVE pip. */
.tdev-mission-feed:first-child .tdev-cam-live { color: var(--atlas-cyan-soft); }

/* Timelapse feed: fast-forward the scene drift + the scanline flicker so it reads as
   sped-up recorded footage, with a playback scrubber sweeping across the bottom. */
.tdev-feed-timelapse .tdev-cam-svg { animation-duration: 5s; }
.tdev-feed-timelapse .tdev-cam-sim { animation-duration: 1.6s; }
.tdev-feed-timelapse .tdev-cam-stamp { bottom: 16px; }
.tdev-feed-scrub {
    position: absolute;
    left: 8px; right: 8px; bottom: 7px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    pointer-events: none;
}
.tdev-feed-scrub span {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--atlas-cyan), var(--atlas-cyan-soft));
    animation: tdev-feed-scrub 4s linear infinite;
}
@keyframes tdev-feed-scrub { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

@media (max-width: 560px) {
    .tdev-mission-feeds { grid-template-columns: 1fr; }
}

/* Battery bar inline next to the % value. */
.tdev-metric-bat .rc-bat-inline { display: inline-flex; align-items: center; gap: 7px; }
.tdev-metric-bat .tdev-battery { width: 52px; height: 9px; }

/* Mission / incursion status pill — clear "Completed / In progress / ..." chip. */
.tdev-mission-pill {
    flex: none;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.tdev-mission-pill.mp-done     { color: var(--atlas-dash-green); background: rgba(37, 208, 125, 0.14); border: 1px solid rgba(37, 208, 125, 0.4); }
.tdev-mission-pill.mp-progress { color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.14); border: 1px solid rgba(255, 176, 32, 0.45); }
.tdev-mission-pill.mp-warn     { color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.14); border: 1px solid rgba(255, 176, 32, 0.4); }
.tdev-mission-pill.mp-crit     { color: var(--atlas-dash-red); background: rgba(255, 77, 109, 0.16); border: 1px solid rgba(255, 77, 109, 0.45); }
/* Not-started (queued) mission reads neutral grey. */
.tdev-mission-pill.mp-idle     { color: #9bb1bd; background: rgba(155, 177, 189, 0.12); border: 1px solid rgba(155, 177, 189, 0.35); }
/* In-progress pill pulses so it reads as live. */
.tdev-mission-pill.mp-progress { animation: tdev-pill-pulse 1.4s ease-in-out infinite; }
@keyframes tdev-pill-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Mission objective line — what the robot is sent to do in the plant. Shown on every
   mission drill-in (Today + Historical). */
.tdev-mission-objective {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: 11.5px; line-height: 1.4; color: #cfe6ef;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18); border-left: 2px solid var(--atlas-cyan);
    border-radius: 7px; padding: 8px 10px; margin: 8px 0;
}
.tdev-mission-objective i { color: var(--atlas-cyan); font-size: 14px; margin-top: 1px; flex: none; }

/* A single feed fills the panel width (Today live / Historical timelapse use one feed,
   not the old side-by-side pair). */
.tdev-mission-feed-solo .tdev-mini-feed { aspect-ratio: 16 / 9; }

/* Not-started placeholder: no stream yet, just the schedule. */
.tdev-mission-pending {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: #9bb1bd;
    background: rgba(155, 177, 189, 0.07);
    border: 1px dashed rgba(155, 177, 189, 0.3); border-radius: 7px;
    padding: 14px 12px; margin-bottom: 8px;
}
.tdev-mission-pending i { color: #9bb1bd; font-size: 16px; flex: none; }

/* Clickable incursion rows (drill into the detail). */
.tdev-inc-click { cursor: pointer; border-radius: 6px; padding-right: 4px; transition: background 0.12s; }
.tdev-inc-click:hover { background: rgba(0, 229, 255, 0.08); }
.tdev-inc-go { color: #5d7681; font-size: 12px; flex: none; }
.tdev-inc-click:hover .tdev-inc-go { color: var(--atlas-cyan); }

/* Incursion detail panel (replaces the logs grid; Back returns to the list). */
.tdev-inc-detail-head { display: flex; align-items: center; gap: 8px; }
.tdev-inc-detail-title { font-size: 12px; font-weight: 800; color: var(--atlas-mist-100); text-transform: none; letter-spacing: 0; }
.tdev-inc-detail-head .tdev-mission-pill { margin-left: auto; }
.tdev-inc-back {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700;
    color: var(--atlas-cyan); background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 7px;
    padding: 3px 9px; cursor: pointer;
}
.tdev-inc-back:hover { background: rgba(0, 229, 255, 0.2); }

/* Holographic figure panel: grid backdrop + glow, floating model render. Grows to fill
   the leftover height of the side column so the box is large and well-proportioned. */
.tdev-robot-figure {
    flex: 1 1 auto;
    min-height: 150px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.25);
    background: radial-gradient(circle at 50% 38%, rgba(0, 229, 255, 0.14) 0%, rgba(5, 13, 22, 0.55) 70%);
    overflow: hidden;
}
/* Faint scanning grid behind the model. */
.tdev-robot-figure::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.08) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.08) 0 1px, transparent 1px 14px);
    mask-image: radial-gradient(circle at 50% 45%, var(--atlas-black) 35%, transparent 80%);
    pointer-events: none;
}
.tdev-robot-svg {
    position: relative;
    width: 170px;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    filter: drop-shadow(0 0 9px rgba(0, 229, 255, 0.55));
}
/* Solid panelled figures (e.g. the humanoid): swap the neon glow for a soft,
   product-render drop shadow so they read more professional, less holographic. */
.tdev-robot-svg-pro {
    width: 150px;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.5));
}
.tdev-robot-photo {
    position: relative;
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 0 9px rgba(0, 229, 255, 0.35));
}
@keyframes tdev-figure-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Drone rotors spin (each around its own centre). */
.tdev-robot-svg .rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: tdev-rotor 0.28s linear infinite;
}
@keyframes tdev-rotor { to { transform: rotate(360deg); } }

.tdev-robot-figure-cap {
    position: relative;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--atlas-cyan-muted);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .tdev-robot-svg, .tdev-robot-photo { animation: none; }
    .tdev-robot-svg .rotor { animation: none; }
    .tdev-cam-svg, .tdev-feed-scrub span { animation: none; }
}

@media (max-width: 560px) {
    .tdev-robot-body { flex-direction: column-reverse; }
    .tdev-robot-figure { flex: 0 0 auto; }
    .tdev-robot-body .tdev-robot-info { columns: 1; }
}

/* ---- Robot incursions log (inside the robot detail card) ---- */
.tdev-incursions {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 229, 255, 0.14);
}
.tdev-incursions-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--atlas-cyan-muted);
    margin-bottom: 8px;
}
.tdev-incursions-head i { color: var(--atlas-cyan); font-size: 13px; }
.tdev-incursions-head .cnt {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    color: var(--atlas-cyan);
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 9px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
}
.tdev-incursion-empty {
    font-size: 11px;
    color: var(--atlas-mist-600);
    padding: 4px 0;
}
.tdev-incursion-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 168px;
    overflow-y: auto;
}
.tdev-incursion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--atlas-mist-300);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tdev-incursion-row:last-child { border-bottom: none; }
.tdev-incursion-row .sev { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tdev-incursion-row .sev.ok { background: var(--atlas-dash-green); }
.tdev-incursion-row .sev.warn { background: var(--atlas-dash-amber); }
.tdev-incursion-row .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 6px var(--atlas-dash-red); }
.tdev-incursion-row .zone { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--atlas-mist-100); }
.tdev-incursion-row .dur { flex: none; color: var(--atlas-mist-400); font-variant-numeric: tabular-nums; }
.tdev-incursion-row .time { flex: none; color: #5d7681; font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
/* In-progress mission: title reads orange, matching its amber dot. */
.tdev-incursion-row.mr-progress .zone { color: var(--atlas-dash-amber); font-weight: 700; }
/* Not-started mission: white status dot. */
.tdev-incursion-row.mr-idle .sev { background: var(--atlas-white); }


/* ---- Camera detail card: wider than the robot card so the live feed and the
   status/type/area/position sit side by side. ---- */
.tdev-camera-card { width: min(660px, 94%); }
.tdev-camera-body {
    display: flex;
    gap: 14px;
    align-items: stretch;
}
.tdev-camera-body .tdev-cam-meta {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The feed pane (16:9). */
.tdev-cam-feed {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #050d16;
    border: 1px solid rgba(0, 229, 255, 0.25);
}
.tdev-cam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Simulated CCTV picture: a slowly drifting tinted gradient + scanlines so an
   empty feed still reads as "live video" when no real stream is wired up. */
/* Simulated CCTV scene (industrial site) behind the grain overlay. */
.tdev-cam-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.tdev-cam-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: brightness(0.96) contrast(1.08) saturate(0.92);
    /* Slow ken-burns drift so the simulated feed reads as live, moving video. */
    transform-origin: 50% 60%;
    animation: tdev-cam-pan 22s ease-in-out infinite alternate;
}
@keyframes tdev-cam-pan {
    0%   { transform: scale(1.06) translate(-2%, 1%); }
    100% { transform: scale(1.13) translate(2%, -2%); }
}
/* Scanline + vignette + flicker grain laid OVER the scene so it reads like a feed. */
.tdev-cam-sim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px),
        radial-gradient(125% 95% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    animation: tdev-cam-flicker 4s steps(40) infinite;
}
@keyframes tdev-cam-flicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

/* Faint crosshair / framing reticle over the picture. */
.tdev-cam-cross {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 4px;
    pointer-events: none;
}
.tdev-cam-cross::before,
.tdev-cam-cross::after {
    content: "";
    position: absolute;
    background: rgba(0, 229, 255, 0.14);
}
.tdev-cam-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.tdev-cam-cross::after  { top: 50%; left: 0; right: 0; height: 1px; }

/* Top overlay row: LIVE badge + camera type tag. */
.tdev-cam-overlay {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.tdev-cam-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff5b6e;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    padding: 2px 7px;
}
.tdev-cam-live .rec {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff3b50;
    box-shadow: 0 0 8px #ff3b50;
    animation: tdev-cam-rec 1.2s ease-in-out infinite;
}
@keyframes tdev-cam-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.tdev-cam-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--atlas-cyan-soft);
    background: rgba(0, 229, 255, 0.16);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 4px;
    padding: 2px 7px;
}
.tdev-cam-stamp {
    position: absolute;
    bottom: 7px; right: 9px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: #cfe6ee;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* Offline state. */
.tdev-cam-feed.offline { background: #0a141d; }
.tdev-cam-nosignal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--atlas-dash-red);
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 800;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 4px);
}
.tdev-cam-nosignal i { font-size: 30px; }

@media (max-width: 720px) {
    .tdev-camera-body { flex-direction: column; }
    .tdev-camera-body .tdev-cam-meta { flex: 0 0 auto; }
}

/* ---- "View all" button on the Cameras widget ---- */
.tdev-cam-viewall {
    margin-top: 8px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #061421;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.85) 0%, var(--atlas-cyan) 100%);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.tdev-cam-viewall:hover { filter: brightness(1.1); transform: translateY(-1px); }
.tdev-cam-viewall i { font-size: 13px; }

/* ---- Camera wall ("View all" → security control room) ---- */
.tdev-camwall-backdrop {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: radial-gradient(circle at 50% 45%, rgba(6, 18, 30, 0.55) 0%, rgba(3, 9, 16, 0.85) 100%);
    backdrop-filter: blur(5px);
    animation: tdev-fade-in 0.22s ease both;
}
.tdev-camwall {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 31;
    width: min(1320px, 96%);
    max-height: 92%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(17, 41, 66, 0.97) 0%, rgba(9, 24, 40, 0.97) 100%);
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    animation: tdev-fade-in 0.25s ease both;
    overflow: hidden;
}
.tdev-camwall-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18);
    background: rgba(8, 22, 36, 0.6);
}
.tdev-camwall-head > i { color: var(--atlas-cyan); font-size: 18px; }
.tdev-camwall-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--atlas-mist-100);
}
.tdev-camwall-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--atlas-mist-400);
}
.tdev-camwall-count .rec {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ff3b50; box-shadow: 0 0 8px #ff3b50;
    animation: tdev-cam-rec 1.2s ease-in-out infinite;
}
.tdev-camwall-close {
    margin-left: auto;
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(0, 229, 255, 0.25);
    background: rgba(0, 229, 255, 0.08);
    color: #cfe6ee;
    cursor: pointer;
    font-size: 16px;
}
.tdev-camwall-close:hover { background: rgba(0, 229, 255, 0.18); }
.tdev-camwall-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 18px;
    overflow-y: auto;
}
.tdev-camwall-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.tdev-camwall-cell:hover { transform: translateY(-2px); }
.tdev-camwall-cell:hover .tdev-cam-feed { border-color: rgba(0, 229, 255, 0.7); box-shadow: 0 0 16px rgba(0, 229, 255, 0.3); }
.tdev-camwall-cell .tdev-cam-feed { flex: none; width: 100%; }
.tdev-camwall-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
}
.tdev-camwall-label .nm { font-weight: 700; color: var(--atlas-mist-100); }
.tdev-camwall-label .ar { margin-left: auto; color: #7f9aa6; font-size: 10px; }

@media (max-width: 1100px) { .tdev-camwall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .tdev-camwall-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Detail flyout (sub-menu) ---- */
.tdev-flyout-backdrop {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: radial-gradient(circle at 50% 45%, rgba(6, 18, 30, 0.45) 0%, rgba(3, 9, 16, 0.75) 100%);
    backdrop-filter: blur(4px);
    animation: tdev-fade-in 0.25s ease both;
    /* Give children a perspective so the panel can rotate in 3D on entry. */
    perspective: 1400px;
}

@keyframes tdev-fade-in { from { opacity: 0; } to { opacity: 1; } }

.tdev-flyout {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    width: min(1100px, 96%);
    max-height: 92%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(17, 41, 66, 0.96) 0%, rgba(9, 24, 40, 0.96) 100%);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 0 60px rgba(0, 229, 255, 0.12);
    /* Hidden start state: pushed back + tilted + lifted. The .show class (added
       a tick after mount) springs it forward into place — the "wow" entry. */
    transform: translate(-50%, -46%) perspective(1400px) rotateX(14deg) scale(0.9);
    transform-origin: center top;
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    overflow: hidden;
}
.tdev-flyout.show {
    transform: translate(-50%, -50%) perspective(1400px) rotateX(0deg) scale(1);
    opacity: 1;
}

/* Larger variant for content-light panels (Workers, Drones) so they fill more
   of the screen instead of looking small. */
.tdev-flyout-lg {
    width: min(1320px, 98%);
    min-height: 74%;
}
.tdev-flyout-lg .tdev-flyout-body {
    flex: 1 1 auto;
}

.tdev-flyout-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.07) 0%, transparent 100%);
}
.tdev-flyout-icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: var(--atlas-cyan);
    font-size: 22px;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}
.tdev-flyout-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--atlas-mist-100);
}
.tdev-flyout-caption {
    font-size: 10.5px;
    letter-spacing: 0.6px;
    color: var(--atlas-cyan-muted);
    opacity: 0.85;
    margin-top: 2px;
}
.tdev-flyout-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 9px;
    background: rgba(0, 229, 255, 0.06);
    color: var(--atlas-cyan-muted);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tdev-flyout-close:hover { background: rgba(255, 77, 109, 0.18); color: var(--atlas-dash-red); transform: rotate(90deg); }

.tdev-flyout-body {
    padding: 16px 18px 18px;
    overflow-y: auto;
}

/* Hour filter (Workers panel): a row of clickable hour chips. */
.tdev-flyout-hours {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.tdev-flyout-hours .lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--atlas-mist-400);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
}
.tdev-hour-chip {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #cdeafe;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tdev-hour-chip:hover { background: rgba(0, 229, 255, 0.16); }
.tdev-hour-chip.active {
    color: var(--atlas-navy-900);
    background: var(--atlas-cyan);
    border-color: var(--atlas-cyan);
}
/* "All day" (general) chip, set apart from the hour-range selects. */
.tdev-hour-chip.gen {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
}
.tdev-flyout-hours .lbl.sep { margin: 0 2px; text-transform: none; letter-spacing: 0; }
/* Island scope chip: which island the worker figures belong to. Pushed to the
   right of the hour row; highlighted when a single island is focused. */
.tdev-scope-chip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--atlas-mist-400);
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 999px;
    padding: 4px 12px 4px 10px;
}
.tdev-scope-chip i { font-size: 14px; color: var(--atlas-cyan-muted); }
.tdev-scope-chip.focused {
    color: var(--atlas-navy-900);
    background: var(--atlas-cyan);
    border-color: var(--atlas-cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}
.tdev-scope-chip.focused i { color: var(--atlas-navy-900); }
/* From / To hour dropdowns. */
.tdev-hour-select {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--atlas-mist-100);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}
.tdev-hour-select:focus { outline: none; border-color: var(--atlas-cyan); }
.tdev-hour-select option { color: var(--atlas-navy-900); background: var(--atlas-mist-100); }

/* From / To calendar + time pickers (Workers filter). The popup itself is the
   browser's native calendar/clock — color-scheme: dark renders it on the dark theme. */
.tdev-dt {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--atlas-mist-100);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 8px;
    padding: 4px 9px;
    cursor: pointer;
    color-scheme: dark;
    transition: border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.tdev-dt:focus { outline: none; border-color: var(--atlas-cyan); box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2); }
.tdev-dt.dim { opacity: 0.5; }
.tdev-dt::-webkit-calendar-picker-indicator {
    filter: invert(0.75) sepia(1) saturate(6) hue-rotate(150deg);
    cursor: pointer;
}

/* "Live" chip (replaces "All day"): a recording-style pulsing pip. */
.tdev-hour-chip.live { display: inline-flex; align-items: center; gap: 6px; }
.tdev-hour-chip.live.active {
    color: var(--atlas-navy-900);
    background: var(--atlas-dash-green);
    border-color: var(--atlas-dash-green);
    box-shadow: 0 0 12px rgba(37, 208, 125, 0.45);
}
.tdev-live-pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--atlas-dash-green); box-shadow: 0 0 7px var(--atlas-dash-green);
    animation: tdrone-pulse 1.1s ease-in-out infinite;
}
.tdev-hour-chip.live.active .tdev-live-pip { background: var(--atlas-navy-900); box-shadow: none; }
.tdev-sub-time {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--atlas-cyan);
    background: rgba(0, 229, 255, 0.1);
    border-radius: 7px;
    padding: 1px 7px;
    margin-left: 6px;
}

/* KPI strip at the top of the flyout. */
.tdev-flyout-kpis {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.tdev-flyout-kpis .fk {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 6px 11px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.10) 0%, rgba(0, 229, 255, 0.03) 100%);
    border: 1px solid rgba(0, 229, 255, 0.18);
    overflow: hidden;
}
.tdev-flyout-kpis .fk > i { font-size: 16px; color: var(--atlas-cyan-muted); opacity: 0.7; margin-bottom: 2px; }
.tdev-flyout-kpis .fk .v { font-size: 24px; font-weight: 800; color: var(--atlas-mist-100); font-variant-numeric: tabular-nums; line-height: 1; }
.tdev-flyout-kpis .fk .v small { font-size: 13px; color: var(--atlas-cyan-muted); }
.tdev-flyout-kpis .fk .v.accent { color: var(--atlas-cyan); }
.tdev-flyout-kpis .fk .v.warn { color: var(--atlas-dash-amber); }
.tdev-flyout-kpis .fk .v.danger { color: var(--atlas-dash-red); }
.tdev-flyout-kpis .fk .v.ok { color: var(--atlas-dash-green); }
.tdev-flyout-kpis .fk .k {
    font-size: 9px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--atlas-mist-500);
    text-align: center;
}
/* Plain KPI strip (Workers): no icons, all cards equal, numbers and titles on
   shared baselines. */
.tdev-kpis-plain .fk { justify-content: center; min-height: 62px; gap: 6px; }
.tdev-kpis-plain .fk .v { color: var(--atlas-mist-100); }

/* ---- Donut charts (Workers flyout): segmented rings with a legend ---- */
.tdev-donuts {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}
.tdev-donut-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.07) 0%, rgba(0, 229, 255, 0.02) 100%);
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.tdev-donut-card .tdev-flyout-sub { margin-bottom: 12px; }
.tdev-donut-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
}
.tdev-donut {
    position: relative;
    width: 118px;
    height: 118px;
    flex: none;
}
.tdev-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.25));
}
.tdev-donut-seg { transition: stroke-dasharray 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.tdev-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.tdev-donut-center .dv {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--atlas-mist-100);
    font-variant-numeric: tabular-nums;
}
.tdev-donut-center .dk {
    font-size: 8.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--atlas-mist-500);
}
.tdev-donut-legend {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.tdev-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--atlas-mist-300);
}
.tdev-legend-row .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.tdev-legend-row .ll { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdev-legend-row .lv { flex: none; font-weight: 700; color: var(--atlas-mist-100); font-variant-numeric: tabular-nums; }
.tdev-legend-row .lp { flex: none; min-width: 36px; text-align: right; font-size: 10px; color: var(--atlas-cyan-muted); font-variant-numeric: tabular-nums; }

/* Clickable contractor rows: focus one to scope shift / 24h to that contractor. */
.tdev-legend-row.clickable {
    cursor: pointer;
    padding: 4px 6px;
    margin: 0 -6px;
    border-radius: 7px;
    transition: background 0.14s ease, opacity 0.14s ease;
}
.tdev-legend-row.clickable:hover { background: rgba(0, 229, 255, 0.08); }
/* When one is selected, dim the others and highlight the picked row. */
.tdev-donut-legend.has-sel .tdev-legend-row { opacity: 0.4; }
.tdev-donut-legend.has-sel .tdev-legend-row.sel { opacity: 1; }
.tdev-legend-row.sel {
    background: rgba(0, 229, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.35);
}
.tdev-legend-row.sel .ll { color: var(--atlas-mist-100); font-weight: 700; }

/* Selected donut segment: rounded ends + soft glow (others are dimmed via opacity). */
.tdev-donut-seg.is-sel { stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)); }

/* "Focused contractor" chip shown in the Shift / Workers-vs-time headers. */
.tdev-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--atlas-navy-900);
    background: var(--atlas-cyan);
    border-radius: 999px;
    padding: 2px 9px 2px 7px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.tdev-focus-chip i { font-size: 12px; }

/* Reveal the donut cards in step with the rest of the flyout. */
.tdev-flyout.show .tdev-donut-card {
    animation: tdev-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tdev-flyout.show .tdev-donut-card:nth-child(1) { animation-delay: 0.16s; }
.tdev-flyout.show .tdev-donut-card:nth-child(2) { animation-delay: 0.22s; }

@media (max-width: 760px) {
    .tdev-donuts { flex-direction: column; }
}

/* ---- Workers flyout: 3-column breakdown below the KPI widgets ---- */
.tdev-wgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 16px;
    margin-bottom: 6px;
    align-items: stretch;
}
.tdev-wcard {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.07) 0%, rgba(0, 229, 255, 0.02) 100%);
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.tdev-wcard .tdev-flyout-sub { margin-bottom: 12px; }
/* Donut at the top of the contractors column, above the legend list. */
.tdev-wcard-top {
    display: flex;
    justify-content: center;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
}
/* Total pinned to the top-right corner of the contractors card. */
.tdev-wtotal {
    margin-left: auto;
    font-size: 16px;
    font-weight: 800;
    color: var(--atlas-cyan);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
/* Column 2: stack the donut above its legend so it fits a narrow column. */
.tdev-wcard-donut .tdev-donut-wrap { flex-direction: column; align-items: center; gap: 12px; }
.tdev-wcard-donut .tdev-donut-legend { width: 100%; }
/* Extra shift metrics pinned to the foot of the column (fills the stretched card). */
.tdev-shift-stats {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 229, 255, 0.12);
}

/* Column 3: interactive 24h workers-vs-time area chart. */
.tdev-wcurve { position: relative; margin-bottom: 4px; }
.tdev-wcurve svg {
    width: 100%;
    height: 84px;
    display: block;
    overflow: visible;
    border-radius: 9px;
    background:
        linear-gradient(rgba(0, 229, 255, 0.03), rgba(0, 229, 255, 0.03)),
        repeating-linear-gradient(90deg, transparent 0 calc(100% / 4 - 1px), rgba(0, 229, 255, 0.08) calc(100% / 4 - 1px) calc(100% / 4));
}
.tdev-wcurve .line {
    fill: none;
    stroke: var(--atlas-cyan);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.6));
}
.tdev-wcurve .nowx {
    stroke: var(--atlas-dash-green);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    opacity: 0.9;
}
.tdev-wcurve .hoverx { stroke: var(--atlas-mist-100); stroke-width: 1.5; opacity: 0.85; }
.tdev-wcurve .hit { fill: transparent; cursor: pointer; }
.tdev-wcurve .hit:hover { fill: rgba(0, 229, 255, 0.07); }
/* Floating value readout while inspecting an hour. */
.tdev-wcurve-tip {
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(6, 20, 30, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}
.tdev-wcurve-tip .t { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--atlas-cyan-muted); font-variant-numeric: tabular-nums; }
.tdev-wcurve-tip .n { font-size: 15px; font-weight: 800; color: var(--atlas-cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.tdev-flyout.show .tdev-wcurve .area { animation: tdev-item-in 0.6s ease both; animation-delay: 0.22s; }
.tdev-wcurve-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--atlas-mist-600);
    font-variant-numeric: tabular-nums;
}

/* Reveal the three cards in step with the rest of the flyout. */
.tdev-flyout.show .tdev-wcard { animation: tdev-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tdev-flyout.show .tdev-wcard:nth-child(1) { animation-delay: 0.14s; }
.tdev-flyout.show .tdev-wcard:nth-child(2) { animation-delay: 0.20s; }
.tdev-flyout.show .tdev-wcard:nth-child(3) { animation-delay: 0.26s; }

@media (max-width: 900px) {
    .tdev-wgrid { grid-template-columns: 1fr; }
}

/* Two-column body grid (collapses to one column when narrow). */
.tdev-flyout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}
.tdev-flyout-section { min-width: 0; }

.tdev-flyout-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--atlas-cyan-muted);
    margin-bottom: 9px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.14);
}
.tdev-flyout-sub.mt { margin-top: 16px; }
.tdev-flyout-sub i { font-size: 13px; color: var(--atlas-cyan); }

/* Rows inside the flyout body (bar chart / list style). */
.tdev-flyout-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11.5px;
    color: var(--atlas-mist-300);
}
.tdev-flyout-row:last-child { border-bottom: none; }
.tdev-flyout-row .ln { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdev-flyout-row .ln .muted { color: var(--atlas-mist-600); font-size: 10px; }
.tdev-flyout-row .num { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--atlas-mist-100); }
.tdev-flyout-row .num.accent { color: var(--atlas-cyan); }
.tdev-flyout-row .num.warn { color: var(--atlas-dash-amber); }
.tdev-flyout-row .num.danger { color: var(--atlas-dash-red); }
.tdev-flyout-row .num .ok { color: var(--atlas-dash-green); }
.tdev-flyout-row .time { flex: none; font-size: 10.5px; color: var(--atlas-mist-400); font-variant-numeric: tabular-nums; }
.tdev-flyout-row .chip {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    color: var(--atlas-cyan);
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 9px;
    padding: 1px 9px;
    font-variant-numeric: tabular-nums;
}
/* Status pill colour variants (e.g. drone incursion Completed / In progress). */
.tdev-flyout-row .chip.ok { color: var(--atlas-dash-green); background: rgba(37, 208, 125, 0.12); border-color: rgba(37, 208, 125, 0.3); }
.tdev-flyout-row .chip.warn { color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.3); }
.tdev-flyout-row .sev { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tdev-flyout-row .sev.ok { background: var(--atlas-dash-green); }
.tdev-flyout-row .sev.warn { background: var(--atlas-dash-amber); }
.tdev-flyout-row .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 7px var(--atlas-dash-red); }
.tdev-flyout-row .tdev-flyout-bar {
    flex: 1 1 90px;
    max-width: 150px;
    height: 8px;
    border-radius: 5px;
    background: rgba(0, 229, 255, 0.10);
    overflow: hidden;
}
.tdev-flyout-row .tdev-flyout-bar > span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--atlas-cyan) 0%, var(--atlas-dash-green) 100%);
    transform-origin: left center;
}
.tdev-flyout-row .tdev-flyout-bar > span.warn {
    background: linear-gradient(90deg, var(--atlas-dash-amber) 0%, #ff7a59 100%);
}

/* ---- "Wow" staggered reveal of the content once the panel is shown ---- */
.tdev-flyout.show .tdev-flyout-kpis .fk,
.tdev-flyout.show .tdev-flyout-row {
    animation: tdev-item-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tdev-flyout.show .tdev-flyout-bar > span {
    animation: tdev-bar-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tdev-item-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tdev-bar-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
/* Stagger: KPI cards. */
.tdev-flyout.show .tdev-flyout-kpis .fk:nth-child(1) { animation-delay: 0.05s; }
.tdev-flyout.show .tdev-flyout-kpis .fk:nth-child(2) { animation-delay: 0.10s; }
.tdev-flyout.show .tdev-flyout-kpis .fk:nth-child(3) { animation-delay: 0.15s; }
.tdev-flyout.show .tdev-flyout-kpis .fk:nth-child(4) { animation-delay: 0.20s; }
/* Stagger: rows within each section (nth-child resets per section). */
.tdev-flyout.show .tdev-flyout-row:nth-child(2) { animation-delay: 0.22s; }
.tdev-flyout.show .tdev-flyout-row:nth-child(3) { animation-delay: 0.27s; }
.tdev-flyout.show .tdev-flyout-row:nth-child(4) { animation-delay: 0.32s; }
.tdev-flyout.show .tdev-flyout-row:nth-child(5) { animation-delay: 0.37s; }
.tdev-flyout.show .tdev-flyout-row:nth-child(6) { animation-delay: 0.42s; }
.tdev-flyout.show .tdev-flyout-row:nth-child(7) { animation-delay: 0.47s; }
.tdev-flyout.show .tdev-flyout-bar > span { animation-delay: 0.3s; }

/* ====================================================================
   Drone incursions — clickable "flight card" deck + drill-in detail.
   Deliberately NOT a table: each run is a card with its own route trace,
   status glow and metric tags; tapping one opens the full run detail.
   ==================================================================== */
.tdrone-hint { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--atlas-mist-600); }

/* ---- Deck filter bar (by drone unit / by status) ---- */
.tdrone-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.tdrone-filter-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atlas-cyan-muted);
    margin-right: 2px;
}
.tdrone-filter-lbl i { font-size: 13px; color: var(--atlas-cyan); }
.tdrone-filter-sep {
    width: 1px;
    height: 18px;
    background: rgba(0, 229, 255, 0.18);
    margin: 0 6px;
}
.tdrone-fchip {
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: #cdeafe;
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tdrone-fchip:hover { background: rgba(0, 229, 255, 0.15); }
.tdrone-fchip.active {
    color: var(--atlas-navy-900);
    background: var(--atlas-cyan);
    border-color: var(--atlas-cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.tdrone-fchip.ok.active { background: var(--atlas-dash-green); border-color: var(--atlas-dash-green); box-shadow: 0 0 12px rgba(37, 208, 125, 0.4); }
.tdrone-fchip.warn.active { background: var(--atlas-dash-amber); border-color: var(--atlas-dash-amber); box-shadow: 0 0 12px rgba(255, 176, 32, 0.4); }
.tdrone-filter-count {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--atlas-mist-400);
    font-variant-numeric: tabular-nums;
}

.tdrone-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--atlas-cyan-muted);
    background: rgba(0, 229, 255, 0.04);
    border: 1px dashed rgba(0, 229, 255, 0.22);
    border-radius: 12px;
}
.tdrone-empty i { font-size: 16px; color: var(--atlas-cyan); }

.tdrone-deck {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 6px;
}

/* ---- Flight card ---- */
.tdrone-card {
    --sev: var(--atlas-dash-green);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px 14px 11px;
    text-align: left;
    font: inherit;
    color: var(--atlas-mist-300);
    cursor: pointer;
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: 14px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(0, 229, 255, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(8, 26, 38, 0.85) 0%, rgba(7, 19, 31, 0.95) 100%);
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.tdrone-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--sev);
    box-shadow: 0 0 12px var(--sev);
    opacity: 0.85;
}
.tdrone-card.sev-warn { --sev: var(--atlas-dash-amber); }
.tdrone-card.sev-crit { --sev: var(--atlas-dash-red); }
.tdrone-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 229, 255, 0.18);
}
.tdrone-card:hover .tdrone-go { transform: translateX(3px); color: var(--atlas-cyan); }
.tdrone-card:focus-visible { outline: 2px solid var(--atlas-cyan); outline-offset: 2px; }
.tdrone-card.live { border-color: rgba(255, 176, 32, 0.45); }

.tdrone-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tdrone-unit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--atlas-mist-100);
}
.tdrone-unit svg { width: 18px; height: 18px; color: var(--atlas-cyan); flex: none; }

.tdrone-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--atlas-dash-green);
    background: rgba(37, 208, 125, 0.12);
    border: 1px solid rgba(37, 208, 125, 0.3);
    white-space: nowrap;
}
.tdrone-status.warn { color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.3); }
.tdrone-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--atlas-dash-amber); box-shadow: 0 0 7px var(--atlas-dash-amber);
    animation: tdrone-pulse 1.1s ease-in-out infinite;
}
@keyframes tdrone-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.tdrone-area {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--atlas-mist-100);
    line-height: 1.25;
}

/* Mini flight-path trace inside the card. */
.tdrone-route {
    height: 38px;
    margin: 1px 0 2px;
    border-radius: 9px;
    background:
        linear-gradient(rgba(0, 229, 255, 0.05), rgba(0, 229, 255, 0.05)),
        repeating-linear-gradient(90deg, transparent 0 17px, rgba(0, 229, 255, 0.07) 17px 18px),
        repeating-linear-gradient(0deg, transparent 0 17px, rgba(0, 229, 255, 0.07) 17px 18px);
    border: 1px solid rgba(0, 229, 255, 0.1);
    overflow: hidden;
}
.tdrone-route svg { width: 100%; height: 100%; display: block; }
.tdrone-route .trk {
    fill: none;
    stroke: var(--sev, var(--atlas-cyan));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px var(--sev, var(--atlas-cyan)));
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
}
.tdev-flyout.show .tdrone-route .trk { animation: tdrone-trace 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards; }
@keyframes tdrone-trace { to { stroke-dashoffset: 0; } }

.tdrone-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.tdrone-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--atlas-mist-400);
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.14);
    border-radius: 7px;
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}
.tdrone-tag i { font-size: 12px; color: var(--atlas-cyan-muted); }
.tdrone-tag.warn { color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.1); border-color: rgba(255, 176, 32, 0.28); }
.tdrone-tag.warn i { color: var(--atlas-dash-amber); }
.tdrone-tag.ok { color: var(--atlas-dash-green); background: rgba(37, 208, 125, 0.1); border-color: rgba(37, 208, 125, 0.26); }
.tdrone-tag.ok i { color: var(--atlas-dash-green); }
.tdrone-go {
    margin-left: auto;
    font-size: 16px;
    color: var(--atlas-cyan-muted);
    transition: transform 0.16s ease, color 0.16s ease;
}

/* Staggered reveal of the deck once the flyout is shown. */
.tdev-flyout.show .tdrone-card { animation: tdev-item-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tdev-flyout.show .tdrone-card:nth-child(1) { animation-delay: 0.06s; }
.tdev-flyout.show .tdrone-card:nth-child(2) { animation-delay: 0.11s; }
.tdev-flyout.show .tdrone-card:nth-child(3) { animation-delay: 0.16s; }
.tdev-flyout.show .tdrone-card:nth-child(4) { animation-delay: 0.21s; }
.tdev-flyout.show .tdrone-card:nth-child(5) { animation-delay: 0.26s; }
.tdev-flyout.show .tdrone-card:nth-child(6) { animation-delay: 0.31s; }
.tdev-flyout.show .tdrone-card:nth-child(7) { animation-delay: 0.36s; }

/* ---- Drill-in detail ---- */
.tdrone-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--atlas-cyan-muted);
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 9px;
    padding: 5px 12px 5px 9px;
    cursor: pointer;
    margin-bottom: 14px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tdrone-back:hover { background: rgba(0, 229, 255, 0.14); color: var(--atlas-mist-100); transform: translateX(-2px); }
.tdrone-back i { font-size: 15px; }

.tdrone-detail-hero {
    --sev: var(--atlas-dash-green);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 14px;
    border: 1px solid rgba(0, 229, 255, 0.18);
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(0, 229, 255, 0.1) 0%, transparent 55%),
        linear-gradient(180deg, rgba(8, 26, 38, 0.9) 0%, rgba(7, 19, 31, 0.96) 100%);
    overflow: hidden;
}
.tdrone-detail-hero.sev-warn { --sev: var(--atlas-dash-amber); }
.tdrone-detail-hero.sev-crit { --sev: var(--atlas-dash-red); }
.tdrone-detail-hero::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--sev); box-shadow: 0 0 16px var(--sev);
}
.tdrone-detail-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.tdrone-mark {
    width: 40px; height: 40px; flex: none; color: var(--atlas-cyan);
    padding: 7px; border-radius: 11px;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.22);
}
.tdrone-detail-unit { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--atlas-cyan); }
.tdrone-detail-area { font-size: 17px; font-weight: 800; color: var(--atlas-mist-100); line-height: 1.2; }
.tdrone-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.tdrone-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; color: #cdeafe;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 999px; padding: 3px 11px;
    font-variant-numeric: tabular-nums;
}
.tdrone-pill i { font-size: 13px; color: var(--atlas-cyan-muted); }

.tdrone-detail-route {
    position: relative;
    height: 96px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 229, 255, 0.14);
    background:
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(0, 229, 255, 0.06) 23px 24px),
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(0, 229, 255, 0.06) 23px 24px),
        linear-gradient(180deg, rgba(0, 229, 255, 0.04), transparent);
    overflow: hidden;
}
.tdrone-detail-route svg { width: 100%; height: 100%; display: block; }
.tdrone-detail-hero.sev-warn ~ .tdrone-detail-route .trk,
.tdrone-detail-hero.sev-warn ~ .tdrone-detail-route .trk-glow { stroke: var(--atlas-dash-amber); }
.tdrone-detail-hero.sev-crit ~ .tdrone-detail-route .trk,
.tdrone-detail-hero.sev-crit ~ .tdrone-detail-route .trk-glow { stroke: var(--atlas-dash-red); }
.tdrone-detail-route .trk {
    fill: none; stroke: var(--atlas-cyan); stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 5px currentColor);
}
.tdrone-detail-route .trk-glow {
    fill: none; stroke: var(--atlas-cyan); stroke-width: 6;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: 0.12;
}
.tdrone-route-cap {
    position: absolute; left: 10px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--atlas-cyan-muted);
}
.tdrone-route-cap i { font-size: 12px; color: var(--atlas-cyan); }

.tdrone-finding {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; margin-bottom: 7px;
    border-radius: 10px;
    font-size: 11.5px; color: #d8e6ec;
    background: rgba(255, 176, 32, 0.06);
    border: 1px solid rgba(255, 176, 32, 0.22);
}
.tdrone-finding.sev-crit { background: rgba(255, 77, 109, 0.08); border-color: rgba(255, 77, 109, 0.3); }
.tdrone-finding .sev { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tdrone-finding .sev.warn { background: var(--atlas-dash-amber); box-shadow: 0 0 6px var(--atlas-dash-amber); }
.tdrone-finding .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 7px var(--atlas-dash-red); }
.tdrone-finding .ln { flex: 1 1 auto; min-width: 0; }
.tdrone-finding .chip {
    flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.12);
    border: 1px solid rgba(255, 176, 32, 0.3); border-radius: 8px; padding: 2px 8px;
}
.tdrone-finding.sev-crit .chip { color: var(--atlas-dash-red); background: rgba(255, 77, 109, 0.14); border-color: rgba(255, 77, 109, 0.34); }
.tdrone-clear {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border-radius: 10px;
    font-size: 12px; font-weight: 600; color: var(--atlas-dash-green);
    background: rgba(37, 208, 125, 0.08);
    border: 1px solid rgba(37, 208, 125, 0.24);
}
.tdrone-clear i { font-size: 16px; }

@media (max-width: 720px) {
    .tdrone-deck { grid-template-columns: 1fr; }
}

/* ---- Spool flow (materials flyout): Workshop -> Laydown -> Site -> Installed ----
   Deliberately NOT a row of cards like the 4 KPIs above it: a connected process
   track with circular zone nodes and dashed transit links carrying the count. */
.tdev-flow {
    display: flex;
    align-items: flex-start;
    margin: 2px 0 20px;
    padding: 6px 4px 0;
}
.tdev-flow-node {
    flex: 0 0 auto;
    width: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.tdev-flow-node .fn-ring {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 36%, rgba(0, 229, 255, 0.16), rgba(0, 229, 255, 0.02));
    border: 2px solid rgba(0, 229, 255, 0.42);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.14) inset;
}
.tdev-flow-node .fn-ring > i {
    position: absolute;
    top: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: #0b2336;
    border: 1px solid rgba(0, 229, 255, 0.42);
    color: var(--atlas-cyan-muted);
}
.tdev-flow-node .fn-count {
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    color: var(--atlas-mist-100);
    font-variant-numeric: tabular-nums;
}
.tdev-flow-node .fn-name { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--atlas-mist-400); }
.tdev-flow-node .fn-lbl { font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--atlas-mist-600); }

.tdev-flow-node.done .fn-ring {
    background: radial-gradient(circle at 50% 36%, rgba(37, 208, 125, 0.18), rgba(37, 208, 125, 0.02));
    border-color: rgba(37, 208, 125, 0.46);
    box-shadow: 0 0 16px rgba(37, 208, 125, 0.14) inset;
}
.tdev-flow-node.done .fn-ring > i { color: var(--atlas-dash-green); border-color: rgba(37, 208, 125, 0.46); }
.tdev-flow-node.done .fn-count { color: var(--atlas-dash-green); }

/* Dashed link between two zones, with the in-transit count floating on it. */
.tdev-flow-link {
    flex: 1 1 auto;
    min-width: 36px;
    height: 62px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tdev-flow-link::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 30px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.4) 0 7px, transparent 7px 13px);
}
.tdev-flow-link .fl-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--atlas-mist-600);
    background: #0b2336;
    border: 1px solid rgba(79, 107, 120, 0.55);
    font-variant-numeric: tabular-nums;
}
.tdev-flow-link .fl-pill > i { font-size: 13px; }
.tdev-flow-link.active .fl-pill { color: var(--atlas-dash-amber); border-color: rgba(255, 176, 32, 0.55); }
.tdev-flow-link.active::before { background: repeating-linear-gradient(90deg, rgba(255, 176, 32, 0.55) 0 7px, transparent 7px 13px); }
.tdev-flow-link.done::before { background: rgba(43, 111, 134, 0.55); }

/* Clickable zone nodes: click to list that zone's spools & packing lists below. */
.tdev-flow-node.clickable { cursor: pointer; }
.tdev-flow-node.clickable .fn-ring { transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.tdev-flow-node.clickable:hover .fn-ring { transform: translateY(-2px); box-shadow: 0 0 22px rgba(0, 229, 255, 0.3) inset, 0 6px 16px rgba(0, 0, 0, 0.4); }
.tdev-flow-node.clickable:hover .fn-name { color: #cdeafe; }
.tdev-flow-node.selected .fn-ring {
    border-color: var(--atlas-cyan);
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18), 0 0 22px rgba(0, 229, 255, 0.4) inset;
}
.tdev-flow-node.selected .fn-name { color: var(--atlas-cyan); }

/* Active-filter banner under the flow when a zone is selected. */
.tdev-flow-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -8px 0 14px;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: var(--atlas-mist-400);
}
.tdev-flow-filter > i { color: var(--atlas-cyan); font-size: 13px; }
.tdev-flow-filter strong { color: var(--atlas-mist-100); font-weight: 700; }
.tdev-flow-clear {
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--atlas-cyan-muted);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.28);
    cursor: pointer;
}
.tdev-flow-clear:hover { background: rgba(255, 77, 109, 0.16); color: var(--atlas-dash-red); border-color: rgba(255, 77, 109, 0.4); }
.tdev-flow-clear > i { font-size: 11px; }

.tdev-flyout-empty {
    padding: 14px 4px;
    font-size: 11.5px;
    color: var(--atlas-mist-600);
    font-style: italic;
}

/* Expandable packing-list rows (materials flyout). */
.tdev-pack-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(0, 229, 255, 0.07);
    cursor: pointer;
}
.tdev-pack-row .ln { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdev-pack-row .ln .muted { color: var(--atlas-mist-600); font-size: 10px; }
.tdev-pack-row .chip {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--atlas-cyan);
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.28);
}
.tdev-pack-row .time { flex: none; font-size: 10.5px; color: var(--atlas-mist-400); font-variant-numeric: tabular-nums; }
.tdev-pack-row .sev { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tdev-pack-row .sev.ok { background: var(--atlas-dash-green); }
.tdev-pack-row .sev.warn { background: var(--atlas-dash-amber); }
.tdev-pack-row .sev.crit { background: var(--atlas-dash-red); box-shadow: 0 0 7px var(--atlas-dash-red); }
.tdev-pack-caret { flex: none; font-size: 12px; color: var(--atlas-cyan-muted); transition: transform 0.18s ease; }
.tdev-pack-row.open .tdev-pack-caret { transform: rotate(180deg); }
.tdev-pack-row.open { border-bottom-color: transparent; }
.tdev-pack-spools {
    margin: 0 0 6px 15px;
    padding-left: 11px;
    border-left: 1px solid rgba(0, 229, 255, 0.18);
}
.tdev-pack-spools .tdev-flyout-row .chip.warn { color: var(--atlas-dash-amber); background: rgba(255, 176, 32, 0.12); border-color: rgba(255, 176, 32, 0.3); }
.tdev-pack-spools .tdev-flyout-row .chip.ok { color: var(--atlas-dash-green); background: rgba(37, 208, 125, 0.12); border-color: rgba(37, 208, 125, 0.3); }

@media (max-width: 720px) {
    .tdev-flyout-grid { grid-template-columns: 1fr; }
    .tdev-flyout-kpis { flex-wrap: wrap; }
    .tdev-flyout-kpis .fk { flex: 1 1 40%; }
    .tdev-flow { overflow-x: auto; }
    .tdev-flow-link .fl-pill { padding: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .tdev-flyout,
    .tdev-flyout.show .tdev-flyout-kpis .fk,
    .tdev-flyout.show .tdev-flyout-row,
    .tdev-flyout.show .tdev-flyout-bar > span { animation: none; transition: opacity 0.2s ease; }
}

@media (max-width: 1200px) {
    .tdev-col { width: 240px; }
}
@media (max-width: 900px) {
    .tdev-col, .tdev-bottom { display: none; }
}

/* ============================================================================
   Kestrel 5400 heat-stress panel (env strip → heatstress flyout).
   Mirrors the standalone Kestrel LiNK dashboard: session bar → latest reading →
   session statistics → data quality → time-series → per-channel grid.

   Series hues are the dashboard's own accent/violet/coral; the status trio
   (var(--atlas-dash-green) / var(--atlas-dash-amber) / var(--atlas-dash-red)) stays reserved for alarm state, so a red line is
   always an alarm and never a series.
   ============================================================================ */
.kst-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 4px;
    color: var(--atlas-mist-400);
    font-size: 12px;
    font-weight: 600;
}

/* The panel is simulated until a real feed lands — say so on screen, not just in
   the source, so no one reads these numbers as measurements. */
.kst-simbanner {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 9px;
    background: rgba(255, 176, 32, 0.09);
    border: 1px solid rgba(255, 176, 32, 0.32);
    color: var(--atlas-dash-amber);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}
.kst-simbanner i { font-size: 15px; flex: none; }

/* ---- Session bar ---- */
.kst-sessionbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.kst-session-id { display: flex; flex-direction: column; gap: 2px; flex: none; }
.kst-device { font-size: 12px; font-weight: 800; color: var(--atlas-mist-100); letter-spacing: 0.02em; }
.kst-serial { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--atlas-mist-600); }
.kst-session-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--atlas-mist-400);
    font-variant-numeric: tabular-nums;
}
.kst-session-right { display: flex; align-items: center; gap: 12px; flex: none; }
.kst-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(37, 208, 125, 0.14);
    border: 1px solid rgba(37, 208, 125, 0.4);
    color: var(--atlas-dash-green);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.kst-last { font-size: 10px; font-weight: 600; color: var(--atlas-mist-600); font-variant-numeric: tabular-nums; }
.kst-batt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--atlas-mist-400);
    font-variant-numeric: tabular-nums;
}
.kst-batt i { font-size: 15px; color: var(--atlas-dash-green); }

/* ---- Stat cards (latest reading / session statistics / data quality) ---- */
.kst-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.kst-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px 10px;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.08) 0%, rgba(0, 229, 255, 0.02) 100%);
    border: 1px solid rgba(0, 229, 255, 0.16);
}
.kst-card .kst-k {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--atlas-mist-500);
}
.kst-card .kst-v {
    font-size: 21px;
    font-weight: 800;
    color: var(--atlas-mist-100);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kst-card .kst-v small { font-size: 11px; font-weight: 700; color: var(--atlas-cyan-muted); margin-left: 3px; }
.kst-card .kst-v.accent { color: var(--atlas-cyan); }
.kst-card .kst-v.ok { color: var(--atlas-dash-green); }
.kst-card .kst-v.warn { color: var(--atlas-dash-amber); }
.kst-card .kst-v.danger { color: var(--atlas-dash-red); }
.kst-card .kst-sub { font-size: 9px; font-weight: 600; color: var(--atlas-mist-600); font-variant-numeric: tabular-nums; }
.kst-badge {
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.kst-badge-ok   { background: rgba(37, 208, 125, 0.14); border: 1px solid rgba(37, 208, 125, 0.4); color: var(--atlas-dash-green); }
.kst-badge-warn { background: rgba(255, 176, 32, 0.14); border: 1px solid rgba(255, 176, 32, 0.4); color: var(--atlas-dash-amber); }
.kst-badge-crit { background: rgba(255, 77, 109, 0.14); border: 1px solid rgba(255, 77, 109, 0.4); color: var(--atlas-dash-red); }

/* ---- Time-series chart ---- */
.kst-chart { margin-bottom: 18px; }
.kst-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 7px;
}
.kst-chart-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--atlas-mist-100);
}
.kst-swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.kst-chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.kst-leg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    color: var(--atlas-mist-400);
    font-variant-numeric: tabular-nums;
}
.kst-leg small { color: var(--atlas-mist-600); font-weight: 600; }
.kst-leg-mark { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.kst-leg-alarm { color: var(--atlas-dash-red); }
.kst-leg-dash {
    width: 11px;
    height: 0;
    flex: none;
    border-top: 2px dashed var(--atlas-dash-red);
}

.kst-chart-plot { position: relative; }
.kst-chart-plot svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 9px;
    background: rgba(0, 229, 255, 0.03);
}
.kst-chart-empty {
    padding: 24px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--atlas-mist-600);
    border-radius: 9px;
    background: rgba(0, 229, 255, 0.03);
}
.kst-grid { stroke: rgba(0, 229, 255, 0.10); stroke-width: 1; }
.kst-ylab, .kst-xlab {
    font-size: 8px;
    font-weight: 700;
    fill: var(--atlas-mist-600);
    font-variant-numeric: tabular-nums;
}
.kst-alarm { stroke: var(--atlas-dash-red); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.75; }
.kst-alarm-lab { font-size: 8px; font-weight: 800; fill: var(--atlas-dash-red); font-variant-numeric: tabular-nums; }
.kst-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kst-area { stroke: none; }
.kst-dot { transition: r 0.1s ease; }
/* A surface-colored ring keeps overlapping series markers readable. */
.kst-dot.on { stroke: #0d2035; stroke-width: 1.5; }
.kst-crosshair { stroke: var(--atlas-mist-100); stroke-width: 1; opacity: 0.5; }
.kst-hit { fill: transparent; cursor: crosshair; }

.kst-tip {
    position: absolute;
    top: 2px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(7, 19, 31, 0.95);
    border: 1px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
}
.kst-tip .t { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; color: var(--atlas-cyan-muted); font-variant-numeric: tabular-nums; }
.kst-tip .r { display: flex; align-items: center; gap: 6px; }
.kst-tip .r .n { font-size: 12px; font-weight: 800; color: var(--atlas-mist-100); font-variant-numeric: tabular-nums; }
.kst-tip .r small { font-size: 9px; font-weight: 600; color: var(--atlas-mist-600); }

/* ---- All measurements grid ---- */
.kst-spark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.kst-spark {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.13);
}
.kst-spark-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kst-spark-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--atlas-mist-400);
}
.kst-spark-alarm {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    font-size: 9px;
    font-weight: 800;
    color: var(--atlas-mist-600);
    font-variant-numeric: tabular-nums;
}
.kst-spark-alarm.on { color: var(--atlas-dash-red); }
.kst-spark-alarm i { font-size: 11px; }
.kst-spark-svg { width: 100%; height: auto; display: block; }
.kst-spark-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.kst-spark-empty {
    padding: 12px 0;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--atlas-mist-600);
}
.kst-spark-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.kst-spark-foot .lo, .kst-spark-foot .hi { font-size: 9px; font-weight: 700; color: var(--atlas-mist-600); }
.kst-spark-foot .cur { font-size: 12px; font-weight: 800; }
.kst-spark-foot .cur small { font-size: 9px; font-weight: 600; color: var(--atlas-mist-600); margin-left: 2px; }

@media (max-width: 1100px) {
    .kst-cards { grid-template-columns: repeat(2, 1fr); }
    .kst-spark-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .kst-spark-grid { grid-template-columns: 1fr; }
    .kst-chart-legend { display: none; }
}