/* The sensor session page. A port of scripts/vbt_proto/web/index.html's styles, scoped to #vbt-page so nothing here can reach the rest of the dashboard. LIGHT ONLY: no prefers-color-scheme block, no dark tokens — the page is read in a gym and under a desk lamp, and its blue/grey/amber timeline key is the whole message. */ #vbt-page{ color-scheme:light; --bg:#f5f5f3;--surface:#fff;--surface-2:#ececea;--line:#d8d8d4;--grid:#e6e6e2; --ink:#2b2b28;--muted:#6b6b66;--faint:#9a9a94;--accent:#2563a8;--amber:#c47a1e; --good:#2f8f4e;--bad:#b5462f; background:var(--bg);color:var(--ink); font-family:'IBM Plex Mono','Courier New',monospace;font-size:14px;line-height:1.4; font-variant-numeric:tabular-nums; display:flex;flex-direction:column;gap:12px;max-width:900px;margin:0 auto; padding:14px 18px; } #vbt-page.hidden{display:none} #vbt-page *{box-sizing:border-box} #vbt-page svg{display:block} #vbt-page .card{background:var(--surface);border:1px solid var(--line);padding:12px 14px} #vbt-page .card h3{margin:0 0 8px;font-size:11px;text-transform:uppercase; letter-spacing:.08em;color:var(--muted);font-weight:600} #vbt-page .big{font-size:30px;font-weight:700;line-height:1.1} #vbt-page .row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} #vbt-page .mut{color:var(--muted)} #vbt-page .chip{display:inline-block;border:1px solid var(--line);border-radius:10px; padding:1px 8px;font-size:11px;color:var(--muted)} #vbt-page .chip.amber{border-color:var(--amber);color:var(--amber)} #vbt-page .chip.good{border-color:var(--good);color:var(--good)} #vbt-page .chip.bad{border-color:var(--bad);color:var(--bad)} #vbt-page .err{background:var(--bad);color:#fff;padding:8px 12px;font-size:12px} #vbt-page .nav{display:flex;justify-content:space-between;align-items:center;gap:10px} #vbt-page .nav button,#vbt-page .nrb{min-height:38px;padding:0 14px;font:inherit; font-size:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line); border-radius:3px;cursor:pointer} #vbt-page .nav button:disabled{opacity:.4;cursor:default} #vbt-page .item{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:10px 12px;border:1px solid var(--line);background:var(--surface); margin-bottom:8px;cursor:pointer;min-height:38px} #vbt-page .item b{font-weight:600} /* The timeline's action row: every one of these is a finger target. */ #vbt-page .tlacts{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center; font-size:12px;margin-top:6px} #vbt-page .tlacts a{color:var(--accent);text-decoration:none;cursor:pointer; min-height:38px;display:inline-flex;align-items:center} #vbt-page .tlacts a.d{color:var(--bad)} #vbt-page .tlacts span{min-height:38px;display:inline-flex;align-items:center} #vbt-page .tlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px} #vbt-page .tlrow input,#vbt-page .tlrow select{font:inherit;font-size:12px;min-height:38px; flex:1;min-width:180px;background:var(--surface);color:var(--ink); border:1px solid var(--line);border-radius:3px;padding:0 8px} #vbt-page .tlrow button{min-height:38px;padding:0 12px;font-size:12px;font:inherit; background:var(--surface);color:var(--ink);border:1px solid var(--line); border-radius:3px;cursor:pointer} /* Confirmation is an inline row. There is no confirm() on any lift surface. */ #vbt-page .confirm{display:flex;gap:12px;align-items:center;font-size:12px} #vbt-page .confirm a{cursor:pointer;color:var(--accent);display:inline-flex; align-items:center;min-height:38px;padding:0 8px} #vbt-page .confirm a.d{color:var(--bad)} /* The timeline's key. Two rows of coloured blocks mean nothing without it. */ #vbt-page .tlkey{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11px; color:var(--muted);margin-bottom:8px} #vbt-page .tlkey i{display:inline-block;width:12px;height:10px;margin-right:5px; vertical-align:-1px;border-radius:1px} #vbt-page .tlkey i.s{background:var(--accent)} #vbt-page .tlkey i.g{background:var(--accent);opacity:.55} #vbt-page .tlkey i.u{background:var(--surface);border:1px solid var(--faint)} #vbt-page .tlkey i.a{background:var(--amber)} #vbt-page .tlkey i.x{background:var(--bad);opacity:.35} #vbt-page .tlkey i.t{height:2px;background:var(--faint);vertical-align:3px} #vbt-page .tlsum{font-size:12px;margin-top:8px} #vbt-page .tlsum.none{color:var(--muted)} #vbt-page .tfoot{font-size:11px;color:var(--muted);margin-top:8px} /* The control that reveals the detections no Garmin set matched. A real button on the table's own foot, not a display toggle in a corner: what it opens is a manual matching job. */ #vbt-page .moreline{margin-top:10px} /* The sets table. The horizontal scroll belongs to the table's own box, never to the page, or a phone would drag the whole screen sideways. */ #vbt-page .tw{overflow-x:auto;-webkit-overflow-scrolling:touch} #vbt-page table.sets{border-collapse:collapse;width:100%;min-width:660px;font-size:12px} #vbt-page table.sets th{text-align:left;font-size:10px;font-weight:600; text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap; padding:0 14px 6px 0;border-bottom:1px solid var(--ink)} #vbt-page table.sets td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line); white-space:nowrap;vertical-align:top} #vbt-page table.sets th:last-child,#vbt-page table.sets td:last-child{padding-right:0;width:100%} #vbt-page table.sets tr.tap:hover td{background:var(--surface-2)} #vbt-page table.sets tr.un td{color:var(--muted)} #vbt-page table.sets td b{font-weight:600} #vbt-page table.sets td small{display:block;font-size:10px;color:var(--faint);margin-top:2px} #vbt-page table.sets .num{text-align:right} #vbt-page .st-ok{color:var(--good)} #vbt-page .st-warn{color:var(--amber)} #vbt-page .st-no{color:var(--muted)} #vbt-page .qm{color:var(--amber);font-weight:700;cursor:help} #vbt-page .grade{display:flex;gap:18px} #vbt-page .grade div{flex:1} #vbt-page .grade b{display:block;font-size:22px;font-weight:700} #vbt-page .grade span{font-size:10px;text-transform:uppercase;letter-spacing:.06em; color:var(--muted)} #vbt-page .reps{display:flex;flex-wrap:wrap;gap:6px} #vbt-page .reps button{min-height:38px;min-width:38px;font:inherit;font-size:12px; background:var(--surface);color:var(--ink);border:1px solid var(--line); border-radius:3px;cursor:pointer} #vbt-page .reps button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)} #vbt-page .reps button.ex{color:var(--faint);text-decoration:line-through} #vbt-page .reps button.ad{border-color:var(--amber)} #vbt-page .reps button.p{border-style:dashed} /* The phase strip: one row per rep, three coloured segments and a legend. */ #vbt-page .ph{display:flex;flex-direction:column;gap:4px} /* Every row is a finger target — it opens that rep's detail — so it carries the 38 px floor the rest of the page keeps. The prototype's 26 px was a mouse's number; the restore link inside the row already had 38. */ #vbt-page .ph .r{display:grid;grid-template-columns:28px 1fr 74px;gap:8px; align-items:center;font-size:11px;cursor:pointer;min-height:38px} #vbt-page .ph .r .n{color:var(--muted)} #vbt-page .ph .r .t{text-align:right;color:var(--muted)} #vbt-page .ph .r.ex .n{text-decoration:line-through;color:var(--faint)} #vbt-page .ph .r.ex .bar{opacity:.3} #vbt-page .ph .r.ex .t{color:var(--faint)} #vbt-page .ph .r a.rst{display:inline-flex;align-items:center;justify-content:flex-end; min-height:38px;color:var(--accent);text-decoration:none;cursor:pointer;font-size:10px} #vbt-page .ph .bar{display:flex;height:12px;border-radius:2px;overflow:hidden; background:var(--surface-2)} #vbt-page .ph .bar i{display:block;height:100%} #vbt-page .ph .bar .e{background:var(--faint)} #vbt-page .ph .bar .p{background:var(--amber)} #vbt-page .ph .bar .c{background:var(--accent)} #vbt-page .ph .lg{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;color:var(--muted); margin-top:4px} #vbt-page .ph .lg i{display:inline-block;width:10px;height:8px;margin-right:4px; vertical-align:middle} #vbt-page .ad{font-style:normal;color:var(--amber);font-weight:700;margin-left:2px} /* The rep detail's metric grid. */ #vbt-page .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} #vbt-page .mg div{border:1px solid var(--line);padding:6px 8px} /* The value never wraps: "0.47 s" broken across two lines reads as two facts. */ #vbt-page .mg b{display:block;font-size:17px;font-weight:700;white-space:nowrap} #vbt-page .mg span{font-size:10px;text-transform:uppercase;letter-spacing:.06em; color:var(--muted)} #vbt-page .mg .hi{border-color:var(--amber)} #vbt-page .mg .hi b{color:var(--amber)} /* The raw view's rep bands, and the hand-added windows under it. */ #vbt-page .raw .sel{fill:var(--accent);opacity:.18} #vbt-page .raw .man{fill:var(--amber);opacity:.22} #vbt-page .raw .add{fill:var(--amber);opacity:.3} #vbt-page .wins{display:flex;flex-wrap:wrap;gap:6px} #vbt-page .wins .w{border:1px solid var(--amber);color:var(--amber);border-radius:10px; padding:2px 10px;font-size:12px;cursor:pointer;min-height:38px;display:inline-flex; align-items:center} #vbt-page .wins .no{border-color:var(--bad);color:var(--bad);cursor:default} #vbt-page .links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin-top:6px} #vbt-page .links a{color:var(--accent);text-decoration:none;cursor:pointer; min-height:38px;display:inline-flex;align-items:center} #vbt-page .links a.d{color:var(--bad)} #vbt-page textarea{width:100%;font:inherit;font-size:12px;background:var(--surface); color:var(--ink);border:1px solid var(--line);padding:6px} #vbt-page .split{display:grid;grid-template-columns:2fr 1fr;gap:12px} /* The pairing card. One sentence about what this recording is, then the four things that can be done to it as REAL buttons (the dashboard's own dark .detail-actions style) on one line at desktop — the destructive one pushed to the far right so it is never the button beside the one you meant. They wrap only where one line cannot hold them: at 620 px the four English labels are 78 px wider than the card, and a nowrap row there pushed the whole PAGE sideways — the one thing this stylesheet keeps off a phone. Above 700 px they are on one line either way, so wrapping costs the desktop nothing. */ #vbt-page .pair-status{font-size:13px;margin:0 0 10px} #vbt-page .pair-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0;align-items:center} #vbt-page .pair-actions button{min-height:38px;margin:0;padding:5px 12px; white-space:nowrap;flex:0 1 auto} #vbt-page .pair-actions .delete-btn{margin-left:auto} /* The big bar-path grid in the wide column (approved 2026-09-18). Cards wrap on their own, so 5 reps and 12 reps both fill the row without a per-set layout rule. Each card is a finger target and carries its own rep number, wobble bar and drift, so nothing about a rep has to be read off the card beside it. */ #vbt-page .pgrid{display:grid;gap:8px; grid-template-columns:repeat(auto-fill,minmax(108px,1fr))} #vbt-page .pc{background:var(--surface-2);border:1px solid var(--line);border-radius:3px; padding:6px 7px 7px;cursor:pointer;min-height:38px} /* The picture has a FIXED height and fits itself into it (the viewBox is isometric — 1 cm sideways is 1 cm up — so a tall thin path letterboxes rather than stretches; without it a card's height follows its width). */ #vbt-page .pc svg{width:100%;height:148px} #vbt-page .pc.on{border-color:var(--amber)} #vbt-page .pc.ex{opacity:.4} #vbt-page .pc.ex .pcn{text-decoration:line-through} #vbt-page .pcn{font-size:11px;font-weight:600;color:var(--muted);line-height:1} #vbt-page .pc.on .pcn{color:var(--amber)} #vbt-page .pcw{height:4px;margin-top:6px;background:var(--surface);border-radius:2px; overflow:hidden} #vbt-page .pcw i{display:block;height:100%} #vbt-page .pcd{display:flex;justify-content:space-between;align-items:baseline;gap:6px; margin-top:4px;font-size:10px;color:var(--muted)} #vbt-page .pcd b{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap} /* ---------- the workout side panel (paired to a confirmed workout) ---------- The Stats tab's rail (.statsv2 .rail / .ritem): 256 px, the same row geometry, on this page's tokens. At >=1080 px (the Stats breakpoint) it hangs to the LEFT of the page's column exactly as Stats' does, so the content keeps its width; below that it is a drawer behind the top bar's menu button. */ #vbt-page.has-rail{max-width:none;padding:0} #vbt-page .vapp{display:flex;align-items:flex-start;min-height:60vh} #vbt-page .vmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px; padding:14px 18px} /* reset the app's global tab-bar