/* Strength Log - Nocturne.
   Tokens are lifted verbatim from the design handoff's styles.css. Nothing below
   hard-codes a colour that is not a token; the three traffic-light coverage dots are
   the one documented exception and they live in --cov-*. */

:root {
  --color-bg: #161826;
  --color-surface: #1e2032;
  --color-text: #e9e9ed;

  --color-neutral-300: #c9c9d3;
  --color-neutral-400: #a7a7b6;
  --color-neutral-500: #8a8a9b;
  --color-neutral-600: #6d6d80;
  --color-neutral-700: #53536a;
  --color-neutral-800: #3a3c52;
  --color-neutral-900: #26283c;
  --color-divider: #26283c;

  --color-accent: #9184d9;
  --color-accent-300: #c4bcea;
  --color-accent-400: #a79dde;
  --color-accent-900: #2e2a49;
  --color-accent-dim: #6f6aa0;
  --color-accent-wash: rgba(145, 132, 217, .12);
  --color-accent-wash-2: rgba(145, 132, 217, .14);
  --scrim: rgba(10, 11, 18, .55);

  /* Coverage traffic lights - a deliberate, user-requested exception to the mono
     palette, kept to 9px dots and nothing else. */
  --cov-missed: oklch(0.66 0.17 18);
  --cov-minimum: oklch(0.82 0.13 88);
  --cov-optimal: oklch(0.76 0.14 155);

  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --pad: 17px;
  --hair: 0 0 0 1px var(--color-neutral-900);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* The published Artifact wrapper supplies this; a plain copy of the page does not, and
   a display:flex element then ignores the attribute outright. */
[hidden] { display: none !important; }

button, input { font: inherit; color: inherit; }
button { appearance: none; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ shell */

/* The shell is exactly one viewport tall so that MAIN scrolls, not the body. If the
   shell is allowed to grow, an absolutely positioned overlay anchors to the top of a
   shell that has already scrolled out of view and renders as a blank screen. */
#app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; max-width: 430px; margin: 0 auto;
  position: relative; overflow: hidden;
}

header { flex: none; padding: 14px var(--pad) 0; padding-top: max(14px, env(safe-area-inset-top)); }

.hrow { display: flex; align-items: center; gap: 8px; }
.mark { width: 8px; height: 8px; border-radius: 2px; background: var(--color-accent); flex: none; }
.brand { font: 500 13px/1 var(--font-ui); color: var(--color-text); }
.hmeta { margin-left: auto; font: 400 11px/1 var(--font-mono); color: var(--color-neutral-600); }

nav { display: flex; gap: 17px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav button {
  border-bottom: 2px solid transparent; color: var(--color-neutral-600);
  font: 500 13px/1 var(--font-ui); padding: 0 0 10px; margin-bottom: -1px;
  white-space: nowrap; flex: none;
}
nav button[aria-selected="true"] { border-bottom-color: var(--color-accent); color: var(--color-text); }

.rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px,
              var(--color-divider) calc(100% - 48px), transparent);
}

main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.panel { padding: 16px var(--pad) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }

/* --------------------------------------------------------------- headings */

.kicker {
  font: 500 10px/1 var(--font-ui); letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 7px;
}
.label {
  font: 500 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
h1 { margin: 0; font: 500 20px/1.15 var(--font-ui); letter-spacing: -.015em; color: var(--color-text); }
h1.verdict { font-size: 21px; line-height: 1.3; text-wrap: pretty; }
h1.big { font-size: 26px; letter-spacing: -.02em; }
.screenhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.screenhead .right { text-align: right; flex: none; }
.count { font: 500 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.count span { color: var(--color-neutral-700); }
.caption { font: 400 10.5px/1.4 var(--font-ui); color: var(--color-neutral-600); }
.foot { font: 400 10.5px/1.5 var(--font-mono); color: var(--color-neutral-700); margin: 2px 0 0; }
.sectionlabel { font: 500 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); }

/* ---------------------------------------------------------------- pieces */

.card { border-radius: 8px; box-shadow: var(--hair); padding: 12px; display: flex; flex-direction: column; gap: 11px; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta { font: 400 10.5px/1.4 var(--font-mono); color: var(--color-neutral-600); }
.body { font: 400 12.5px/1.45 var(--font-ui); color: var(--color-neutral-400); }

.pills { display: flex; gap: 7px; flex-wrap: wrap; }
.pill {
  padding: 7px 11px; border-radius: 99px; border: 1px solid var(--color-neutral-800);
  color: var(--color-neutral-500); font: 500 10.5px/1 var(--font-mono);
  min-height: 34px; display: inline-flex; align-items: center;
}
.pill[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-wash-2); color: var(--color-accent-300); }
.pill.ui { font-family: var(--font-ui); font-size: 11.5px; }

.btn {
  width: 100%; min-height: 46px; border-radius: 8px; border: 1px solid var(--color-neutral-800);
  font: 500 13px/1.2 var(--font-ui); color: var(--color-text);
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px;
}
.btn:active { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.btn.primary { border-color: var(--color-accent); color: var(--color-accent-300); background: var(--color-accent-wash); }
.btn.primary:active { background: rgba(145, 132, 217, .22); }
.btn.ghost { border-style: dashed; color: var(--color-neutral-500); }
.btn.ghost:hover { border-color: var(--color-accent); color: var(--color-text); }
.btn[disabled] { opacity: .45; }
.btn.sm { min-height: 38px; font-size: 12px; width: auto; padding: 8px 12px; }

/* 34/36px visual, 44px touch - the handoff is explicit that these must not ship at
   36px of tappable surface. */
.step {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  font: 500 17px/1 var(--font-ui); color: var(--color-text);
}
.step span {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-neutral-800);
  display: grid; place-items: center;
}
.step:active span { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.step[disabled] { opacity: .35; }
.step[disabled]:active span { background: none; }

.input {
  width: 100%; padding: 11px 12px; border-radius: 8px; background: var(--color-bg);
  border: 1px solid var(--color-neutral-800); color: var(--color-text);
  font: 400 14px/1.2 var(--font-ui); min-height: 44px;
}
.input::placeholder { color: var(--color-neutral-600); }
.input:focus { border-color: var(--color-accent); outline: none; }

.tag {
  flex: none; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 4px;
  background: var(--color-neutral-900); color: var(--color-neutral-500);
}
.tag.on { background: var(--color-accent-900); color: var(--color-accent-300); }

.empty {
  border-radius: 8px; box-shadow: var(--hair); padding: 16px 14px;
  font: 400 12.5px/1.5 var(--font-ui); color: var(--color-neutral-500); text-align: center;
}
.empty b { color: var(--color-neutral-300); font-weight: 500; display: block; margin-bottom: 5px; font-size: 13px; }

.banner {
  border-radius: 8px; padding: 10px 12px; background: var(--color-surface);
  font: 400 11.5px/1.45 var(--font-ui); color: var(--color-neutral-400);
  display: flex; gap: 9px; align-items: flex-start;
}
.banner b { color: var(--color-text); font-weight: 500; }

/* hairline grid - 1px gaps read as rules because the wrapper is neutral-900 */
.hgrid { display: grid; gap: 1px; background: var(--color-neutral-900); border-radius: 8px; overflow: hidden; }
.hgrid > * { background: var(--color-bg); padding: 11px 12px; }
.hgrid.two { grid-template-columns: 1fr 1fr; }
.hgrid.three { grid-template-columns: repeat(3, 1fr); }
.kpi .k { font: 500 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); }
.kpi .v { font: 500 21px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; margin-top: 8px; }
.kpi .v.accent { color: var(--color-accent-400); }
.kpi .s { font: 400 10px/1.3 var(--font-mono); color: var(--color-neutral-600); margin-top: 5px; }

/* --------------------------------------------------------------- session */

.chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 7px 11px; border-radius: 99px; border: 1px solid var(--color-neutral-800);
  font: 500 11.5px/1 var(--font-ui); color: var(--color-neutral-400);
}
.chip b { color: var(--color-text); font-weight: 500; }
/* A day chip that is NOT today's is a state worth seeing at a glance. */
.chip.on { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-accent-300); }
.chip.on b { color: var(--color-text); }
.chiprow .btn.sm { margin-left: auto; }

.liftlist { display: flex; flex-direction: column; gap: 7px; }
/* Marks where the day's plan ends and work already logged today begins. The two were
   stacked with nothing between them, which read as one scrambled day whenever the day
   chip sat on another weekday. A label, not a layout change - no row moves. */
.listhead {
  font: 400 10.5px/1.3 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--color-neutral-500);
  padding: 9px 2px 1px;
  border-top: 1px solid var(--color-neutral-900);
  margin-top: 4px;
}
.liftrow {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: 9px; border: 1px solid var(--color-neutral-900);
  text-align: left; cursor: pointer;
}
.liftrow.done { background: var(--color-surface); border-color: transparent; }
.liftrow:active { background: var(--color-surface); }
.tile {
  width: 38px; height: 38px; flex: none; border-radius: 8px; background: var(--color-neutral-900);
  box-shadow: inset 0 0 0 1px var(--color-neutral-800); overflow: hidden;
  display: grid; place-items: center;
  font: 500 13px/1 var(--font-mono); color: var(--color-neutral-600); text-transform: uppercase;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.liftrow .mid { flex: 1; min-width: 0; }
/* These are spans inside a flex row, so they need saying explicitly - otherwise a
   short lift name and its muscle line share one line and the row reads as one blob. */
.liftrow .nm, .liftrow .sub, .liftrow .rt .n,
.planrow .nm, .planrow .sub,
.planpick .nm, .planpick .sub,
.krow .kname, .krow .kread { display: block; }
.liftrow .nm { font: 500 13.5px/1.25 var(--font-ui); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liftrow .sub { font: 400 10.5px/1.3 var(--font-mono); color: var(--color-neutral-600); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liftrow .rt { text-align: right; flex: none; }
.liftrow .rt .n { font: 500 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.liftrow .rt .st { display: block; font: 400 10.5px/1.3 var(--font-mono); margin-top: 4px; color: var(--color-neutral-500); }
.liftrow .rt .st.extra { color: var(--color-accent-400); }
/* A lift that cannot be logged says so on the row, not only inside the sheet. */
.liftrow .rt .st.needs { color: var(--color-accent-300); }
.liftrow .arrows { display: flex; flex: none; }

/* ---------------------------------------------------------------- cardio */

.bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; }
.bars .col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bars .n { font: 500 9.5px/1 var(--font-mono); color: var(--color-neutral-500); }
.bars .bar { width: 100%; border-radius: 2px; }
.bars .d { font: 400 9px/1 var(--font-mono); color: var(--color-neutral-700); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.grid7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Grid and flex children refuse to shrink below their content by default, which sent
   the second stepper off the right edge of the sheet. */
.grid2 > *, .grid4 > *, .grid7 > *, .hgrid > * { min-width: 0; }
.stepper { min-width: 0; border-radius: 8px; box-shadow: var(--hair); padding: 10px 11px; display: flex; flex-direction: column; gap: 8px; }
.stepper .row { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-width: 0; }
.stepper .val { flex: 1; text-align: center; font: 500 19px/1 var(--font-mono); font-variant-numeric: tabular-nums; border: 0; background: none; min-width: 0; padding: 0; }
.confirm { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; background: var(--color-surface); }
.confirm .t { flex: 1; font: 400 11.5px/1.4 var(--font-mono); color: var(--color-neutral-300); }

/* -------------------------------------------------------------- progress */

.sparkwrap { display: flex; align-items: center; gap: 12px; }
.focuscard { border-radius: 8px; background: var(--color-surface); padding: 11px 12px; }
.focuscard .t { font: 500 13px/1.25 var(--font-ui); }
.focuscard .b { font: 400 12px/1.45 var(--font-ui); color: var(--color-neutral-400); margin-top: 5px; }

.krow { display: grid; align-items: center; gap: 8px; padding: 9px 10px; text-align: left; width: 100%; }
.krow.m { grid-template-columns: 8px 1fr 34px 50px 50px; }
.krow.x { grid-template-columns: 1fr 34px 50px 50px; }
.khead { font: 500 9px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-700); }
.khead .r { text-align: right; }
.num { text-align: right; font: 500 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.num.flat { color: var(--color-neutral-600); }
.num.down { color: var(--color-accent-300); }
.num.up { color: var(--color-text); }
.num.none { color: var(--color-neutral-700); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot.d9 { width: 9px; height: 9px; }
.dot.missed { background: var(--cov-missed); }
.dot.minimum { background: var(--cov-minimum); }
.dot.optimal { background: var(--cov-optimal); }
.dot.high { box-shadow: inset 0 0 0 1.5px var(--color-neutral-300); }
.kname { font: 500 12.5px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kread { font: 400 10px/1.3 var(--font-mono); color: var(--color-neutral-600); margin-top: 3px; }
.kread.pr { color: var(--color-neutral-600); }
.kread.prnew { color: var(--color-accent-300); }

.legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font: 400 10px/1.4 var(--font-mono); color: var(--color-neutral-700); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ------------------------------------------------------------------ plan */

.daystrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.day {
  padding: 7px 1px; border-radius: 8px; border: 1px solid var(--color-neutral-900);
  color: var(--color-neutral-600); display: flex; flex-direction: column; gap: 3px; align-items: center;
  min-height: 62px; justify-content: center; overflow: hidden;
}
.day[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-text); }
/* today and tomorrow are marked on the strip itself - a repeating week still has to say
   which day is which, and the set count alone used to read as a date. */
.day.rel { border-color: var(--color-neutral-700); }
.day[aria-pressed="true"].rel { border-color: var(--color-accent); }
.day .k { font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; }
/* The DATE is the big figure, because that is what the eye goes to for "which day". */
.day .dt { font: 500 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-neutral-400); }
.day[aria-pressed="true"] .dt { color: var(--color-text); }
/* The set count always carries its unit, so it can never be mistaken for a date. */
.day .n { font: 400 8px/1 var(--font-mono); color: var(--color-neutral-600); white-space: nowrap; }
.day .rl { font: 500 7.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-300); }

.planrow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; box-shadow: var(--hair); }
/* The tag sits BESIDE the name, not inside it: .nm truncates with an ellipsis, which
   was swallowing "needs setup" on any long lift name. */
.planrow .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.planrow .mid .nm { max-width: 100%; }
.planrow .tag.warn { background: var(--color-accent-900); color: var(--color-accent-300); }
.planrow .nm { font: 500 12.5px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planrow .sub { font: 400 10px/1.3 var(--font-mono); color: var(--color-neutral-600); margin-top: 3px; }
.planrow .sub.live { color: var(--color-accent-300); }
/* The row's destructive control is kept clear of the stepper it sits beside, and it
   confirms before acting. They were adjacent and silent. */
.planrow .drop { margin-left: 6px; }
.planrow .drop span { border-color: transparent; color: var(--color-neutral-600); }
.planrow .drop.armed span { border-color: var(--color-accent); color: var(--color-accent-300); }
.planrow .v { width: 28px; text-align: center; font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }

.coverage { border-radius: 8px; background: var(--color-surface); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.covrow { display: grid; grid-template-columns: 9px 1fr auto 34px 62px; gap: 9px; align-items: center; }
.covrow .nm { font: 400 12px/1.2 var(--font-ui); color: var(--color-neutral-300); }
.covrow .was { font: 400 10px/1 var(--font-mono); color: var(--color-accent-300); }
.covrow .st { text-align: right; font: 400 10px/1 var(--font-mono); color: var(--color-neutral-500); }

.planpick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 8px; border: 1px solid var(--color-neutral-900); text-align: left;
}
.planpick.on { border-color: var(--color-accent); background: var(--color-accent-wash); }
.planpick .nm { font: 500 13px/1.2 var(--font-ui); }
.planpick .sub { font: 400 10px/1.3 var(--font-mono); color: var(--color-neutral-600); margin-top: 4px; }
.planname { display: inline-flex; align-items: center; gap: 6px; font: 500 20px/1.15 var(--font-ui); letter-spacing: -.015em; }
.planname .cv { color: var(--color-neutral-600); font-size: 15px; }
.err { font: 400 11px/1.4 var(--font-ui); color: var(--color-accent-300); }

/* --------------------------------------------------------------- history */

.sessrow { border-radius: 8px; box-shadow: var(--hair); overflow: hidden; }
.sesshead { display: grid; grid-template-columns: 52px 1fr auto 14px; gap: 9px; align-items: center; width: 100%; padding: 11px 12px; text-align: left; }
.sesshead .d { font: 400 11px/1.2 var(--font-mono); color: var(--color-neutral-400); }
.sesshead .l { font: 400 11.5px/1.3 var(--font-ui); color: var(--color-neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesshead .m { font: 400 11px/1 var(--font-mono); color: var(--color-neutral-500); }
.sesshead .c { color: var(--color-neutral-700); transition: transform .16s ease-out; }
.sesshead[aria-expanded="true"] .c { transform: rotate(90deg); }
.sessbody { background: var(--color-surface); padding: 4px 12px 10px; display: flex; flex-direction: column; }
.sessbody .r { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; }
.sessbody .n { font: 400 11.5px/1.3 var(--font-ui); color: var(--color-neutral-300); }
.sessbody .s { font: 400 11px/1.3 var(--font-mono); color: var(--color-neutral-500); white-space: nowrap; }

/* -------------------------------------------------------------- overlays */

.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 20; animation: fade .16s ease-out; }
@keyframes fade { from { opacity: 0 } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21;
  background: var(--color-surface); border-radius: 14px 14px 0 0;
  padding: 13px 18px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 -1px 0 var(--color-neutral-700), 0 -18px 44px rgba(0, 0, 0, .62);
  max-height: 88%; overflow-y: auto;
  animation: up .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes up { from { transform: translateY(100%) } }
.handle { width: 36px; height: 4px; border-radius: 2px; background: var(--color-neutral-800); margin: 0 auto; flex: none; }
.sheethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sheethead h2 { margin: 0; font: 500 17px/1.2 var(--font-ui); }
.sheethead .sub { font: 400 11px/1.4 var(--font-mono); color: var(--color-neutral-600); margin-top: 5px; }
.closebtn { flex: none; font: 500 12px/1 var(--font-ui); color: var(--color-accent-300); padding: 10px; margin: -10px -10px 0 0; }

.setlist { display: flex; flex-direction: column; gap: 5px; }
.setlist .r { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 7px; background: var(--color-bg); }
.setlist .k { font: 400 10.5px/1 var(--font-mono); color: var(--color-neutral-600); }
.setlist .v { font: 500 12.5px/1 var(--font-mono); font-variant-numeric: tabular-nums; }

.full {
  position: absolute; inset: 0; z-index: 30; background: var(--color-bg);
  overflow-y: auto; padding: 16px 18px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 17px;
  animation: fade .16s ease-out;
}
.full.summary { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }
.wm { display: grid; grid-template-columns: 1fr auto 54px; gap: 8px; align-items: center; }
.wm .n { font: 400 12px/1.3 var(--font-ui); color: var(--color-neutral-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm .t { font: 400 12px/1 var(--font-mono); color: var(--color-neutral-300); }
.wm .d { text-align: right; font: 500 11.5px/1 var(--font-mono); color: var(--color-neutral-600); }
.wm .d.up { color: var(--color-accent-400); }
.note { border-radius: 8px; background: var(--color-surface); padding: 12px; }
.note .t { font: 500 12.5px/1.3 var(--font-ui); }
.note .b { font: 400 12px/1.45 var(--font-ui); color: var(--color-neutral-400); margin-top: 5px; }
.nextrow { display: flex; align-items: flex-start; gap: 10px; }
.nextrow .t { flex: 1; font: 400 12.5px/1.45 var(--font-ui); color: var(--color-neutral-400); }

svg.chart { display: block; width: 100%; height: auto; overflow: visible; }

/* RIR sits under the two steppers rather than beside them: a third stepper does not fit
   at 390px, and RIR is a one-of-six choice, not a value you nudge. It is ADDED to the
   sheet - nothing was moved to make room. */
.rirrow { display: flex; align-items: center; gap: 10px; }
.rirrow .label { flex: none; }
.rirrow .pills { flex: 1; flex-wrap: nowrap; justify-content: space-between; }
.rirrow .pill { min-width: 42px; min-height: 44px; justify-content: center; padding: 7px 0; }

/* Last time's actual sets, in the log sheet. This is the reference the app exists to
   give - what you did - and it replaced a proposed load, which the user did not want:
   the intelligence is in the tracking, not in telling you what to lift. */
.lastbox { border-radius: 8px; background: var(--color-surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.lastbox .sets { font: 500 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); }
.lastbox .sets i { font-style: normal; color: var(--color-neutral-500); }

/* An unfinished session from another day. Loud on purpose: it used to be discarded
   silently on the next day's load, which destroyed sets that were already on disk. */
.banner.warn { box-shadow: 0 0 0 1px var(--color-accent); }
.banner .row2 { display: flex; gap: 8px; margin-top: 10px; }
.banner .row2 .btn { width: auto; flex: 1; }