/* WS5 Timeline layout styles. Owner: WS5 builder ONLY.

   Time-stamped inked ledger per SPEC #5 + design-source/TimelineSession.dc.html.
   Tokens only - every colour reads css/workout.css :root, so all three themes
   (light / dark / notebook) come out right with no per-theme rule here.
   Motion comes from css/motion.css (wlOpen, .wl-chevron, .wl-press-*,
   .wl-drag-lift, .wl-drag-slide, .wl-drag-handle); nothing below redefines a
   curve or duration.

   Several classes here are shared/unscoped ones ALREADY styled by
   css/session.css for Classic (.wl-sess-hdr*, .wl-ex-*, .wl-receipt*,
   .wl-more-set, .wl-hint, .wl-scheme-btn, .wl-regress-tag, .note-btn,
   .finish-btn, .wl-drag-handle, .wl-press-*) - reused deliberately so the
   exercise-card chrome, chips, receipt line and scheme button read identically
   to Classic. Only Timeline's OWN ledger geometry (the accent line, dots,
   rows, the NOW card and the rest block) is defined here, scoped to
   #home-session[data-layout="timeline"] so it can never leak into Classic or
   Focus. */

#home-session[data-layout="timeline"]{display:flex;flex-direction:column;gap:4px}

/* ── Session header: reuses .wl-sess-hdr/.wl-sess-hdr-kicker/.wl-sess-elapsed/
   .wl-sess-vol from css/session.css (unscoped) for byte-identical chrome and
   the locked session-volume grammar. Only the rest block is Timeline's own. */
.wl-tl-rest-wrap{display:flex;align-items:center;gap:6px;flex:none}
.wl-tl-rest-adj{
  width:34px;height:34px;border-radius:9px;background:var(--s2);border:none;
  display:flex;align-items:center;justify-content:center;
  font:600 11px var(--font-num);color:var(--mut2);cursor:pointer;
}
.wl-tl-rest-mid{text-align:center;cursor:pointer;background:none;border:none;padding:0}
.wl-tl-rest-lbl{font-size:9px;font-weight:700;letter-spacing:.09em;color:var(--mut)}
/* SPEC "Timers": Timeline's loudest numeral is 26px bold mono accent. */
.wl-tl-rest-num{font:700 26px/1.05 var(--font-num);color:var(--acc)}
.wl-tl-rest-hint{font-size:9px;color:var(--mut)}
.wl-tl-rest-over-pill{
  background:var(--org);color:var(--s1);padding:10px 14px;border-radius:12px;
  font:700 12px var(--font-num);letter-spacing:.04em;border:none;cursor:pointer;
  animation:wlTlRestOverPulse 1.1s ease-in-out infinite;
}
@keyframes wlTlRestOverPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── The ONE session-wide accent ledger line (FIX ROUND: collapsed from a
   per-muscle-group segment to a single flat ledger, per the design source -
   no group wrapper, no group label). ─────────────────────────────────────── */
.wl-tl-line{
  border-left:2px solid var(--b2);margin-left:9px;
  display:flex;flex-direction:column;
}

/* ── The dot on the line (exercise-header dot AND per-set dots) ─────────── */
.wl-tl-dot{
  width:14px;height:14px;border-radius:999px;flex:none;margin-left:-8px;
  border:none;padding:0;cursor:pointer;
}
.wl-tl-dot-accent{background:var(--acc)}
.wl-tl-dot-ok{background:var(--grn)}
.wl-tl-dot-warmup{background:var(--bg);border:2px solid var(--b2)}
.wl-tl-dot-upcoming{background:var(--bg);border:2px dashed var(--b2)}

/* ── One exercise "node": dot + header row + its expandable body ────────── */
.wl-tl-ex{display:flex;flex-direction:column}
.wl-tl-exhead{display:flex;align-items:center;gap:12px;padding:7px 0}
.wl-tl-exname-wrap{flex:1;min-width:0;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wl-tl-body{padding:0 0 6px 26px;display:flex;flex-direction:column;gap:2px}

/* ── One inked (done) row ────────────────────────────────────────────────
   time . value/cmp . [inj] [rir] . edit-pencil. The values themselves come
   from timelineValueText/buildSetCmpCell (or, in edit mode, the SAME
   .set-input elements Classic writes through via setVal). */
.wl-tl-row{display:flex;align-items:center;gap:10px;padding:6px 0;min-height:34px}
.wl-tl-row.warmup{color:var(--mut)}
.wl-tl-time{font:500 11px var(--font-num);color:var(--mut3,var(--mut));width:42px;flex:none}
.wl-tl-row-main{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px}
.wl-tl-row-val{font:650 15px var(--font-num);color:var(--txt);white-space:nowrap}
.wl-tl-row-label{font:600 11px var(--font-num);color:var(--mut);margin-right:4px}
.wl-tl-row.warmup .wl-tl-row-val{font-size:13px;font-weight:500;color:var(--mut)}
.wl-tl-cmp{font:500 10.5px var(--font-num);color:var(--mut);white-space:nowrap}
.wl-tl-inj-flag{color:var(--org);font-size:12px;flex:none}
.wl-tl-rir{font:500 11px var(--font-num);color:var(--mut);flex:none;white-space:nowrap}
.wl-tl-edit-btn{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--b1);background:none;
  display:flex;align-items:center;justify-content:center;color:var(--mut2);cursor:pointer;
  padding:0;flex:none;position:relative;
}
.wl-tl-edit-btn::after{content:"";position:absolute;inset:-6px}
.wl-tl-edit-btn svg{width:11px;height:11px}

/* A row swapped into edit mode reuses the live .set-input element - same
   pencil/hard visual language Classic's grid uses, just laid out inline. */
.wl-tl-row .set-input.wl-tl-input{
  width:52px;height:32px;border-radius:8px;background:var(--s2);border:none;
  text-align:center;font:650 14px var(--font-num);color:var(--txt);outline:none;
  -moz-appearance:textfield;
}
.wl-tl-row .set-input.wl-tl-input.soft{font:italic 500 14px var(--font-num);color:var(--pencil)}
.wl-tl-row .set-input.wl-tl-input:focus{box-shadow:inset 0 0 0 1.5px var(--acc)}
.wl-tl-row .set-input.wl-tl-input::-webkit-outer-spin-button,
.wl-tl-row .set-input.wl-tl-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wl-tl-x{color:var(--mut);font-size:12px}

/* ── The NOW card - accented, breaks the line ────────────────────────────
   SPEC #5: "an accented NOW row (with last-time-here context)". */
.wl-tl-now{
  display:flex;align-items:center;gap:12px;padding:12px;margin:6px 0 6px -8px;
  background:var(--s1);border:1px solid var(--acc);border-left:4px solid var(--acc);
  border-radius:14px;
}
.wl-tl-now-main{flex:1;min-width:0}
.wl-tl-now-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wl-tl-now-kicker{font:700 10px var(--font-num);letter-spacing:.06em;color:var(--acc)}
.wl-tl-now-vals{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
/* Pencil suggested values are LIVE inputs (soft/hard model), sized larger to
   read as the design's "85 x 8" headline numeral. */
.wl-tl-now .set-input.wl-tl-input{
  width:64px;height:40px;border-radius:10px;background:var(--s2);border:none;
  text-align:center;font:650 22px var(--font-num);color:var(--txt);outline:none;
  -moz-appearance:textfield;
}
.wl-tl-now .set-input.wl-tl-input.soft{font:italic 600 22px var(--font-num);color:var(--pencil)}
.wl-tl-now .set-input.wl-tl-input:focus{box-shadow:inset 0 0 0 1.5px var(--acc)}
.wl-tl-now-suggested{font-size:11px;color:var(--mut);align-self:flex-end;margin-bottom:6px}
.wl-tl-now-last{font:500 11px var(--font-num);color:var(--mut);margin-top:4px}
.wl-tl-now-actions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.wl-tl-now-actions button{
  height:32px;padding:0 11px;border-radius:8px;background:var(--s2);border:none;
  display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--mut2);
  cursor:pointer;white-space:nowrap;font-family:var(--font-ui);
}
.wl-tl-now-actions button svg{width:11px;height:11px}
.wl-tl-now-done{
  width:48px;height:48px;border-radius:999px;background:var(--grn);color:var(--bg);
  border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.wl-tl-now-done svg{width:20px;height:20px}

/* ── Upcoming exercise row (pencil, collapsed, draggable) ────────────────
   wlClassicCardDrag (reused via attachClassicDrag) sets .wl-drag-lift /
   .wl-drag-slide on this element directly during a drag - both are plain
   transform/shadow utilities in css/motion.css, so no extra shadow override
   is needed the way Classic's own .wl-ex-card required one. */
.wl-tl-upcoming{
  display:flex;align-items:center;gap:12px;padding:6px 8px 6px 0;margin-left:-8px;
  color:var(--pencil);border-radius:10px;user-select:none;-webkit-user-select:none;
}
.wl-tl-upcoming-body{flex:1;min-width:0;cursor:pointer}
.wl-tl-upcoming-name{font-size:14px;font-weight:600;color:var(--mut2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wl-tl-upcoming-sub{font:italic 500 12.5px var(--font-num);color:var(--pencil);margin-top:2px}
.wl-tl-hint-txt{font-style:normal;font-weight:700;color:var(--acc)}
.wl-tl-upcoming-sets{margin-top:6px;border-left:2px dashed var(--b2);padding-left:10px;display:flex;flex-direction:column;gap:4px}
.wl-tl-upcoming-set{font:italic 500 12px var(--font-num);color:var(--pencil)}

/* ── Per-exercise running volume + the bottom caption pill ───────────────
   .wl-ex-vol is reused unscoped from css/session.css for byte-identical
   "1,890 vs 1,750 lb last" styling; only the caption pill is Timeline's own. */
.wl-tl-caption{display:flex;justify-content:center;padding:2px 0 8px}
.wl-tl-caption span{
  display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:var(--s1);border:1px solid var(--b1);font-size:12px;font-weight:600;color:var(--mut2);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}