/* ═══ 12. TIMELINE ═══════════════════════════════════════════════════ */

.tl {
  grid-column: 1 / 9; grid-row: 7 / 10;
  display: grid;
  grid-template-columns: calc((100% - 98px) / 8) 1fr 12px;
  grid-template-rows: 1fr 12px;
  gap: 0 14px;
  min-height: 0;
}
.tl-list { grid-column: 1; grid-row: 1; overflow: hidden; position: relative; }
.tl-list-inner { position: absolute; left: 0; right: 0; top: 0; }
.tl-list-spacer { height: 46px; border-bottom: 1px solid var(--line-strong); }
.tl-name {
  height: 44px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 6px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
  overflow: hidden;
  transition: background var(--dur-fast);
}
.tl-name .num { font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: .08em; }
.tl-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-name.hover { background: var(--hover-bg); }

.tl-chart {
  grid-column: 2; grid-row: 1;
  overflow: scroll;
  scrollbar-width: none;
  position: relative;
  min-height: 0;
}
.tl-chart::-webkit-scrollbar { display: none; }
.tl-surface { position: relative; }

.tl-ruler {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
}
.tl-months { display: flex; height: 22px; }
.tl-month {
  flex: none;
  font-size: var(--text-sm); color: var(--ink-soft);
  padding: 4px 0 0 6px;
  overflow: hidden; white-space: nowrap;
}
.tl-days { display: flex; height: 24px; position: relative; }
.tl-day {
  flex: none;
  font-size: var(--text-xs); color: var(--ink-faint);
  text-align: center; padding-top: 6px;
  overflow: hidden;
}
.tl-day.we { background: var(--weekend-tint); }
.tl-day.today { color: var(--bg); background: var(--fg); font-weight: 500; }

.tl-body { position: relative; }
.tl-row {
  height: 44px; position: relative;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.tl-row.hover { background: var(--hover-bg); }
.tl-monthline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line-strong); pointer-events: none; }
.tl-todayline {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--today); z-index: 2; pointer-events: none;
}
.tl-seg {
  position: absolute; top: 13px; height: 18px;
  border-radius: var(--radius-sm);
  color: var(--bg);
  font-size: var(--text-xs);
  line-height: 18px;
  padding: 0 4px;
  overflow: hidden; white-space: nowrap;
}
.tl-seg.ph-1 { background: var(--phase-1); }
.tl-seg.ph-2 { background: var(--phase-2); }
.tl-seg.ph-3 { background: var(--phase-3); }
.tl-seg.ph-4 { background: var(--phase-4); }
.tl-seg.ph-5 { background: var(--phase-5); }
.tl-seg.ph-6 { background: var(--phase-6); }

/* Revision buffer: dashed overlay on the tail of Schematic/Development. The
   dash colour is --bg so it reads against the solid phase fill in both themes;
   a faint --bg wash lightens the reserved tail so it looks "held". */
.tl-rev {
  position: absolute; top: 13px; height: 18px; box-sizing: border-box;
  border: 1px dashed var(--bg); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg) 25%, transparent);
  z-index: 1; pointer-events: none;
}

/* Internal review: the Review-Speed carve inside Schematic/Development. Hatched
   in --bg so it reads against the solid phase fill in both themes. */
.tl-review {
  position: absolute; top: 13px; height: 18px; box-sizing: border-box;
  z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bg) 0 1.5px, transparent 1.5px 4.5px);
}

/* To-do due-date marker — small and neutral so it reads as a quiet heads-up,
   not another work segment; sits below the phase bar (top:13px height:18px,
   ending at 31px) but still inside the 44px row. Red only once overdue. */
.tl-todo-dot {
  position: absolute; top: 34px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ink-faint);
}
.tl-todo-dot.overdue { background: var(--bad); }

/* Construction start — a typed-in fact, not a computed window, so it reads as
   a milestone flag rather than a bar. Full row height and 2px wide so it stays
   findable at 6-month spans where dayW drops to a few pixels. */
.tl-const {
  position: absolute; top: 8px; bottom: 4px; width: 2px;
  background: var(--ink-soft);
  border-radius: var(--radius-sm);
}
.tl-const::before {
  content: ''; position: absolute; top: 0; left: 0;
  border-left: 2px solid var(--ink-soft);
  border-top: 6px solid var(--ink-soft);
  border-right: 6px solid transparent;
  border-bottom: 4px solid transparent;
}

/* Sign-off gate: hollow chip in the gap between phases — a milestone, not work. */
.tl-gate {
  position: absolute; top: 13px; height: 18px; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--chip-bg); color: var(--ink-soft);
  font-size: var(--text-xs); line-height: 16px; text-align: center;
  padding: 0 3px; overflow: hidden; white-space: nowrap;
}

/* custom scrollbars in their own gutters */
.tl-vtrack { grid-column: 3; grid-row: 1; position: relative; }
.tl-htrack { grid-column: 2; grid-row: 2; position: relative; margin-top: 4px; }
.tl-vtrack, .tl-htrack { border-radius: var(--radius-bar); }
.tl-thumb {
  position: absolute;
  background: var(--line-strong);
  border-radius: var(--radius-bar);
  transition: background var(--dur-fast);
  cursor: grab;
}
.tl-thumb:hover, .tl-thumb.dragging { background: var(--fg); }
.tl-vtrack .tl-thumb { left: 2px; width: 8px; }
.tl-htrack .tl-thumb { top: 0; height: 8px; }
.tl-vtrack.hidden, .tl-htrack.hidden { visibility: hidden; }
.tl-empty { grid-column: 1 / 4; grid-row: 1; align-self: center; text-align: center; }