.tv-deadline-scope {
  margin: 8px 0; padding: 9px 12px; border: 1px solid #cadbd6; border-inline-start: 3px solid #6d9385;
  border-radius: 6px; background: #f6faf7; color: #2f4e41;
}
.tv-deadline-scope.tv-dl-alert { border-color: #e8c8bb; border-inline-start-color: #b4402d; background: #fff8f4; color: #623e30; }
.tv-deadline-scope[hidden], .tv-deadline-scope [hidden] { display: none!important; }
.tv-dl-head, .tv-dl-actions, .tv-dl-legend, .tv-dl-choose, .tv-dl-detail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.tv-dl-state { font-size: 14px; }
.tv-dl-alert .tv-dl-state { color: #a73322; }
.tv-dl-message, .tv-dl-detail { font-size: 12px; font-variant-numeric: tabular-nums; }
.tv-dl-detail { margin-top: 5px; }
.tv-dl-choose { gap: 4px 7px; font-size: 12px; }
.tv-dl-choose select { max-width: 100%; min-height: 29px; font-size: 12px; color: #54392f; border: 1px solid #c9b8b1; border-radius: 4px; background: #fff; }
.tv-dl-actions { margin-top: 6px; align-items: center; }
.tv-dl-legend { margin-top: 5px; color: #4f6055; font-size: 11px; }
.tv-dl-key { display: inline-flex; align-items: center; gap: 4px; }
.tv-dl-key::before { width: 3px; height: 10px; background: var(--dl-key); content: ""; }
.tv-dl-met { --dl-key: #398366; --dl-ink: #257449; }
.tv-dl-pending { --dl-key: #477bad; --dl-ink: #275b9b; }
.tv-dl-missed, .tv-dl-overdue, .tv-dl-report { --dl-key: #b83e31; --dl-ink: #ae3029; }
.tv-dl-output { --dl-key: #187f61; --dl-ink: #12775d; }
.tv-dl-key.tv-dl-output::before { border-radius: 2px; width: 7px; height: 7px; }
.tv-dl-key.tv-dl-hatching::before { width: 15px; height: 6px;
  background: repeating-linear-gradient(-45deg, #b83e31 0 2px, transparent 2px 5px); }
.tv-dl-note { margin: 4px 0 0; color: #43594e; font-size: 12px; }
.tv-dl-reference { --dl-key: #785b9d; --dl-ink: #6a4396; }
.tv-dl-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tv-dl-glyph { position: absolute; box-sizing: border-box; color: var(--dl-ink); }
.tv-dl-pin {
  inset-block: 0; border-inline-start: 1px dashed var(--dl-ink); width: 10px;
  padding-left: 1px; text-shadow: 0 1px 1px #fff; font: 700 11px/1 var(--mono);
}
.tv-dl-pin.tv-dl-report { inset-block: auto 0; height: 12px; color: #fff; text-shadow: none;
  border: 0; border-radius: 2px; background: var(--dl-ink); text-align: center; }
.tv-dl-pin.tv-dl-missed, .tv-dl-pin.tv-dl-overdue { border-inline-start-style: solid; }
.tv-dl-band { inset-block: auto 0; height: 5px; min-width: 1px;
  background: repeating-linear-gradient(-45deg,var(--dl-ink) 0 2px,transparent 2px 5px); }
.tv-dl-band.tv-dl-reference { inset-block: 0 auto; height: 5px; }
.tv-dl-symbol { position: absolute; inset-block-start: 0; display: grid; place-items: center;
  min-width: 10px; height: 12px; pointer-events: auto; }

.thread-viewer button.tv-dl-symbol {
  inset: auto auto 0 -2px; width: 15px; height: 13px; border: 0; border-radius: 2px;
  padding: 0; margin: 0; min-height: 0; background: #ae3029; color: #fff;
  font: 750 11px/1 var(--mono); cursor: pointer;
}
.thread-viewer .tv-chart button.tv-dl-symbol:focus-visible { outline: 2px solid white; outline-offset: -1px; }

/* Separate the GPIO transition at the top from the firmware report below,
   even when their instruction steps land in the same screen column. */
.tv-dl-pin.tv-dl-output { border-inline-start: 2px solid var(--dl-ink); width: 0; }
.tv-dl-output .tv-dl-symbol {
  inset: 0 auto auto -1px; padding: 0 2px; border-radius: 2px;
  color: #fff; background: var(--dl-ink); text-shadow: none; white-space: nowrap;
}
.tv-dl-pin.tv-dl-end { width: 0; }
.tv-dl-end.tv-dl-output .tv-dl-symbol, .thread-viewer .tv-dl-end button.tv-dl-symbol {
  left: auto; right: 0;
}