/* Lift Log design (2026-11-01 design pass)
   World: a commercial gym — dark rubber floor, chalk, stamped numbers on iron plates.
   Quiet graphite surfaces, chalk-white primary button, ONE accent (plate yellow) used only
   for the add-weight tip, the finished timer and focus. All numbers use a monospace font,
   like the stamped digits on a weight stack (the "signature" detail).
   Spacing is on a 4px grid. */
:root {
  --bg: #141415;          /* page */
  --card: #19191b;
  --raised: #232325;      /* inputs, tip */
  --hairline: rgba(237, 237, 237, 0.08);
  --text: #ededed;        /* primary */
  --text-2: #a1a1a6;      /* secondary */
  --text-3: #85858b;      /* muted: meta, column labels */
  --hint: #5e5e64;        /* gray hints inside boxes (last time's numbers) */
  --accent: #f5c518;      /* plate yellow */
  --chalk: #ededed;       /* Save button */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

/* Anything marked hidden stays hidden, even if its style sets a display value */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 0 16px 32px;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

select,
input,
button {
  font: inherit;
  font-size: 16px; /* 16px+ stops iPhone Safari from zooming in when you tap an input */
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}

h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

#today {
  margin: 0;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 12px;
}

select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
}

/* ---------- Tabs and views ---------- */

/* Log tab only: room for the fixed timer + Save bar, which (with the day picker) is hidden elsewhere */
body[data-view="log"] {
  padding-bottom: 176px;
}

body:not([data-view="log"]) footer,
body:not([data-view="log"]) #day-picker {
  display: none;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
}

.tab {
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.tab[aria-current="page"] {
  background: var(--raised);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* A plain card for the Progress and More tabs */
.panel {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--card);
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
}

.panel-note {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 13px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-head h2 {
  margin: 0;
}

.panel-head select {
  min-width: 0;
  max-width: 60%;
}

/* Headline above the main chart: "140 lb   +10 lb since Oct 6" */
.headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.headline-figure {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.headline-change {
  color: var(--text-2);
  font-size: 13px;
}

.chart-box {
  position: relative; /* Chart.js sizes the canvas to this box */
}

.chart-main {
  height: 240px;
}

.chart-small {
  height: 140px;
  margin-top: 12px;
}

/* Input + button on one line */
.inline-form {
  display: flex;
  gap: 8px;
}

.inline-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
  font-family: var(--mono);
  text-align: center;
}

.inline-form .action {
  height: 44px;
}

.form-status {
  min-height: 16px;
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: 12px;
}

.panel textarea {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
  font: inherit;
  font-size: 16px;
  color: inherit;
  resize: vertical;
}

#ai-prompt {
  font-family: var(--mono);
}

.change-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-list li {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}

/* Dated list: date on the left, number on the right */
.entry-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.entry-list li {
  display: flex;
  justify-content: space-between;
  height: 36px;
  align-items: center;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
}

.entry-list .entry-date {
  color: var(--text-2);
}

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

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

.exercise {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--card);
}

.exercise-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.exercise h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.target {
  margin: 0;
  flex-shrink: 0;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 13px;
}

.last-time {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 13px;
}

.last-time .figures {
  font-family: var(--mono);
  word-spacing: 4px;
}

/* The one standout moment: time to add weight */
.tip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
}

.tip-label {
  color: var(--text-2);
  font-size: 13px;
}

.tip-figure {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tip-figure .from {
  color: var(--text-3);
}

/* Stalled: quiet on purpose; the yellow accent is saved for "add weight".
   Grid: label and suggestion on the left, Swap button on the right. */
.stall {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
}

.stall-label {
  grid-column: 1;
  color: var(--text-3);
  font-size: 13px;
}

.stall-swap {
  grid-column: 1;
  margin-top: 4px;
  color: var(--text);
}

/* Set rows: [#] [lb] [reps]. minmax(0, 1fr) lets the boxes shrink on narrow phones. */
.set-grid {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.col-label {
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.set-num {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 13px;
}

.set-grid input {
  width: 100%;
  min-width: 0;
  height: 44px; /* Apple's minimum comfortable tap size */
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color 150ms var(--ease);
}

.set-grid input:focus {
  border-color: rgba(237, 237, 237, 0.32);
  outline: none;
}

.set-grid input::placeholder {
  color: var(--hint);
}

/* Card actions: Demo link, Swap button */
.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.action:active {
  background: var(--raised);
  color: var(--text);
}

.action:disabled {
  opacity: 0.5;
}

/* "Instead of Barbell bench press" on an injury replacement */
.replaces {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: 13px;
}

.hidden-note {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 13px;
}

.stall .action {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Swap menu: opens at the bottom of the card */
.swap-menu {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.menu-label {
  margin: 0 0 8px;
  color: var(--text-3);
  font-size: 12px;
}

.menu-option {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 4px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
  text-align: left;
}

.menu-option:disabled {
  color: var(--text-3);
}

/* Sore joints panel (under the header) */
.injuries {
  margin-bottom: 12px;
}

.injuries summary {
  display: inline-block;
  padding: 4px 0;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  list-style: none; /* hide the default triangle */
}

.injuries summary::-webkit-details-marker {
  display: none;
}

.injuries summary.active {
  color: var(--text);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  border: none;
}

.chips legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--text-3);
  font-size: 12px;
}

/* A checkbox that looks like a small tag; checked = chalk white */
.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 14px;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.chip input:checked + span {
  background: var(--chalk);
  color: #141415;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Add exercise */
.add-exercise {
  margin-bottom: 12px;
}

.add-open {
  width: 100%;
  justify-content: center;
  height: 44px;
}

.add-form h2 {
  margin-bottom: 12px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-3);
  font-size: 12px;
}

.field input {
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
}

.field input[type="number"] {
  font-family: var(--mono);
  text-align: center;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.add-form .chips {
  margin-top: 16px;
}

.form-error {
  min-height: 16px;
  margin: 8px 0 0;
  color: #e5484d;
  font-size: 13px;
}

.action.primary {
  background: var(--chalk);
  color: #141415;
  border-color: transparent;
}

/* ---------- Footer: rest timer + Save ---------- */

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--bg);
}

.timer {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: 12px;
  padding: 0 4px 0 12px;
  border-radius: 8px;
}

#timer-text {
  flex: 1;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

#timer-text.idle {
  color: var(--text-3);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
}

#timer-stop {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--raised);
}

/* Time's up: three quick flashes, then the yellow "Go" stays until the next set */
.timer.done #timer-text {
  color: var(--accent);
}

.timer.done {
  animation: flash 200ms var(--ease) 6 alternate;
}

@keyframes flash {
  to { background: var(--raised); }
}

#save-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: var(--chalk);
  color: #141415;
  font-weight: 500;
  transition: transform 120ms var(--ease);
}

#save-btn:active {
  transform: scale(0.98);
}

#save-status {
  min-height: 16px;
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

/* Each .set-row's children join the grid above, so the columns line up across rows */
.set-row {
  display: contents;
}