::selection {
  color: var(--color-white);
  background: var(--color-brand-700);
}

.application-shell {
  min-height: 100svh;
  background: var(--color-bg);
}

.application-frame { min-height: 100svh; }

.app-header {
  position: sticky;
  z-index: var(--layer-header);
  top: 0;
  border-bottom: var(--border-light);
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(14px);
}

.app-header__inner {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--container));
  min-height: 4.5rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 10.5rem 1fr auto;
  align-items: center;
  gap: var(--space-8);
}

.app-header .wordmark { width: 9.25rem; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
}

.site-nav__links { display: flex; align-items: center; gap: var(--space-8); }

.site-nav__link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }

.app-header .button { min-height: 2.75rem; }

.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; }
.account-menu summary::-webkit-details-marker { display: none; }

.account-menu > summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
}

.account-menu__avatar {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: var(--border);
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-weight: 600;
}

.account-menu__email { display: none; }

.account-menu__surface {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 16.5rem;
  border: var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--color-white);
  box-shadow: var(--shadow-panel);
}

.account-menu__surface p {
  overflow: hidden;
  padding: var(--space-3) var(--space-3) var(--space-4);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__surface a,
.account-menu__surface button {
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: var(--color-text-strong);
  background: transparent;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.account-menu__surface a:hover,
.account-menu__surface button:hover,
.account-menu__surface a[aria-current="page"] { background: var(--color-surface); }
.account-menu__status { padding: var(--space-2) var(--space-3); color: var(--color-gold-900); font-size: var(--text-xs); }

.mobile-nav { display: none; }

.member-main {
  width: min(calc(100% - (2 * var(--page-gutter))), 70rem);
  min-height: calc(100svh - 4.5rem);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) 0 var(--space-24);
}

.member-main--plan-new { width: min(calc(100% - (2 * var(--page-gutter))), 61rem); }
.member-page { width: 100%; }

.member-heading,
.detail-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-light);
}

.member-heading h1,
.detail-heading h1,
.composer-heading h1 {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.member-heading p,
.detail-heading p,
.composer-heading > span {
  max-width: 42rem;
  margin-top: var(--space-3);
  color: var(--color-text);
}

.course-filter {
  width: 13rem;
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

.course-filter select,
.member-form input,
.member-form select,
.composer-fields input,
.composer-fields select {
  width: 100%;
  min-width: 0;
  min-height: 2.875rem;
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  color: var(--color-ink);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.course-filter select,
.member-form select,
.composer-fields select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23006747' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1rem;
  cursor: pointer;
}

.course-filter select:hover:not(:disabled),
.member-form select:hover:not(:disabled),
.composer-fields select:hover:not(:disabled) {
  border-color: var(--color-brand-400);
  background-color: var(--color-surface-raised);
}

.course-filter select:disabled,
.member-form select:disabled,
.composer-fields select:disabled {
  color: var(--color-text-faint);
  background-color: var(--color-surface);
  cursor: not-allowed;
}

.composer-fields .date-time-input {
  min-height: 3.25rem;
  padding-inline: var(--space-4) 3.25rem;
  color-scheme: light;
  background-color: var(--color-surface-raised);
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.composer-fields .date-time-input--date {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Crect x='3' y='4.5' width='14' height='12.5' rx='2' stroke='%23006747' stroke-width='1.5'/%3E%3Cpath d='M6.5 3v3M13.5 3v3M3 8.5h14' stroke='%23006747' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.composer-fields .date-time-input--time {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7' stroke='%23006747' stroke-width='1.5'/%3E%3Cpath d='M10 6v4.25l2.75 1.75' stroke='%23006747' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.composer-fields .date-time-input:hover {
  border-color: var(--color-brand-400);
  background-color: var(--color-white);
}

.composer-fields .date-time-input:focus {
  background-color: var(--color-white);
}

.composer-fields .date-time-input:user-invalid {
  border-color: var(--color-gold-600);
  background-color: var(--color-gold-50);
}

@supports selector(input::-webkit-calendar-picker-indicator) {
  .composer-fields .date-time-input::-webkit-calendar-picker-indicator {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: -0.625rem;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
}

.member-section { margin-top: var(--space-20); }
.member-section--first { margin-top: var(--space-12); }

.section-title {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-3);
}

.section-title h2 { font-size: var(--text-lg); }
.section-title a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-accent); font-size: var(--text-sm); }

.booking-alert-panel {
  margin-top: var(--space-12);
  border: 1px solid var(--color-gold-300);
  border-radius: var(--radius-lg);
  background: var(--color-complement-soft);
}

.booking-alert-panel > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-gold-200);
}

.booking-alert-panel > header h2 { font-size: var(--text-lg); }
.booking-alert-panel > header p { color: var(--color-gold-800); font-size: var(--text-sm); }

.booking-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8);
}

.booking-alert + .booking-alert { border-top: 1px solid var(--color-gold-200); }
.booking-alert__copy > p:first-child { color: var(--color-gold-800); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.booking-alert__copy h2 { margin-top: var(--space-2); font-size: var(--text-md); }
.booking-alert__copy h2 + p { margin-top: var(--space-2); color: var(--color-text-strong); }
.booking-alert__copy p:last-child { margin-top: var(--space-1); color: var(--color-text); font-size: var(--text-sm); }
.booking-alert__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-4); }

.upcoming-list,
.plan-list,
.plan-preview-list,
.course-list,
.payment-list { border-top: var(--border); }

.upcoming-row {
  min-height: 8rem;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  border-bottom: var(--border-light);
}

.date-block {
  width: 3.75rem;
  display: grid;
  justify-items: center;
  border-right: var(--border-light);
  padding-right: var(--space-4);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.date-block strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; line-height: 1; }
.upcoming-row__body { min-width: 0; display: grid; gap: var(--space-1); padding-block: var(--space-5); }
.upcoming-row__body strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; }
.upcoming-row__body span { color: var(--color-text-strong); }
.upcoming-row__body small { overflow: hidden; color: var(--color-text-faint); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.upcoming-row__state { min-width: 8.5rem; display: grid; justify-items: end; gap: var(--space-2); }
.upcoming-row__state > a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-accent); font-size: var(--text-sm); }

.status-badge {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.status-badge--success { border-color: var(--color-brand-200); color: var(--color-brand-800); background: var(--color-brand-50); }
.status-badge--warning { border-color: var(--color-gold-300); color: var(--color-gold-900); background: var(--color-gold-50); }
.status-badge--active { border-color: var(--color-brand-300); color: var(--color-white); background: var(--color-brand-700); }
.status-badge--neutral { border-color: var(--color-line); color: var(--color-text); background: var(--color-surface-raised); }

.plan-preview,
.plan-row,
.course-row,
.payment-row {
  min-height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  border-bottom: var(--border-light);
  padding: var(--space-4) var(--space-2);
}

.plan-preview:hover,
.plan-row:hover { background: var(--color-surface-raised); }
.plan-preview > span:first-child,
.plan-row > span:first-child { min-width: 0; display: grid; gap: var(--space-1); }
.plan-preview strong,
.plan-row strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; }
.plan-preview small,
.plan-row small { overflow: hidden; color: var(--color-text-faint); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.plan-preview > span:last-child { color: var(--color-text); font-size: var(--text-sm); }
.plan-row > span:last-child { min-width: 9.5rem; display: grid; justify-items: end; gap: var(--space-2); }

.ended-plans { margin-top: var(--space-16); border-top: var(--border); }
.ended-plans > summary { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--color-text-strong); }
.ended-plans > summary span { color: var(--color-text-faint); }

.member-empty {
  min-height: 16rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  border-bottom: var(--border-light);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.member-empty h1,
.member-empty h2 { font-size: var(--text-xl); }
.member-empty p { max-width: 32rem; color: var(--color-text); }
.member-empty .button { margin-top: var(--space-3); }
.member-empty--compact { min-height: 10rem; }
.member-empty--error { min-height: 60svh; border: 0; }
.text-action,
.secondary-action,
.back-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  color: var(--color-accent);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.secondary-action:hover,
.text-action:hover,
.back-link:hover { text-decoration: underline; text-underline-offset: 0.25rem; }
.back-link { margin-bottom: var(--space-6); }

.member-loading {
  min-height: 60svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}
.member-loading > span { width: 2rem; height: 2rem; border: 2px solid var(--color-brand-200); border-top-color: var(--color-accent); border-radius: 50%; animation: member-spin 800ms linear infinite; }
@keyframes member-spin { to { transform: rotate(1turn); } }

.success-panel {
  margin-bottom: var(--space-10);
  border: 1px solid var(--color-brand-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: var(--color-brand-900);
  background: var(--color-brand-50);
}
.success-panel h1 { font-size: var(--text-xl); }
.success-panel p { max-width: 45rem; margin-top: var(--space-2); color: var(--color-text-strong); }

.detail-heading { align-items: flex-start; }
.detail-heading h1 { max-width: 50rem; }
.detail-heading__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5); }
.plan-date-row { border-bottom: var(--border-light); padding-bottom: var(--space-4); }
.plan-date-row .upcoming-row { border: 0; }
.plan-date-row__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-5); }
.plan-facts { margin-top: var(--space-12); border-top: var(--border); }
.plan-facts details,
.technical-details { border-bottom: var(--border-light); padding: var(--space-5) 0; }
.plan-facts summary,
.technical-details summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-family: var(--font-display); }
.plan-facts details > p,
.plan-facts .terms-copy,
.technical-details p { max-width: 50rem; margin-top: var(--space-3); color: var(--color-text); }
.detail-footer { margin-top: var(--space-12); }

.booking-detail-heading > div > p:first-child { margin: 0 0 var(--space-2); color: var(--color-text-faint); font-size: var(--text-sm); }
.booking-outcome {
  margin-top: var(--space-12);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-surface-raised);
}
.booking-outcome--success { border-color: var(--color-brand-300); background: var(--color-brand-50); }
.booking-outcome--warning { border-color: var(--color-gold-300); background: var(--color-gold-50); }
.booking-outcome h2 { font-size: var(--text-xl); }
.booking-outcome > p { max-width: 44rem; margin-top: var(--space-2); color: var(--color-text); }
.booking-outcome dl { margin: var(--space-8) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--border-light); }
.booking-outcome dl div { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-5) 0 0; }
.booking-outcome dt { color: var(--color-text-faint); font-size: var(--text-xs); }
.booking-outcome dd { margin: 0; font-family: var(--font-display); font-size: var(--text-md); }
.booking-outcome__actions { margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-5); }

.attention-page { max-width: 46rem; margin: var(--space-8) auto 0; }
.attention-page > p:first-child { color: var(--color-gold-800); font-size: var(--text-sm); }
.attention-page h1 { margin-top: var(--space-3); font-size: var(--text-hero); line-height: 1; }
.attention-page h1 + p { margin-top: var(--space-5); color: var(--color-text); font-size: var(--text-md); }
.attention-summary { margin-top: var(--space-8); display: grid; gap: var(--space-1); border-block: var(--border-light); padding: var(--space-5) 0; }
.attention-summary span { color: var(--color-text); }
.attention-page ol { margin: var(--space-8) 0; padding-left: var(--space-6); color: var(--color-text-strong); }
.attention-page li + li { margin-top: var(--space-3); }
.attention-warning { margin-bottom: var(--space-6); border: 1px solid var(--color-gold-300); border-radius: var(--radius-sm); padding: var(--space-4); color: var(--color-gold-900); background: var(--color-gold-50); }
.attention-page details { margin-top: var(--space-8); }

.course-row > div:first-child,
.payment-row > div:nth-child(2) { min-width: 0; }
.course-row h2,
.payment-row h2 { font-size: var(--text-md); }
.course-row p,
.payment-row p { margin-top: var(--space-1); color: var(--color-text-faint); font-size: var(--text-sm); }
.course-row > div:last-child { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-6); }
.payment-row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
.payment-mark { width: 2.25rem; height: 1.5rem; border: var(--border); border-radius: var(--radius-sm); background: var(--color-surface); }
.trust-note { max-width: 42rem; margin-top: var(--space-8); color: var(--color-text-faint); font-size: var(--text-sm); }

.discovery-panel {
  max-width: 48rem;
  margin-top: var(--space-16);
  border-top: var(--border);
  padding-top: var(--space-8);
}
.discovery-panel > h2 { font-size: var(--text-lg); }
.discovery-panel > p { margin-top: var(--space-2); color: var(--color-text); }
.discovery-panel .member-form { margin-top: var(--space-6); }
.discovery-search-fields { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem auto; align-items: end; gap: var(--space-3); }
.discovery-search-fields .button,
.discovery-name-fields .button { min-height: 2.875rem; }
.discovery-search-support { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.discovery-search .form-status:empty { display: none; }
.discovery-name-search { margin-top: var(--space-6); border-top: var(--border-light); padding-top: var(--space-5); }
.discovery-name-search summary { width: max-content; max-width: 100%; color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.discovery-name-search .member-form { margin-top: var(--space-4); }
.discovery-name-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3); }
.club-search-results .member-empty { margin-top: var(--space-8); border-top: var(--border-light); }
.club-results { margin-top: var(--space-8); border-top: var(--border-light); }
.club-results__heading { display: grid; gap: var(--space-1); padding: var(--space-5) var(--space-3) var(--space-3); }
.club-results__heading h3 { font-size: var(--text-md); }
.club-results__heading p { color: var(--color-text-faint); font-size: var(--text-sm); }
.club-result { width: 100%; min-height: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); border: 0; border-bottom: var(--border-light); padding: var(--space-3); color: var(--color-ink); background: transparent; text-align: left; cursor: pointer; transition: background-color var(--transition-fast); }
.club-result:hover { background: var(--color-surface-raised); }
.club-result__body { min-width: 0; display: grid; justify-items: start; gap: var(--space-1); }
.club-result__body > span { color: var(--color-text); font-size: var(--text-sm); }
.club-result__end { display: flex; align-items: center; gap: var(--space-4); }
.club-result__distance { color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.club-result__chevron { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; }
.course-import-form { margin-top: var(--space-6); }
.check-row { min-height: 4rem; flex-direction: row !important; align-items: center; border-bottom: var(--border-light); cursor: pointer; }
.check-row input { width: 1.25rem; min-height: 1.25rem; flex: 0 0 auto; }
.check-row > span { display: grid; gap: var(--space-1); }
.check-row small { color: var(--color-text-faint); }

.composer-heading { max-width: 48rem; margin-bottom: var(--space-10); }
.composer-heading > p { margin-bottom: var(--space-3); color: var(--color-accent); font-size: var(--text-sm); }
.course-choice-list { border-top: var(--border); }
.course-choice {
  width: 100%;
  min-height: 7.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  border: 0;
  border-bottom: var(--border-light);
  padding: var(--space-5) var(--space-3);
  color: var(--color-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.course-choice:hover,
.course-choice.is-selected { background: var(--color-surface-raised); }
.course-choice > span:first-child { min-width: 0; display: grid; gap: var(--space-1); }
.course-choice strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }
.course-choice small { color: var(--color-text-faint); }
.course-choice__end { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5); }
.course-choice__chevron { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.composer-footer { margin-top: var(--space-6); }

.composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-12); }
.composer-fields { min-width: 0; display: grid; gap: var(--space-10); }
.choice-group,
.member-form__group { margin: 0; border: 0; padding: 0; }
.choice-group legend,
.member-form__group legend { margin-bottom: var(--space-4); padding: 0; font-family: var(--font-display); font-size: var(--text-md); }
.choice-group { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.choice-group legend { grid-column: 1 / -1; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.choice-group label { position: relative; min-height: 3.25rem; display: grid; place-items: center; color: var(--color-text); cursor: pointer; }
.choice-group label + label { border-left: var(--border); }
.choice-group input { position: absolute; opacity: 0; }
.choice-group span { width: 100%; height: 100%; display: grid; place-items: center; padding: var(--space-2); text-align: center; }
.choice-group input:checked + span { color: var(--color-white); background: var(--color-accent); }
.member-form__group { display: grid; gap: var(--space-4); border-top: var(--border-light); padding-top: var(--space-6); }
.member-form__group label,
.member-form label { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-strong); font-size: var(--text-sm); }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field-hint { display: block; color: var(--color-text-faint); font-size: var(--text-xs); }
.money-input { position: relative; display: block; }
.money-input > span { position: absolute; top: 50%; left: var(--space-3); translate: 0 -50%; color: var(--color-text-faint); }
.money-input input { padding-left: var(--space-8); }
.plan-summary { position: sticky; top: 7rem; height: max-content; border: var(--border); border-radius: var(--radius-md); padding: var(--space-6); background: var(--color-surface-raised); }
.plan-summary > p:first-child { color: var(--color-accent); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.plan-summary h2 { margin-top: var(--space-3); font-size: var(--text-lg); }
.plan-summary h2 + p { margin-top: var(--space-3); color: var(--color-text); font-size: var(--text-sm); }
.plan-summary > span { display: block; margin-top: var(--space-6); border-top: var(--border-light); padding-top: var(--space-4); color: var(--color-text-faint); font-size: var(--text-xs); }
.composer-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; border-top: var(--border); padding-top: var(--space-8); }

.review-form { display: grid; gap: var(--space-10); }
.review-statement { border-block: var(--border); padding: var(--space-8) 0; }
.review-statement h2 { max-width: 48rem; font-size: var(--text-xl); }
.review-statement p { max-width: 50rem; margin-top: var(--space-3); color: var(--color-text); font-size: var(--text-md); }
.review-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.review-facts > div { display: grid; align-content: start; gap: var(--space-2); border-top: var(--border-light); padding-top: var(--space-4); }
.review-facts span { color: var(--color-text-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; }
.review-facts strong { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; }
.review-facts small { color: var(--color-text); }
.review-payment { border-top: var(--border-light); padding-top: var(--space-6); }
.review-payment h2 { font-size: var(--text-lg); }
.review-payment > p { margin-top: var(--space-2); }
.terms-copy { margin-top: var(--space-4); color: var(--color-text); font-size: var(--text-sm); }
.terms-copy p + p { margin-top: var(--space-2); }
.authorization-check { display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-brand-200); border-radius: var(--radius-sm); padding: var(--space-5); color: var(--color-text-strong); background: var(--color-brand-50); cursor: pointer; }
.authorization-check input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin-top: 0.1rem; accent-color: var(--color-accent); }

.member-form { display: grid; gap: var(--space-5); }
.member-form fieldset { margin: 0; border: 0; padding: 0; }
.member-form fieldset legend { padding: 0; font-family: var(--font-display); font-size: var(--text-md); }
.form-note { color: var(--color-text-faint); font-size: var(--text-sm); }
.form-status { min-height: 1.25rem; color: var(--color-gold-900); font-size: var(--text-sm); }
.form-page { max-width: 50rem; display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-12); }
.trust-panel { height: max-content; border-left: 1px solid var(--color-brand-300); padding-left: var(--space-5); }
.trust-panel h2 { font-size: var(--text-md); }
.trust-panel p { margin-top: var(--space-2); color: var(--color-text); font-size: var(--text-sm); }

.task-dialog,
.confirm-dialog {
  width: min(calc(100% - 2rem), 34rem);
  max-height: min(52rem, calc(100svh - 2rem));
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  color: var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--shadow-panel);
}
.task-dialog::backdrop,
.confirm-dialog::backdrop { background: rgba(0, 23, 12, 0.56); backdrop-filter: blur(4px); }
.task-dialog__surface,
.confirm-dialog__surface { position: relative; overflow-y: auto; max-height: inherit; padding: var(--space-10); }
.dialog-close { position: absolute; top: var(--space-4); right: var(--space-4); min-height: 2.75rem; border: 0; padding: 0 var(--space-3); color: var(--color-text-faint); background: transparent; cursor: pointer; }
.dialog-heading { padding-right: var(--space-12); }
.dialog-heading > p:first-child { color: var(--color-accent); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; }
.dialog-heading h2,
.confirm-dialog h2 { margin-top: var(--space-3); font-size: var(--text-xl); line-height: 1.08; }
.dialog-heading h2 + p,
.confirm-dialog h2 + p { margin-top: var(--space-3); color: var(--color-text); }
.dialog-copy { margin: var(--space-6) 0; border-top: var(--border-light); padding-top: var(--space-5); color: var(--color-text); }
.dialog-heading + .member-form,
.dialog-heading + .card-form { margin-top: var(--space-8); }
.dialog-actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
.account-summary { display: grid; gap: var(--space-1); margin-top: var(--space-8); border-block: var(--border-light); padding: var(--space-5) 0; }
.account-summary span { color: var(--color-text-faint); font-size: var(--text-sm); }
.member-announcement { position: fixed; z-index: 500; top: 5.5rem; left: 50%; max-width: calc(100% - 2rem); translate: -50% 0; border: 1px solid var(--color-brand-300); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); color: var(--color-white); background: var(--color-brand-800); box-shadow: var(--shadow-panel); font-size: var(--text-sm); }

@media (max-width: 809.98px) {
  .app-header__inner { min-height: 3.75rem; grid-template-columns: 1fr auto; gap: var(--space-4); }
  .app-header .wordmark { width: 8rem; }
  .site-nav { display: none; }
  .account-menu__surface { position: fixed; top: 3.75rem; right: var(--space-4); }
  .mobile-nav {
    position: fixed;
    z-index: var(--layer-header);
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(4.25rem + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    border-top: var(--border-light);
    padding: var(--space-2) var(--space-2) env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--color-white) 96%, transparent);
    backdrop-filter: blur(14px);
  }
  .mobile-nav__link { min-height: 3.25rem; display: grid; place-items: center; gap: 0; border-radius: var(--radius-sm); color: var(--color-text-faint); font-size: var(--text-xs); }
  .mobile-nav__link[aria-current="page"] { color: var(--color-accent); background: var(--color-brand-50); }
  .mobile-nav__link--action { display: flex; justify-content: center; gap: var(--space-1); color: var(--color-accent); font-weight: 600; }
  .mobile-nav__link--action span { font-family: var(--font-display); font-size: var(--text-md); line-height: 1; }
  .member-main .button--small { min-height: 2.75rem; }
  .member-main { min-height: calc(100svh - 3.75rem); padding: var(--space-10) 0 calc(7.5rem + env(safe-area-inset-bottom)); }
  .member-heading,
  .detail-heading { align-items: flex-start; flex-direction: column; gap: var(--space-5); }
  .member-heading h1,
  .detail-heading h1,
  .composer-heading h1 { font-size: var(--text-2xl); }
  .member-heading .button { width: 100%; }
  .detail-heading__actions { width: 100%; justify-content: space-between; }
  .course-filter { width: 100%; }
  .booking-alert-panel { margin-top: var(--space-8); }
  .booking-alert-panel > header { align-items: flex-start; flex-direction: column; gap: var(--space-1); padding: var(--space-5); }
  .booking-alert { align-items: flex-start; flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
  .booking-alert__actions { width: 100%; justify-content: space-between; }
  .member-section { margin-top: var(--space-12); }
  .upcoming-row { min-height: 7rem; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-4); }
  .date-block { width: 3.25rem; padding-right: var(--space-3); }
  .upcoming-row__body { padding-block: var(--space-4); }
  .upcoming-row__body small { white-space: normal; }
  .upcoming-row__state { grid-column: 2; min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-4); }
  .upcoming-row__state > a { min-height: 2rem; }
  .plan-preview,
  .plan-row { align-items: flex-start; flex-direction: column; gap: var(--space-3); padding-block: var(--space-5); }
  .plan-preview small,
  .plan-row small { white-space: normal; }
  .plan-preview > span:last-child { align-self: flex-start; }
  .plan-row > span:last-child { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
  .plan-date-row__actions { justify-content: flex-start; }
  .booking-outcome dl { grid-template-columns: 1fr; }
  .booking-outcome dl div { border-bottom: var(--border-light); padding: var(--space-4) 0; }
  .course-row { align-items: flex-start; flex-direction: column; gap: var(--space-4); padding-block: var(--space-5); }
  .course-row > div:last-child { width: 100%; justify-content: space-between; }
  .payment-row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .payment-row > .secondary-action { grid-column: 2; }
  .discovery-search-fields,
  .discovery-name-fields { grid-template-columns: 1fr; }
  .discovery-search-fields .button,
  .discovery-name-fields .button { width: 100%; }
  .composer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .plan-summary { position: static; grid-row: 1; }
  .composer-fields { gap: var(--space-8); }
  .composer-submit { justify-content: stretch; }
  .composer-submit .button { width: 100%; }
  .review-facts { grid-template-columns: 1fr; gap: var(--space-6); }
  .form-page { grid-template-columns: 1fr; gap: var(--space-8); }
  .trust-panel { grid-row: 1; }
  .task-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .task-dialog__surface { min-height: 100%; padding: var(--space-16) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom)); }
  .confirm-dialog__surface { padding: var(--space-8) var(--space-5); }
  .dialog-actions { align-items: stretch; flex-direction: column; }
  .dialog-actions .button { width: 100%; }
  .dialog-actions .secondary-action { justify-content: center; }
  .member-announcement { top: 4.5rem; width: calc(100% - 2rem); border-radius: var(--radius-md); }
}

@media (max-width: 479.98px) {
  .field-pair { grid-template-columns: 1fr; }
  .choice-group { grid-template-columns: 1fr; }
  .choice-group label + label { border-top: var(--border); border-left: 0; }
  .booking-alert__actions { align-items: stretch; flex-direction: column; }
  .booking-alert__actions .button { width: 100%; }
  .booking-outcome__actions { align-items: stretch; flex-direction: column; }
  .booking-outcome__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .member-loading > span { animation: none; }
}