/* static/css/session.css — Session timeline (#paneSess) + Building product (#proview), both on the kit.
   Owned by Task 3. Port of design-language/redesign.html .sum / .dlbl / .pbar / .hero / .needbox / .pfoot;
   rows, glyphs, shot chips, buttons and the product header come from kit.css. Only transform / opacity animate. */

/* ── Session timeline ── */
.s-sum{display:flex;align-items:center;gap:14px;margin:16px 4px 6px;font-size:13.5px;color:var(--mute);min-width:0;flex-wrap:wrap;row-gap:4px}
.s-sum>span{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}
.s-sum .s-n{font-weight:500}
.s-sum b{color:var(--ink);font:700 15px var(--disp)}
.s-dlbl{font:700 11.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:16px 4px 6px;display:flex;justify-content:space-between;gap:10px}
.s-sum+.s-dlbl{margin-top:10px}
#paneSess .k-list+.s-dlbl,#paneSess .k-empty+.s-dlbl{margin-top:20px}
#paneSess .k-empty{padding-bottom:40px}
/* cancel x on a building row: small round button, two taps (the first arms it for 3 s) */
.s-x{flex:none;height:32px;min-width:32px;padding:0;margin-right:-4px;border:0;border-radius:99px;display:grid;place-items:center;
  background:var(--surface-soft);color:var(--mute);font:700 12px var(--body);white-space:nowrap}
.s-x svg{display:block}
.s-x.arm{padding:0 11px;background:var(--red);color:var(--on-red)}
.s-more{display:block;width:100%;height:48px;border:0;border-top:1px solid var(--hairline);background:var(--surface);
  font:600 14px var(--body);color:var(--red-ink)}

/* ── Building product (#proview): a kit push layer ── */
#proview{z-index:31}
.bv-bar{flex:none;display:flex;align-items:center;gap:12px;padding:calc(var(--sat) + 12px) 16px 10px;background:var(--cream);position:relative;z-index:2;min-width:0}
.bv-back{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--sh-sm);display:grid;place-items:center;color:var(--ink)}
.bv-back svg{display:block}
.bv-tt{flex:1;font:600 17px var(--disp);color:var(--ink)}
.bv-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:110px}
.bv-body::-webkit-scrollbar{display:none}
.bv-body.nofoot{padding-bottom:calc(var(--sab) + 24px)}
/* cream header band with the short red tab (product header) */
.bv-hero{background:var(--cream);padding:6px 20px 20px;position:relative}
.bv-hero::after{content:"";position:absolute;left:20px;bottom:0;width:36px;height:4px;border-radius:4px 4px 0 0;background:var(--red)}
.bv-hero .k-hero{align-items:flex-end}
.bv-hero .k-nm{font-size:22px;line-height:1.15;letter-spacing:-.015em}
.bv-hero .k-gt{color:var(--cream-ink);opacity:.8}
/* build progress: a 3px bar scaled from the left (transform only) */
.bv-prog{height:3px;background:var(--info-wash);overflow:hidden}
.bv-prog i{display:block;height:100%;background:var(--info);transform-origin:0 50%;transition:transform 600ms var(--ease-out)}
.bv-rows{margin:14px 16px 0;transition:opacity 200ms ease}
.bv-rows.dim{opacity:.45}
.bv-in{flex:1;min-width:0;height:34px;font:600 15px var(--body);color:var(--ink);background:var(--surface-soft);border:1px solid var(--hairline-strong);border-radius:10px;padding:0 10px;outline:none}
.bv-in:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash)}
.bv-need{margin:14px 16px 0}
.bv-diffs{margin:12px 18px 0;display:flex;flex-direction:column;gap:8px}
.bv-diff{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--body-c)}
.bv-diff svg{flex:none;color:var(--violet);margin-top:1px}
.bv-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 16px calc(var(--sab) + 20px);background:linear-gradient(to top,var(--canvas) 70%,transparent)}
.bv-foot .k-btn.arm{background:var(--red);border-color:var(--red);color:var(--on-red)}
.bv-foot .k-btn.busy svg{animation:k-spin .8s linear infinite}
.bv-foot .k-btn[disabled]{opacity:.8}

@media (prefers-reduced-motion:reduce){
  .bv-prog i{transition:none}
  .bv-foot .k-btn.busy svg{animation-duration:2.4s}
}