/* Scrub and figure blocks drawn by ui-figure.js (docs/agent-platform/result-layout.md §3.5.5, §3.5.6). Tokens come from app.css (colours), ui.css (--m-*, --ok, --bad, --ring) and ui-charts.css (--chart). */

.lyscrub{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:760px} /* the rail keeps the charts' measure on a wide card */
.lyscrub-body{display:flex;align-items:flex-start;gap:12px;min-width:0}
.lyscrub-play{flex:none;display:grid;place-items:center;width:var(--ctl);height:var(--ctl);margin-top:34px;padding:0;border:1px solid var(--stroke2);border-radius:50%;background:transparent;color:var(--fg2);cursor:pointer;transition:border-color var(--m-tap) var(--m-ease),color var(--m-tap) var(--m-ease)}
.lyscrub-play:hover{border-color:var(--hover);color:var(--fg)}
.lyscrub-play:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.lyscrub-play .lyscrub-glyph{display:block}
.lyscrub-play .lyscrub-glyph-pause,.lyscrub-play[aria-pressed="true"] .lyscrub-glyph-play{display:none}
.lyscrub-play[aria-pressed="true"] .lyscrub-glyph-pause{display:block}
.lyscrub-rail{flex:1;min-width:0;padding:0 12px}
.lyscrub-lane{position:relative;container-type:inline-size;padding-top:36px}

.lyscrub-cap{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;max-width:calc(100cqw + 24px);height:28px;padding:0 11px;border:1px solid var(--stroke2);border-radius:999px;background:var(--chip);color:var(--fg2);font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;transform:translateX(clamp(-12px,calc(var(--p) * 100cqw - var(--cw) / 2),calc(100cqw + 12px - var(--cw))))}
.lyscrub-cap b{flex:none;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.lyscrub-cap span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lyscrub-cap:not(.lyscrub-cap-one) span::before{content:"·";margin-right:6px;color:var(--dim)}
.lyscrub-cap-one{gap:0}
.lyscrub-cap b:empty{display:none}

.lyscrub-hit{position:relative;height:28px;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.lyscrub-track{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.lyscrub-fill{position:absolute;inset:0;background:var(--chart);transform-origin:0 50%;transform:scaleX(var(--p))}
.lyscrub-stop{position:absolute;top:11px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#4A4A4A;pointer-events:none}
.lyscrub-stop.lypast{background:var(--fg2)}
.lyscrub-today{position:absolute;top:7px;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:var(--fg);pointer-events:none}
.lyscrub-tick.lyscrub-now{color:var(--fg);font-weight:600}
.lyscrub-tick-near{visibility:hidden}
.lyscrub-thumb{position:absolute;left:-14px;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;outline:none;cursor:grab;touch-action:none;transform:translateX(calc(var(--p) * 100cqw))}
.lyscrub-knob{display:block;box-sizing:border-box;width:var(--knob);height:var(--knob);border:3px solid var(--card);border-radius:50%;background:var(--accent);transition:transform var(--m-tap) var(--m-ease)}
.lyscrub-hit:hover .lyscrub-knob{transform:scale(1.08)}
.lydragging .lyscrub-knob{transform:scale(1.18)}
.lydragging .lyscrub-thumb{cursor:grabbing}
.lyscrub-thumb:focus-visible .lyscrub-knob{outline:2px solid var(--fg);outline-offset:2px}

/* app.css's reduced-motion rule gives every element a .01ms transition on `all`; the parts --p and --spread move must not lag a frame behind it. */
.lyscrub-thumb,.lyscrub-fill,.lyscrub-cap,.lyparts-lead{transition-property:none}

.lyscrub-ticks{position:relative;height:16px;margin-top:2px}
.lyscrub-tick{position:absolute;top:0;transform:translateX(-50%);font-size:11px;line-height:16px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.lyscrub-tick.lyscrub-year{color:var(--fg2);font-weight:500}
.lyscrub-tick-start{transform:none}
.lyscrub-tick-end{transform:translateX(-100%)}
.lyscrub-tick-skip{display:none}
@container (max-width:520px){.lyscrub-tick-wide{display:none}}

.lyscrub-count{margin:0;padding-left:56px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.lyscrub-count b{font-weight:600;color:var(--fg)}
.lyscrub-play[hidden]+.lyscrub-rail{padding-left:12px}
.lyscrub:has(.lyscrub-play[hidden]) .lyscrub-count{padding-left:12px}
@media (prefers-reduced-motion:reduce){.lyscrub-play{display:none}.lyscrub-count{padding-left:12px}}

.lyscrubbed [data-row]{transition:opacity var(--m-tap) var(--m-ease)}
.lyscrubbed [data-row].lylater{opacity:.45}
.lyscrubbed .lytl-dot{transition:transform var(--m-tap) var(--m-ease)}
.lyscrubbed .lytl-i.lyon .lytl-dot{background:var(--chart);transform:scale(1.5)}
.lyscrubbed .lytl-i.lyon :is(.lytl-w,.lytl-t){color:var(--fg)}
.lyscrubbed .tli.lyon .tld{border-color:var(--chart);color:var(--fg)}
.lyscrubbed .tli.lyon .tlt{color:var(--fg)}

figure.lyfig{position:relative;display:flex;flex-direction:column;gap:14px;margin:0;min-width:0;container-type:inline-size}
.lyfig-pre :is(.lypipe-dot,.lypipe-txt,.lypipe-seg,.lyfun-bar,.lyfun-l,.lyfun-v,.lyfun-kept,.lyparts-dot,.lyparts-lead,.lyparts-l){opacity:0}
.lyfig-cap{position:relative;border:0;border-radius:14px;background:var(--well)}
.lyfig-t{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.lyfig-th{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.lyfig-th b{font-size:14px;font-weight:600;color:var(--fg)}
.lyfig-t p{margin:0;font-size:14px;line-height:1.55;color:var(--fg3)}
.lyfig-attr{margin-top:-6px;font-size:11px;color:var(--dim)}

.lypipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.lypipe-i{position:relative;min-width:0;transition:opacity var(--m-fade) var(--m-ease)}
.lypipe-b{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:4px 6px 6px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:center;cursor:pointer}
.lypipe-b:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.lypipe-dot{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1.5px solid var(--line);border-radius:50%;background:var(--card);color:var(--mute);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;transition:border-color var(--m-tap) var(--m-ease),color var(--m-tap) var(--m-ease),transform var(--m-tap) var(--m-ease)}
.lypipe-dot .lyicon{display:block}
.lypipe-dot.ok{border-color:var(--ok);color:var(--ok)}
.lypipe-dot.warn{border-color:var(--ring);color:var(--fg)}
.lypipe-dot.bad{border-color:var(--bad);color:var(--bad)}
.lypipe-dot.up{border-color:var(--accent);color:var(--accent)}
.lypipe-b:hover .lypipe-dot{transform:scale(1.06)}
.lypipe-txt{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%}
.lypipe-c{font-size:20px;font-weight:600;line-height:1.1;color:var(--fg);font-variant-numeric:tabular-nums}
.lypipe-l{font-size:13px;font-weight:500;line-height:1.35;color:var(--fg2);overflow-wrap:anywhere;text-wrap:balance}
.lypipe-s{font-size:12px;line-height:1.35;color:var(--mute);text-wrap:balance}
.lypipe-seg{position:absolute;top:19px;left:50%;width:100%;height:2px;background:var(--line);transform-origin:0 50%}
.lypipe-seg.lyfilled{background:var(--chart)}
.lyfig.lypicked .lypipe-i:not(.lyon){opacity:.35}
.lypipe-i.lyon .lypipe-dot{border-color:var(--fg);transform:scale(1.1)}
.lypipe-i.lyon .lypipe-l{color:var(--fg)}
:root[data-screen="phone"] .lypipe{grid-template-columns:minmax(0,1fr)}
:root[data-screen="phone"] .lypipe-b{flex-direction:row;align-items:flex-start;gap:14px;padding:4px 4px 16px;text-align:left}
:root[data-screen="phone"] .lypipe-txt{align-items:flex-start;padding-top:6px}
:root[data-screen="phone"] .lypipe-seg{top:20px;left:20px;width:2px;height:100%;margin-left:-1px;transform-origin:50% 0}

.lyfun{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lyfun-i,.lyfun-kept{display:grid;grid-template-columns:minmax(96px,26%) minmax(0,1fr) minmax(72px,auto);align-items:center;gap:0 16px}
.lyfun-l{min-width:0;font-size:13px;line-height:1.35;color:var(--fg2);overflow-wrap:anywhere}
.lyfun-track{display:flex;justify-content:center;height:30px}
.lyfun-bar{display:block;min-width:4px;height:100%;border-radius:6px;background:var(--chart);transform-origin:50% 50%}
.lyfun-v{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-variant-numeric:tabular-nums}
.lyfun-v b{font-size:15px;font-weight:600;line-height:1.2;color:var(--fg)}
.lyfun-v small{font-size:12px;color:var(--mute);white-space:nowrap}
.lyfun-last .lyfun-v b{font-size:20px}
.lyfun-last .lyfun-l{color:var(--fg)}
.lyfun-kept>span{grid-column:2;display:flex;align-items:center;justify-content:center;gap:4px;height:24px;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.lyfun-kept .lyicon{color:var(--dim)}
:root[data-screen="phone"] .lyfun-i{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
:root[data-screen="phone"] .lyfun-track{grid-column:1/-1;grid-row:2}
:root[data-screen="phone"] .lyfun-v{flex-direction:row;align-items:baseline;gap:8px}
:root[data-screen="phone"] .lyfun-last .lyfun-v{flex-direction:column;align-items:flex-end;gap:2px}
:root[data-screen="phone"] .lyfun-kept{grid-template-columns:minmax(0,1fr)}
:root[data-screen="phone"] .lyfun-kept>span{grid-column:1;height:28px}

.lyparts{position:relative;overflow:clip;border:0;border-radius:14px;background:var(--well)}
.lyparts-img{display:block;width:100%;height:auto}
.lyparts-wait .lyparts{aspect-ratio:3/2}.lyparts-wait .lyparts-layer{visibility:hidden}
.lyparts-list{display:none;list-style:none;margin:0;padding:0;flex-direction:column}
.lyparts-list li{border-top:1px solid var(--hair)}
.lyparts-list li:first-child{border-top:0}
.lyparts-li{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:44px;padding:10px 0;border:0;background:none;font:inherit;font-size:13px;line-height:1.45;color:var(--fg2);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity var(--m-fade) var(--m-ease)}
.lyparts-li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lyparts-li b{font-size:14px;font-weight:600;color:var(--fg)}
.lyparts-li em{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;background:var(--chart);color:var(--card);font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.lyparts-li[aria-pressed="true"] em{background:var(--fg)}
.lyfig.lypicked .lyparts-li[aria-pressed="false"]{opacity:.55}
.lyparts-li:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.lyparts-dot>b{display:none}
.lyparts-broken :is(.lyparts,.lyfig-attr,.lyfig-cap){display:none}.lyparts-broken .lyparts-list{display:flex}.lyparts-broken .lyparts-li em{display:none}
.lyparts-dim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lyparts-dim path{fill:#000;fill-opacity:.4;opacity:0;transition:opacity var(--m-fade) var(--m-ease)}
.lyparts-dim path.lyon{opacity:1}
.lyparts-box{position:absolute;border:1.5px solid var(--fg);border-radius:6px;opacity:0;pointer-events:none;transition:opacity var(--m-fade) var(--m-ease)}
.lyparts-box.lyon{opacity:1}
.lyparts-layer{position:absolute;inset:0;pointer-events:none}
.lyparts-pin{position:absolute;width:0;height:0;--len:calc((var(--rest,14) + var(--spread) * var(--reach,40)) * 1px)}
.lyparts-lead{position:absolute;left:0;top:-.5px;width:1px;height:1px;transform-origin:0 50%;transform:rotate(var(--a)) scaleX(calc(var(--rest,14) + var(--spread) * var(--reach,40)))}
.lyparts-lead>i{display:block;width:100%;height:100%;background:var(--fg2);transform-origin:0 50%}
.lyparts-dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border:2px solid var(--card);border-radius:50%;background:var(--chart);pointer-events:auto;cursor:pointer;transition:background-color var(--m-tap) var(--m-ease)}
.lyparts-l{position:absolute;left:0;top:0;height:28px;padding:0 11px;border:1px solid var(--stroke2);border-radius:999px;background:var(--card);color:var(--fg2);font:inherit;font-size:12px;font-weight:500;line-height:26px;white-space:nowrap;pointer-events:auto;cursor:pointer;transform:translate(calc(var(--dx) * var(--len) + var(--sx,0px) + var(--ax)),calc(var(--dy) * var(--len) + var(--sy,0px) + var(--ay)));transition:border-color var(--m-tap) var(--m-ease),color var(--m-tap) var(--m-ease),opacity var(--m-fade) var(--m-ease)}
.lyparts-right .lyparts-l{--ax:4px;--ay:-50%}
.lyparts-left .lyparts-l{--ax:calc(-100% - 4px);--ay:-50%}
.lyparts-up .lyparts-l{--ax:-50%;--ay:calc(-100% - 4px)}
.lyparts-down .lyparts-l{--ax:-50%;--ay:4px}
.lyparts-l:hover{border-color:var(--hover);color:var(--fg)}
.lyparts-l:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.lyfig.lypicked .lyparts-pin:not(.lyon) .lyparts-l{opacity:.55}
.lyparts-pin.lyon .lyparts-l{border-color:var(--fg);color:var(--fg)}
.lyparts-pin.lyon .lyparts-dot{background:var(--fg)}
/* A phone shows numbered dots on the photo and the parts as a list under it; labels would cover their own dots. */
:root[data-screen="phone"] .lyparts-l,:root[data-screen="phone"] .lyparts-lead,:root[data-screen="phone"] .lyparts~.lyfig-cap{display:none}
:root[data-screen="phone"] .lyparts-list{display:flex;margin-top:4px}
:root[data-screen="phone"] .lyparts-dot{left:-11px;top:-11px;display:grid;place-items:center;width:22px;height:22px}
:root[data-screen="phone"] .lyparts-dot>b{display:block;font-style:normal;font-size:12px;font-weight:600;line-height:1;color:var(--card);font-variant-numeric:tabular-nums}
:root[data-screen="phone"] .lyparts-dot::before{content:"";position:absolute;inset:-11px;border-radius:50%}