/* --- src/styles/base.css --- */

/* QuickLiftingJournal — base.css
 * Reset, root variables, and page-level layout. Mobile-first: this is used
 * at the gym, one-handed, on a phone screen. Component styles (buttons,
 * cards, etc.) live in components.css.
 */

:root {
  --color-bg: #f6f5f2;
  --color-surface: #ffffff;
  --color-border: #e2e0da;
  --color-text: #1f1e1c;
  --color-text-muted: #6b6a65;
  --color-text-faint: #9a9890;
  --color-primary: #1d6e56;
  --color-primary-text: #ffffff;
  --color-pr: #b5651d;
  --color-pr-bg: #fbeee2;
  --color-danger: #a33d2d;
  --color-warn: #d9a02c;
  --color-warn-text: #3a2405;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 16px;
  line-height: 1.4;
}

h1, h2, h3, p {
  margin: 0;
}

button, input {
  font-family: inherit;
  font-size: inherit;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg);
  padding: 1rem 1rem 3rem;
}

.screen[hidden] {
  display: none !important;
}

.screen-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.screen-header h2 {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
}

.app-header {
  margin-bottom: 1.5rem;
}

.app-header h1 {
  font-size: 22px;
  font-weight: 600;
}

.muted-text {
  color: var(--color-text-muted);
  font-size: 14px;
}

.faint-text {
  color: var(--color-text-faint);
  font-size: 12px;
}

.section-gap {
  margin-top: 1.5rem;
}


/* --- src/styles/components.css --- */

/* QuickLiftingJournal — components.css
 * Buttons, cards, set rows, badges, and the rest timer bar. Pairs with
 * base.css (reset/root vars/layout).
 */

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

.btn-primary,
.btn-secondary,
.btn-icon,
.btn-primary-sm,
.btn-text {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 0.9rem;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--radius-lg);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 14px;
  border-radius: var(--radius-lg);
  margin-top: 0.6rem;
}

.btn-primary-sm {
  padding: 0.45rem 0.9rem;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
}

.btn-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.btn-text {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 0.25rem 0;
}

/* .btn-secondary is normally applied to <button>s; #btn-give-feedback is
   an <a> instead, which needs its underline and default text color
   stripped to render identically to its button siblings on the Home
   screen. display:block/width already come from .btn-secondary itself. */
#btn-give-feedback {
  text-decoration: none;
  text-align: center;
}

.btn-danger-text {
  border: none;
  background: none;
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

/* ---- pick-list cards ---- */

.picklist-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  margin-bottom: 10px;
}

.picklist-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.picklist-card-main {
  flex: 1;
  cursor: pointer;
}

.picklist-card-label {
  font-size: 15px;
  font-weight: 600;
}

.picklist-card-more {
  color: var(--color-text-faint);
  font-weight: 400;
}

.picklist-card-date {
  margin-top: 4px;
}

.picklist-card-expanded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.picklist-card-expanded-item {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ---- exercise queue (logging screen) ---- */

.exercise-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  margin-bottom: 10px;
}

.exercise-card.is-current {
  border-color: var(--color-primary);
}

.exercise-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.exercise-card-title {
  font-size: 15px;
  font-weight: 600;
}

.exercise-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.exercise-reorder {
  display: flex;
  gap: 2px;
  margin-right: 4px;
  border-right: 1px solid var(--color-border);
  padding-right: 6px;
}

.reorder-btn {
  padding: 0.15rem 0.4rem;
  font-size: 14px;
  line-height: 1;
}

.reorder-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.exercise-reference,
.exercise-nudge {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.history-toggle-btn {
  font-size: 12px;
  padding: 0;
  margin-left: 4px;
}

.exercise-history-panel {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.exercise-history-session {
  margin-bottom: 10px;
}

.exercise-history-session:last-child {
  margin-bottom: 0;
}

.exercise-history-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.exercise-history-set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}

.exercise-history-set-label {
  color: var(--color-text-faint);
  width: 42px;
  flex-shrink: 0;
}

.exercise-history-col {
  min-width: 52px;
}

.set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}

.set-row:last-of-type {
  border-bottom: none;
}

.set-row-number {
  color: var(--color-text-faint);
  width: 20px;
}

.set-row-detail {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.set-edit-btn {
  flex-shrink: 0;
}

.set-edit-form {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.set-edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-pr-bg);
  color: var(--color-pr);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}

.warmup-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}

/* isPR is always false on a warm-up set, so the PR badge never doubles up
   next to this one in the same row — see logSet in 30-session.js. */
.set-row .warmup-badge + .pr-badge {
  margin-left: 0;
}

.warmup-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.warmup-toggle.is-active {
  background: var(--color-bg);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.side-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

.side-selector {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.side-pill {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.side-pill.is-active {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.set-entry-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.set-entry-row input[type="number"] {
  width: 56px;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  /* stepper buttons flank this input, no need for the native spinner */
  -moz-appearance: textfield;
}

.set-entry-row input[type="number"]::-webkit-outer-spin-button,
.set-entry-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-stepper {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-stepper:active {
  background: var(--color-bg);
}

.set-entry-label {
  font-size: 12px;
  color: var(--color-text-faint);
}

.set-entry-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.add-exercise-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.add-exercise-form input[type="text"] {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

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

.rest-timer {
  background: var(--color-primary);
  color: var(--color-primary-text);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: 14px;
  transition: background-color 0.2s ease;
  /* Beta feedback fix (2026-08-08): stays visible while scrolling through
     the exercise queue instead of scrolling away with the rest of the
     screen. Sticky (not fixed) so it still reserves its own space in
     normal flow when not stuck — no compensating padding needed on the
     content below it, and it naturally stops being sticky once the
     screen it's on is hidden. */
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.rest-timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rest-timer.rest-timer-warn {
  background: var(--color-warn);
  color: var(--color-warn-text);
}

.rest-timer.rest-timer-done {
  background: var(--color-danger);
  color: var(--color-primary-text);
}

.rest-timer button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: inherit;
  border-radius: var(--radius-md);
  padding: 0.3rem 0.6rem;
  font-size: 13px;
  cursor: pointer;
}

.rest-timer-warn button {
  border-color: rgba(58, 36, 5, 0.4);
}

.rest-timer-pills {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.rest-pill {
  flex: 1;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: inherit;
  border-radius: var(--radius-md);
  padding: 0.35rem 0.4rem;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rest-timer-warn .rest-pill {
  background: rgba(58, 36, 5, 0.1);
  border-color: rgba(58, 36, 5, 0.35);
}

/* ---- summary screen ---- */

.summary-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 1rem;
}

.summary-stat {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem;
  text-align: center;
}

.summary-stat-value {
  font-size: 18px;
  font-weight: 700;
}

.summary-stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.summary-pr-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.summary-name-field {
  margin-top: 1.25rem;
}

.summary-name-field label {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.summary-name-field input[type="text"] {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 2rem 0;
}

/* ---- Resume-workout prompt (2026-08-08) ---- */

.resume-prompt {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.resume-prompt .btn-primary,
.resume-prompt .btn-secondary {
  margin-top: 10px;
}

.resume-delete-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

/* ---- Muscles screen (Phase 1.8) ---- */

.muscle-volume-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.muscle-volume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.muscle-volume-name {
  font-weight: 600;
  font-size: 14px;
}

/* Two chips per row (last week, this week) as of 2026-08-08 — was one. */
.muscle-volume-weeks {
  display: flex;
  gap: 6px;
}

.muscle-volume-count {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 64px;
  text-align: center;
}

/* Thresholds match MLL.config.MUSCLE_VOLUME_LOW/HIGH, applied to each
   week's chip independently — under LOW is red (undertrained that week),
   LOW-HIGH is yellow, at/above HIGH is green. Reuses the existing danger/
   warn/primary tokens rather than adding new color variables. */
.muscle-volume-count.muscle-volume-low {
  background: var(--color-danger);
  color: var(--color-primary-text);
}

.muscle-volume-count.muscle-volume-mid {
  background: var(--color-warn);
  color: var(--color-warn-text);
}

.muscle-volume-count.muscle-volume-high {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* Column headers ("Last week" / "This week") above the chips — plain
   text, not colored, aligned over the same two-chip width so the labels
   line up with the columns they describe. */
.muscle-volume-header {
  border: none;
  background: none;
  padding: 0 12px;
}

.muscle-volume-header .muscle-volume-weeks span {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.muscle-unmapped-table {
  margin-top: 20px;
}

.unmapped-row {
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: 10px;
}

.unmapped-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.unmapped-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

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

.unmapped-field select {
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-surface);
  color: var(--color-text);
}

/* ---- Muscle-group exercise drill-down + trend chart (2026-09-21) ---- */

.muscle-volume-row-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.muscle-exercise-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
}

.muscle-exercise-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.muscle-exercise-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.muscle-exercise-role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.muscle-exercise-role-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.muscle-exercise-role-secondary {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.muscle-exercise-count {
  white-space: nowrap;
}

.exercise-trend-title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
}

.trend-range-pills {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.trend-range-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.trend-range-pill.is-active {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.trend-range-pill.is-locked {
  color: var(--color-text-faint);
}

/* Reused for any future "Pro-only" tag, not just this one — same pill
   visual language as pr-badge/warmup-badge, tinted with the PR accent
   since Pro-gating and PRs already share a sense of "special." */
.pro-badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-pr-bg);
  color: var(--color-pr);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trend-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
}

.trend-point-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.trend-point-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 13px;
}

.trend-point-date {
  color: var(--color-text-muted);
}

.trend-point-value {
  font-weight: 600;
}

/* ---- Import data form (Phase 1.8b) ---- */

.import-form input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.import-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}

.import-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}