.tv-measure-plot { position: relative; min-width: 0; }
.tv-measure-plot.tv-measuring { padding-block: 27px; }
.tv-measure-layer {
  position: absolute; z-index: 3; inset: 0 0 0 var(--tv-name-width);
  pointer-events: none; user-select: none;
}
.tv-measure-layer[hidden], .tv-measure-tools [hidden] { display: none !important; }
.tv-measure-a { --cursor: #18778b; --cursor-text: #135665; }
.tv-measure-b { --cursor: #96520b; --cursor-text: #793c12; }
.tv-measure-band {
  position: absolute; inset-block: 25px; background-color: rgb(34 113 134 / 7%);
}
.tv-measure-line {
  position: absolute; inset-block: 24px; width: 9px; transform: translateX(-50%);
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.tv-measure-line::before {
  content: ""; position: absolute; inset-block: 0; left: 50%;
  border-left: 1.5px solid var(--cursor); filter: drop-shadow(1px 0 1px #fff);
}
.tv-measure-line.tv-measure-b::before { border-left-style: dashed; }
.thread-viewer button.tv-measure-handle {
  box-sizing: border-box; position: absolute; z-index: 1;
  width: 28px; height: 24px; min-height: 0; padding: 0; margin: 0;
  border: 1px solid var(--cursor); border-radius: 4px;
  color: #fff; background: var(--cursor); font: 700 12px/1 var(--mono);
  cursor: ew-resize; pointer-events: auto; user-select: none; touch-action: none;
}
.tv-measure-handle.tv-measure-a { top: 0; }
.tv-measure-handle.tv-measure-b { bottom: 0; }
.thread-viewer .tv-chart button.tv-measure-handle:focus-visible {
  outline: 2px solid #27465d; outline-offset: 2px;
}
.tv-measure-tools { margin: 8px 0; }
.tv-measure-controls, .tv-measure-options, .tv-measure-readout {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}
.tv-measure-snap { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: #354f40; font-size: 12px; }
.tv-measure-snap input { margin: 0; width: 15px; height: 15px; accent-color: #387854; }
.tv-measure-readout {
  margin-top: 7px; padding: 7px 9px; border: 1px solid #dae3dd; border-radius: 5px; background: #f7faf8;
  font: 11.5px/1.45 var(--mono); font-variant-numeric: tabular-nums; color: #344d42;
}
.tv-measure-value { display: inline-flex; align-items: baseline; gap: 5px; }
.tv-measure-letter { padding: 0 4px; border-radius: 3px; background: var(--cursor); color: #fff; }
.tv-measure-delta { font-size: 12px; color: #234638; }

/* The placement surface is present only while picking a point. */
.tv-measure-surface {
  position:absolute; inset:24px 0; pointer-events:auto; cursor:crosshair;
  touch-action:pan-y pinch-zoom;
}
.tv-measure-surface[hidden] { display:none; }
.tv-measure-placing .tv-measure-line { pointer-events:none; }
.thread-viewer .tv-measure-toggle {
  display:inline-flex; align-items:center; gap:7px; min-height:32px;
  color:#173c5a; background:#edf4fa; border-color:#b6ccdc; font-weight:650;
}
.tv-measure-toggle::before {
  content:""; width:16px; height:8px; border:1.5px solid currentColor; border-radius:2px;
  background:repeating-linear-gradient(to right,currentColor 0 1px,transparent 1px 4px)
             2px 0 / 12px 3px no-repeat;
}
.thread-viewer .tv-measure-tools button[aria-pressed="true"] {
  color:#fff; background:#224d6c; border-color:#224d6c;
}
.tv-measure-options { gap:5px 8px; }
.tv-measure-readout {
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  padding:0; gap:0; border:1px solid #cddde8; background:#f6f9fc; color:#334d63;
}
.tv-measure-delta {
  display:flex; align-items:center; align-self:stretch; padding:8px 11px;
  color:#173f5f; background:#e9f2f8; border-radius:5px 0 0 5px;
}
.tv-measure-value { min-width:0; align-items:center; padding:8px 10px; }
@media (max-width: 900px) {
  .tv-measure-readout { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tv-measure-delta { grid-column:1 / -1; border-radius:5px 5px 0 0; }
}
@media (max-width: 460px) {
  .tv-measure-readout { grid-template-columns:minmax(0,1fr); }
  .tv-measure-value { padding:5px 9px; }
}