/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

body { overflow-y: auto; }

a { color: #667eea; text-decoration: none; }
a:hover { text-decoration: underline; }
.link--accent { color: var(--accent, #00c8c8); }

/* ─── Design Tokens ───────────────────────────────────────────── */
:root {
  --color-primary: #667eea;
  --color-accent: #764ba2;
  --color-success: #2ecc71;
  --color-error: #e74c3c;
  --color-warning: #f39c12;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-muted: rgba(255, 255, 255, 0.5);
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ─── Glass Panel ─────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}

/* ─── Navigation ──────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--glass-border);
  flex-wrap: wrap;
}
/* Forces the role badge / username / clock / Logout group onto its own line,
   regardless of how many nav links precede it and wrap above. Without this,
   that group rides whatever line the link wrap leaves it on - e.g. Logout
   stranded alone when the link list grows long enough to wrap (#owner-nav
   layout, 2026-09-22). */
.nav__break { flex-basis: 100%; height: 0; }
.nav__brand { font-weight: 700; font-size: 14px; color: var(--color-primary); }
.nav__user { color: var(--text-muted); font-size: 11px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__clock { color: var(--text-tertiary); font-size: 10px; white-space: nowrap; }
.nav__link { color: var(--text-primary); font-size: 11px; white-space: nowrap; }
.nav__link--active { color: var(--color-primary); font-weight: 700; }
.nav__role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.5px;
}

/* Role-specific nav colors */
.nav--member .nav__role-badge { background: #2ecc71; color: #000; }
.nav--member { border-bottom-color: #2ecc71; }
.nav--clubOwner .nav__role-badge { background: #9b59b6; color: #fff; }
.nav--clubOwner { border-bottom-color: #9b59b6; }
.nav--dj .nav__role-badge { background: #3498db; color: #fff; }
.nav--dj { border-bottom-color: #3498db; }
.nav--host .nav__role-badge { background: #e67e22; color: #fff; }
.nav--host { border-bottom-color: #e67e22; }
.nav--entertainer .nav__role-badge { background: #e74c3c; color: #fff; }
.nav--entertainer { border-bottom-color: #e74c3c; }

/* ─── Page Layout ─────────────────────────────────────────────── */
.page { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
/* Set by the layout only on pages that actually render the FAB, so pages without
   it keep their normal bottom padding. One rule covers every page and form —
   the FAB is global, so its clearance is too. */
body.has-help-fab .page { padding-bottom: var(--help-fab-clearance); }
/* The yellow note is a FIXED right-hand overlay, so it needs right clearance for
   the same reason the FAB row needs clearance below: without it, anything the
   page right-aligns sits underneath the card and cannot be clicked. .form-actions
   is justify-content: flex-end, so on a long form that is the Save button — on
   /hud/account it was silently unclickable until the user closed the note, with
   no hint that the note was eating the click.
   Toggled with the card: the layout sets .has-note when it renders the note, and
   yellow-note.js adds/removes it as the user opens and closes, so a closed note
   gives the width straight back.
   Below 900px there is no room to reserve 340px beside the content — the card
   overlays a narrow page by design and the user closes it to read underneath. */
@media (min-width: 900px) {
  body.has-note .page { padding-right: var(--note-clearance); }
}
/* Too narrow to reserve the gutter, so dodge the card instead of hiding under
   it: stop right-aligning the form buttons, which is the only thing the page
   deliberately pushes into the strip the card occupies. */
@media (max-width: 899px) {
  body.has-note .form-actions { justify-content: flex-start; }
}
.page__title { font-size: 16px; font-weight: 700; }

/* ─── Toast ───────────────────────────────────────────────────── */
.toast {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}
.toast--success { background: rgba(46, 204, 113, 0.2); border: 1px solid var(--color-success); color: var(--color-success); }
.toast--error { background: rgba(231, 76, 60, 0.2); border: 1px solid var(--color-error); color: var(--color-error); }

/* ─── Login Page ──────────────────────────────────────────────── */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.login-page__card { max-width: 320px; width: 100%; text-align: center; padding: 24px; }

/* #373 in-world-only login: the account has no password and name-only login is
   refused, so the form has no submit button and these instructions take its
   place. Left-aligned on purpose — the card is centred, but a numbered
   procedure is unreadable centred. */
.login-page__inworld {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
  text-align: left;
}
.login-page__inworld-head {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.login-page__inworld-steps {
  margin: 0 0 10px;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-primary);
}
.login-page__inworld-steps b { color: var(--text-primary); font-weight: 600; }
.login-page__inworld-why {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.login-page__title { font-size: 28px; font-weight: 800; color: var(--color-primary); margin-bottom: 4px; }
.login-page__subtitle { color: var(--text-muted); margin-bottom: 20px; font-size: 13px; }
.login-page__form { display: flex; flex-direction: column; gap: 10px; text-align: left; }

/* ─── Forms ───────────────────────────────────────────────────── */
.form-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; }
.form-input, .form-select {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: #fff;
  font-size: 13px;
  outline: none;
}
.form-input:focus, .form-select:focus { border-color: var(--color-primary); }
.form-select { background-color: #1a1a2e; }
.form-select option { background-color: #1a1a2e; color: #fff; padding: 6px 10px; }
.form-select--sm { width: auto; min-width: 100px; }
.form-textarea { min-height: 60px; resize: vertical; }
.genre-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.genre-check { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; cursor: pointer; }
.form-row { display: flex; gap: 10px; }
.form-group { flex: 1; }
.form-actions { display: flex; gap: 8px; margin-top: 10px; }
.inline-form { display: inline; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn--primary:hover { background: #5a6fd6; }
.btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn--danger { background: rgba(231, 76, 60, 0.2); border-color: var(--color-error); color: var(--color-error); }
.btn--im { background: rgba(46, 204, 113, 0.18); border-color: var(--color-success); color: #4ee38b; font-weight: 600; }
.btn--sm { padding: 4px 8px; font-size: 11px; }
.btn--full { width: 100%; }
/* Dual-Role Account page: the white bar between the role panel and the member
   panel (Mark, 2026-09-26). It is a disabled <button> carrying .btn, like the
   blue Subscribe bar, so its thickness matches by construction: browsers draw
   buttons in their own font (not the page's), which a <div> would not get. */
.panel-divider { display: block; background: #fff; border-color: #fff; color: transparent; cursor: default; pointer-events: none; margin: 18px 0; user-select: none; }
.btn--disabled { opacity: 0.4; pointer-events: none; }
.btn--active { background: rgba(102, 126, 234, 0.2); border-color: var(--color-primary); color: var(--color-primary); }
.btn--fav-active { color: #f1c40f; border-color: #f1c40f; }
.btn--toggle { background: rgba(231, 76, 60, 0.2); border-color: #e74c3c; color: #e74c3c; }
.btn--toggle--active { background: rgba(46, 204, 113, 0.2); border-color: #2ecc71; color: #2ecc71; }
.btn--sub-active { color: var(--color-success); border-color: var(--color-success); }

/* ─── Filters ─────────────────────────────────────────────────── */
.filters { margin-bottom: 4px; }
.filters__title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.filters__form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.filters__toggles { display: flex; gap: 6px; }
.filters__flags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.filters__flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.filters__flag input { cursor: pointer; }
.filters__flag-group { display: inline-flex; align-items: center; gap: 8px; }
.filters__flag-label { font-size: 12px; color: var(--text-muted); }

/* ─── Club Cards ──────────────────────────────────────────────── */
.club-list { display: flex; flex-direction: column; gap: 6px; }
.club-card { padding: 10px; }
.club-card--compact { padding: 8px; margin-bottom: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); }
.club-card__header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.club-card__name { font-size: 14px; font-weight: 700; flex: 1; }
.club-card__desc { color: var(--text-muted); font-size: 12px; margin-bottom: 6px; }
.club-card__actions { display: flex; gap: 6px; align-items: center; }

/* ─── Club classification badges (mig 115) ────────────────────── */
.club-card__lgbtq { display: inline-flex; align-items: center; border-radius: 2px; overflow: hidden; }
.club-card__maturity { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; border-radius: 12px; border: 1px solid; font-size: 11px; font-weight: 600; }
.club-card__maturity-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 700; color: #fff; }
.club-card__maturity--g { color: #4a90ff; background: rgba(74,144,255,0.12); border-color: rgba(74,144,255,0.4); }
.club-card__maturity--g .club-card__maturity-chip { background: #4a90ff; }
.club-card__maturity--m { color: #c8c8d8; background: rgba(120,120,140,0.15); border-color: rgba(160,160,180,0.4); }
.club-card__maturity--m .club-card__maturity-chip { background: #12121a; border: 1px solid rgba(255,255,255,0.35); }
.club-card__maturity--a { color: #ff5a5a; background: rgba(255,90,90,0.12); border-color: rgba(255,90,90,0.4); }
.club-card__maturity--a .club-card__maturity-chip { background: #e40303; }
.club-card__newcomer { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #2ecc71; background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.4); }

/* ─── Badge ───────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(102, 126, 234, 0.2);
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ─── Pagination ──────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0; }
.pagination__info { color: var(--text-muted); font-size: 11px; }
.pagination__jump { display: inline-flex; margin: 0; }
.pagination__jump-input {
  width: 40px;
  padding: 3px 4px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: #fff;
  font-size: 11px;
  outline: none;
}
.pagination__jump-input:focus { border-color: var(--color-primary); }

/* ─── Sections ────────────────────────────────────────────────── */
.section { margin-bottom: 8px; }
.section__title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.section__group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 12px 0 4px; }

/* ─── Hub Sections (talent home grouped panel sets) ──────────── */
.hub-section { margin-top: 16px; }
.hub-section__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
.hub-section--manager { border: 1px solid rgba(155, 89, 182, 0.35); border-radius: var(--radius); padding: 12px; }

/* Manager Status off-toggle row (talent-home, bottom). Staff can uncheck + Update to resign. */
.manager-status { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; }
.manager-status__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.manager-status__checkbox { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.manager-status__update { margin-left: auto; }
.manager-status__hint { font-size: 11px; }

/* ─── Staff Grid ──────────────────────────────────────────────── */
.staff-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.staff-col h4 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.staff-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.staff-item__actions { display: flex; align-items: center; gap: 6px; }
.add-staff-form { display: flex; gap: 6px; align-items: center; margin-top: 8px; }

/* ─── Event Row ───────────────────────────────────────────────── */
.event-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.event-row:last-child { border-bottom: none; }
.event-row__info { display: flex; flex-direction: column; gap: 2px; }
.event-row__info strong { font-size: 13px; }
.event-row__actions { display: flex; gap: 4px; }

/* ─── Empty State ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 24px; color: var(--text-muted); }

/* ─── Role Selection Grid ─────────────────────────────────────── */
.role-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.role-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  text-decoration: none; color: var(--text-primary); transition: background 0.15s;
}
.role-card:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.role-card__icon { font-size: 20px; }
.role-card__desc { color: var(--text-muted); font-size: 11px; margin-left: auto; }

/* ─── Checkbox Grid ──────────────────────────────────────────── */
.checkbox-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Fixed three-per-row layout for fixed-size sets (e.g. the 6 SL time windows). */
.checkbox-grid--cols3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.checkbox-item {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); font-size: 12px; cursor: pointer;
}
.checkbox-item input[type="checkbox"] { accent-color: var(--color-primary); }

/* ─── Page Header ────────────────────────────────────────────── */
.page__header { display: flex; align-items: center; gap: 8px; }
.page__header .badge { margin-left: 4px; }
.page__actions { display: flex; gap: 8px; margin-left: auto; }
.page__actions form { margin: 0; }
.live-chat__card { text-align: center; padding: 20px; }
.live-chat__position { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.live-chat__note { color: var(--text-muted); font-size: 12px; margin: 10px 0; }

/* ─── Staff Preference Badges (mig 116) — self-contained, matches club-card hex ─── */
.staff-pref { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.staff-pref__lgbtq { display: inline-flex; align-items: center; border-radius: 2px; overflow: hidden; }
.staff-pref__lgbtq-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.staff-pref__maturity { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; border-radius: 12px; border: 1px solid; font-size: 11px; font-weight: 600; }
.staff-pref__maturity-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 700; color: #fff; }
.staff-pref__maturity--g { color: #4a90ff; background: rgba(74,144,255,0.12); border-color: rgba(74,144,255,0.4); }
.staff-pref__maturity--g .staff-pref__maturity-chip { background: #4a90ff; }
.staff-pref__maturity--m { color: #c8c8d8; background: rgba(120,120,140,0.15); border-color: rgba(160,160,180,0.4); }
.staff-pref__maturity--m .staff-pref__maturity-chip { background: #12121a; border: 1px solid rgba(255,255,255,0.35); }
.staff-pref__maturity--a { color: #ff5a5a; background: rgba(255,90,90,0.12); border-color: rgba(255,90,90,0.4); }
.staff-pref__maturity--a .staff-pref__maturity-chip { background: #e40303; }
.staff-pref__newcomer { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; color: #2ecc71; background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.4); }

/* ─── Live Cards ─────────────────────────────────────────────── */
.event-grid { display: flex; flex-direction: column; gap: 8px; }
.live-card { position: relative; }
.live-card__status {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px;
}
.live-card__status--live { background: rgba(46, 204, 113, 0.2); color: var(--color-success); border: 1px solid var(--color-success); }
.live-card__status--soon { background: rgba(243, 156, 18, 0.2); color: var(--color-warning); border: 1px solid var(--color-warning); }
.live-card__club { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.live-card__times { margin-bottom: 6px; }
.live-card__staff { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }

/* ─── Subscription ───────────────────────────────────────────── */
.sub-status { text-align: center; margin-bottom: 8px; }
.sub-status__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 2px; }
.sub-status__tier { font-size: 18px; font-weight: 700; }
.sub-status__expiry { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sub-status__features { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.sub-status__badge {
  background: rgba(102, 126, 234, 0.3); color: #a5b4fc;
  padding: 2px 8px; border-radius: 999px; font-size: 10px;
}

.sub-msg { padding: 8px; border-radius: var(--radius); font-size: 12px; text-align: center; margin-bottom: 8px; }
.sub-msg--pending { background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.4); color: #fbbf24; }
.sub-msg--error { background: rgba(231, 76, 60, 0.2); border: 1px solid var(--color-error); color: var(--color-error); }
.sub-msg--info { background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; text-align: left; line-height: 1.45; }
/* ─── Payment Recovery Banner ──────────────────────────────────── */
.sub-recovery {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius);
  color: #fbbf24;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.5;
}
.sub-recovery__title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 4px;
}
.sub-recovery__text {
  margin-bottom: 8px;
  opacity: 0.9;
}
.sub-processing {
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-bottom: 12px;
  text-align: center;
}
.sub-processing__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(6, 182, 212, 0.25);
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sub-processing__title {
  font-size: 15px;
  font-weight: 700;
  color: #06b6d4;
  margin-bottom: 6px;
}
.sub-processing__text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}
.sub-processing__hint {
  font-size: 11px;
  color: #fbbf24;
  min-height: 16px;
  margin-bottom: 8px;
}
.sub-processing__cancel {
  margin-top: 8px;
}


.sub-tiers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sub-card { display: flex; flex-direction: column; }
.sub-card--current { border: 2px solid rgba(102, 126, 234, 0.5); }
.sub-card__header { margin-bottom: 6px; }
.sub-card__name { font-size: 14px; font-weight: 700; }
.sub-card__price { font-size: 18px; font-weight: 800; color: #a5b4fc; margin-top: 2px; }
.sub-card__period { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.sub-card__features { list-style: none; padding: 0; margin: 0 0 8px 0; flex: 1; }
.sub-card__feature { font-size: 12px; color: rgba(255, 255, 255, 0.85); padding: 2px 0; display: flex; align-items: center; gap: 4px; }
.sub-card__check { color: #34d399; font-weight: 700; }
.sub-card__action { margin-top: auto; }

.sub-free-info { text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px; }

/* ─── Utility ─────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); font-size: 12px; }

/* ─── Recommendations: Toggle ──────────────────────────────────── */
.rec-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  text-decoration: none;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.rec-toggle--on { background: rgba(239,159,39,0.12); border-color: #EF9F27; }
.rec-toggle__left { display: flex; align-items: center; gap: 10px; }
.rec-toggle__icon { font-size: 18px; color: var(--text-muted); }
.rec-toggle--on .rec-toggle__icon { color: #EF9F27; }
.rec-toggle__label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.rec-toggle__sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.rec-toggle__track {
  width: 40px; height: 22px; border-radius: 99px;
  background: rgba(255,255,255,0.2); position: relative; flex-shrink: 0;
}
.rec-toggle__track--on { background: #BA7517; }
.rec-toggle__knob {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  position: absolute; top: 3px; left: 3px; transition: transform 0.2s;
}
.rec-toggle__track--on .rec-toggle__knob { transform: translateX(18px); }

/* ─── Recommendations: Stats Row ───────────────────────────────── */
.rec-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.rec-stat { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 8px 10px; }
.rec-stat__lbl { font-size: 10px; color: rgba(255,255,255,0.4); margin-bottom: 2px; }
.rec-stat__val { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.rec-stat__val--green { color: #6fcf45; }
.rec-stat__val--amber { color: #f0a030; }
.rec-stat__val--red   { color: #e8635a; }

/* ─── Recommendations: Bucket ──────────────────────────────────── */
.rec-bucket { margin-top: 8px; }
.rec-bucket__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rec-bucket__icon { width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0; }
.rec-bucket__icon--for-you  { background: #B5D4F4; }
.rec-bucket__icon--trending { background: #FAC775; }
.rec-bucket__icon--explore  { background: #C0DD97; }
.rec-bucket__name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.rec-bucket__sub  { font-size: 11px; color: rgba(255,255,255,0.4); }
.rec-empty-bucket { font-size: 12px; color: rgba(255,255,255,0.35); padding: 4px 0; }

/* ─── Recommendations: Club Card ───────────────────────────────── */
.rec-card {
  background: var(--glass-bg); border: 0.5px solid var(--glass-border);
  border-radius: var(--radius); padding: 9px 11px; margin-bottom: 5px;
  display: flex; align-items: flex-start; gap: 10px;
}
.rec-card--fav-active { border-left: 3px solid #BA7517; }
.rec-card--offline    { opacity: 0.5; }
.rec-card__rank { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.35); min-width: 16px; padding-top: 1px; }
.rec-card__star { color: #BA7517; font-size: 15px; }
.rec-card__info { flex: 1; min-width: 0; }
.rec-card__name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-card__meta { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.rec-score-breakdown { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.rec-score-area { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rec-score-val { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5); }
.rec-score-bar-wrap { width: 56px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 99px; overflow: hidden; }
.rec-score-bar { height: 100%; border-radius: 99px; }
.score-high { background: #639922; }
.score-mid  { background: #BA7517; }
.score-low  { background: #888780; }

/* ─── Recommendations: Genre Badges ────────────────────────────── */
.rec-genre-badge { display: inline-block; padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 500; }
.g-house   { background: #B5D4F4; color: #0C447C; }
.g-techno  { background: #CECBF6; color: #3C3489; }
.g-hiphop  { background: #F5C4B3; color: #993C1D; }
.g-latin   { background: #FAC775; color: #633806; }
.g-pop     { background: #F4C0D1; color: #993556; }
.g-rock    { background: #D3D1C7; color: #444441; }
.g-reggae  { background: #C0DD97; color: #27500A; }
.g-jazz    { background: #9FE1CB; color: #085041; }
.g-country { background: #EAF3DE; color: #3B6D11; }
.g-open    { background: #E1F5EE; color: #0F6E56; }

/* ─── Recommendations: Ping Badges ─────────────────────────────── */
.rec-ping-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 500; }
.ping-verified { background: #C0DD97; color: #27500A; }
.ping-pending  { background: #FAC775; color: #633806; }
.ping-flagged  { background: #F7C1C1; color: #791F1F; }
.rec-ping-dot  { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.pd-verified { background: #27500A; }
.pd-pending  { background: #633806; }
.pd-flagged  { background: #791F1F; }

/* ─── Recommendations: Stars ────────────────────────────────────── */
.rec-stars { color: #BA7517; font-size: 11px; }

/* ─── Recommendations: Favorites Mode ──────────────────────────── */
.rec-fav-banner {
  background: rgba(239,159,39,0.15); border: 0.5px solid #EF9F27;
  border-radius: var(--radius); padding: 8px 12px; font-size: 12px;
  color: #f0a030; font-weight: 500; margin-bottom: 8px;
}
.rec-offline-header {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
  margin: 12px 0 5px;
}
.rec-offline-badge {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.35);
  padding: 1px 6px; border-radius: 99px; font-size: 10px;
}

/* ─── Recommendations: Empty State ─────────────────────────────── */
.rec-empty { text-align: center; padding: 20px; color: rgba(255,255,255,0.5); font-size: 13px; }

/* ─── Staff Profile ─────────────────────────────────────────────── */
.profile__subtitle { font-size: 13px; margin-bottom: 12px; }
.profile__bio { font-size: 13px; color: var(--text-primary); line-height: 1.5; margin-bottom: 12px; }
.profile__genres { display: flex; flex-wrap: wrap; gap: 6px; }
.profile__stats { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.profile__stat { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 6px 14px; min-width: 70px; }
.profile__stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-bottom: 2px; }
.profile__stat-value { font-size: 14px; font-weight: 600; color: var(--accent); }
.profile__details { display: flex; flex-direction: column; gap: 6px; }
.profile__detail { display: grid; grid-template-columns: 120px 1fr; gap: 8px; font-size: 12px; }
.profile__detail dt { color: rgba(255,255,255,0.5); font-weight: 500; }
.profile__detail dd { color: var(--text-primary); }
.profile__set-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 0.5px solid rgba(255,255,255,0.07); gap: 8px; flex-wrap: wrap; }
.profile__set-row:last-child { border-bottom: none; }
.profile__set-info { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.profile__set-club { font-size: 13px; }
.profile__set-type { font-size: 11px; text-transform: capitalize; }
.profile__set-time { font-size: 11px; }
.profile__set-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; }
.profile__set-status--scheduled  { background: rgba(100,180,255,0.15); color: #64b4ff; }
.profile__set-status--live       { background: rgba(100,220,100,0.18); color: #5de05d; }
.profile__set-status--completed  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
.profile__set-status--flagged    { background: rgba(255,100,100,0.15); color: #ff6464; }
.badge--genre,
.badge--club-type { background: rgba(0,200,200,0.12); color: var(--accent); border: 0.5px solid rgba(0,200,200,0.3); font-size: 11px; padding: 2px 8px; border-radius: 99px; }
.badge--ok { background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.4); color: #2ecc71; }
.badge--failed { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.4); color: #e74c3c; }

/* ─── Support Ticket status pills (Two-Way, Phase 6 GUI) ──────────── */
.badge--open     { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.4); color: #e74c3c; }
.badge--support  { background: rgba(241, 196, 15, 0.15); border-color: rgba(241, 196, 15, 0.4); color: #f1c40f; }
.badge--resolved { background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.4); color: #2ecc71; }
.badge--replied { background: rgba(243, 156, 18, 0.2); border-color: rgba(243, 156, 18, 0.4); color: #f39c12; }

/* ─── Profile Header ────────────────────────────────────────────── */
.profile__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }

/* ─── Form Extras ───────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 10px; color: rgba(255,255,255,0.4); font-weight: 400; }
.form-group--checkbox label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.form-group--checkboxes { display: flex; flex-wrap: wrap; gap: 14px; }
.form-group--checkboxes label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ─── Web Portal Feature Cards ──────────────────────────────────── */
.portal-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.portal-card { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.1); border-radius: var(--radius); text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.portal-card:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.portal-card--highlight { border-color: rgba(0,200,200,0.5); background: rgba(0,200,200,0.07); }
.portal-card__icon { font-size: 20px; margin-bottom: 4px; }
.portal-card__label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.portal-card__sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* ─── Club Picker (Registration) ────────────────────────────────── */
.club-picker__search-form { margin-bottom: 8px; }
.club-picker__search-row { display: flex; gap: 6px; align-items: center; }
.club-picker__search-input { flex: 1; }
.club-picker { display: flex; flex-direction: column; gap: 0; border: 0.5px solid rgba(255,255,255,0.12); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.club-picker__row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background 0.12s; border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.club-picker__row:last-child { border-bottom: none; }
.club-picker__row:hover { background: rgba(255,255,255,0.06); }
.club-picker__row--selected { background: rgba(0,200,200,0.1); border-left: 2px solid var(--accent); }
.club-picker__row input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }
.club-picker__name { flex: 1; font-size: 13px; color: var(--text-primary); }
.club-picker__genre { font-size: 10px; }
.club-picker__pages { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 8px; }
.club-picker__page-info { font-size: 12px; color: rgba(255,255,255,0.45); }
.club-picker__empty { font-size: 12px; margin: 8px 0; }
.club-picker__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; }
.club-picker__toggle-link { font-size: 12px; color: var(--accent); text-decoration: none; }
.club-picker__toggle-link:hover { text-decoration: underline; }
.club-picker__new-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.club-picker__check { color: var(--accent); font-weight: 700; font-size: 13px; margin-left: auto; }
.club-picker__selected-note { font-size: 11px; color: rgba(0,200,200,0.85); margin: 4px 0 10px; }
.club-picker__selected-note--warn { color: rgba(255,180,60,0.85); }

/* Timezone picker — radio-button list replaces <select> for SL browser compatibility */
.tz-picker { max-height: 180px; overflow-y: auto; border: 0.5px solid rgba(255,255,255,0.12); border-radius: var(--radius); margin-bottom: 10px; }
.tz-picker__row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.tz-picker__row:last-child { border-bottom: none; }
.tz-picker__row:hover { background: rgba(255,255,255,0.06); }
.tz-picker__row--selected { background: rgba(0,200,200,0.1); }
.tz-picker__row input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; }
.tz-picker__label { font-size: 12px; color: var(--text-primary); min-width: 42px; font-weight: 500; }
.tz-picker__time { font-size: 12px; color: var(--text-primary); flex: 1; }
.tz-picker__diff { font-size: 11px; color: rgba(255,255,255,0.55); }
.tz-picker__country { font-size: 11px; color: rgba(255,255,255,0.7); min-width: 78px; text-align: right; }

/* #237 — one dropdown control wrapping .tz-picker, used on account + register-form */
.tz-dd { position: relative; margin-bottom: 10px; }
.tz-dd__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; margin-bottom: 0; }
.tz-dd__toggle-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-dd__chevron { color: var(--text-muted); flex-shrink: 0; }
.tz-dd__panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: #1a1a2e; margin-bottom: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.tz-dd__panel[hidden] { display: none; }

/* #363 — CEF-safe dropdown (hud-select.js). A native <select> popup blanks the
   SL in-world browser, so we hide the native control and drive it with a button
   + a body-level fixed panel (fixed → never clipped by an overflow container). */
.hudsel { position: relative; }
.hudsel__native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.hudsel__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; cursor: pointer; text-align: left; margin-bottom: 0;
}
.hudsel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hudsel__chev { flex-shrink: 0; opacity: 0.7; font-size: 0.8em; }
.hudsel__panel {
  position: fixed; z-index: 9998;
  width: max-content; max-width: 90vw; /* grow to the widest row; JS sets min-width = button width */
  background: #1a1a2e; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); overflow-y: auto; padding: 2px;
}
.hudsel__panel[hidden] { display: none; }
.hudsel__opt { padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--text-primary); border-radius: 4px; white-space: nowrap; }
.hudsel__opt:hover { background: rgba(255,255,255,0.08); }
.hudsel__opt--sel { background: rgba(0,200,200,0.15); }
.hudsel__toggle:disabled { opacity: 0.5; cursor: default; }
.hudsel__opt--disabled { opacity: 0.4; cursor: default; }
.hudsel__opt--disabled:hover { background: none; }

/* Section headers for Live Sets / Booked Sets pages */
.section-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.section-hdr__dot { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.section-hdr__name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.95); }

/* Hiring badge for clubs */
.badge--hiring { background: rgba(243,156,18,0.2); border-color: rgba(243,156,18,0.4); color: #f39c12; }

/* 5-star inline rating on club cards */
.star-rating { display: inline-flex; align-items: center; gap: 0; }
.star-btn { background: none; border: none; color: rgba(255,255,255,0.25); font-size: 16px; cursor: pointer; padding: 0 1px; line-height: 1; }
.star-btn--filled { color: #BA7517; }
.star-avg { font-size: 10px; color: rgba(255,255,255,0.5); margin-left: 4px; }
.star-avg-readonly { font-size: 11px; color: #BA7517; }
.btn--star { color: #BA7517; font-size: 13px; }

/* Rate Club Modal Page */
.rate-modal { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 20px; }
.rate-modal__card { max-width: 320px; width: 100%; padding: 24px; text-align: center; border-radius: 12px; }
.rate-modal__title { font-size: 18px; margin-bottom: 4px; }
.rate-modal__club { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 12px; }
.rate-modal__current { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.rate-modal__stars { display: flex; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.rate-modal__star { background: none; border: 2px solid rgba(255,255,255,0.15); border-radius: 8px; color: rgba(255,255,255,0.3); font-size: 28px; cursor: pointer; padding: 6px 8px; line-height: 1; transition: border-color 0.15s; }
.rate-modal__star:hover { border-color: #BA7517; color: #BA7517; }
.rate-modal__star--filled { color: #BA7517; border-color: #BA7517; }

/* Your rating display on club card */
.club-card__your-rating { font-size: 11px; color: #BA7517; display: inline-block; margin-left: 4px; white-space: nowrap; }

/* ─── Help Chat ──────────────────────────────────────────────── */
.help-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
}
.help-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-input-area {
  padding: 8px 12px;
  border-top: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.2);
}
.help-form {
  display: flex;
  gap: 8px;
}
.help-form__input {
  flex: 1;
}
.help-form__btn {
  flex-shrink: 0;
  padding: 8px 16px;
}
.help-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  word-wrap: break-word;
}
.help-msg--user {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
}
.help-msg--bot {
  align-self: flex-start;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.help-msg--error .help-msg__text {
  color: var(--color-error);
}
.help-msg__role {
  font-size: 10px;
  opacity: 0.6;
  margin-bottom: 2px;
}
.help-msg__text {
  font-size: 13px;
  line-height: 1.4;
}
/* Support Ticket thread (reuses .help-msg chat-bubble pattern) — Phase 6 GUI */
.help-msg__time {
  display: block;
  font-size: 10px;
  opacity: 0.5;
  margin-top: 4px;
}
/* User-typed text: keep the line breaks the sender entered */
.help-msg__text--plain {
  white-space: pre-wrap;
}
/* Inline field error on SSR forms re-rendered after a failed POST */
.form-error {
  color: var(--color-error);
  font-size: 11px;
  margin: 3px 0 6px;
}
.help-msg__text strong {
  color: var(--color-primary);
  font-weight: 700;
}
.help-msg__text ul, .help-msg__text ol {
  margin: 4px 0;
  padding-left: 18px;
}
.help-msg__text li {
  margin-bottom: 2px;
}
.help-thinking {
  opacity: 0.5;
  font-style: italic;
}
@keyframes helpPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
.help-thinking .help-msg__text {
  animation: helpPulse 1.5s ease-in-out infinite;
}

/* ── Page loading overlay (shown during form navigation) ── */
.page-loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 20, 0.65);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.page-loading--visible {
  display: flex;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.page-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.page-loading__label {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
}

/* ─── Staff Profile Short Card ──────────────────────────────── */
.profile__club-list { display: flex; flex-direction: column; gap: 4px; }
.profile__club-entry { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--glass-border); font-size: 12px; }
.profile__club-entry:last-child { border-bottom: none; }
.profile__club-name { font-weight: 500; color: var(--text-primary); }
.profile__club-sets { font-size: 11px; color: var(--text-muted); }

/* ─── /hud/profile + /hud/profile/edit — all page text white (Mark, 2026-07-09) ──
   Scoped to .page--profile so nav and every other page are untouched.
   Redefining --text-muted in scope whitens every muted-var consumer (form
   labels, subtitles, section group labels); the explicit rules cover the
   hardcoded greys (stat labels, detail terms, form hints) and the decorative
   badges. Left coloured on purpose: semantic status pills
   (live/scheduled/flagged) — colour is meaning there, not "grey". */
.page--profile { color: #fff; --text-muted: #fff; }
.page--profile .profile__stat-label,
.page--profile .profile__detail dt,
.page--profile .profile__set-status--completed,
.page--profile .form-hint,
.page--profile .badge,
.page--profile .badge--genre { color: #fff; }

/* ─── Help Guide FAB ──────────────────────────────────────────────
   Floating "Guide" button rendered by the layout on any form that has a
   matching help overlay (see help-overlay.constant.ts). Fixed bottom-right
   so it never collides with the top nav in the 1024×1024 SL MOAP frame. */
/* The Guide FAB is fixed to the bottom-right of the viewport, so it sits on top
   of whatever the page puts there — which on every long form is the Save button.
   The inset and height live here as custom properties so the clearance the page
   reserves below is derived from them rather than restated as a second literal
   that drifts the moment the button is restyled. */
:root {
  --help-fab-inset: 14px;
  /* padding 9px top+bottom + 1px border top+bottom + the 18px icon line-box. */
  --help-fab-height: 38px;
  /* What a page must keep clear so the FAB never covers page content: the gap
     below the button, the button, and the same gap again above it. */
  --help-fab-clearance: calc(
    var(--help-fab-inset) * 2 + var(--help-fab-height)
  );
}

/* Both FABs live in this one fixed row, so Notes and Guide sit side by side
   instead of stacking on the same corner. The row owns the positioning; the
   buttons inside are ordinary inline-flex. */
.fab-row {
  position: fixed;
  right: var(--help-fab-inset);
  bottom: var(--help-fab-inset);
  z-index: 60;
  display: flex;
  gap: 8px;
}

.help-fab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 22px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.help-fab:hover { background: #5a6fd6; text-decoration: none; }
.help-fab:active { transform: translateY(1px); }
/* Active = tour running; the button is now the Off switch. */
.help-fab--active { background: #c0392b; border-color: #c0392b; }
.help-fab--active:hover { background: #a93226; }
.help-fab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

/* ─── In-page Help Tour (help-tour.js) ────────────────────────────
   Guided walkthrough overlaid on the real form. One engine drives every
   form; forms provide only data-guide anchors + a step list. */
.guide-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1a1a18;
  color: #fff;
  font: 600 13px system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.guide-bar__label { white-space: nowrap; }
.guide-pips { display: flex; gap: 4px; flex: 1; min-width: 40px; }
.guide-pip { height: 3px; flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.guide-pip.done { background: var(--color-primary); }
.guide-bar__btns { display: flex; gap: 6px; }
.guide-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.guide-btn--primary { background: var(--color-primary); border-color: var(--color-primary); }
.guide-btn--close { border: none; font-size: 15px; padding: 5px 9px; }
.guide-btn:disabled { opacity: 0.4; cursor: default; }
.guide-balloon {
  position: fixed;
  z-index: 2001;
  width: 240px;
  max-width: calc(100vw - 16px);
  background: #fff;
  color: #1a1a18;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.guide-balloon__title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.guide-balloon__body { font-size: 12px; line-height: 1.5; color: #555; }
.guide-active { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 8px; }
body.guide-open { scroll-padding-top: 64px; }

/* ─── Yellow page notes ──────────────────────────────────────────────────
   The explanatory card rendered top-right by the layout on any route with an
   entry in yellow-note-content.constant.ts. Visual reference is the mockup
   Mark approved in-world 2026-08-25.

   --nav-h is written by yellow-note.js from the nav's real height on load and
   on resize, so the card follows the nav down when it wraps to two lines. The
   34px here is only the pre-script fallback. */
:root {
  --nav-h: 34px;
  /* The card's width, and therefore the right-hand clearance a page must keep
     so the card never covers page content. Same trick as --help-fab-clearance
     below the FAB row: one property, so restyling the card moves the clearance
     with it instead of leaving a second literal to drift. */
  --note-width: 340px;
  --note-clearance: calc(var(--note-width) + var(--help-fab-inset) * 2);
}

.note-fab {
  background: #ffd24d;
  border-color: #ffd24d;
  color: #241f05;
}
.note-fab:hover { background: #f5c433; }
.note-fab .help-fab__icon { background: rgba(0, 0, 0, 0.16); }
.note-fab--active {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}
.note-fab--active:hover { background: #a93226; }
.note-fab--active .help-fab__icon { background: rgba(255, 255, 255, 0.22); }

.note {
  position: fixed;
  right: var(--help-fab-inset);
  top: calc(var(--nav-h) + 10px);
  width: var(--note-width);
  max-width: calc(100% - 28px);
  /* Stop short of the FAB row instead of running under it — the buttons are
     fixed at z-index 60 and would cover the note's last lines. Derived from
     --help-fab-clearance (inset x2 + button height) so restyling the buttons
     moves the note's floor with them. The 10px matches the gap above. */
  max-height: calc(
    100% - var(--nav-h) - 10px - var(--help-fab-clearance)
  );
  overflow-y: auto;
  /* Below .fab-row (60) so the buttons stay reachable, above page content. */
  z-index: 59;
  background: #ffe27a;
  background: linear-gradient(178deg, #ffe27a 0%, #ffd24d 100%);
  color: #241f05;
  border-radius: 3px;
  padding: 13px 16px 15px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.note--hidden { display: none; }
.note__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #55491a;
  margin-bottom: 5px;
}
.note__title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.note__body { font-size: 12.5px; line-height: 1.55; margin: 0 0 11px; }
.note__subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #55491a;
  margin: 0 0 5px;
}
.note__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.note__list li { font-size: 12.5px; line-height: 1.5; }
/* Section name in bold so the eye finds it ahead of its explanation, which on
   some pages runs to a short paragraph. */
.note__list-name { font-weight: 700; }

/* ─── Club Reports ──────────────────────────────────────────────── */
.page__subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
/* The badge rows above the weekly table (rev3b). Each row is label, date field
   and then the three counts, on one line, wrapping only when it must.
   Deliberately NOT the profile__stat family: that renders the label above the
   value at 14px, and Club Reports wants the number first and large. Layout
   mechanics are copied from it so the two sit consistently. */
.report__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.report__row-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); min-width: 76px; }
/* The date field sits directly right of the label and never wraps mid-date. */
.report__row-date { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); min-width: 84px; white-space: nowrap; }
.report__stats { display: flex; gap: 12px; flex-wrap: wrap; }
.report__stat { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 10px 16px; min-width: 88px; }
.report__stat-value { font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.report__stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-top: 4px; text-align: center; }
/* The weekly table is the first <table> in the SSR HUD, so there was nothing to
   reuse. Ten columns at the HUD's fixed 1024px width is ~100px each. The
   wrapper takes the overflow so the PAGE never scrolls sideways when the nowrap
   week label pushes the intrinsic width past the container. */
.report__weeks-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.report__weeks { width: 100%; border-collapse: collapse; font-size: 12px; }
.report__weeks th, .report__weeks td { padding: 6px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.report__weeks thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); font-weight: 500; }
.report__weeks tbody th { text-align: left; font-weight: 500; color: rgba(255,255,255,0.75); white-space: nowrap; }
.report__weeks-total { font-weight: 700; color: var(--accent); }