.tlb {
  position: relative;
  width: 100%;
  font-family: inherit;
  -webkit-user-select: none;
  user-select: none;
}

.tlb-labelrow {
  position: relative;
  height: 27px;
}
.tlb-label {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 400;
  letter-spacing: 0.005em;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.tlb-arrow {
  display: block;
  flex: none;
  margin: 0 5px;
}

.tlb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tlb-reset {
  position: absolute;
  right: 0;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 400;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.tlb-reset:hover { color: var(--text-primary); }
.tlb-reset:focus-visible { box-shadow: var(--shadow-focus); }
.tlb-reset-icon {
  display: block;
  flex: none;
}

.tlb-plot {
  position: relative;
  height: 88px;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  cursor: crosshair;
  touch-action: none;
}

.tlb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.tlb-area { stroke: none; }
.tlb-area--accent  { fill: var(--accent);        fill-opacity: 0.34; }
.tlb-area--neutral { fill: var(--text-tertiary); fill-opacity: 0.30; }

.tlb-line { fill: none; stroke-width: 1.25; }
.tlb-line--accent  { stroke: var(--accent);        stroke-opacity: 0.85; }
.tlb-line--neutral { stroke: var(--text-tertiary); stroke-opacity: 0.80; }

.tlb-veil {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--glass-bg);
  pointer-events: none;
  z-index: 1;
}

.tlb-window {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  z-index: 2;
}
.tlb.tlb-dragging .tlb-window { cursor: grabbing; }
.tlb.tlb-dragging .tlb-plot { cursor: grabbing; }

.tlb-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.tlb-handle--from { left: 0;    transform: translateX(-50%); }
.tlb-handle--to   { left: 100%; transform: translateX(-50%); }

.tlb-handle::after {
  content: '';
  display: block;
  width: 5px;
  height: 30px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
  transition: height var(--transition-fast, 120ms ease);
}
.tlb-handle:hover::after { height: 34px; }
.tlb.tlb-dragging .tlb-handle::after { height: 34px; }
.tlb-handle:focus-visible::after {
  height: 34px;
  box-shadow: var(--shadow-focus);
}

.tlb-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text-secondary);
  opacity: 0.55;
  pointer-events: none;
  z-index: 3;
}
.tlb-guide[hidden] { display: none !important; }

.tlb-tip {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px var(--s1);
  background: var(--page-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(44, 48, 80, 0.14);
  font-size: 11.5px;
  line-height: 16px;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 8;
}
.tlb-tip[hidden] { display: none !important; }

.tlb-tip-date {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.tlb-tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tlb-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.tlb-tip-dot--accent  { background: var(--accent); }
.tlb-tip-dot--neutral { background: var(--text-tertiary); }
.tlb-tip-name { color: var(--text-secondary); }
.tlb-tip-val {
  margin-left: auto;
  padding-left: var(--s2);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.tlb-axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  line-height: 14px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.tlb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  border: 1px dashed var(--border-default);
  border-radius: 0;
  background: var(--surface-bg);
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  padding: 0 var(--s2);
}

.tlb--compact .tlb-plot { height: 44px; }
.tlb--compact .tlb-empty { height: 44px; }

.tlb--compact .tlb-handle::after { height: 22px; }
.tlb--compact .tlb-handle:hover::after,
.tlb--compact.tlb-dragging .tlb-handle::after,
.tlb--compact .tlb-handle:focus-visible::after { height: 26px; }

.tlb--compact .tlb-labelrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: auto;
  margin-top: 8px;
}
.tlb--compact .tlb-label {
  position: static;
  grid-column: 2;
  transform: none;
  display: flex;
  align-items: center;
}
.tlb--compact .tlb-reset {
  position: static;
  grid-column: 3;
  justify-self: end;
}

html.dark .tlb-tip { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.40); }
html.dark .tlb-handle::after { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .tlb-handle::after { transition: none; }
}