/* ============================================================
   session-log.css
   css/components/session-log.css
   28 Sep 2026 v3

   v3 - SMOOTH-P2c. .slog__stepper / .slog__step: − and + either side of
        the weight, 44px each, so a change is a tap rather than a keyboard.


   v2 - PB-1. .slog__best, styled identically to the last-note line so a
        best does not read as an achievement to defend.
   Session notes -- what you did on an exercise, so you are not guessing
   at it next time. Moved here from gym-programme.css (LOG-1), renamed
   from .gp-lift* now that it is not gym-specific: the same block records
   a treadmill incline, a band colour and a plank duration.

   Deliberately plain. Nothing here highlights, compares or celebrates a
   number -- P4 says the app may display load and the coach never
   interprets it, and the styling has to hold that line as much as the
   copy does. No accent colour on the value, no emphasis on a change, no
   badge.

   Contrast, verified against tools/contrast-check.mjs tokens after
   A11Y-1: --color-text on --color-bg-card 8.40:1, --color-text-secondary
   5.97:1, --color-text-muted 5.59:1. Inputs sit on --color-bg-elevated
   where --color-text measures 7.04:1.
   ============================================================ */

.slog {
  margin-top: var(--space-4);
  padding: var(--space-4);
}

.slog__last {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}

/* PB-1, 15 Aug 2026. Sits directly under the last-note line and looks
   the same as it. Deliberately not highlighted: a best styled as an
   achievement becomes a target, and the toggle exists precisely because
   most people should not be shown one. */
.slog__best {
  font-size: 0.85em;
  opacity: 0.8;
  margin: 0.15em 0 0;
}

.slog__last--empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.slog__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.slog__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* LOG-5, 12 Aug 2026. Graeme: "is like a bigger box for notes to fill the
   remaining space to the right of it."

   Every field shared a fixed 5.5rem, which is right for "12.5" and absurd
   for "felt fine, back was tight". A note is prose and a number is three
   characters; sizing them identically makes the note look like somewhere
   you are not meant to write much, which is the opposite of the point. */
.slog__input {
  width: 5.5rem;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* The note takes whatever is left on its row. min-width:0 is what allows
   it to shrink below its content width when the row is tight, rather than
   pushing Save off the edge. */
/* LOG-6, 12 Aug 2026. The note is a textarea that grows with its content,
   so somebody can read back what they wrote before saving.

   flex-basis 100% with wrap means it takes a full row of its own once the
   numbers are placed -- a note sharing a line with two number boxes is
   three words wide whatever else is done to it.

   resize:none because the height is managed in JS; a drag handle that
   fights an auto-grow is worse than neither. overflow:hidden stops a
   scrollbar appearing for the split second before the height updates. */
.slog__input--note {
  flex: 1 1 100%;
  width: auto;
  min-width: 0;
  resize: none;
  overflow: hidden;
  line-height: var(--leading-relaxed);
  font-family: inherit;   /* textareas default to monospace */
}

.slog__input:focus-visible,
.slog__save:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.slog__save {
  min-height: 44px;
}

.slog__status {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
  min-height: 1.25rem;
}
.slog__invite {
  /* progressionInvitation() -- an invitation, never an instruction, and
     never a number. Sized as body text rather than a hint: it is the
     coach speaking, not UI chrome. */
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  .slog__input,
  .slog__save {
    transition: none;
  }
}

/* LOG-6. Character count, shown only in the last 60 characters. A counter
   that watches somebody from the first keystroke is pressure; one that
   appears as the ceiling approaches is help. Empty text content means it
   occupies no space at all until it has something to say. */
.slog__remaining {
  flex: 1 1 100%;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}


/* SMOOTH-P2c. The weight stepper. The buttons carry their own names
   ("2.5 kg less"), so the symbols are never the only label. */
.slog__stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.slog__step {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.slog__step:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}