/* The lanes board (Time): components/lanes.js. Tokens only. */
.lbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 8px; }
.lbar .words { font-size: 13px; color: var(--dim); }
.board { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px 8px; box-shadow: var(--shadow); }
.trow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tlab { width: 128px; flex: none; font-size: 12px; line-height: 1.25; color: var(--ink); }
.tlab .s { font-size: 11px; color: var(--dim); display: block; }
.ttrack { flex: 1; min-width: 0; position: relative; }
.taxis { height: 20px; position: sticky; top: 52px; background: var(--surface); z-index: 3; }
@media (min-width: 760px) { .taxis { top: 92px; } }
.taxis .tk { position: absolute; top: 3px; font-size: 10.5px; transform: translateX(-50%); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.taxis .tk.now { color: var(--run); font-weight: 600; }
.lgroup { border-top: 1px solid var(--line); padding: 4px 0 8px; }
.lghead { display: flex; align-items: center; gap: 8px; padding: 7px 0 5px; cursor: pointer; user-select: none; }
.lghead .lgname { width: 128px; flex: none; display: flex; gap: 6px; align-items: baseline; }
.lghead .car { display: inline-block; width: 10px; color: var(--dim); font-size: 11px; transition: transform .15s; }
.lgroup.fold .car { transform: rotate(-90deg); }
.lghead b { font-size: 14px; color: var(--fg); }
.lghead .meta { flex: 1; min-width: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--dim); margin: 0; }
.lgroup.fold .lgbody { display: none; }
.lgroup .foldnote { display: none; font-size: 12px; color: var(--dim); }
.lgroup.fold .foldnote { display: inline; }
.lgbody { display: flex; flex-direction: column; gap: 3px; }
svg.tg { display: block; width: 100%; height: 30px; background: var(--wait-bg); border-radius: 3px; }
svg.tg .ln { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
svg.tg .ar { stroke: none; opacity: .16; }
svg.tg .gap { fill: var(--surface); opacity: .7; }
.ltrack { position: relative; height: 18px; background: var(--wait-bg); border-radius: 3px; }
.ltrack .free { position: absolute; top: 0; height: 100%; pointer-events: auto; }
.f-pace { background: repeating-linear-gradient(135deg, var(--need) 0 1.5px, transparent 1.5px 6px); opacity: .75; }
.f-files { background: repeating-linear-gradient(135deg, var(--run) 0 1.5px, transparent 1.5px 6px); opacity: .75; }
.f-deps { background: repeating-linear-gradient(135deg, var(--wait) 0 1.5px, transparent 1.5px 6px); opacity: .8; }
.f-other { background: repeating-linear-gradient(135deg, var(--line-2) 0 1.5px, transparent 1.5px 6px); }
.band { position: absolute; top: -2px; bottom: -2px; background: var(--wait-2); opacity: .28; border-left: 1px solid var(--wait); border-right: 1px solid var(--wait); z-index: 1; }
.umark { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px solid var(--fg); opacity: .55; z-index: 2; }
.umark.store { border-left-style: solid; opacity: .7; }
.umark.worker { border-left-style: dotted; }
.umark .hit { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; }
.bar { position: absolute; top: 1px; height: 16px; border-radius: 3px; display: flex; overflow: hidden; z-index: 2; box-shadow: inset 0 0 0 1px var(--line); }
.bar b { display: block; height: 100%; border-right: 1px solid var(--surface); flex: none; }
.bar b:last-of-type { border-right: 0; }
.bar .lbl { position: absolute; left: 4px; top: 0; font: 11px/16px "IBM Plex Sans", sans-serif; color: var(--surface); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 0 2px var(--bg); }
.bar .end { position: absolute; right: 0; top: 0; width: 3px; height: 100%; }
.end.o-merged, .end.o-passed, .end.o-done { background: var(--ok); } .end.o-back { background: var(--wait); } .end.o-failed { background: var(--bad); }
.bar.open { box-shadow: inset 0 0 0 1px var(--run); }
.bar.open::after { content: ""; position: absolute; right: 0; top: 0; width: 6px; height: 100%; background: repeating-linear-gradient(90deg, var(--surface) 0 2px, transparent 2px 4px); }
.bar:hover, .bar.sel { filter: brightness(1.12); box-shadow: inset 0 0 0 1.5px var(--fg); }
.legend i.sw.f-pace, .legend i.sw.f-files, .legend i.sw.f-deps, .legend i.sw.f-other { border: 1px solid var(--line-2); }
.legend .mk { display: inline-block; width: 0; height: 12px; border-left: 1.5px solid var(--fg); opacity: .7; }
.legend .mk.w { border-left-style: dotted; }
.legend .ln { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: 3px; }
@media (max-width: 720px) { .tlab, .lghead .lgname { width: 78px; } .tlab { font-size: 11px; } }
svg.tg .c-run.ln { stroke: var(--run); } svg.tg .c-run.ar { fill: var(--run); }
svg.tg .c-need.ln { stroke: var(--need); } svg.tg .c-need.ar { fill: var(--need); }
.lghead .gapnote { color: var(--faint); }