/* ==========================================================================
   RepTap member interface
   Used by the real product AND by the homepage demo, so the demo can never
   drift from the thing it is demonstrating.
   Gym branding overrides the tokens on .member-root only.
   ========================================================================== */

.member-root {
  /* Derived from the gym's own text colour so the boundary stays perceivable
     whatever palette a gym configures (WCAG 1.4.11). */
  --m-border-input: color-mix(in srgb, var(--m-text) 36%, transparent);

  /* Progress chart and focus rings track the gym's palette. Without this the
     global RepTap green leaks into a member interface that has no green in
     it - matched to the selected tab's text colour. */
  --m-plot: var(--m-text);
  --m-plot-soft: color-mix(in srgb, var(--m-text) 11%, transparent);
  --m-grid: color-mix(in srgb, var(--m-text) 14%, transparent);

  --m-bg:      var(--bg);
  --m-surface: var(--surface);
  --m-border:  var(--border);
  --m-text:    var(--text);
  --m-muted:   var(--text-muted);
  --m-accent:  var(--accent);
  --m-accent-ink: var(--accent-ink);
  --m-accent-soft: var(--accent-soft);

  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font, var(--font));
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* light branding preset keeps text legible without per-gym overrides */
.member-root[data-style="light"] { --m-accent-ink: #0A0B0D; }

/* Keep RepTap's green out of a branded interface entirely. */
.member-root :focus-visible { outline-color: var(--m-plot); }

/* Dialogs inside the member shell follow the gym's palette. */
.member-root .modal {
  background: var(--m-surface);
  border-color: var(--m-border);
  color: var(--m-text);
}
.member-root .modal-backdrop {
  background: color-mix(in srgb, var(--m-bg) 78%, transparent);
}
.member-root .modal .label { color: var(--m-muted); }
.member-root .modal .input,
.member-root .modal .select,
.member-root .modal .textarea {
  background: color-mix(in srgb, var(--m-bg) 55%, var(--m-surface));
  border-color: var(--m-border-input);
  color: var(--m-text);
}
.member-root .modal .btn-primary {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: var(--m-accent-ink);
}
.member-root .modal .btn-ghost { color: var(--m-muted); }
.member-root .modal .btn-ghost:hover {
  background: color-mix(in srgb, var(--m-text) 8%, transparent);
  color: var(--m-text);
}
.member-root .toast {
  background: var(--m-surface);
  border-color: var(--m-border);
  color: var(--m-text);
}

/* ------------------------------------------------------------- header */
.m-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: 56px;
  background: color-mix(in srgb, var(--m-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--m-border);
}
@supports not (backdrop-filter: blur(1px)) { .m-header { background: var(--m-bg); } }

.m-home {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 38px; min-width: 38px; padding: 0 var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  color: var(--m-text);
  font-size: var(--t-sm); font-weight: 550;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.m-home:hover { background: color-mix(in srgb, var(--m-surface) 70%, var(--m-text) 8%); }
.m-home:active { transform: scale(.96); }

.m-brand {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 0;
}
.m-logo {
  height: 26px; width: auto; max-width: 92px;
  object-fit: contain; flex: none;
}
.m-wordmark {
  font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.1em;
  color: var(--m-text); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --------------------------------------------------------------- body */
.m-body {
  flex: 1; padding: var(--s-5) var(--s-4) var(--s-16);
  container-type: inline-size;
  container-name: member;
}
.m-body > * + * { margin-top: var(--s-5); }

.m-title { font-size: var(--t-2xl); letter-spacing: -0.028em; }
.m-sub {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-1);
  font-size: var(--t-sm); color: var(--m-muted);
}
.m-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* --------------------------------------------------------------- tabs */
.m-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--s-1); padding: var(--s-1);
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--r-md);
}
.m-tab {
  appearance: none; border: 0; background: transparent;
  padding: var(--s-2) var(--s-3); min-height: 38px;
  border-radius: var(--r-sm);
  color: var(--m-muted);
  font-size: var(--t-base); font-weight: 550;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.m-tab:hover { color: var(--m-text); }
.m-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--m-text) 10%, transparent);
  color: var(--m-text);
}

/* -------------------------------------------------------------- panel */
.m-panel {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.m-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.m-panel-title {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--m-muted);
}
.m-panel-meta { font-size: var(--t-sm); color: var(--m-muted); white-space: nowrap; flex: none; }

/* -------------------------------------------------------- last workout */
.m-best {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.m-best-value {
  font-size: var(--t-3xl); font-weight: 650; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--m-accent);
  line-height: 1;
}
.m-best-label { font-size: var(--t-sm); color: var(--m-muted); }

.m-setlist { list-style: none; margin: 0; padding: 0; }
.m-setlist li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
  font-variant-numeric: tabular-nums;
}
.m-setlist li + li { border-top: 1px solid color-mix(in srgb, var(--m-border) 60%, transparent); }
.m-set-index {
  flex: none; width: 22px;
  font-size: var(--t-xs); color: var(--m-muted);
  font-variant-numeric: tabular-nums;
}
.m-set-value { font-size: var(--t-md); font-weight: 550; }
.m-set-actions { margin-left: auto; display: flex; gap: var(--s-1); }
.m-icon-btn {
  appearance: none; width: 32px; height: 32px;
  display: inline-grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--m-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.m-icon-btn:hover { background: color-mix(in srgb, var(--m-text) 8%, transparent); color: var(--m-text); }
.m-icon-btn.danger:hover { color: var(--danger); }

/* ------------------------------------------------------------- inputs */
.m-inputs { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.m-inputs.single { grid-template-columns: 1fr; }
/* On a phone, two steppers side by side leave ~57px for the value - only
   enough for a 20px numeral, and "182.5" still clips. Stacking keeps both the
   full-size numerals and the 44px touch targets, which is the right trade for
   someone standing at a machine. Side by side returns on tablet and up. */
@container member (max-width: 400px) {
  .m-inputs { grid-template-columns: 1fr; }
}

.m-field { container-type: inline-size; container-name: field; }
.m-field label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--m-muted);
}
.m-stepper {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: stretch;
  border: 1px solid var(--m-border-input);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--m-bg) 55%, var(--m-surface));
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.m-stepper:focus-within {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 18%, transparent);
}
.m-step-btn {
  appearance: none; border: 0; background: transparent;
  color: var(--m-muted); font-size: 20px; font-weight: 400;
  cursor: pointer; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.m-step-btn:hover { background: color-mix(in srgb, var(--m-text) 8%, transparent); color: var(--m-text); }
.m-step-btn:active { background: color-mix(in srgb, var(--m-text) 14%, transparent); }
.m-num {
  appearance: none; -moz-appearance: textfield;
  border: 0; background: transparent;
  text-align: center;
  min-height: 54px;
  min-width: 0;
  padding: 0 2px;
  /* Sized from the stepper's own width, so the value scales with the space
     actually available to it and "182.5" never clips. */
  font-size: clamp(1.375rem, 13cqi, 1.625rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--m-text);
  width: 100%;
}
.m-num::-webkit-outer-spin-button, .m-num::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.m-num:focus { outline: none; }

/* -------------------------------------------------------------- CTAs */
.m-cta {
  appearance: none; width: 100%;
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid var(--m-accent);
  background: var(--m-accent);
  color: var(--m-accent-ink);
  font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.m-cta:hover:not(:disabled) { filter: brightness(1.08); }
.m-cta:active:not(:disabled) { transform: scale(.985); }
.m-cta:disabled { opacity: .45; cursor: not-allowed; }

.m-cta-secondary {
  background: transparent;
  color: var(--m-text);
  border-color: var(--m-border);
}
.m-cta-secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--m-text) 7%, transparent);
  filter: none;
}

.m-actions { display: grid; gap: var(--s-2); }

/* Set-added pulse: 200ms, once. */
@keyframes set-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.m-setlist li.is-new { animation: set-in 200ms var(--ease); }

/* ---------------------------------------------------------- directory */
.m-search { position: relative; }
.m-search input {
  width: 100%; min-height: 48px;
  padding: var(--s-3) var(--s-4) var(--s-3) 42px;
  background: var(--m-surface);
  border: 1px solid var(--m-border-input);
  border-radius: var(--r-md);
  color: var(--m-text);
  font-size: var(--t-md);
}
.m-search input::placeholder { color: var(--m-muted); opacity: .8; }
.m-search input:focus {
  outline: none; border-color: var(--m-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 18%, transparent);
}
.m-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--m-muted); pointer-events: none;
}

.m-group-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--m-muted);
  margin-bottom: var(--s-2);
}

.m-list { display: grid; gap: var(--s-2); }
.m-item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4);
  min-height: 56px;
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: var(--r-md);
  color: var(--m-text);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.m-item:hover {
  background: color-mix(in srgb, var(--m-surface) 80%, var(--m-text) 6%);
  border-color: color-mix(in srgb, var(--m-border) 60%, var(--m-text) 12%);
}
.m-item:active { transform: scale(.99); }
/* icon | text (takes the slack and truncates) | badge | chevron */
.m-item-text { min-width: 0; flex: 1 1 auto; }
.m-item-name {
  display: block; font-weight: 550; font-size: var(--t-md);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Truncate rather than wrap: uniform row heights keep the list scannable. */
.m-item-meta {
  display: block; font-size: var(--t-sm); color: var(--m-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-item-chev { color: var(--m-muted); flex: none; }
.m-inprogress {
  margin-left: auto; flex: none;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 650;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--m-accent) 16%, transparent);
  color: var(--m-accent);
  border: 1px solid color-mix(in srgb, var(--m-accent) 38%, transparent);
  white-space: nowrap;
}


.m-type {
  flex: none;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--m-accent) 14%, transparent);
  color: var(--m-accent);
}

/* ------------------------------------------------------------ history */
.m-history-day + .m-history-day { margin-top: var(--s-4); }
.m-history-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-2);
}
.m-history-date { font-size: var(--t-base); font-weight: 600; }
.m-history-best {
  font-size: var(--t-sm); font-weight: 600; color: var(--m-accent);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- progress */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: draw 600ms var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chart-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.m-stat-value {
  font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.m-stat-label {
  font-size: var(--t-xs); color: var(--m-muted); margin-top: 2px;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------- machine photo */
.m-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--m-border);
  background: var(--m-surface);
}

.m-empty {
  text-align: center; padding: var(--s-8) var(--s-4);
  color: var(--m-muted); font-size: var(--t-base);
}

.m-footer {
  padding: var(--s-6) var(--s-4) var(--s-8);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--m-muted);
  opacity: .75;
}
.m-footer a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  /* Sign out was a 14px-tall tap target. */
  display: inline-block; min-height: 28px; padding: var(--s-1) var(--s-2);
}

/* Offline / queued indicator */
.m-offline {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--warn); color: #201700;
  font-size: var(--t-sm); font-weight: 600;
}

@media (min-width: 640px) {
  .m-body { padding: var(--s-8) var(--s-6) var(--s-16); max-width: 560px; margin-inline: auto; width: 100%; }
  .m-header { padding-inline: var(--s-6); }
}