/* ── LOG SESSION (athlete self-serve, shared iPad) ──
   Styles for #tab-logsession, rendered by js/features/log-session.js.

   THIS FILE EXISTS BECAUSE THESE RULES WERE DELETED BY ACCIDENT. They used to live at the
   bottom of css/pages/home.css, appended there because Log Session is reached from Home. It is
   not Home's markup, and 4a03186 ("rebuild the Home dashboard", #30) rewrote home.css and took
   all 43 of these rules with it. Nothing failed loudly: the app kept rendering, the suite kept
   passing, and step 1 of Log Session quietly became a run-on line of unstyled inline <button>
   text — every metric row collapsed to a ~40px inline-block with no card, no tap target and the
   unit welded onto the name ("Back Squat 5slb · higher better"). It shipped that way from
   2026-08-08 until it was reported as "not intuitive at all", which is exactly what it looked
   like.

   So the rules are restored verbatim — nothing here is a redesign — and they now live in a file
   named after the tab they style, like every other page in css/pages/. A Home refactor can no
   longer reach them.

   If you add a class to log-session.js, add its rule HERE. */

/* ── LOG SESSION (athlete self-serve, shared iPad) ── */
/* step 1: star what you're testing — collapsed-by-default accordions, one per category */
.ls-pick-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.9rem}
.ls-pick-count{font-family:var(--fb);font-weight:700;font-size:.8rem;color:var(--text)}
.ls-acc-list{display:flex;flex-direction:column}
.ls-acc summary{flex-wrap:wrap}
/* The count/ALL/chevron cluster pins to the right edge, so the ALL checkboxes line up in a
   column down the screen no matter how wide each row's count pill happens to be.

   components.css gives BOTH .acc__count and .acc__chev `margin-left:auto`, and relies on the
   adjacent-sibling rule `.acc__count + .acc__chev{margin-left:.6rem}` to collapse the second
   one back to a plain gap. Log Session is the only screen that puts something BETWEEN those
   two — the "All" select-all checkbox — so that selector stops matching and the chevron keeps
   its auto margin. Two auto margins in one flex row split the free space between them, which
   dropped the count and the ALL checkbox into the middle of the header with a large gap to
   the chevron. Worse, the ALL checkbox then sat at a different x on every row, because it
   followed a pill whose text varies ("3 metrics" vs "2" vs "1 selected").

   Restating the gap here re-establishes the single-auto-margin layout the component intends.
   Anchoring from the right is what makes ALL align: the chevron is fixed to the right edge and
   ALL is a constant width from it, so a wider count pill now grows leftwards instead of
   shoving ALL sideways. Scoped to Log Session's own summaries — components.css is shared with
   Build Metrics, which has no such checkbox and must keep behaving as it does. */
.ls-acc > summary .acc__chev,
.ls-sub > summary .acc__chev{margin-left:.6rem}
.ls-catall{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--fb);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);cursor:pointer;margin-left:.75rem}
.ls-catall input{width:15px;height:15px;accent-color:var(--lime);cursor:pointer}
.ls-acc__body{padding:.8rem 1rem 1.1rem}
.ls-pick-row{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);padding:.85rem 1rem;margin-bottom:.6rem;cursor:pointer;font:inherit;color:inherit}
.ls-pick-row:last-child{margin-bottom:0}
.ls-pick-row.is-selected{border-color:var(--lime);background:var(--lime-d)}
.ls-star{flex-shrink:0;color:var(--t3);display:inline-flex}
.ls-star .ic{width:19px;height:19px}
.ls-star.is-on{color:var(--lime)}
.ls-star.is-on .ic{fill:var(--lime)}
.ls-pick-row__name{font-family:var(--fs);font-weight:600;font-size:.92rem;color:var(--text)}
/* subcategory (e.g. "Squat" holding Squat 5's/3's/1's) — its own collapsed-by-default
   accordion nested inside the category, with its own "select all in this set" checkbox */
.ls-sub{margin:0 0 .6rem;border:1px solid var(--b1);border-radius:var(--r);background:var(--s1)}
.ls-sub:last-child{margin-bottom:0}
.ls-sub summary{padding:.6rem .8rem;flex-wrap:wrap}
.ls-sub .acc__body{padding:.6rem .7rem .1rem}
.ls-sub .acc__chev .ic{width:14px;height:14px}
/* step 2: only the starred metrics, nothing else */
.ls-log-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem}
.ls-log-title{font-family:var(--fd);font-weight:900;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;color:var(--text);display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.ls-log-count{font-family:var(--fb);font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--t3);background:var(--s2);border:1px solid var(--b2);border-radius:100px;padding:.15rem .55rem}
@media(max-width:480px){.ls-log-head{flex-direction:column;align-items:flex-start}}
.ls-row{display:flex;align-items:center;justify-content:space-between;gap:1.1rem;background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);padding:.9rem 1.05rem;margin-bottom:.6rem}
.ls-row__name{font-family:var(--fs);font-weight:600;font-size:.92rem;color:var(--text)}
.ls-row__meta{display:block;font-family:var(--fb);font-size:.68rem;font-weight:400;color:var(--t3);margin-top:.2rem}
.ls-row__input{width:120px;flex-shrink:0;text-align:right}
.ls-row--strength .ls-row__fields{display:flex;gap:.6rem;flex-shrink:0}
/* Persistent Weight/Reps labels (not just placeholders — see the comment in log-session.js). */
.ls-field{display:flex;flex-direction:column;gap:.3rem}
.ls-field__label{font-family:var(--fb);font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);text-align:right}
.ls-row--strength .ls-row__input{width:92px}
.ls-row--strength .ls-row__input--reps{width:72px}
.ls-done-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.ls-done-icon{width:48px;height:48px;flex-shrink:0;border-radius:50%;background:var(--lime-d);color:var(--lime);display:flex;align-items:center;justify-content:center}
.ls-done-icon .ic{width:24px;height:24px}
.ls-done-title{font-family:var(--fd);font-weight:900;font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em;color:var(--text)}
.ls-pr-banner{font-family:var(--fb);font-weight:700;font-size:.85rem;color:var(--lime);background:var(--lime-d);border:1px solid rgba(170,255,0,.3);border-radius:var(--r);padding:.7rem .9rem;margin-bottom:1.1rem}
.ls-metric-switch{margin-bottom:1.1rem;flex-wrap:wrap}
@media(max-width:560px){
  .ls-row{flex-wrap:wrap}
  .ls-row__input{width:100%}
  .ls-row--strength .ls-row__fields{width:100%}
  .ls-row--strength .ls-field{flex:1 1 0}
  .ls-field__label{text-align:left}
}