/* ==========================================================================
   SenzFusion redesign — css/product.css
   Design Spec 2.0.0 · Binance.US design system.
   Page layout for payload.html (data-page="payload") and use-cases.html
   (data-page="use-cases"). Values come only from css/tokens.css; derived
   colours are color-mix() of palette tokens (solid mixes, never gradient
   washes). Loads after base.css.
   Model stage / diagram / replay containers follow the .panel dark-card look
   (#2B2F36, radius 12, no shadow). The payload model stage sits inside a DARK
   panel, so the DS golden glow (light containers only) is intentionally not
   used here.

   Contents
     1. Shared helpers
     2. Payload explorer (panel, stage, 3D view, diagram, inspector)
     3. Exploded component diagram (SVG)
     4. Use-case applications (image-led rows)
     5. Position-fix explainer (#fix-gate)
     6. Detection and tracking replay (<details id="fusion-lab">)
   ========================================================================== */


/* ==========================================================================
   1. Shared helpers
   ========================================================================== */
.segmented button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.page-intro .arrow-link { margin-top: calc(-1 * var(--s-2)); }


/* ==========================================================================
   2. Payload explorer
   ========================================================================== */
.px {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
@media (min-width: 1024px) {
  .px {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch;
  }
}

.px-panel { min-width: 0; }

/* View switch + selected component label */
.px-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--c-line-dark);
}
.px-selected {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-dark);
}
.px-selected-num {
  flex: none;
  padding: var(--s-half) var(--s-2);
  border-radius: var(--r-chip);
  background: var(--c-signal);
  color: var(--c-ink);
}

/* 3D unavailable notice (normal flow, above the stage) */
.px-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--c-line-dark);
  background: var(--c-panel-raised);
  color: var(--c-on-dark);
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
}
.px-notice .icon {
  margin-top: var(--s-half);
  color: var(--c-signal);
}
.px-notice span { color: var(--c-on-dark-muted); }

/* Fixed-ratio stage; exactly one view occupies it */
.px-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 4 / 3;
  background: var(--c-panel);
  border-radius: 0;
}
@media (max-width: 767px) {
  .px-stage { aspect-ratio: 1 / 1; }
}
.px-view {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.px[data-view="model"] .px-view-diagram,
.px[data-view="diagram"] .px-view-model,
.px[data-view="model"] [data-for="diagram"],
.px[data-view="diagram"] [data-for="model"] { display: none; }

.px-model {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-height: 0;
}
.px-model:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(-1 * var(--focus-width));
}
.px-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-on-dark-muted);
  pointer-events: none;
}

.px-view-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
@media (max-width: 767px) {
  .px-view-diagram { padding: 0; }
}

/* Panel foot: hint (3D) or assembly controls (diagram) + reset */
.px-foot { justify-content: space-between; }
.px-hint { margin: 0; }
.px-assembly {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  flex: 1 1 auto;
  min-width: 0;
}
.px-range {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 calc(var(--s-32) * 2);
  min-width: 0;
  color: var(--c-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
@media (max-width: 479px) {
  .px-range {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.px-reset { margin-left: auto; }

/* Inspector */
.px-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--bw) solid var(--c-hair);
  border-radius: var(--r-panel);
  box-shadow: var(--elev-card);
  overflow: hidden;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .px-inspector { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .px-parts { border-right: var(--bw) solid var(--c-hair); }
}

.px-parts {
  display: grid;
  align-content: start;
  border-bottom: var(--bw) solid var(--c-hair);
}
@media (min-width: 768px) and (max-width: 1023px) {
  .px-parts { border-bottom: 0; }
}
.px-part {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: calc(var(--touch) + var(--s-3));
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-bottom: var(--bw) solid var(--c-hair);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.px-part:last-child { border-bottom: 0; }
.px-part:focus-visible {
  outline: var(--focus-ring-light);
  outline-offset: calc(-1 * var(--focus-width) - var(--bw));
}
.px-part-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--s-8);
  min-height: var(--s-6);
  padding: 0 var(--s-1);
  border: var(--bw) solid var(--c-hair);
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
}
.px-part-name { flex: 1 1 auto; min-width: 0; }
.px-part-tick {
  color: var(--c-signal-ink);
  visibility: hidden;
}
.px-part[aria-pressed="true"] {
  background: var(--c-surface-raised);
  font-weight: var(--fw-semibold);
}
.px-part[aria-pressed="true"] .px-part-num {
  background: var(--c-signal);
  border-color: var(--c-signal);
  color: var(--c-ink);
}
.px-part[aria-pressed="true"] .px-part-tick { visibility: visible; }
@media (hover: hover) {
  .px-part:not([aria-pressed="true"]):hover {
    background: color-mix(in srgb, var(--c-surface-raised) 55%, var(--c-surface));
  }
}

.px-detail {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-6);
  min-width: 0;
}
.px-detail-role { color: var(--c-signal-ink); }
.px-detail-text {
  color: var(--c-ink);
  max-width: var(--measure);
}
.px-detail-list {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
  padding: var(--s-4) 0 0;
  list-style: none;
  border-top: var(--bw) solid var(--c-hair);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}
.px-detail-list li {
  display: grid;
  grid-template-columns: var(--s-4) minmax(0, 1fr);
  gap: var(--s-2);
}
.px-detail-list li::before {
  content: "\2014";
  font-family: var(--font-mono);
  color: var(--c-ink-muted);
}
@media (max-width: 767px) {
  .px-detail { padding: var(--s-6) var(--s-4); }
  .px-detail-list { font-size: var(--fs-16); }
}

.px-caption { margin-top: var(--s-6); }


/* ==========================================================================
   3. Exploded component diagram (SVG, generated technical drawing)
   ========================================================================== */
.dg-svg {
  --dg-top: color-mix(in srgb, var(--c-on-dark) 16%, var(--c-panel-raised));
  --dg-top-hl: color-mix(in srgb, var(--c-on-dark) 28%, var(--c-panel-raised));
  --dg-front: color-mix(in srgb, var(--c-on-dark) 6%, var(--c-panel-raised));
  --dg-side: color-mix(in srgb, var(--c-night) 40%, var(--c-panel-raised));
  --dg-board: color-mix(in srgb, var(--c-on-dark-muted) 22%, var(--c-panel));
  --dg-edge: color-mix(in srgb, var(--c-on-dark-muted) 60%, var(--c-panel));
  --dg-sel-top: color-mix(in srgb, var(--c-signal) 62%, var(--c-panel-raised));
  --dg-sel-front: color-mix(in srgb, var(--c-signal) 44%, var(--c-panel-raised));
  --dg-sel-side: color-mix(in srgb, var(--c-signal) 28%, var(--c-panel));
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#dg-grid path {
  fill: none;
  stroke: var(--c-line-dark);
  stroke-width: 1;
  opacity: .55;
}

.dg-part,
.dg-callout { cursor: pointer; }
.dg-part :is(path, ellipse) {
  stroke: var(--dg-edge);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.dg-part .ft { fill: var(--dg-top); }
.dg-part .ff { fill: var(--dg-front); }
.dg-part .fs { fill: var(--dg-side); }
.dg-part .ft.hl { fill: var(--dg-top-hl); }
.dg-part .ft.board { fill: var(--dg-board); }
.dg-part .fp { fill: var(--dg-side); }
.dg-part .glass,
.dg-part .ring,
.dg-part .lens-core { fill: var(--c-night); }
.dg-part .lens { fill: color-mix(in srgb, var(--c-night) 70%, var(--c-panel-raised)); }
.dg-part .lens-in { fill: var(--c-panel); }
.dg-part .bolt { fill: var(--dg-top); }
.dg-part .led { fill: var(--c-on-dark-muted); }

.dg-part.is-selected :is(path, ellipse) { stroke: var(--c-signal); }
.dg-part.is-selected .ft,
.dg-part.is-selected .ft.hl,
.dg-part.is-selected .ft.board { fill: var(--dg-sel-top); }
.dg-part.is-selected .ff { fill: var(--dg-sel-front); }
.dg-part.is-selected .fs,
.dg-part.is-selected .fp { fill: var(--dg-sel-side); }
@media (hover: hover) {
  .dg-part:not(.is-selected):hover :is(path, ellipse) { stroke: var(--c-on-dark); }
}

.dg-leader {
  fill: none;
  stroke: var(--c-on-dark-muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.dg-anchor { fill: var(--c-on-dark); }
.dg-bubble {
  fill: var(--c-night);
  stroke: var(--c-on-dark-muted);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.dg-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: var(--fw-medium);
  fill: var(--c-on-dark);
  text-anchor: middle;
  dominant-baseline: central;
}
.dg-callout.is-selected .dg-bubble {
  fill: var(--c-signal);
  stroke: var(--c-signal);
}
.dg-callout.is-selected .dg-num { fill: var(--c-ink); }
.dg-callout.is-selected .dg-leader {
  stroke: var(--c-signal);
  stroke-dasharray: none;
}
.dg-callout.is-selected .dg-anchor { fill: var(--c-signal); }


/* ==========================================================================
   4. Use-case applications — image-led rows
   ========================================================================== */
.uc-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-12);
}
.uc-item {
  display: grid;
  gap: var(--s-6);
  min-width: 0;
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.uc-media { min-width: 0; }
.uc-img {
  --od-ratio: 3 / 2;
  border-radius: var(--r-media);
  background: var(--c-panel);
}
.uc-copy {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
}
.uc-copy p { max-width: var(--measure); }
.uc-copy .uc-num {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-label);
  color: var(--fg-muted);
  margin-bottom: calc(-1 * var(--s-2));
}
.uc-copy .arrow-link { margin-top: var(--s-1); }

@media (min-width: 768px) and (max-width: 1023px) {
  .uc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
  }
  .uc-item {
    gap: 0;
    align-content: start;
    background: var(--c-surface);
    border: var(--bw) solid var(--c-hair);
    border-radius: var(--r-panel);
    box-shadow: var(--elev-card);
    overflow: hidden;
  }
  .uc-img { border-radius: 0; }
  .uc-copy { padding: var(--s-6); }
}

@media (min-width: 1024px) {
  .uc-list { gap: var(--s-16); }
  .uc-item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }
  .uc-media {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
  .uc-copy {
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .uc-item:nth-child(even) .uc-media { grid-column: 7 / span 6; }
  .uc-item:nth-child(even) .uc-copy { grid-column: 1 / span 5; }
}

.uc-note { margin-top: var(--s-12); }


/* ==========================================================================
   5. Position-fix explainer
   ========================================================================== */
.fx-body {
  display: grid;
  gap: var(--s-6);
}
.fx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.fx-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .fx-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fx-figure {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
}
.fx-figure figcaption {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-on-dark);
}
.fx-figure figcaption span {
  margin-left: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--c-on-dark-muted);
}
.fx-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: var(--c-night);
  border: var(--bw) solid var(--c-line-dark);
  border-radius: var(--r-control);
}

/* Overlays: candidate = signal dashed; accepted = signal solid; rejected = danger */
.fx-region,
.fx-ambiguous {
  fill: none;
  stroke: var(--c-signal);
  stroke-width: 6;
  stroke-dasharray: 18 12;
}
.fx-ambiguous {
  stroke-width: 5;
  stroke-dasharray: 14 10;
}
.fx[data-phase="2"][data-distinct="true"] .fx-region {
  stroke-width: 9;
  stroke-dasharray: none;
}
.fx[data-phase="2"][data-distinct="false"] .fx-ambiguous { stroke: var(--c-danger); }

.fx-marker circle {
  fill: var(--c-night);
  stroke: var(--c-signal);
  stroke-width: 5;
}
.fx-marker text {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: var(--fw-medium);
  fill: var(--c-on-dark);
  text-anchor: middle;
  dominant-baseline: central;
}
.fx-marker.detail circle { stroke-width: 2.5; }
.fx-marker.detail text { font-size: 20px; }
@media (min-width: 1200px) {
  .fx-marker:not(.detail) circle { r: 32px; }
  .fx-marker:not(.detail) text { font-size: 40px; }
}

.fx[data-phase="0"] .fx-markers,
.fx[data-distinct="false"] .fx-distinct,
.fx[data-distinct="true"] .fx-repeated { display: none; }

/* Verdict, evidence and uncertainty */
.fx-explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--c-line-dark);
}
@media (min-width: 768px) {
  .fx-explain { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-evidence { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .fx-explain { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; }
  .fx-evidence { grid-column: auto; }
}

.fx-verdict {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4);
  border: var(--bw-strong) solid var(--c-line-dark);
  border-radius: var(--r-control);
}
.fx-heading {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
}
.fx-verdict p { color: var(--c-on-dark-muted); }
.fx-icon {
  display: none;
  width: var(--s-6);
  height: var(--s-6);
  stroke-width: 2;
}
.fx[data-phase="2"][data-distinct="true"] .fx-verdict { border-color: var(--c-signal); }
.fx[data-phase="2"][data-distinct="true"] .fx-icon-accept {
  display: inline-block;
  color: var(--c-signal);
}
.fx[data-phase="2"][data-distinct="false"] .fx-verdict { border-color: var(--c-danger); }
.fx[data-phase="2"][data-distinct="false"] .fx-icon-reject {
  display: inline-block;
  color: var(--c-danger);
}

.fx-evidence {
  display: grid;
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
}
.fx-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: var(--bw) solid var(--c-line-dark);
}
.fx-row:first-child { padding-top: 0; }
.fx-row dt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-on-dark-muted);
}
.fx-row dt::before {
  content: "";
  flex: none;
  width: var(--s-3);
  height: var(--s-3);
  border: var(--bw-strong) solid var(--c-line-dark);
  border-radius: var(--r-mark);
}
.fx-row-match dt::before {
  border-style: dashed;
  border-color: var(--c-signal);
}
.fx-row-estimate dt::before {
  border-color: var(--c-estimate);
  border-radius: 50%;
}
.fx-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: right;
  color: var(--c-on-dark);
}

.fx-uncertainty {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}
.fx-uncertainty svg {
  display: block;
  width: calc(var(--s-32) + var(--s-8));
  height: auto;
}
@media (min-width: 768px) {
  .fx-uncertainty { justify-self: end; }
}
.fx-axes {
  fill: none;
  stroke: var(--c-line-dark);
}
.fx-before {
  fill: none;
  stroke: var(--c-on-dark-muted);
  stroke-dasharray: 3 4;
}
.fx-after {
  fill: color-mix(in srgb, var(--c-estimate) 12%, transparent);
  stroke: var(--c-estimate);
  stroke-width: 2;
  transition:
    rx calc(var(--dur-enter) * 3) var(--ease-out),
    ry calc(var(--dur-enter) * 3) var(--ease-out);
}
.fx-center { fill: var(--c-on-dark); }

/* Playback controls */
.fx-controls { gap: var(--s-3); }
.fx-steps { margin-left: auto; }
.fx-pause-icon { display: none; }
.fx[data-playing="true"] .fx-play-icon { display: none; }
.fx[data-playing="true"] .fx-pause-icon { display: inline-block; }
.fx-progress {
  flex: 1 0 100%;
  height: var(--s-half);
  overflow: hidden;
  border-radius: var(--r-chip);
  background: var(--c-line-dark);
}
.fx-progress span {
  display: block;
  height: 100%;
  background: var(--c-signal);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (max-width: 767px) {
  .fx-steps {
    width: 100%;
    margin-left: 0;
  }
  .fx-steps button { flex: 1 1 0; }
}

.fx-note { margin-top: var(--s-6); }


/* ==========================================================================
   6. Detection and tracking replay
   ========================================================================== */
.uc-replay {
  border-top: var(--bw) solid var(--c-hair);
  border-bottom: var(--bw) solid var(--c-hair);
}
.uc-replay-summary {
  display: block;
  list-style: none;
  cursor: pointer;
}
.uc-replay-summary::-webkit-details-marker { display: none; }
.uc-replay-summary::marker { content: ""; }
.uc-replay-summary:focus-visible {
  outline: var(--focus-ring-light);
  outline-offset: calc(-1 * var(--focus-width) - var(--s-1));
}
.uc-replay-summary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: calc(var(--touch) + var(--s-3));
  padding-block: var(--s-6);
}
.uc-replay-title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  text-decoration-color: var(--c-signal);
  text-underline-offset: var(--underline-offset);
}
.uc-replay-chevron {
  width: var(--s-6);
  height: var(--s-6);
  color: var(--c-signal-ink);
  transition: transform var(--dur-enter) var(--ease-out);
}
.uc-replay[open] .uc-replay-chevron { transform: rotate(180deg); }
@media (hover: hover) {
  .uc-replay-summary:hover .uc-replay-title {
    text-decoration: underline;
    text-decoration-color: var(--c-signal);
    text-decoration-thickness: var(--underline);
  }
}
.uc-replay-body { padding-bottom: var(--section-pad); }
.uc-replay-note { margin-bottom: var(--s-8); }

.tl {
  display: grid;
  gap: var(--s-6);
}
.tl-head {
  display: grid;
  gap: var(--s-2);
}
.tl-head p {
  color: var(--fg-muted);
  max-width: var(--measure);
}

.tl-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--c-line-dark);
}
.tl-sensors { margin-left: auto; }
.tl-dot-radar { --dot: var(--c-radar); }
.tl-dot-thermal { --dot: var(--c-thermal); }
.tl-sensors button[aria-pressed="false"] .dot {
  background: transparent;
  box-shadow: inset 0 0 0 var(--bw) currentColor;
}
.tl-pause-icon { display: none; }
.tl-panel[data-playing="true"] .tl-play-icon { display: none; }
.tl-panel[data-playing="true"] .tl-pause-icon { display: inline-block; }
@media (max-width: 767px) {
  .tl-sensors { margin-left: 0; }
}

.tl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .tl-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}
.tl-plot-wrap {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
}
@media (max-width: 767px) {
  .tl-plot-wrap { padding: var(--s-3); }
}
.tl-plot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 420;
  background: var(--c-night);
  border: var(--bw) solid var(--c-line-dark);
  border-radius: var(--r-control);
}
#tl-grid path {
  fill: none;
  stroke: var(--c-line-dark);
  stroke-width: .7;
}

/* Plot marks */
.tl-det-r {
  fill: color-mix(in srgb, var(--c-radar) 35%, transparent);
  stroke: var(--c-radar);
  stroke-width: 1.2;
}
.tl-det-t {
  fill: none;
  stroke: var(--c-thermal);
  stroke-width: 1.6;
}
.tl-trk { cursor: pointer; }
.tl-trk ellipse {
  fill: color-mix(in srgb, var(--c-estimate) 8%, transparent);
  stroke: var(--c-estimate);
  stroke-width: 1.5;
}
.tl-trk path {
  fill: none;
  stroke: var(--c-estimate);
  stroke-width: 1.5;
}
.tl-trk.s-search ellipse,
.tl-trk.s-tentative ellipse {
  fill: none;
  stroke: var(--c-on-dark-muted);
  stroke-dasharray: 2 4;
}
.tl-trk.s-search path,
.tl-trk.s-tentative path { stroke: var(--c-on-dark-muted); }
.tl-trk.s-coasting ellipse { stroke-dasharray: 6 6; }
.tl-trk.is-selected ellipse {
  fill: color-mix(in srgb, var(--c-signal) 14%, transparent);
  stroke: var(--c-signal);
  stroke-width: 2.5;
}
.tl-trk.is-selected path { stroke: var(--c-signal); }
.tl-label {
  display: none;
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: var(--fw-medium);
  fill: var(--c-on-dark-muted);
}
.tl-trk.is-selected .tl-label {
  display: inline;
  fill: var(--c-signal);
}
@media (min-width: 768px) {
  .tl-label {
    display: inline;
    font-size: 16px;
  }
}
@media (min-width: 1024px) {
  .tl-label { font-size: 14px; }
}
.tl-trail {
  fill: none;
  stroke: var(--c-signal);
  stroke-width: 1.5;
  stroke-dasharray: 1 4;
  stroke-linecap: round;
}

/* Legend (HTML, so labels stay readable at 375px) */
.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  color: var(--c-on-dark-muted);
}
.tl-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.tl-legend svg {
  flex: none;
  width: var(--s-4);
  height: var(--s-4);
}
.tl-key-radar {
  fill: color-mix(in srgb, var(--c-radar) 35%, transparent);
  stroke: var(--c-radar);
}
.tl-key-thermal {
  fill: none;
  stroke: var(--c-thermal);
  stroke-width: 1.5;
}
.tl-key-track {
  fill: color-mix(in srgb, var(--c-estimate) 12%, transparent);
  stroke: var(--c-estimate);
  stroke-width: 1.5;
}
.tl-key-sel {
  fill: color-mix(in srgb, var(--c-signal) 15%, transparent);
  stroke: var(--c-signal);
  stroke-width: 2;
}

/* Track list */
.tl-side {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4);
  border-top: var(--bw) solid var(--c-line-dark);
}
@media (min-width: 1024px) {
  .tl-side {
    border-top: 0;
    border-left: var(--bw) solid var(--c-line-dark);
  }
}
.tl-side-label { color: var(--c-on-dark-muted); }
.tl-tracks {
  display: grid;
  gap: var(--s-2);
}
@media (min-width: 480px) and (max-width: 1023px) {
  .tl-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tl-track {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--s-3);
  border: var(--bw) solid var(--c-line-dark);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--c-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-align: left;
  text-transform: uppercase;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.tl-track svg {
  flex: none;
  width: var(--s-4);
  height: var(--s-4);
}
.tl-track ellipse {
  fill: none;
  stroke: var(--c-estimate);
  stroke-width: 1.5;
}
.tl-track.s-search ellipse,
.tl-track.s-tentative ellipse,
.tl-track.s-lost ellipse {
  stroke: var(--c-on-dark-muted);
  stroke-dasharray: 2 2;
}
.tl-track.s-coasting ellipse { stroke-dasharray: 3 2; }
.tl-track[aria-pressed="true"] {
  border-color: var(--c-signal);
  background: color-mix(in srgb, var(--c-signal) 14%, var(--c-panel));
}
.tl-track[aria-pressed="true"] ellipse { stroke: var(--c-signal); }
.tl-track:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--s-half);
}
@media (hover: hover) {
  .tl-track:not([aria-pressed="true"]):hover { background: var(--c-panel-raised); }
}
.tl-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-mono);
  color: var(--c-on-dark-muted);
}

.tl-scrub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
@media (max-width: 479px) {
  .tl-scrub {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
.tl-error { color: var(--fg); }