/* worktimeline.js: the Timeline mode's styles — the reference's .tl2
 * structure on our tokens: the chart scrolls inside its own box, the label
 * column sticks left, the month head sticks top, the today line runs
 * through both, the bars fill with their done share and their diamonds sit
 * on them; a phone pans the chart sideways inside this box only. Tokens
 * only. */

.work-timeline { margin-top: var(--sv-space-3); }
.work-tl-wrap { overflow: auto; max-height: calc(100vh - 15rem); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); }
.work-tl { display: grid; grid-template-columns: 15rem max-content; font-size: var(--ui-meta); }

/* The label column: sticky left, one row per goal, groups between. */
.work-tl-lbl { position: sticky; left: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: var(--sv-space-2) var(--sv-space-3); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); border-right: var(--sv-hairline-w) solid var(--sv-hairline-strong); background: var(--sv-surface-raised); }
.work-tl-lbl.hdr { z-index: 5; align-self: stretch; color: var(--sv-ink-tertiary); }
.work-tl-lbl.grp { background: var(--sv-surface-sunken); font-weight: 600; min-height: 2rem; }
.work-tl-lbl.goal { cursor: pointer; }
.work-tl-lbl.goal:hover .work-tl-title { text-decoration: underline; }
.work-tl-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: var(--ui-text); color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-tl-lbl-meta { display: flex; flex-basis: 100%; gap: var(--sv-space-2); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.work-tl-lbl .track-face .track-face-name { color: var(--sv-ink-secondary); }

/* The month head: sticky top, one column per month, the today line over it. */
.work-tl-head { position: sticky; top: 0; z-index: 4; min-height: 34px; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); background: var(--sv-surface-raised); }
.work-tl-col { position: absolute; top: 0; bottom: 0; padding: var(--sv-space-2) 6px 0; border-left: var(--sv-hairline-w) solid var(--sv-hairline); color: var(--sv-ink-tertiary); white-space: nowrap; overflow: hidden; }

/* One lane: its grid columns, its today line, its bars and diamonds. */
.work-tl-lane { position: relative; min-height: 44px; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-tl-lane.grp { background: var(--sv-surface-sunken); min-height: 2rem; }
.work-tl-grid { position: absolute; top: 0; bottom: 0; border-left: var(--sv-hairline-w) solid var(--sv-hairline); }
.work-tl-today { position: absolute; top: 0; bottom: 0; z-index: 1; width: 0; border-left: 2px solid var(--sv-ink); opacity: 0.55; }
.work-tl-head .work-tl-today b { position: absolute; top: 1px; left: 4px; font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-secondary); }

/* The bar: the goal's span, its fill the done share, its tone its status. */
.work-tl-bar { position: absolute; top: 8px; height: 18px; z-index: 2; border: 1px solid var(--sv-hairline-strong); border-radius: 4px; background: var(--sv-surface-dim); cursor: pointer; }
.work-tl-bar.taper { border-right-style: dashed; }
.work-tl-bar[data-tone="good"] { border-color: var(--ws-working); }
.work-tl-bar[data-tone="review"] { border-color: var(--sv-attention); }
.work-tl-bar[data-tone="bad"] { border-color: var(--sv-danger); }
.work-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; background: color-mix(in srgb, var(--ws-working) 65%, var(--sv-surface-dim)); }
.work-tl-bar[data-tone="done"] .work-tl-fill { background: var(--ws-working); }
.work-tl-bar[data-tone="done"] { background: color-mix(in srgb, var(--ws-working) 22%, var(--sv-surface-dim)); }

/* A milestone's diamond, on its goal's bar at its weight share. */
.work-tl-dot { position: absolute; top: 3px; left: 0; width: 12px; height: 12px; margin-left: -6px; padding: 0; border: 1.5px solid var(--sv-surface-raised); border-radius: 2px; background: var(--sv-ink-secondary); transform: rotate(45deg); cursor: pointer; }
.work-tl-dot[data-tone="done"] { background: var(--ws-working); }
.work-tl-dot[data-tone="good"] { background: var(--ws-working-ink); }
.work-tl-dot[data-tone="review"] { background: var(--sv-attention); }
.work-tl-dot[data-tone="bad"] { background: var(--sv-danger); }

/* ---- phone ---- */
@media (max-width: 640px) {
  .work-tl { grid-template-columns: 10rem max-content; }
  .work-tl-lbl { padding: var(--sv-space-2); }
  .work-tl-title { font-size: var(--ui-meta); }
}