/* ============================================================
   Fitness App — dark, mobile-first gym log
   One ember-orange accent for primary actions; quiet everywhere else.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Palette */
  --bg:          #0e1014;
  --surface:     #171a20;
  --surface-2:   #1f232b;
  --border:      #2b313b;
  --border-soft: #232831;
  --text:        #f3f5f8;
  --muted:       #99a1ad;
  --faint:       #8a93a1;  /* placeholder text — lifted to meet AA contrast */

  /* Ember accent — energy for Save / Add only */
  --accent:        #ff6a2b;
  --accent-press:  #e85a1f;
  --accent-soft:   rgba(255, 106, 43, 0.13);
  --on-accent:     #1a0d05;

  --success:      #3ddc97;
  --success-soft: rgba(61, 220, 151, 0.10);
  --danger:       #ff6b6b;
  --danger-soft:  rgba(255, 107, 107, 0.12);

  /* Type scale */
  --fs-xs:  0.8125rem;
  --fs-sm:  0.9375rem;
  --fs-base: 1.0625rem;  /* 17px — keeps inputs above iOS zoom threshold */
  --fs-lg:  1.25rem;
  --fs-xl:  1.6rem;
  --fs-2xl: 2rem;

  /* Spacing */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;

  --radius:    14px;
  --radius-sm: 10px;
  --tap: 48px;

  --ff-display: "Archivo", system-ui, -apple-system, sans-serif;
  --ff-body:    "Archivo", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: 480px;
  padding: max(var(--s5), env(safe-area-inset-top))
           var(--s4)
           calc(var(--s8) + env(safe-area-inset-bottom));
}

/* ===== Typography ===== */
h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  text-align: center;
  margin: var(--s4) 0 var(--s6);
}

h2 {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 var(--s4);
}

/* ===== Views & transitions ===== */
.view[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .view:not([hidden]) {
    animation: view-in 0.25s ease both;
  }
  @keyframes view-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ===== Forms ===== */
form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

input {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: var(--tap);
  padding: 0 var(--s3);
  width: 100%;
  min-width: 0;   /* allow flex/grid items to shrink below intrinsic width */
  max-width: 100%;
}

/* Date inputs carry an intrinsic native width on mobile; normalise it so the
   field can't push past its container. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }

input::placeholder { color: var(--faint); }

input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Block (not flex) so the browser keeps the legend's border-notch — otherwise
   the top border draws straight through the heading text. */
fieldset {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  padding: var(--s5) var(--s4) var(--s4);
  margin: 0;
}

legend {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0 var(--s2);
}

/* Stack exercise rows with breathing room; gap before the add button. */
#exercise-rows,
.edit-exercise-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

/* ===== Buttons ===== */
button {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: 700;
  min-height: var(--tap);
  padding: 0 var(--s5);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.06s ease, opacity 0.15s ease;
}

button:hover { background: var(--accent-press); }
button:active { transform: scale(0.985); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Quiet secondary action (Cancel, etc.) */
button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
}
button.secondary:hover { background: var(--surface-2); }

/* "Add exercise" — clean accent ghost button */
#add-exercise,
.edit-add-exercise {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  min-height: 42px;
  padding: 0 var(--s4);
  font-size: var(--fs-sm);
}
#add-exercise:hover,
.edit-add-exercise:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Destructive */
button.danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  font-weight: 600;
}
button.danger:hover { background: var(--danger-soft); }

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

/* Headings receive programmatic focus only (to announce a view / move the caret);
   they are not interactive, so don't show a focus ring on them. */
[tabindex="-1"]:focus {
  outline: none;
}

/* ===== Messages (error / info bubbles) ===== */
.message {
  margin: 0;
  font-size: var(--fs-sm);
}
.message:empty { display: none; }

.message.error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(255, 107, 107, 0.28);
  padding: var(--s3);
  border-radius: var(--radius-sm);
}
.message.info {
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid rgba(61, 220, 151, 0.28);
  padding: var(--s3);
  border-radius: var(--radius-sm);
}

/* ===== Toggle links ===== */
.toggle {
  margin: var(--s5) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.toggle a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.toggle a:hover { text-decoration: underline; }

/* ===== Auth panels ===== */
#login-form,
#register-form,
#forgot-form,
#reset-form,
#verify-view {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--s5);
}
#verify-view #resend-btn { align-self: flex-start; }
#verify-view { text-align: left; }
#verify-view h2 { margin-bottom: var(--s3); }
#verify-view p { margin: 0 0 var(--s3); color: var(--muted); }
#verify-view strong { color: var(--text); }

/* ===== Logged-in header ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.greeting {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted);
}
.greeting strong {
  display: block;
  color: var(--text);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}
#logout-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--fs-sm);
  min-height: 40px;
  padding: 0 var(--s4);
  flex: none;
}
#logout-btn:hover { background: var(--surface-2); color: var(--text); }

/* ===== Log-a-workout panel ===== */
#workout-area {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--s5);
  margin-bottom: var(--s8);
}

/* ===== Exercise rows (log + edit) =====
   Top line: name (flex-grows) + compact remove.  Below: sets / reps / weight. */
.exercise-row {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.exercise-top {
  display: flex;
  align-items: stretch;   /* name input and × share the same height */
  gap: var(--s2);
}
.exercise-top .ex-name {
  flex: 1;                /* fill the row; no leftover gap */
  min-width: 0;
}

.exercise-nums {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s2);
}

/* Tighter padding + no native spinners so short placeholders aren't clipped. */
.exercise-row input[type="number"] {
  padding: 0 var(--s2);
  -moz-appearance: textfield;
  appearance: textfield;
}
.exercise-row input[type="number"]::-webkit-outer-spin-button,
.exercise-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.exercise-row input::placeholder { font-size: var(--fs-sm); }

/* Compact, fixed-width remove button that stretches to the name input's height. */
.remove-exercise {
  flex: none;
  width: 48px;
  align-self: stretch;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--danger);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}
.remove-exercise:hover { background: var(--danger-soft); }

/* ===== History ===== */
#history-area { margin-top: 0; }

.user-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.user-tab {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 var(--s4);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.user-tab:hover { background: var(--surface); }
.user-tab.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.tabs-loading {
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--s2) 0;
}

.workout-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

.workout-header {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.workout-date {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}
.workout-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--muted);
}
.workout-actions {
  margin-left: auto;
  display: flex;
  gap: var(--s3);
}
.workout-actions button {
  min-height: 44px;
  padding: 0 var(--s4);
  font-size: var(--fs-sm);
}

.exercise-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.exercise-line {
  font-size: var(--fs-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.muted-line {
  color: var(--muted);
  font-style: italic;
}

/* ===== Loading ===== */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  color: var(--muted);
  font-size: var(--fs-sm);
  padding: var(--s6) 0;
}
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex: none;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Empty state ===== */
.empty-state {
  text-align: center;
  padding: var(--s8) var(--s4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin: 0 0 var(--s2);
}
.empty-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ===== Edit form ===== */
.edit-actions {
  display: flex;
  gap: var(--s2);
}
.edit-actions .edit-save { flex: 1; }