/* The expanded chart — lanes.js. Loaded by the activities page and the plan page. */
/* The overlay's own header and pills — here, not on one page, or the plan page's
   overlay opens with its name jammed against its figures (his screenshot, 5 Sep 2026). */
.fullhead{display:flex;align-items:center;gap:10px}
.fullhead b{font-size:var(--font-headline);font-weight:var(--weight-semibold)}
.fullhead span{margin-left:auto;font-size:var(--font-caption);color:var(--ink-secondary);font-variant-numeric:tabular-nums}
.fullhead .circle{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
                  background:var(--chip-unselected);color:var(--accent);flex:none}
.fullhead .circle .icon{width:14px;height:14px;stroke-width:2.4}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills .p{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius-pill);
          font-size:var(--font-caption);background:var(--chip-unselected);color:var(--ink-secondary)}
.pills .p::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.35}
.pills .p.on{color:var(--ink)}
.pills .p.on::before{opacity:1}
.pills .p.off{opacity:.4}
.holdhint{margin-left:auto;align-self:center;font-size:var(--font-caption2);color:var(--ink-tertiary)}
/* ── The expanded chart — the whole window, lanes stacked (5 Sep 2026) ──
   intervals.icu's timeline as the model: one lane per measure with its own
   axis, all on the run's distance, laps across the top, one cursor through
   every lane. The phone keeps its overlay — five lanes do not fit a phone. */
#chart-full{width:100vw;height:auto;max-height:100vh;max-width:none;margin:0;padding:0;border:0;overflow:auto;
            background:var(--bg);color:var(--ink)}
#chart-full::backdrop{background:rgba(0,0,0,.4)}
/* Compact, his note on the first cut: a lane is about a tenth of the window,
   never more than 92px, and the dialog is as tall as its lanes, not the screen. */
.lanewrap{display:flex;flex-direction:column;gap:6px;padding:10px 14px 12px;box-sizing:border-box}
.lanewrap .fullhead b{font-size:var(--font-subheadline)}
.lanewrap .pills{gap:4px}
.lanewrap .pills .p{padding:3px 8px;font-size:var(--font-caption2)}
.lanewrap .holdhint{font-size:var(--font-caption2)}
.selstats{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:6px 10px;border-radius:10px;
          background:var(--card);font-size:var(--font-caption);color:var(--ink-secondary);font-variant-numeric:tabular-nums}
.selstats > b{color:var(--ink)}
.selstats .ch{display:inline-flex;align-items:center;gap:4px}
.selstats .ch::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.selstats .ch b{color:var(--ink)}
.selstats .reset{margin-left:auto;padding:3px 10px;border-radius:var(--radius-pill);background:var(--chip-unselected);
                 color:var(--accent);font-size:var(--font-caption);font-weight:var(--weight-semibold)}
.lapband{display:flex;gap:2px;margin-left:84px;height:40px;overflow:hidden}
.lapband .lap{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;
              border-radius:5px;background:var(--card);font-size:9px;line-height:1.15;color:var(--ink-secondary);
              overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}
.lapband .lap b{color:var(--ink);font-size:10px}
.lapband .lap.hard{background:color-mix(in srgb,var(--attention) 14%,var(--card))}
.lapband .lap.rec{opacity:.6}
.lanes{position:relative;display:flex;flex-direction:column;touch-action:none;cursor:crosshair;user-select:none}
.lane{position:relative;display:grid;grid-template-columns:84px 1fr;height:clamp(52px,9.5vh,92px);
      border-top:1px solid var(--separator)}
.lane:first-child{border-top:0}
/* A lone lane — a planned course with nothing recorded yet — takes the room it has. */
.lanes.lone .lane{height:clamp(180px,40vh,360px)}
/* The y-axis, inside its lane (his note, 5 Sep 2026): the column wears the
   lane's own tint so the top and bottom figures read as this lane's, not the
   neighbour's, and the figures are a size up in secondary ink. */
.lane .lab{position:relative;padding:6px 8px 6px 0;display:flex;flex-direction:column;justify-content:space-between;
           font-size:10.5px;line-height:1.1;color:var(--ink-secondary);font-variant-numeric:tabular-nums;text-align:right;
           background:color-mix(in srgb,var(--c) 5%,var(--card))}
/* The name turns about its own centre, so it is centred on the lane whatever its length — pivoting on its
   left end stood every name on the lane's midline and the long ones ran out of the top (his note, 5 Sep 2026). */
.lane .lab .nm{position:absolute;left:8px;top:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;
               font-size:10px;font-weight:var(--weight-medium);letter-spacing:.3px;color:var(--ink-secondary);white-space:nowrap}
.lane .lab .cur{position:absolute;right:6px;top:0;transform:translateY(-50%);padding:1px 4px;border-radius:4px;
                background:var(--c);color:#fff;font-size:10px;font-weight:var(--weight-bold);display:none}
.lanes.scrubbing .lane .lab .cur{display:inline-block}
.lane svg{width:100%;height:100%;display:block;background:color-mix(in srgb,var(--c) 5%,var(--card))}
.lanes .cursor{position:absolute;top:0;bottom:0;left:84px;width:1px;background:var(--ink);opacity:0;pointer-events:none;z-index:3}
.lanes.scrubbing .cursor{opacity:.8}
.lanes .selband{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 14%,transparent);
                border-left:1px solid var(--accent);border-right:1px solid var(--accent);pointer-events:none;z-index:2}
.lanes .readout{position:absolute;top:4px;z-index:4;padding:3px 7px;border-radius:7px;background:var(--bg);
                border:1px solid var(--separator);font-size:var(--font-caption2);font-weight:var(--weight-semibold);
                white-space:nowrap;pointer-events:none;display:none;transform:translateX(-50%)}
.lanes.scrubbing .readout{display:block}
/* The axis figures, readable (his note, 5 Sep 2026): the chosen unit in secondary ink, the other under it. */
.lanewrap .xax{margin-left:84px;display:flex;justify-content:space-between;margin-top:4px}
.lanewrap .xax span{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;color:var(--ink-secondary);
                    font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}
.lanewrap .xax span:first-child{align-items:flex-start}
.lanewrap .xax span:last-child{align-items:flex-end}
.lanewrap .xax span i{font-style:normal;font-size:10px;font-weight:var(--weight-regular);color:var(--ink-tertiary)}
/* km | time — one choice for every chart. */
.axisseg{display:inline-flex;align-items:center;gap:2px;margin-left:auto;padding:2px;border-radius:var(--radius-pill);background:var(--chip-unselected)}
.axisseg button{padding:2px 9px;border-radius:var(--radius-pill);font-size:var(--font-caption2);color:var(--ink-secondary)}
.axisseg button.on{background:var(--bg-raised);color:var(--ink);font-weight:var(--weight-semibold)}
.axisseg button:disabled{opacity:.4}
.axisseg i{font-style:normal;font-size:var(--font-caption2);color:var(--ink-tertiary);padding:0 6px 0 4px}
.lanewrap .pills .holdhint{margin-left:10px}
.lanewrap .empty{margin:auto;padding:40px 0;color:var(--ink-secondary);font-size:var(--font-subheadline)}
/* The plan's checkpoints through the lanes, and their row above the scale. */
.lanes .cpmark{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--accent);opacity:.5;pointer-events:none;z-index:1}
.lanewrap .cprow{position:relative;height:14px;margin:4px 0 0 84px}
.lanewrap .cprow span{position:absolute;top:0;transform:translateX(-50%);font-size:10px;line-height:1;color:var(--accent);
                      font-variant-numeric:tabular-nums;white-space:nowrap}
.lanewrap:focus{outline:none}