/* ==========================================================================
   Weight room, not dashboard.
   Cast iron and chalk. Collar yellow appears in exactly three places:
   the current set, the active tab, and the progression-ready badge.
   ========================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --iron:        #1C1C1E;
  --iron-lift:   #232326;
  --iron-edge:   #2E2E33;
  --chalk:       #F2F0EB;
  --steel:       #8A8F98;
  --steel-dim:   #5A5F68;
  --collar:      #E8B71A;
  --flag:        #C4453A;

  --num: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --ui:  'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tap: 44px;
  --pad: 16px;
  --radius: 4px;      /* iron has edges, not pillows */

  --nav-h: calc(58px + env(safe-area-inset-bottom));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--iron);
  color: var(--chalk);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.4;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* Numbers are the content. Everything else is a label. Roughly 4:1. */
.num {
  font-family: var(--num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 0.9;
}

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ------------------------------------------------------------------ layout */

#app {
  min-height: 100dvh;
  padding-bottom: var(--nav-h);
}

/* While the rest timer is up it occupies a strip above the tab bar, which
   would otherwise sit on top of the last card on the screen. */
body:has(#timer.on) #app { padding-bottom: calc(var(--nav-h) + 76px); }

.screen { display: none; padding: var(--pad) var(--pad) 32px; }
.screen.active { display: block; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) var(--pad) 12px;
  background: linear-gradient(var(--iron) 72%, transparent);
}

.topbar h1 {
  margin: 0;
  font-family: var(--num);
  font-size: 30px; font-weight: 700; line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.01em;
}

.topbar .sub { display: block; margin-top: 3px; }

/* ------------------------------------------------------------------- nav */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #161618;
  border-top: 1px solid var(--iron-edge);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbar button {
  appearance: none; border: 0; background: none;
  min-height: var(--tap);
  padding: 9px 4px 8px;
  color: var(--steel);
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer;
  border-top: 2px solid transparent;
  margin-top: -1px;
}

.tabbar button[aria-selected='true'] {
  color: var(--collar);
  border-top-color: var(--collar);
}

.tabbar svg { display: block; margin: 0 auto 3px; width: 21px; height: 21px; }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--iron-lift);
  border: 1px solid var(--iron-edge);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px var(--pad) 11px;
}

.card-title {
  font-family: var(--num); font-weight: 600;
  font-size: 25px; line-height: 1; text-transform: uppercase;
  letter-spacing: 0.005em;
}

.scheme { font-family: var(--num); font-size: 25px; font-weight: 700; color: var(--steel); white-space: nowrap; }

.lastline {
  padding: 0 var(--pad) 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* Last session's numbers — the single most important thing on the screen. */
.last-chip {
  font-family: var(--num); font-size: 21px; font-weight: 600;
  color: var(--chalk);
  background: #1A1A1C;
  border: 1px solid var(--iron-edge);
  border-radius: 3px;
  padding: 2px 7px 1px;
  white-space: nowrap;
}
.last-chip.faded { color: var(--steel-dim); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--collar); color: #17150C;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px;
}

.badge-quiet {
  background: none; color: var(--steel);
  border: 1px solid var(--iron-edge);
}

/* ------------------------------------------------------------- set rows */

.sets { border-top: 1px solid var(--iron-edge); }

.setrow {
  display: grid;
  grid-template-columns: 34px 1fr 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border-bottom: 1px solid #232326;
  position: relative;
}
.setrow:last-child { border-bottom: 0; }

.setrow.current::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--collar);
}

.setrow.done { background: #1F1F22; }

.setno {
  font-family: var(--num); font-size: 15px; font-weight: 600;
  color: var(--steel); text-align: center;
}
.setrow.current .setno { color: var(--collar); }

/* Big, sweaty-finger friendly, numeric keypad on every one. */
.setrow input[type='text'],
.setrow input[type='number'] {
  width: 100%;
  min-height: var(--tap);
  background: #141416;
  border: 1px solid var(--iron-edge);
  border-radius: 3px;
  color: var(--chalk);
  font-family: var(--num); font-weight: 700; font-size: 27px;
  text-align: center;
  padding: 2px 4px 0;
  appearance: none; -moz-appearance: textfield;
}
.setrow input::-webkit-outer-spin-button,
.setrow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.setrow input::placeholder { color: var(--steel-dim); font-weight: 600; }

.setrow input:focus-visible,
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--collar);
  outline-offset: 1px;
}

.logbtn {
  min-width: var(--tap); min-height: var(--tap);
  display: grid; place-items: center;
  background: #141416; border: 1px solid var(--iron-edge); border-radius: 3px;
  color: var(--steel); cursor: pointer; padding: 0;
}
.logbtn[data-done='1'] { background: var(--collar); border-color: var(--collar); color: #17150C; }

.setrow-head {
  display: grid; grid-template-columns: 34px 1fr 1fr 40px; gap: 8px;
  padding: 8px 12px 2px 10px;
}
.setrow-head span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-dim); text-align: center; }

/* Card footer controls: add a set, show RPE. */
.card-actions { display: grid; grid-template-columns: 1fr 1fr; }
.card-action {
  width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--iron-edge);
  color: var(--steel); padding: 10px var(--pad); min-height: var(--tap);
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
}
.card-actions .card-action + .card-action {
  text-align: right; border-left: 1px solid var(--iron-edge);
}
.rpe-col { display: none; }
.card[data-rpe='1'] .rpe-col { display: block; }
.card[data-rpe='1'] .setrow,
.card[data-rpe='1'] .setrow-head { grid-template-columns: 34px 1fr 1fr 58px 40px; }

/* ------------------------------------------------------------ plate stack */

.plate-stack { display: block; height: 26px; width: 100%; max-width: 190px; }
/* The just-logged stack is the payoff moment; at 26px it reads as a smudge. */
.plate-stack.lg { height: 42px; max-width: 100%; }
.plate-stack .bar { fill: var(--steel-dim); }
.plate-stack .plate { fill: var(--steel); }
.plate-stack .plate.hot { fill: var(--collar); }
.plate-stack .solid { fill: var(--steel); }
.plate-stack .belt { fill: none; stroke: var(--collar); stroke-width: 2; }

@media (prefers-reduced-motion: no-preference) {
  .plate-stack .draw-in { animation: plate-in 220ms ease-out both; }
  @keyframes plate-in { from { opacity: 0; transform: scaleY(0.3); } to { opacity: 1; transform: scaleY(1); } }
}

/* --------------------------------------------------------------- timer */

.timer {
  position: fixed; left: 0; right: 0; bottom: var(--nav-h); z-index: 35;
  display: none;
  align-items: center; gap: 12px;
  padding: 10px var(--pad) 12px;
  background: #161618; border-top: 1px solid var(--collar);
}
.timer.on { display: flex; }
.timer.fire { background: var(--collar); border-top-color: var(--collar); }
.timer.fire .timer-num, .timer.fire .label, .timer.fire button { color: #17150C; }

.timer-num { font-family: var(--num); font-weight: 700; font-size: 42px; color: var(--collar); min-width: 96px; }
.timer-bar { flex: 1; height: 3px; background: var(--iron-edge); overflow: hidden; }
.timer-bar i { display: block; height: 100%; background: var(--collar); width: 100%; }
.timer button {
  min-height: var(--tap); min-width: var(--tap);
  background: none; border: 1px solid var(--iron-edge); border-radius: 3px;
  color: var(--steel); font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0 10px; cursor: pointer;
}

/* ---------------------------------------------------------------- macros */

.macro { margin-bottom: 14px; }
.macro-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.macro-val { font-family: var(--num); font-weight: 700; font-size: 30px; }
.macro-target { font-family: var(--num); font-size: 17px; color: var(--steel); }
.macro-track { height: 8px; background: #141416; border: 1px solid var(--iron-edge); overflow: hidden; }
.macro-fill { height: 100%; background: var(--steel); transition: width 200ms ease-out; }
.macro-fill.hit { background: var(--chalk); }
.macro-fill.over { background: var(--flag); }
@media (prefers-reduced-motion: reduce) { .macro-fill { transition: none; } }

.meal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 20px 0 6px;
}

.entry {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #232326;
  min-height: var(--tap);
}
.entry:last-child { border-bottom: 0; }
.entry-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-kcal { font-family: var(--num); font-weight: 700; font-size: 23px; }

/* Saved foods: two taps, big targets, most-used first. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: var(--tap);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--iron-lift); border: 1px solid var(--iron-edge); border-radius: 3px;
  color: var(--chalk); padding: 6px 12px; cursor: pointer;
  font-family: var(--ui); font-size: 14px;
}
.chip b { font-family: var(--num); font-weight: 700; font-size: 19px; color: var(--steel); }
.chip.star { border-color: var(--collar); }

/* --------------------------------------------------------------- buttons */

.btn {
  min-height: var(--tap);
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--iron-lift); color: var(--chalk);
  border: 1px solid var(--iron-edge); border-radius: var(--radius);
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 12px 16px; cursor: pointer;
}
.btn-primary { background: var(--collar); border-color: var(--collar); color: #17150C; }
.btn-quiet { background: none; }
.btn-danger { color: var(--flag); border-color: #3A2A29; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-row { display: flex; gap: 8px; }

/* The 44px floor is a design constraint, not a suggestion — one hand, sweaty
   fingers, between sets. It hangs off the elements themselves rather than off
   `.field`, because relying on the wrapper is exactly how this app already
   shipped four macro inputs with no sizing at all: they sat outside .field and
   inherited nothing. A floor you have to remember to opt into is not a floor.
   Checkboxes get WCAG 2.5.8's 24px minimum instead; 44px stretches the glyph. */
input:not([type='checkbox']):not([type='radio']):not([type='file']),
select, textarea { min-height: var(--tap); }
input[type='checkbox'] { width: 24px; height: 24px; }
/* A file input renders an unstyled native button — white on white, which reads
   as a browser artefact dropped into the page rather than part of the app. */
input[type='file'] {
  min-height: var(--tap); width: 100%;
  color: var(--steel); font-family: var(--ui); font-size: 13px;
}
input[type='file']::file-selector-button {
  min-height: var(--tap); margin-right: 10px; padding: 0 14px;
  background: #141416; border: 1px solid var(--iron-edge); border-radius: 3px;
  color: var(--chalk); font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
}

.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap);
  background: #141416; border: 1px solid var(--iron-edge); border-radius: 3px;
  color: var(--chalk); font-family: var(--ui); font-size: 16px; padding: 10px 12px;
}
/* .n carries the full input treatment on its own, because number inputs are
   often dropped straight into a grid rather than wrapped in a .field. Without
   this they fall back to the browser default: unstyled, and 177px wide each,
   which overflows a 375px viewport four-across. */
input.n,
.field input.n {
  width: 100%;
  min-height: var(--tap);
  background: #141416;
  border: 1px solid var(--iron-edge);
  border-radius: 3px;
  color: var(--chalk);
  font-family: var(--num); font-weight: 700; font-size: 24px;
  text-align: center;
  padding: 8px 4px;
  appearance: none;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Grid children must be allowed to shrink below their intrinsic width. */
.grid2 > *, .grid4 > * { min-width: 0; }
.grid2 input, .grid4 input, .grid2 select, .grid4 select { width: 100%; }

/* ---------------------------------------------------------------- charts */

.chart { width: 100%; height: 190px; }
.chart-note {
  color: var(--steel); font-size: 12px; line-height: 1.45;
  border-left: 2px solid var(--iron-edge); padding-left: 10px; margin: 8px 0 0;
}
.chart-note.warn { border-left-color: var(--flag); color: #E0A9A4; }

.bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; }
.bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.bars .col i { display: block; background: var(--steel); }
.bars .col i.low { background: var(--flag); }
.bars .col i.good { background: var(--chalk); }
.bars .col span { font-size: 10px; color: var(--steel-dim); text-align: center; }

/* ------------------------------------------------------------ connection */

.conn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--steel);
}
.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--steel-dim); }
.conn[data-state='online'] i { background: #4E9A5A; }
.conn[data-state='offline'] i { background: var(--flag); }
.conn[data-state='queued'] i { background: var(--collar); }

/* ---------------------------------------------------------------- misc */

.muted { color: var(--steel); }
.empty { color: var(--steel); padding: 26px 4px; text-align: center; }
.divider { height: 1px; background: var(--iron-edge); margin: 22px 0; border: 0; }
.stack > * + * { margin-top: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.sheet {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 10, 11, 0.72);
  display: none; align-items: flex-end;
}
.sheet.on { display: flex; }
.sheet-body {
  width: 100%; max-height: 88dvh; overflow-y: auto;
  background: var(--iron); border-top: 1px solid var(--iron-edge);
  padding: var(--pad) var(--pad) calc(env(safe-area-inset-bottom) + 24px);
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 14px); z-index: 70;
  background: var(--iron-lift); border: 1px solid var(--iron-edge);
  color: var(--chalk); padding: 11px 16px; border-radius: var(--radius);
  font-size: 13px; max-width: calc(100vw - 32px);
}
.toast.bad { border-color: var(--flag); }

/* An inline action inside a toast — the update prompt's "Restart now". */
.linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--collar); font-family: var(--ui); font-size: 13px; font-weight: 700;
  text-decoration: underline; cursor: pointer; min-height: auto;
}

.history-day { border-bottom: 1px solid var(--iron-edge); padding: 13px 0; }
.history-day summary { cursor: pointer; list-style: none; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-day summary::-webkit-details-marker { display: none; }
.history-ex { padding: 10px 0 2px; }

@media (max-width: 359px) {
  .setrow input[type='text'] { font-size: 22px; }
  .card-title, .scheme { font-size: 21px; }
}