@layer views {
.tl { --name-w: 260px; position: relative; min-width: 1300px; padding: 0 0 60px; }
.tl-head { display: grid; grid-template-columns: var(--name-w) 1fr; position: sticky; top: 0; z-index: var(--z-local-4); background: var(--bg-1); border-bottom: 1px solid var(--line); }
.tl-head .lab { padding: 10px 16px; font-size: var(--fs-10-5); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.tl-weeks { position: relative; height: 56px; }
.tl-wk { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); padding: 8px; font-size: var(--fs-11); color: var(--fg-3); white-space: nowrap; }
.tl-wk b { display: block; color: var(--fg-2); font-weight: 600; font-size: var(--fs-11-5); }
.tl-sprint { position: absolute; bottom: 6px; height: 14px; border-radius: var(--r-4); font-size: var(--fs-9-5); font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; padding: 0 6px; color: var(--fg-2); background: var(--bg-4); white-space: nowrap; overflow: hidden; }
.tl-sprint.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tl-sprint.planned { opacity: 0.6; border: 1px dashed var(--line-2); background: none; }
.tl-row { display: grid; grid-template-columns: var(--name-w) 1fr; min-height: 40px; border-bottom: 1px solid var(--line); }
.tl-row .nm { padding: 0 16px; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--line); min-width: 0; white-space: nowrap; overflow: hidden; }
.tl-row.goal { background: var(--bg-2); }
.tl-row.goal .nm { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-14); }
.tl-row.tl-ep .nm { padding-left: 32px; }
.tl-row.tk .nm { padding-left: 50px; font-size: var(--fs-12); color: var(--fg-2); }
.tl-lane { position: relative; overflow: hidden; }
.tl-bar {
  --c: var(--accent);
  position: absolute; top: 9px; height: 22px; border-radius: var(--r-7); display: flex; align-items: center; padding: 0 8px; font-size: var(--fs-11); font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--c) 18%, var(--bg-2)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.tl-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--c) 38%, transparent); }
.tl-bar span { position: relative; }
.tl-bar.milestone { width: 20px !important; padding: 0; transform: translateX(-10px) rotate(45deg); border-radius: var(--r-4); top: 10px; height: 20px; background: var(--c); }
.tl-row.tk .tl-bar { height: 16px; top: 12px; font-size: var(--fs-10); font-weight: 500; border-radius: var(--r-5); }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: var(--z-local-3); pointer-events: none; }
.tl-today::before { content: "Today"; position: absolute; top: 2px; left: 4px; font-size: var(--fs-10); font-weight: 700; color: var(--accent); background: var(--bg-1); padding: 0 4px; border-radius: var(--r-3); }
.tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); pointer-events: none; }
.tl-zoom { display: flex; justify-content: flex-end; padding: 10px 16px 0; }
.tl-row .nm .pct { margin-left: auto; font-family: var(--f-ui); font-weight: 400; font-size: var(--fs-11); color: var(--fg-3); }
.tl-row .nm .ring-dot { width: 10px; height: 10px; border-radius: var(--r-round); border: 2px solid var(--c); flex: none; }
.tl-row .nm .dia { width: 9px; height: 9px; transform: rotate(45deg); border-radius: var(--r-2); background: var(--c); flex: none; }
.tl-row .nm .mono { font-size: var(--fs-10-5); color: var(--fg-3); }
.tl-row .nm .tw { width: 18px; height: 18px; display: grid; place-items: center; color: var(--fg-3); transition: transform var(--t-fast); flex: none; }
.tl-row .nm .tw.open { transform: rotate(90deg); }
.tl-row .nm .tw.none { visibility: hidden; }
a.tl-bar { text-decoration: none; }
}