/* workout.css - styles for the logger screen (the exercise cards you type your sets into).

     Most of that screen's CSS is still the .ex-* block in styles.css. This file exists because
     styles.css hit the 1000-line limit (see CLAUDE.md), so anything NEW for the logger goes here
     rather than pushing that file over. Loaded straight after styles.css in index.html, so it can
     use the palette variables in :root there and override anything above it. */

  /* The coaching cue for a movement ("Long stride, torso tall. Glutes, not quads"). Lives in the card
     BODY rather than the header, so it is the first thing read when a card is opened to log a set,
     and it never competes with the sets-and-reps line for space in the collapsed row. */
  .ex-cue{display:flex; gap:7px; font-size:12.5px; line-height:1.45; color:var(--txt);
          background:var(--card2); border-left:2.5px solid var(--acc); border-radius:0 9px 9px 0;
          padding:9px 11px; margin:0 0 10px}
  .ex-cue::before{content:"›"; color:var(--acc); font-weight:800; line-height:1.35; flex:none}

  /* ---- Headings: modern and bold, not the serif ----
     The display headings were Cormorant Garamond falling back to Georgia, which Tina found hard to
     read and not very inviting - thin strokes and wide letter-spacing at a glance, across a gym, on a
     phone. Same elements, system sans, heavier and tighter. Overrides the .sec-h-serif rule in
     styles.css because this file loads after it. The serif is kept for the big NUMBER displays
     (.stat-val, .rm-big-n and friends) where it still looks good and legibility is not the issue. */
  #hTitle, .hero-title, .wk-title, .home-tile-t, .sec-h-serif, .pl-name, .cp-title{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-weight:800; letter-spacing:-.02em;
  }
  /* ---- "Before you start": the readiness card at the top of a workout (biofeedback.js) ----
     Deliberately quiet by default. It only earns a colour when it is actually telling her to do
     something different: warm tint for a good day, the muted red for a run-down one. */
  .bio{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin:0 0 14px}
  .bio-top{display:flex; align-items:center; gap:7px; color:var(--mut2)}
  .bio-top .ic{width:15px; height:15px}
  .bio-lbl{font-size:10.5px; font-weight:800; letter-spacing:.09em}
  .bio-head{font-weight:700; font-size:15px; margin-top:6px}
  .bio-notes{display:flex; flex-direction:column; gap:3px; margin-top:6px; font-size:12.5px; color:var(--mut)}
  .bio-advice{font-size:13.5px; line-height:1.45; margin-top:9px; padding-top:9px; border-top:1px solid var(--line)}
  .bio-good{border-color:rgba(180,143,154,.5)}
  .bio-good .bio-top{color:var(--acc)}
  .bio-warn{border-color:rgba(191,85,77,.45)}
  .bio-warn .bio-top{color:var(--bad)}
  .bio-warn .bio-advice{font-weight:600}
  /* the same explanation on a What next card */
  .nx-bio{font-size:12.5px; line-height:1.45; color:var(--txt); background:var(--card2); border-left:2.5px solid var(--acc);
          border-radius:0 9px 9px 0; padding:8px 11px; margin-top:9px}

  /* ---- "Add something else" (extras.js): the training that is not in a plan ----
     Deliberately looks like an invitation rather than another workout row, so it never gets mistaken
     for something the plan is telling her to do. */
  .x-open{display:flex; align-items:center; gap:11px; width:100%; text-align:left; font:inherit; color:inherit;
          background:var(--card); border:1px dashed var(--line); border-radius:var(--r); padding:14px; margin-top:4px}
  .x-open:active{background:var(--card2)}
  .x-open .ic{width:19px; height:19px; color:var(--acc); flex:none}
  .x-open b{display:block; font-size:14.5px}
  .x-open small{display:block; font-size:12px; color:var(--mut); margin-top:2px}
  .x-sec{font-size:10.5px; font-weight:800; letter-spacing:.09em; color:var(--mut2); padding:14px 15px 7px}
  .x-watch{display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; color:inherit;
           background:none; border:0; border-top:1px solid var(--line); padding:11px 15px}
  .x-watch:active{background:var(--card2)}
  .x-watch b{display:block; font-size:14px}
  .x-watch small{display:block; font-size:12px; color:var(--mut); margin-top:2px}
  .x-add{flex:none; font-size:12.5px; font-weight:700; color:var(--acc)}
  .x-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 15px}
  .x-chip{font:inherit; font-size:12.5px; font-weight:600; color:var(--txt); background:var(--card2);
          border:1px solid var(--line); border-radius:999px; padding:7px 12px}
  .x-chip:active{background:var(--track)}
  .x-row{padding:9px 15px 0}
  .x-in{width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt); border-radius:11px;
        padding:12px; font:inherit; font-size:16px; outline:none}
  .x-past{display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding:10px 15px}
  .x-past b{display:block; font-size:13.5px}
  .x-past small{display:block; font-size:11.5px; color:var(--mut); margin-top:2px}
  .x-rm{flex:none; background:none; border:0; color:var(--mut2); font:inherit; font-size:15px; padding:4px 6px}
  .x-rm:active{color:var(--bad)}
  #extraModal .swap-card{padding-bottom:15px}

  #hTitle{font-size:20px; line-height:1.2}
  .wk-title{font-size:24px}
  .sec-h-serif{font-weight:800}