/* Building blocks of the signed-in area (member, club and admin): page header, surfaces, stats, lists,
   tables, empty states, tabs, guide, stepper. Buttons, badges and banners are in components.css,
   form controls in forms.css. Brand tokens only. Reference: /styleguide. */

/* ---------- Type inside the shell: calmer than the marketing pages ---------- */
.shell__main .h2 { font-size: var(--text-display-sm); line-height: var(--leading-heading); }
.shell__main .h3 { font-size: var(--text-2xl); font-weight: 600; }
.shell__main .h3--lg { font-size: var(--text-2xl); }
.shell__main .muted--lg { font-size: var(--text-lg); }

/* ---------- Page header ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16) var(--space-24);
}

.page-header__text { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; flex: 1 1 320px; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); }
.page-header__actions form { margin: 0; }

.page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  align-self: flex-start;
  margin: 0 0 var(--space-4) calc(-1 * var(--space-4));
  padding: var(--space-4);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-muted);
}

.page-header__back:hover { color: var(--ink); }

.page-header__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--purple);
}

.page-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.page-header__lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-muted); max-width: 46em; }
.page-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-4); }

/* The older greeting block used on a few pages reads like a page header. */
.app-greeting { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---------- Surfaces: the one card of the signed-in area ---------- */
.surface,
.guide,
.danger-zone {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: clamp(var(--space-16), 3vw, var(--space-24));
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

.surface--flush { gap: 0; padding: 0; overflow: hidden; }
.surface--lilac { background: var(--lilac); border-color: var(--line-lilac); box-shadow: none; }

.surface--hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  border: 0;
  box-shadow: var(--shadow-featured);
}

.surface--hero .muted,
.surface--hero .page-header__lead { color: var(--dark-text); }

.surface__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-12);
}

.surface--flush > .surface__head { padding: var(--space-16) var(--space-20); border-bottom: 1px solid var(--line-fine); }

/* A destructive area at the end of a page (archive, delete). */
.danger-zone { align-items: flex-start; gap: var(--space-12); }
.danger-zone--danger { border-color: var(--error-line); }

/* ---------- Sections and layouts ---------- */
.app-section { display: flex; flex-direction: column; gap: var(--space-14); }

.app-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 40px;
}

/* Single-column forms inside the app, such as onboarding. Inside the shell they sit on a card. */
.app-narrow {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 420px;
}

.shell__main .app-narrow {
  max-width: 600px;
  padding: clamp(var(--space-20), 4vw, var(--space-32));
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

.shell__main .app-narrow .auth-heading__title { font-size: var(--text-display-xs); }
.shell__main .auth-form { gap: var(--space-20); }

/* Two columns on wide screens: main content and a side column. */
.layout-split { display: grid; gap: var(--space-24); align-items: start; }
.layout-split > * { min-width: 0; }

@media (min-width: 1180px) {
  .layout-split { grid-template-columns: minmax(0, 1fr) 340px; }
}

.grid-cards { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* ---------- Status dots: a status in words with a coloured dot, calmer than a filled badge ---------- */
/* One component for both sides. Member pages pick the tone from a status with MemberStatusHelper#status_dot
   and add --tinted, so the word itself is green, amber or red as well. Amber gets a darker edge to keep 3:1. */
.status-dot { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--text-sm); font-weight: 500; color: var(--text); white-space: nowrap; }
.status-dot::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--status-inactive); border-radius: 50%; }
.status-dot--ok::before { background: var(--status-paid); }
.status-dot--warn::before { background: var(--status-soon); box-shadow: inset 0 0 0 1px var(--warning-text); }
.status-dot--due::before { background: var(--status-due); }
.status-dot--info::before { background: var(--purple); }
.status-dot--muted { color: var(--text-muted); }
.status-dot--tinted { font-size: var(--text-md); white-space: normal; }
.status-dot--tinted.status-dot--ok { color: var(--success-text); }
.status-dot--tinted.status-dot--warn { color: var(--warning-text); }
.status-dot--tinted.status-dot--due { color: var(--error-field); }
.status-dot--tinted.status-dot--info { color: var(--purple-deep); }

/* ---------- Switch: an on/off setting that saves at once ---------- */
/* A real button with role="switch"; aria-checked carries the state. 44 px tall to tap. */
.switch { position: relative; display: block; width: 52px; height: 44px; padding: 0; cursor: pointer; background: none; border: 0; }
.switch::before { content: ""; position: absolute; inset: 8px 0; background: var(--line-input); border-radius: var(--radius-pill); transition: background var(--duration-fast) ease; }
.switch[aria-checked="true"]::before { background: var(--purple); }
.switch__knob { position: absolute; top: 11px; left: 3px; width: 22px; height: 22px; background: var(--white); border-radius: 50%; box-shadow: 0 1px 2px rgb(var(--ink-rgb) / .25); transition: transform var(--duration-fast) ease; }
.switch[aria-checked="true"] .switch__knob { transform: translateX(24px); }
.switch:focus-visible { outline: none; }
.switch:focus-visible::before { box-shadow: var(--shadow-focus); }

@media (prefers-reduced-motion: reduce) {
  .switch::before, .switch__knob { transition: none; }
}

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-12); margin: 0; }

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-16) var(--space-20);
  color: var(--text);
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

a.stat { transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
a.stat:hover { color: var(--text); border-color: var(--lilac-soft); box-shadow: var(--shadow-notification); }

.stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-6);
  color: var(--purple);
  background: var(--lilac);
  border-radius: var(--radius-sm);
}

.stat__icon--yellow { color: var(--ink); background: var(--yellow-soft); }
.stat__icon--due { color: var(--error-field); background: var(--error-bg); }
.stat__icon--paid { color: var(--status-paid); background: var(--success-bg); }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-display-xs);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-snug);
  color: var(--ink);
  white-space: nowrap;
}

.stat__label { display: block; font-size: var(--text-md); color: var(--text-muted); }

/* Phones: two stat tiles per row instead of a tall stack. */
@media (max-width: 639px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
  .stat-grid .stat { padding: var(--space-14); }
  .stat-grid .stat__icon { width: 32px; height: 32px; margin-bottom: var(--space-2); }
  .stat-grid .stat__value { font-size: var(--text-3xl); white-space: normal; }
  .stat-grid .stat__label { font-size: var(--text-sm); }
}

/* ---------- Lists: rows grouped in one card ---------- */
.payment-list,
.person-list,
.context-list,
.att-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

.payment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 64px;
  padding: var(--space-14) var(--space-20);
  background: var(--white);
  border-bottom: 1px solid var(--line-fine);
}

.payment-row:last-child { border-bottom: 0; }
.payment-row__text { display: flex; flex-direction: column; flex: 1 1 200px; gap: var(--space-2); min-width: 0; }
.payment-row__date { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.payment-row__meta { font-size: var(--text-sm); color: var(--text-muted); }
.payment-row__note { font-size: var(--text-sm); font-weight: 500; color: var(--purple-deep); }
.payment-row__aside { display: flex; align-items: center; gap: var(--space-14); flex: none; margin-left: auto; }
.payment-row__amount { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--ink); white-space: nowrap; }

/* Rows that stand alone (person-list is a list of separate cards or rows). */
.person-list { display: flex; flex-direction: column; gap: var(--space-10); }
.person-list > .payment-row { border: 1px solid var(--line-fine); border-radius: var(--radius-md); }
.person-list > .payment-row:last-child { border-bottom: 1px solid var(--line-fine); }

.context-list { display: grid; gap: var(--space-12); }

.member-row__name { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
a.member-row__name:hover { color: var(--purple); }
.member-row__meta { display: block; font-size: var(--text-sm); color: var(--text-muted); }

/* Generic list row with a leading avatar or icon and a trailing chevron. */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  min-height: 64px;
  padding: var(--space-12) var(--space-20);
  color: var(--text);
  border-bottom: 1px solid var(--line-fine);
}

.list-row:last-child { border-bottom: 0; }
a.list-row:hover { color: var(--text); background: var(--canvas); }
.list-row__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.list-row__title { font-size: var(--text-base); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.list-row__meta { font-size: var(--text-sm); color: var(--text-muted); }
.list-row__aside { display: flex; align-items: center; gap: var(--space-10); flex: none; }
.list-row__chevron { color: var(--status-inactive); }

/* ---------- Tables ---------- */
/* Positioned, so absolutely placed children (.visually-hidden headings) scroll with the table instead of widening the page. */
.admin-table-wrap {
  position: relative;
  overflow-x: auto;
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}

/* Inside a flush card the card is the frame. */
.admin-table-wrap--bare { border: 0; border-radius: 0; box-shadow: none; }

.admin-table { width: 100%; font-size: var(--text-md); border-collapse: collapse; }

.admin-table th,
.admin-table td { padding: var(--space-14) var(--space-16); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-fine); }

.admin-table th {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  background: var(--canvas);
}

.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: var(--hover-tint); }
.admin-table a { font-weight: 500; }

/* Numbers and actions align right; .text-right is the older name for alignment only. */
.admin-table .num,
.admin-table .text-right { text-align: right; }
.admin-table .num { font-variant-numeric: tabular-nums; }
.admin-table .cell-actions { width: 1%; white-space: nowrap; text-align: right; }
.admin-table .cell-actions .admin-actions { justify-content: flex-end; flex-wrap: nowrap; gap: var(--space-6); }
.admin-table .cell-actions form { margin: 0; }
.admin-table .chevron-cell { width: 1%; color: var(--status-inactive); }
.admin-table .badge { white-space: nowrap; vertical-align: middle; }
.admin-table .avatar { flex: none; }
.admin-table td .person-cell { min-width: 176px; }
.admin-table .person-cell__name { font-weight: 600; }

/* Whole row clickable without nesting links: the name link stretches over the row. */
.row-link { position: relative; }
.row-link__target::after { content: ""; position: absolute; inset: 0; }

/* ---------- Empty states ---------- */
.empty-state,
.app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: clamp(var(--space-28), 5vw, var(--space-48)) var(--space-20);
  font-size: var(--text-base);
  text-align: center;
  color: var(--text-muted);
  background: var(--white);
  border: var(--border-control) dashed var(--line-lilac);
  border-radius: var(--radius-card);
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--purple);
  background: var(--lilac);
  border-radius: 50%;
}

.empty-state__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; color: var(--ink); }
.empty-state__body { max-width: 30em; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); }
.empty-state .cluster { justify-content: center; }

/* ---------- Tabs (links styled as a segmented control) ---------- */
.tabs {
  display: flex;
  gap: var(--space-4);
  max-width: 100%;
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-md);
  scrollbar-width: none;
}

.tabs__tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 40px;
  padding: 0 var(--space-14);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  border-radius: var(--radius-xs);
}

/* The same tab as a button, when it switches content already on the page (US-2.15). */
.tabs__tab:where(button) { font-family: inherit; line-height: inherit; background: none; border: 0; cursor: pointer; }

.tabs__tab:hover { color: var(--ink); background: var(--canvas); }
.tabs__tab--current,
.tabs__tab--current:hover { font-weight: 600; color: var(--purple-deep); background: var(--lilac); }

/* ---------- Setup checklist (guide) ---------- */
.guide.panel--lilac { background: var(--lilac); border-color: var(--line-lilac); }
.guide__head { display: flex; flex-direction: column; gap: var(--space-6); }
.guide__steps { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }

.guide__step {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-14) var(--space-16);
  background: var(--canvas);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-md);
}

.guide.panel--lilac .guide__step { background: var(--white); }

.guide__number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-none);
  color: var(--white);
  background: var(--purple);
  border-radius: 50%;
}

.guide__step--done { background: transparent; border-style: dashed; }
.guide__step--done .guide__number { color: var(--white); background: var(--status-paid); }
.guide__step--done .guide__number .icon { display: block; }
.guide__step--done .guide__title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--line-lilac); }
.guide__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.guide__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.guide__badge { font-family: var(--font-body); }
.guide__action { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--text-md); font-weight: 600; }
.guide__progress { display: flex; flex-direction: column; gap: var(--space-8); }
.guide__progress-label { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Progress ---------- */
.progress { height: 8px; overflow: hidden; background: var(--lilac); border-radius: var(--radius-pill); }
.progress__bar { width: var(--progress, 0%); height: 100%; background: var(--purple); border-radius: inherit; }

/* ---------- Attendance marking (club side): big targets for use while walking around a gym ---------- */
.att-list { display: grid; gap: var(--space-10); }
.att-row { padding: var(--space-14) var(--space-16); background: var(--white); border: 1px solid var(--line-fine); border-radius: var(--radius-md); }
.att-row__person { display: flex; align-items: center; gap: var(--space-10); min-width: 0; }
.att-row__name { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-10); font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.att-row__time { font-size: var(--text-md); font-weight: 400; color: var(--text-muted); }
.att-row__buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.att-row__buttons form { display: contents; }

.att-btn {
  min-height: var(--control-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: var(--border-control) solid var(--line-lilac);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.att-btn:hover { border-color: var(--purple); }
.att-btn--active.att-btn--present { color: var(--white); background: var(--status-paid); border-color: var(--status-paid); }
.att-btn--active.att-btn--late { color: var(--status-soon-text); background: var(--status-soon); border-color: var(--status-soon); }
.att-btn--active.att-btn--excused { color: var(--purple-deep); background: var(--lilac); border-color: var(--purple); }
.att-btn--active.att-btn--absent { color: var(--white); background: var(--status-due); border-color: var(--status-due); }

@media (max-width: 479px) {
  .att-row { padding: var(--space-12); }
  .att-row__buttons { gap: var(--space-6); }
  .att-btn { min-height: 54px; padding: 0 var(--space-2); font-size: var(--text-md); }
}

.scan__video { width: 100%; max-width: 448px; border-radius: var(--radius-card); }
.scan__canvas { display: none; }

/* ---------- Helpers ---------- */
.stack-sm { display: flex; flex-direction: column; gap: var(--space-8); }
.stack-md { display: flex; flex-direction: column; gap: var(--space-16); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.amount { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.amount--due { color: var(--error-field); }

/* ---------- Add a membership (member side): club search, new person. The steps are in member.css. ---------- */
.new-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-16);
  background: var(--canvas);
  border: 1px solid var(--line-fine);
  border-radius: var(--radius-md);
}

.new-person[hidden] { display: none; }

.club-search { display: flex; flex-direction: column; gap: var(--space-8); }
.club-search__field { position: relative; }
.club-search__field .input { padding-left: var(--space-40); }
.club-search__icon { position: absolute; left: 15px; top: 41px; color: var(--text-muted); pointer-events: none; }

.club-search__picked {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-14);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--success-text);
  background: var(--success-bg);
  border-radius: var(--radius-sm);
}

.check-list { display: flex; flex-direction: column; gap: var(--space-14); margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-12); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); }
.check-list .icon { margin-top: var(--space-2); color: var(--purple); }

/* ---------- Stepper and the focused (onboarding) layout ---------- */
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-10); margin: 0; padding: 0; list-style: none; }

.stepper__step {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-muted);
}

.stepper__step + .stepper__step::before { content: ""; width: 28px; height: 2px; background: var(--line-lilac); border-radius: var(--radius-pill); }

.stepper__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--white);
  border: var(--border-control) solid var(--line-lilac);
  border-radius: 50%;
}

.stepper__step--current { font-weight: 600; color: var(--ink); }
.stepper__step--current .stepper__dot { color: var(--white); background: var(--purple); border-color: var(--purple); }
.stepper__step--done .stepper__dot { color: var(--white); background: var(--status-paid); border-color: var(--status-paid); }

.focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--space-16) var(--space-16) 0;
}

.focus-header form { margin: 0; }
.focus-main { max-width: 640px; }
/* Onboarding in the same light look as the sign-in pages (US-1.13): lilac mist and the form in a white card. */
.app-body.focus-body { background: linear-gradient(180deg, var(--lilac-mist) 0%, var(--white) 420px); }
.onboarding { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); padding-top: clamp(var(--space-8), 4vw, var(--space-40)); }
.onboarding .app-narrow { width: 100%; }

.onboarding__card {
  box-sizing: border-box;
  padding: clamp(var(--space-24), 4vw, var(--space-32));
  background: var(--white);
  border: var(--border-hairline) solid var(--line-fine);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}