/* Timeline view. Flat, hairlines, no colour: state is shape (filled, outlined, hatched) plus mono labels. */
.tl { --tl-label: 220px; --tl-row: 38px; padding: 8px 0 24px; }
.tl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px 12px; }
.tl-grow { flex: 1; }
.tl-hint { text-transform: uppercase; }
.tl-scroll {
  overflow: auto; max-height: calc(100vh - 190px); min-height: 220px; position: relative;
  border: var(--hairline) solid var(--rule); border-radius: var(--radius-tile); background: var(--paper-2);
  margin: 0 16px; overscroll-behavior-x: contain;
}
.tl-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-grid { --tl-label: 220px; position: relative; width: calc(var(--tl-label) + var(--tl-track)); min-width: 100%; }

.tl-head { display: flex; position: sticky; top: 0; z-index: 4; background: var(--paper-2); border-bottom: var(--hairline) solid var(--rule); height: 52px; }
.tl-corner { position: sticky; left: 0; z-index: 5; flex: none; width: var(--tl-label); padding: 0 14px; display: flex; align-items: flex-end; padding-bottom: 8px; background: var(--paper-2); border-right: var(--hairline) solid var(--rule); }
.tl-head-track { position: relative; flex: none; width: var(--tl-track); }
.tl-months, .tl-days { position: absolute; left: 0; right: 0; height: 26px; }
.tl-months { top: 0; }
.tl-days { top: 26px; }
.tl-tick-label { position: absolute; top: 0; padding: 6px 0 0 6px; font: 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; border-left: var(--hairline) solid var(--rule); height: 100%; }
.tl-day { position: absolute; top: 0; text-align: center; padding-top: 6px; font: 10px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border-left: var(--hairline) solid var(--rule); height: 100%; }
.tl-day.weekend { color: var(--ink-2); font-weight: 300; }

.tl-body { position: relative; }
.tl-row, .tl-group { display: flex; height: var(--tl-row); border-bottom: var(--hairline) solid var(--rule); }
.tl-group { height: 32px; background: var(--paper); }
.tl-glabel, .tl-label { position: sticky; left: 0; z-index: 3; flex: none; width: var(--tl-label); border-right: var(--hairline) solid var(--rule); background: var(--paper-2); }
.tl-glabel { background: var(--paper); display: flex; align-items: center; padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-label { display: flex; align-items: center; padding: 0 14px; text-align: left; cursor: pointer; border-top: 0; border-bottom: 0; border-left: 0; color: var(--ink); }
.tl-label:hover .tl-title { text-decoration: underline; text-underline-offset: 3px; }
.tl-label:focus-visible { outline-offset: -3px; }
.tl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.tl-track {
  position: relative; flex: none; width: var(--tl-track);
  background-image: repeating-linear-gradient(to right, var(--rule) 0, var(--rule) 1px, transparent 1px, transparent var(--tl-tick));
}
.tl-gtrack { background-image: none; }
.tl-nodate { margin-left: auto; padding-left: 8px; flex: none; font-size: 10px; }
.tl-item { position: absolute; inset: 0; }

.tl-bar {
  position: absolute; top: 9px; height: 20px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; z-index: 1;
  transition: box-shadow var(--dur-1) var(--ease);
}
.tl-bar:hover { background: var(--paper-2); }
.tl-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tl-bar.dragging { cursor: grabbing; z-index: 2; background: var(--paper-2); }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--rule); border-radius: 5px 0 0 5px; pointer-events: none; }
.tl-bar.delivered { background: var(--ink); }
.tl-bar.delivered .tl-fill { display: none; }
.tl-bar.overdue {
  background-image: repeating-linear-gradient(135deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 6px);
  border-style: dashed;
}
.tl-bar.overdue .tl-fill { display: none; }
.tl-bar.marker { width: 16px; height: 16px; top: 11px; border-radius: 3px; transform: rotate(45deg); background: var(--ink); }
.tl-bar.marker:hover { background: var(--ink); }
.tl-bar.marker.delivered { background: var(--paper); }
.tl-bar.marker.overdue { background-color: var(--paper); background-image: repeating-linear-gradient(135deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 4px); }
.tl-bar.marker:focus-visible { outline-offset: 4px; }
.tl-handle { position: absolute; top: -1px; bottom: -1px; width: 9px; cursor: ew-resize; touch-action: none; z-index: 2; }
.tl-handle.start { left: -4px; }
.tl-handle.end { right: -4px; }
.tl-handle::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 4px; width: 1px; background: var(--ink-2); opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.tl-bar:hover .tl-handle::after, .tl-bar:focus-visible .tl-handle::after { opacity: 1; }
.tl-bar.delivered .tl-handle::after { background: var(--paper); }
.tl-when { position: absolute; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; pointer-events: none; }
.tl-when.overdue { color: var(--ink); }

.tl-today { position: absolute; top: 52px; bottom: 0; width: 0; border-left: 1px solid var(--ink); pointer-events: none; z-index: 2; }
.tl-today-label { position: absolute; top: 27px; transform: translateX(-50%); padding: 1px 7px; background: var(--ink); color: var(--paper); border-radius: 999px; z-index: 2; font-size: 10px; }
.tl-empty { padding: 28px 16px; }

@media (max-width: 720px) {
  .tl, .tl-grid { --tl-label: 128px; }
  .tl-hint { display: none; }
  .tl-scroll { margin: 0 8px; max-height: calc(100vh - 220px); }
  .tl-toolbar { padding: 8px; }
  .tl-title { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .tl-bar, .tl-handle::after { transition: none; } }