/* ============================================================
   SHELLO — MY SHELLO APP (auth + portals)
   Self-contained design system, brand-aligned with the marketing
   site (navy / sand / sunset orange · Fraunces + Inter).
   Goal: polished, simple, trustworthy — a premium first impression.
   ============================================================ */

:root {
  --navy: #2b3377;
  --ink: #141a3d;
  --deep: #0d1230;
  --sand: #f6f3ea;
  --sand-2: #ece7d8;
  --orange: #f5821f;
  --orange-deep: #e8491d;
  --aqua: #7fc4d4;
  --white: #ffffff;
  --text: #2a2f45;
  --muted: #6b7186;
  --line: #e4e0d4;
  --ok: #1f9d6b;
  --err: #d1432f;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --grad-brand: linear-gradient(155deg, #16295f 0%, #2b3377 45%, #1a6d86 100%);
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px rgba(13, 18, 48, 0.1);
  --shadow-lg: 0 30px 80px rgba(13, 18, 48, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--sand);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 12px 12px; font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
}

/* ============================================================
   AUTH LAYOUT — split screen
   ============================================================ */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

/* Left: branded ocean panel */
.auth-brand {
  position: relative;
  background: var(--grad-brand);
  color: var(--white);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-brand::after { /* soft sun glow */
  content: ""; position: absolute; width: 520px; height: 520px;
  right: -160px; top: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,130,31,0.55), rgba(245,130,31,0) 70%);
  pointer-events: none;
}
.auth-brand__top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.auth-brand__logo { height: 40px; width: auto; }
.auth-brand__mid { position: relative; z-index: 1; max-width: 30ch; }
.auth-brand__mid h1 {
  color: var(--white);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  margin-bottom: 18px;
}
.auth-brand__mid p { color: rgba(255,255,255,0.82); font-size: 1.06rem; }
.auth-brand__foot { position: relative; z-index: 1; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; color: rgba(255,255,255,0.9); font-size: 0.86rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 16px; height: 16px; opacity: 0.9; }
.wave-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; opacity: 0.5; }

/* Right: form side */
.auth-form-side {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 32px; background: var(--sand);
}
.auth-card { width: 100%; max-width: 430px; }
.auth-card__logo-sm { display: none; }
.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange);
  margin-bottom: 12px;
}
.auth-card h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 8px; }
.auth-card__sub { color: var(--muted); margin-bottom: 26px; font-size: 0.98rem; }

/* ---------- Social buttons ---------- */
.social-btns { display: grid; gap: 12px; margin-bottom: 22px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 13px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--white);
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.social-btn:hover:not([aria-disabled="true"]) { border-color: var(--navy); transform: translateY(-1px); }
.social-btn svg, .social-btn img { width: 20px; height: 20px; }
.social-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.social-btn .soon {
  position: absolute; right: 14px; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  background: var(--sand-2); padding: 3px 8px; border-radius: 999px;
}
/* Google = the primary path: emphasised border, shadow, a touch larger. */
.social-btn--primary {
  border-color: var(--navy);
  border-width: 2px;
  box-shadow: 0 8px 22px rgba(43, 51, 119, 0.14);
  padding: 15px 18px;
  font-size: 1rem;
}
.social-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43, 51, 119, 0.2); }
.social-btn .rec {
  position: absolute; right: 14px; font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-deep);
  background: #fdefe0; padding: 3px 8px; border-radius: 999px;
}

.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--muted); font-size: 0.8rem; margin: 4px 0 22px;
}
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* ---------- Fields ---------- */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field .hint { font-weight: 400; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input, select {
  width: 100%; padding: 13px 15px; font-size: 0.98rem; font-family: inherit;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.18s, box-shadow 0.18s;
}
input::placeholder { color: #a7abbd; }
input:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(43,51,119,0.1); }
.input-wrap { position: relative; }
.input-wrap .toggle-pw {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); font-size: 0.8rem; font-weight: 600; padding: 6px;
}
.pw-meter { height: 5px; border-radius: 999px; background: var(--sand-2); margin-top: 9px; overflow: hidden; }
.pw-meter > i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.25s, background 0.25s; }
.pw-note { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 24px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; border: none; color: var(--white);
  background: var(--orange); box-shadow: 0 10px 26px rgba(245,130,31,0.32);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.btn:hover:not(:disabled) { background: var(--orange-deep); transform: translateY(-2px); }
.btn:disabled { opacity: 0.75; cursor: default; }
.btn.is-loading { background: var(--orange-deep); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: none; border: 1.5px solid var(--navy); width: auto; padding: 11px 22px; }
.btn-ghost:hover:not(:disabled) { background: var(--navy); color: var(--white); }
.btn-sm { padding: 11px 20px; font-size: 0.9rem; width: auto; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.4); border-top-color: var(--white);
  display: inline-block; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Messages ---------- */
.form-msg {
  padding: 12px 15px; border-radius: var(--radius-sm); font-size: 0.9rem;
  margin-bottom: 18px; border: 1px solid transparent;
}
.form-msg.is-error { background: #fdecea; color: var(--err); border-color: #f5c6c0; }
.form-msg.is-success { background: #e7f6ef; color: var(--ok); border-color: #b8e6d1; }
.form-msg.is-info { background: #eef1fb; color: var(--navy); border-color: #cfd6f2; }

.auth-alt { text-align: center; margin-top: 22px; color: var(--muted); font-size: 0.92rem; }
.auth-alt a { color: var(--navy); font-weight: 600; }
.auth-legal { text-align: center; margin-top: 18px; font-size: 0.76rem; color: var(--muted); line-height: 1.6; }
.link-muted { color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.form-top-link { display: flex; justify-content: flex-end; margin-top: -6px; margin-bottom: 8px; }

/* the simulated-email box (reset/invite links shown on screen in preview) */
.sim-mail {
  margin-top: 20px; border: 1px dashed var(--navy); border-radius: var(--radius-sm);
  padding: 16px; background: #fbfaf5; font-size: 0.88rem;
}
.sim-mail strong { color: var(--navy); }
.sim-mail code { display: block; word-break: break-all; margin-top: 8px; color: var(--ink); font-size: 0.82rem; }

/* not-connected setup banner */
.setup-banner {
  max-width: 640px; margin: 40px auto; background: var(--white);
  border: 1px solid var(--line); border-left: 5px solid var(--orange);
  border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow);
}
.setup-banner h2 { font-size: 1.4rem; margin-bottom: 10px; }
.setup-banner p { color: var(--muted); margin-bottom: 8px; }
.setup-banner code { background: var(--sand-2); padding: 2px 7px; border-radius: 6px; font-size: 0.85em; }

/* ============================================================
   PORTAL / DASHBOARD
   ============================================================ */
.app-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,243,234,0.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  height: 68px; display: flex; align-items: center;
}
.app-topbar .inner {
  width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.app-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.app-brand img { height: 30px; }
.role-pill {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; background: var(--navy); color: var(--white);
}
.role-pill.instructor { background: #14536b; }
.role-pill.admin { background: var(--orange); }
.app-usermenu { display: flex; align-items: center; gap: 14px; }
.app-usermenu .who { text-align: right; line-height: 1.25; }
.app-usermenu .who b { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.app-usermenu .who small { color: var(--muted); font-size: 0.78rem; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--grad-brand); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
}
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 0.85rem; color: var(--ink); }
.icon-btn:hover { border-color: var(--navy); }

.app-main { max-width: 1160px; margin: 0 auto; padding: 40px 24px 80px; }
.welcome { margin-bottom: 6px; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.welcome-sub { color: var(--muted); margin-bottom: 30px; max-width: 60ch; }

.preview-note {
  display: inline-flex; align-items: center; gap: 9px;
  background: #eef1fb; color: var(--navy); border: 1px solid #cfd6f2;
  padding: 8px 15px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  margin-bottom: 30px;
}
.preview-note::before { content: "•"; color: var(--orange); font-size: 1.4em; line-height: 0; }

/* Personalised welcome hero — the warm "home" moment after login. */
.welcome-hero {
  position: relative; overflow: hidden;
  background: var(--grad-brand); color: var(--white);
  border-radius: var(--radius); padding: 40px 40px 44px;
  margin-bottom: 34px; box-shadow: var(--shadow-lg);
}
.welcome-hero::after {
  content: ""; position: absolute; width: 340px; height: 340px;
  right: -120px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,130,31,0.55), rgba(245,130,31,0) 70%);
}
.welcome-hero .eyebrow { color: #ffd9b0; margin-bottom: 10px; }
.welcome-hero h1 { color: var(--white); font-size: clamp(2rem, 4.4vw, 2.9rem); margin-bottom: 12px; position: relative; z-index: 1; }
.welcome-hero p { color: rgba(255,255,255,0.86); font-size: 1.05rem; max-width: 54ch; position: relative; z-index: 1; }
.welcome-hero .hero-meta {
  position: relative; z-index: 1; margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.85rem; color: rgba(255,255,255,0.82);
}
.welcome-hero .hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.welcome-hero .wave-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; opacity: 0.4; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.pcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; min-height: 168px;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pcard .ic {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--sand-2); margin-bottom: 16px; font-size: 1.4rem;
}
.pcard h3 { font-size: 1.2rem; margin-bottom: 6px; }
.pcard p { color: var(--muted); font-size: 0.9rem; flex: 1; }
.pcard .stat { font-family: var(--font-display); font-size: 2rem; color: var(--ink); margin-bottom: 2px; }
.pcard .tag { margin-top: 14px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

.section-title { font-size: 1.3rem; margin: 44px 0 18px; }

/* Complete-profile prompt */
.profile-prompt {
  background: var(--grad-brand); color: var(--white); border-radius: var(--radius);
  padding: 26px 28px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px; box-shadow: var(--shadow);
}
.profile-prompt h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 4px; }
.profile-prompt p { color: rgba(255,255,255,0.85); font-size: 0.92rem; }
.profile-prompt .btn { width: auto; background: var(--white); color: var(--navy); box-shadow: none; }
.profile-prompt .btn:hover { background: var(--sand); }
.progress-mini { height: 6px; width: 160px; background: rgba(255,255,255,0.25); border-radius: 999px; margin-top: 10px; overflow: hidden; }
.progress-mini > i { display: block; height: 100%; background: var(--orange); border-radius: 999px; }

/* Admin invite panel + generic panels */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px; box-shadow: var(--shadow); }
.panel h3 { font-size: 1.2rem; margin-bottom: 4px; }
.panel .muted { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { margin: 0; flex: 1 1 240px; }
.table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.9rem; }
.table th, .table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.badge { font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--sand-2); color: var(--ink); }
.badge.pending { background: #fdefe0; color: var(--orange-deep); }
.badge.active { background: #e7f6ef; color: var(--ok); }

/* profile form page */
.form-page { max-width: 720px; margin: 0 auto; }
.form-page .panel { margin-bottom: 22px; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; font-size: 0.9rem; margin-bottom: 18px; }

/* ============================================================
   THE THREE SPACES — My Journey · Coach Hub · HQ
   Shared components. A credit balance is rendered by the same
   markup wherever it appears, so a student, their coach and
   Sherene are always literally looking at the same thing.
   ============================================================ */

/* Preview banner — honest about the sample club, never in the way.
   It sits IN the flow at the top of the sticky header rather than being
   layered over it, so it can't cover the brand row at any width. */
.demo-bar {
  background: var(--ink); color: rgba(255,255,255,0.9);
  font-size: 0.8rem; padding: 7px 20px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  text-align: center;
}
.demo-bar b { color: var(--white); }
.demo-reset {
  background: none; border: 1px solid rgba(255,255,255,0.3); color: var(--white);
  border-radius: 999px; padding: 3px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  flex: none;
}
.demo-reset:hover { border-color: var(--orange); color: var(--orange); }
/* With the banner present the header is two stacked rows, not one 68px bar. */
.app-topbar:has(.demo-bar) { height: auto; display: block; }
.app-topbar:has(.demo-bar) .inner { height: 68px; }

/* Demo doors on the login screen */
.demo-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; }
.demo-doors { display: grid; gap: 10px; }
.demo-door {
  text-align: left; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; transition: border-color .15s, transform .15s;
}
.demo-door:hover { border-color: var(--navy); transform: translateY(-1px); }
.demo-door b { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
.demo-door span { font-size: 0.85rem; color: var(--text); }
.demo-door small { font-size: 0.75rem; color: var(--muted); }

.field-hint { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); }
.auth-card.is-wide { max-width: 560px; }

/* Optional-details fold on registration */
.opt-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 16px; margin-bottom: 18px; background: rgba(255,255,255,0.5); }
.opt-block > summary { cursor: pointer; padding: 14px 0; list-style: none; }
.opt-block > summary::-webkit-details-marker { display: none; }
.opt-block > summary b { display: block; font-size: 0.92rem; color: var(--ink); }
.opt-block > summary span { font-size: 0.8rem; color: var(--muted); }
.opt-block[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.opt-block textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: var(--white); resize: vertical;
}
.opt-block textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(43,51,119,0.1); }

/* App nav */
.app-nav { display: flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.app-nav a {
  padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--muted);
}
.app-nav a:hover { color: var(--ink); background: rgba(255,255,255,0.6); }
.app-nav a.is-here { background: var(--navy); color: var(--white); }

/* Space hero */
.app-hero {
  background: var(--grad-brand); color: var(--white); border-radius: var(--radius);
  padding: 38px 40px 42px; margin-bottom: 34px; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.app-hero::after {
  content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -140px;
  border-radius: 50%; background: radial-gradient(circle, rgba(245,130,31,0.5), rgba(245,130,31,0) 70%);
}
.app-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 8px; position: relative; z-index: 1; }
.app-hero p { color: rgba(255,255,255,0.84); position: relative; z-index: 1; }
.app-eyebrow {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #ffd9b0; margin-bottom: 10px; position: relative; z-index: 1;
}

/* Sections */
.app-section { margin-bottom: 40px; }
.app-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.app-section-head h2 { font-size: 1.3rem; }
.app-section-head p { font-size: 0.88rem; color: var(--muted); margin-top: 2px; max-width: 62ch; }

/* THE credit card */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.credit-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.credit-card.is-low { border-color: #f6c9a4; background: #fffaf5; }
.credit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.credit-scope { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.credit-flag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: #fdefe0; color: var(--orange-deep); padding: 3px 9px; border-radius: 999px; }
.credit-figure { display: flex; align-items: baseline; gap: 8px; }
.credit-figure b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--ink); }
.credit-figure span { color: var(--muted); font-size: 0.9rem; }
.credit-bar { height: 7px; border-radius: 999px; background: var(--sand-2); margin: 14px 0 10px; overflow: hidden; }
.credit-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--grad-brand); }
.credit-card.is-low .credit-bar > i { background: var(--orange); }
.credit-blurb { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; }
.credit-foot { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px; }
.credit-card.is-compact { padding: 14px 16px; box-shadow: none; }
.credit-card.is-compact .credit-figure b { font-size: 1.6rem; }

/* Next training */
.next-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.next-when { display: flex; flex-direction: column; }
.next-rel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-deep); }
.next-when b { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.next-when span { font-size: 0.85rem; color: var(--muted); }
.next-where { flex: 1; border-left: 1px solid var(--line); padding-left: 28px; }
.next-where b { display: block; color: var(--ink); }
.next-where span { font-size: 0.85rem; color: var(--muted); }

/* Lists / rows */
.app-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.app-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.app-row:last-child { border-bottom: none; }
.app-row-main b { display: block; color: var(--ink); font-size: 0.95rem; }
.app-row-main span { font-size: 0.83rem; color: var(--muted); }
.app-row-meta { text-align: right; flex: none; }
.app-row-meta span { display: block; font-size: 0.88rem; color: var(--ink); font-weight: 600; }
.app-row-meta small { font-size: 0.75rem; color: var(--muted); }

/* Ledger history */
.led-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.led-row { display: flex; align-items: center; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.led-row:last-child { border-bottom: none; }
.led-delta {
  flex: none; width: 44px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
}
.led-delta.is-plus { background: #e7f6ef; color: var(--ok); }
.led-delta.is-minus { background: var(--sand-2); color: var(--ink); }
.led-main { flex: 1; }
.led-main b { display: block; font-size: 0.9rem; color: var(--ink); }
.led-main span { font-size: 0.8rem; color: var(--muted); }
.led-meta { text-align: right; flex: none; }
.led-meta span { display: block; font-size: 0.8rem; color: var(--text); }
.led-meta small { font-size: 0.72rem; color: var(--muted); }

/* Stats */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.stat-row .stat {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px; text-align: center;
}
.stat-row .stat b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--ink); line-height: 1.1; }
.stat-row .stat span { font-size: 0.8rem; color: var(--muted); }

/* Certificates */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cert-card {
  background: var(--grad-brand); color: var(--white); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.cert-agency { font-size: 0.7rem; font-weight: 700; letter-spacing: .12em; color: #ffd9b0; }
.cert-card b { display: block; font-family: var(--font-display); font-size: 1.2rem; margin: 6px 0 8px; }
.cert-card small { display: block; font-size: 0.76rem; color: rgba(255,255,255,0.75); }
.cert-no { font-variant-numeric: tabular-nums; }

/* Honest empty states */
.app-empty {
  background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 30px 24px; text-align: center;
}
.app-empty p { color: var(--muted); font-size: 0.92rem; margin-bottom: 14px; }
.app-empty .btn { width: auto; display: inline-flex; }

.btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 0.87rem;
  width: auto; display: inline-flex; align-items: center; justify-content: center; box-shadow: none;
}
.btn-ghost:hover { border-color: var(--navy); background: var(--white); }

/* Student roster (Coach Hub) + database rows (HQ) */
.student-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.student-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.student-head .avatar { width: 36px; height: 36px; font-size: 0.8rem; }
.student-head b { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.student-head .who-meta { flex: 1; }
.student-head .who-meta small { display: block; font-size: 0.78rem; color: var(--muted); }
.student-body { margin-top: 16px; display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 20px; }
.student-detail h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.student-detail p { font-size: 0.86rem; margin-bottom: 12px; }
.flag-medical { background: #fff6f4; border: 1px solid #f3c9c0; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.82rem; color: #8d2f1e; }
.flag-medical b { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }

.mark-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mark-btn {
  border: 1px solid var(--line); background: var(--white); border-radius: 999px;
  padding: 8px 15px; font-size: 0.82rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.mark-btn:hover { border-color: var(--navy); }
.mark-btn.is-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.mark-btn.is-primary:hover { background: var(--ink); }
.mark-done { font-size: 0.8rem; color: var(--ok); font-weight: 600; }

/* HQ metric band */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 34px; }
.metric {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow);
}
.metric span { font-size: 0.75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.metric b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); line-height: 1.2; margin-top: 4px; }
.metric small { font-size: 0.78rem; color: var(--muted); }
.metric.is-liability b { color: var(--orange-deep); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .app-nav { display: none; }
  .student-body { grid-template-columns: 1fr; }
  .next-where { border-left: none; padding-left: 0; }
}
/* Phones: most of the crew is on one. The top bar has to stay a single
   tidy row, so the space name may wrap but nothing may collide. */
@media (max-width: 620px) {
  .app-topbar { height: auto; }
  .app-topbar .inner { padding: 10px 16px; gap: 10px; }
  .app-topbar:has(.demo-bar) .inner { height: auto; }
  .app-brand { font-size: 1rem; gap: 8px; min-width: 0; }
  .app-brand img { height: 24px; }
  .role-pill { display: none; }          /* the space name already says it */
  .app-usermenu { gap: 8px; }
  .app-usermenu .who { display: none; }
  .avatar { width: 34px; height: 34px; font-size: 0.78rem; }
  .icon-btn { padding: 7px 12px; font-size: 0.8rem; white-space: nowrap; }
  .demo-bar { font-size: 0.72rem; padding: 6px 12px; gap: 8px; }
  .app-hero { padding: 26px 22px 30px; }
  .next-card { gap: 16px; }
  .app-row { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-card__logo-sm { display: block; height: 40px; margin: 0 auto 26px; }
  .auth-form-side { padding: 40px 22px; min-height: 100vh; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .app-usermenu .who { display: none; }
  .profile-prompt { flex-direction: column; align-items: flex-start; }
}

/* HQ catalogue — the same tags the public site badges with, in list form. */
.hq-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.hq-tag {
  font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--sand-2); color: var(--ink); white-space: nowrap;
}
.hq-tag[data-group="activity"] { background: #e6ecfb; color: var(--navy); }
.hq-tag[data-group="destination"] { background: #e7f6ef; color: var(--ok); }
.hq-tag[data-group="flag"] { background: #fdefe0; color: var(--orange-deep); }
.hq-tag[data-group="status"] { background: #eef1fb; color: var(--muted); }

/* ============================================================
   PAYMENTS · BOOKINGS · ALERTS  (Winnie's round 2, 2026-07-16)
   ============================================================ */

/* ---- State chips. One vocabulary of tone across all three spaces:
   `wait` = someone is holding this, `good` = it moved, `bad` = it needs
   fixing. The tone comes from js/data.js PAYMENT.states, so HQ and the
   student can't colour the same state differently. ---- */
.state-chip {
  display: inline-block; white-space: nowrap;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 4px 11px; border-radius: 999px;
  background: var(--sand-2); color: var(--muted);
}
.state-chip.is-wait { background: #fdf1e2; color: #a35a12; }
.state-chip.is-good { background: #e7f6ef; color: var(--ok); }
.state-chip.is-bad  { background: #fdecea; color: var(--err); }

/* ---- Things waiting on the student, at the top of My Journey ---- */
.alert-stack { display: grid; gap: 10px; margin: 0 0 30px; }
.alert-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  text-decoration: none; color: var(--text);
}
.alert-row.is-wait { border-left-color: var(--orange); }
.alert-row.is-good { border-left-color: var(--ok); }
.alert-row.is-bad  { border-left-color: var(--err); }
.al-ico { font-size: 1.2rem; }
.al-body { flex: 1; min-width: 0; }
.al-body b { display: block; font-size: 0.95rem; color: var(--ink); }
.al-body small { color: var(--muted); font-size: 0.85rem; }
.al-when { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.al-go { color: var(--orange); font-weight: 700; }
a.alert-row:hover { border-color: var(--orange); }

/* ---- The pay screen ---- */
.pay-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pay-item { display: block; color: var(--muted); font-size: 0.9rem; }
.pay-amount { font-family: var(--font-display); font-size: 2rem; color: var(--ink); }
.pay-says { color: var(--muted); margin-top: 8px; }
.pay-reject {
  margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: #fdecea; color: #8c2c1e; font-size: 0.9rem;
}

/* The six-step tracker — Winnie's flow, made visible to the student. */
.pay-track { list-style: none; display: grid; gap: 2px; margin: 24px 0; padding: 0; }
.pay-track li { display: flex; align-items: center; gap: 12px; padding: 8px 0; opacity: 0.45; }
.pay-track li.is-done, .pay-track li.is-now { opacity: 1; }
.pt-dot {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700;
  background: var(--sand-2); color: var(--muted);
}
.pay-track li.is-done .pt-dot { background: var(--ok); color: var(--white); }
.pay-track li.is-now .pt-dot { background: var(--orange); color: var(--white); }
.pt-label b { display: block; font-size: 0.9rem; color: var(--ink); }
.pt-label small { color: var(--muted); font-size: 0.8rem; }
.pay-track.is-rejected .pt-dot { background: var(--sand-2); color: var(--muted); }
.pay-track.is-rejected li.is-now .pt-dot { background: var(--err); color: var(--white); }

.pay-ref {
  margin: 20px 0; padding: 14px 18px; border-radius: var(--radius-sm);
  background: var(--sand); border: 1px dashed var(--line);
}
.pay-ref > span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pay-ref b { font-size: 1.3rem; color: var(--ink); letter-spacing: 0.06em; }
.pay-ref small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.pa-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* The reassurance above the payment section (Sherene, 2026-07-17): a
   first-time customer should know what happens after the slip goes up
   BEFORE they're asked to pay. Calm green, not a warning box. */
.pay-assure { background: #f1f8f2; border: 1px solid #cde5d2; border-radius: var(--radius-sm); padding: 14px 18px; margin: 18px 0 20px; }
.pay-assure b { display: block; color: #1b5e34; font-size: 0.95rem; }
.pay-assure p { margin: 4px 0 0; color: #2e6b45; font-size: 0.88rem; }

.pay-choose h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin-bottom: 12px; }
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay-method {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 16px; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pay-method:hover { border-color: var(--aqua); }
.pay-method.is-on { border-color: var(--navy); background: #f7f8fd; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pm-emoji { font-size: 1.4rem; }
.pm-body { flex: 1; min-width: 0; }
.pm-body b { display: block; color: var(--ink); font-size: 0.95rem; }
.pm-body small { color: var(--muted); font-size: 0.8rem; }
.pm-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: var(--ok); }

.pay-how { margin: 18px 0; }
.pay-qr { display: block; width: 190px; height: auto; margin: 0 auto 16px; border-radius: var(--radius-sm); }
.pay-steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.9rem; }
.pay-steps li { margin-bottom: 5px; }

.pay-account { background: var(--sand); border-radius: var(--radius-sm); padding: 16px 18px; }
.pay-account.is-pending { border: 1px dashed var(--line); }
.pay-account.is-pending b { display: block; color: var(--ink); }
.pay-account.is-pending p { color: var(--muted); font-size: 0.88rem; margin-top: 4px; }
.pa-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.pa-row span { color: var(--muted); font-size: 0.85rem; }
.pa-row b { color: var(--ink); }

.pay-upload { margin-top: 22px; }
.up-drop {
  display: block; text-align: center; cursor: pointer;
  padding: 28px; border-radius: var(--radius-sm);
  border: 2px dashed var(--line); background: var(--sand);
  transition: border-color 0.2s ease;
}
.up-drop:hover { border-color: var(--orange); }
.up-drop b { display: block; color: var(--ink); }
.up-drop small { color: var(--muted); font-size: 0.85rem; }
.up-name { margin: 10px 0; color: var(--ok); font-weight: 600; font-size: 0.9rem; }

.pay-invoice {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  margin-top: 22px; padding: 16px 18px;
  border-radius: var(--radius-sm); background: #e7f6ef;
}
.pay-invoice b { color: var(--ink); display: block; }
.pay-invoice small { color: var(--muted); font-size: 0.82rem; }

/* ---- Request cards: a coach's session requests, HQ's payment queue ---- */
.request-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 14px;
}
.rq-head { display: flex; align-items: center; gap: 14px; }
.rq-head .who-meta { flex: 1; min-width: 0; }
.rq-kind { color: var(--navy); font-weight: 600; font-size: 0.88rem; margin-top: 10px; }
.rq-note { color: var(--text); font-style: italic; margin-top: 10px; }

/* A coach's suggested-time line inside My Journey's booking rows. */
.row-suggest { display: block; margin-top: 6px; color: var(--ink); font-size: 0.92rem; }
.app-row.is-suggested { background: #fff8ef; border-radius: 12px; }
.rq-money { margin-top: 12px; }
.rq-money b { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.rq-money small { color: var(--muted); font-size: 0.82rem; margin-left: 8px; }
.slip-thumb { display: block; margin-top: 14px; text-decoration: none; }
.slip-thumb img {
  max-width: 100%; max-height: 260px; border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.slip-thumb span { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 6px; }

/* HQ's "you still owe the site your bank details" nudge. */
.hq-warn {
  background: #fdf1e2; border: 1px solid #f3d7ae; border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 22px;
}
.hq-warn b { color: var(--ink); }
.hq-warn p { color: #7a4a12; font-size: 0.9rem; margin-top: 4px; }
.hq-warn code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em;
  background: rgba(255, 255, 255, 0.7); padding: 1px 5px; border-radius: 4px;
}
.metric.is-action { border-color: var(--orange); }
.metric.is-action b { color: var(--orange-deep); }

/* ---- Booking a session: coach → date → time ---- */
.book-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.book-aside { position: sticky; top: 96px; }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pick-card {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pick-card:hover { border-color: var(--aqua); }
.pick-card.is-on { border-color: var(--navy); background: #f7f8fd; }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-avatar {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-brand); color: var(--white);
  font-weight: 700;
}
.pick-body b { display: block; color: var(--ink); font-size: 0.95rem; }
.pick-body small { color: var(--muted); font-size: 0.8rem; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.slot-row { display: flex; flex-wrap: wrap; gap: 10px; }
.slot {
  cursor: pointer; padding: 12px 18px; border-radius: var(--radius-sm);
  border: 2px solid var(--line); background: var(--white); text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.slot:hover { border-color: var(--aqua); }
.slot.is-on { border-color: var(--navy); background: #f7f8fd; }
.slot b { display: block; color: var(--ink); }
.slot small { color: var(--muted); font-size: 0.78rem; }
/* A slot being REQUESTED rather than booked off the published schedule. */
.slot.is-request { border-style: dashed; }
.slot.is-request small { color: var(--orange, #f5821f); }
/* A FULL session — shown, but not selectable (capacity reached). */
.slot:disabled, .slot.is-full { cursor: not-allowed; opacity: 0.55; background: #f4f5f8; }
.slot:disabled:hover, .slot.is-full:hover { border-color: var(--line); }

/* ---- Training session picker — one card per day (Shenzhen camp) ----
   A day is a card: checkbox + date on top, then the Morning/Afternoon
   options as a responsive grid, then the day's activity line. Works from
   wide desktop down to a single column on mobile. */
/* Session picker — one guided card per training day (checkbox · date ·
   session selection · short description), a responsive grid rather than a
   table. 2–3 across on desktop/tablet, a single column on mobile. */
.sess-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 12px; align-items: start;
}
.sess-card {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--white); padding: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sess-card.is-on {
  border-color: var(--navy); background: #f7f8fd;
  box-shadow: 0 8px 26px rgba(43, 51, 119, 0.10);
}
.sess-card.is-on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy);
}
.sess-card-head { display: flex; align-items: flex-start; gap: 12px; }
label.sess-card-head { cursor: pointer; }
.sess-card-head input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; margin: 1px 0 0; }
.sess-card-date { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sess-card-date b { color: var(--ink); font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.sess-card-date small { color: var(--muted); font-size: 0.8rem; }
.sess-card-desc {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 0.82rem; color: var(--muted); line-height: 1.5;
}
.sess-card-hint { margin: 12px 0 0; font-size: 0.82rem; color: var(--muted); font-style: italic; }
.sess-card-body { margin-top: 14px; }
.sess-choose {
  margin: 0 0 10px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.sess-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.sess-opt {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); cursor: pointer; text-align: left;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sess-opt:hover { border-color: var(--aqua); }
.sess-opt.is-on { border-color: var(--navy); background: #eef1fb; }
.sess-opt b { color: var(--ink); font-size: 0.95rem; }
.sess-opt small { color: var(--muted); font-size: 0.8rem; }
.sess-opt.is-full { background: #f4f5f8; }
.sess-opt.is-full small { color: var(--orange-deep); font-weight: 600; }
.sess-opt.is-wait { border-color: var(--orange); border-style: dashed; }
.sess-opt.is-wait small { color: var(--orange-deep); font-weight: 600; }

/* Coach-card availability line, shown once a date is picked. */
.pick-avail { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--muted); }
.pick-avail.is-on-day { color: #1b7f4d; font-weight: 600; }

/* The pool when it arrived preset via /book?location=… */
.loc-fixed { margin: 0; font-size: 1rem; color: var(--ink); }
.loc-fixed .loc-change { margin-left: 10px; font-size: 0.82rem; color: var(--muted); text-decoration: underline; }

.confirm-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.cf-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sand-2); }
.cf-line:last-of-type { border-bottom: none; }
.cf-line span { color: var(--muted); font-size: 0.88rem; }
.cf-line b { color: var(--ink); text-align: right; }
.cf-line.is-quiet b { color: var(--muted); font-weight: 600; }
.cf-note { color: var(--muted); font-size: 0.82rem; margin-top: 10px; line-height: 1.5; }
.opt { color: var(--muted); font-weight: 400; font-size: 0.8em; }

@media (max-width: 900px) {
  .book-layout { grid-template-columns: 1fr; }
  .book-aside { position: static; }
  .pay-methods { grid-template-columns: 1fr; }
  .pick-row { grid-template-columns: 1fr; }
}

/* ---- Unified booking pieces (2026-07-17 round 3) ---- */
.order-timeline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 0.78rem; color: var(--muted);
}
.tl-step.is-done { color: var(--ok); font-weight: 600; }
.tl-arrow { opacity: 0.45; }
.pay-schedule { margin-top: 10px; }
.pay-schedule .state-chip { font-size: 0.7rem; margin-left: 8px; }
.rq-notes { margin-top: 10px; border-left: 3px solid var(--sand-2); padding-left: 12px; }
.rq-notes .rq-note { margin: 6px 0; }

/* ---- Payment vault (2026-07-18 round 4) ---- */
.vault-search { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.vault-search input[type="search"] { flex: 1; min-width: 220px; }
.vault-search select { min-width: 150px; }
.vault-row .app-row-meta small a { font-weight: 600; }
.vault-audit { margin-top: 6px; font-size: 0.8rem; color: var(--muted); }
.vault-audit summary { cursor: pointer; font-weight: 600; }
.vault-audit p { margin: 4px 0 0; }

/* ---------- Trip booking: room option cards ----------
   Three tappable cards — "Option N", photo, short description, price.
   The actual villa name only appears once an option is selected (the
   .room-reveal line); the backend records that real name. */
.room-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.room-opt {
  display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(43, 51, 119, 0.18);
  border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s;
  font: inherit;
}
.room-opt:hover { border-color: var(--aqua); }
.room-opt.is-on { border-color: var(--navy); background: #f7f8fd; box-shadow: 0 4px 14px rgba(43, 51, 119, 0.12); }
.room-photo { display: block; width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.room-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.room-body b { color: var(--ink); font-size: 0.92rem; }
.room-body small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.room-reveal { margin-top: 2px; font-size: 0.82rem; font-weight: 700; color: var(--navy); }
@media (max-width: 640px) { .room-options { grid-template-columns: 1fr; } .room-photo { aspect-ratio: 16/7; } }