/* ═══ MOREHOUSE ALUMNI — COMPONENT LIBRARY ═══
   Source: component-building skill + design-critiquing skill
   Rule: Every value references a token. Zero raw values. */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--surface-base);
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-default); }
a:hover { color: var(--color-text-link-hover); }

/* ─── CONTAINER ─── */
.container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-lg); }
.container-narrow { max-width: var(--container-md); }

/* ─── NAVIGATION ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  height: var(--nav-height); display: flex; align-items: center;
  background: rgba(13, 10, 11, 0.85); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border-subtle);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-lg); }
.nav__brand { display: flex; align-items: center; gap: var(--space-sm); }
.nav__logo { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-text-primary); letter-spacing: var(--tracking-wide); line-height: var(--leading-none); }
.nav__logo-accent { color: var(--color-secondary); }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); list-style: none; }
.nav__link {
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-secondary); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; transition: color var(--duration-fast) var(--ease-default);
  position: relative; white-space: nowrap;
  /* WCAG 2.2 SC 2.5.5: full 44px hit area for older users (was ~22px). */
  min-height: var(--touch-target); display: inline-flex; align-items: center;
  padding: var(--space-xs) 0;
}
.nav__link::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
  background: var(--color-secondary); transition: width var(--duration-normal) var(--ease-spring);
}
.nav__link:hover, .nav__link.active { color: var(--color-text-primary); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__menu-btn {
  display: none; background: none; border: none; color: var(--color-text-primary);
  cursor: pointer; padding: var(--space-sm);
  min-width: var(--touch-target); min-height: var(--touch-target);
  align-items: center; justify-content: center;
}
/* Hamburger drawn as three bars (no icon font, no emoji glyph). */
.nav__menu-icon { display: inline-block; width: 1.5rem; height: 1rem; position: relative; }
.nav__menu-icon span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: var(--radius-full);
}
.nav__menu-icon span:nth-child(1) { top: 0; }
.nav__menu-icon span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__menu-icon span:nth-child(3) { bottom: 0; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-md) var(--space-xl); border-radius: var(--radius-md);
  border: none; cursor: pointer; min-height: var(--touch-target-lg); /* 48px */
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-default);
}
.btn:hover { transform: translateY(-2px) scale(1.02); text-decoration: none; }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--duration-instant); }
.btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.btn--primary { background: var(--color-primary);
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.3);
}
.btn--primary, .btn--primary:visited, .btn--primary:hover { color: var(--color-text-primary); }
.btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.4);
}
.btn--secondary { background: transparent;
  border: 1px solid var(--color-secondary);
}
.btn--secondary, .btn--secondary:visited, .btn--secondary:hover { color: var(--color-secondary); }
.btn--secondary:hover { background: var(--color-secondary-subtle); }
.btn--gold { background: var(--color-secondary);
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb), 0.3);
}
.btn--gold, .btn--gold:visited, .btn--gold:hover { color: var(--color-text-inverse); }
.btn--gold:hover {
  background: var(--color-secondary-hover);
  box-shadow: 0 8px 25px rgba(var(--color-secondary-rgb), 0.4);
}
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:visited { color: var(--color-text-secondary); }
.btn--ghost:hover { color: var(--color-text-primary); background: var(--surface-raised); }
.btn--sm { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); min-height: var(--touch-target); } /* 44px floor (was 36px) */
.btn--lg { padding: var(--space-lg) var(--space-2xl); font-size: var(--text-base); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── GLASS CARD ─── */
.glass-card {
  background: var(--surface-glass); backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--surface-glass-border); border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: var(--space-xl);
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}
.glass-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* ─── EVENT CARD ─── */
.event-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default), border-color var(--duration-normal);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-border-strong); }
.event-card__image { width: 100%; height: 200px; object-fit: cover; }
.event-card__body { padding: var(--space-xl); }
.event-card__date {
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-secondary); letter-spacing: var(--tracking-wider); text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.event-card__title {
  font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700;
  color: var(--color-text-primary); line-height: var(--leading-snug);
  margin-bottom: var(--space-sm);
}
.event-card__location {
  font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: var(--space-xs);
}
.event-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); }

/* ─── ATTENDEE BADGE ─── */
.attendee-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-primary-subtle); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-primary);
}
.attendee-badge__count { font-family: var(--font-heading); font-size: var(--text-sm); color: var(--color-secondary); font-weight: 700; }
.attendee-badge--guest { background: var(--color-secondary-subtle); }

/* ─── STATUS BADGE ─── */
.status-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.status-badge--approved { background: var(--color-success-subtle); color: var(--color-success); }
.status-badge--pending { background: var(--color-warning-subtle); color: var(--color-warning); }
.status-badge--denied { background: var(--color-error-subtle); color: var(--color-error); }

/* ─── FORMS ─── */
.form-group { margin-bottom: var(--space-lg); }
.form-label {
  display: block; font-family: var(--font-heading); font-size: var(--text-sm);
  font-weight: 500; color: var(--color-text-secondary); margin-bottom: var(--space-sm);
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: var(--space-md); font-family: var(--font-body);
  font-size: var(--text-base); color: var(--color-text-primary);
  background: var(--surface-raised); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--color-secondary-subtle);
}
.form-error { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-xs); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-checkbox {
  display: flex; align-items: center; gap: var(--space-sm); cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--color-primary);
}

/* ─── CALENDAR GRID ─── */
.calendar { background: var(--surface-card); border-radius: var(--radius-xl); padding: var(--space-xl); border: 1px solid var(--color-border); }
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.calendar__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; }
.calendar__nav { display: flex; gap: var(--space-sm); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar__day-label {
  text-align: center; font-family: var(--font-heading); font-size: var(--text-xs);
  font-weight: 600; color: var(--color-text-tertiary); padding: var(--space-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.calendar__day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
  position: relative;
  /* WCAG 2.2 SC 2.5.5: day cells stay tappable even on narrow grids. */
  min-height: var(--touch-target); min-width: var(--touch-target);
}
.calendar__day:hover { background: var(--surface-elevated); color: var(--color-text-primary); transform: scale(1.05); }
.calendar__day--today { color: var(--color-secondary); font-weight: 700; }
.calendar__day--has-event::after {
  content: ''; position: absolute; bottom: 4px; width: 6px; height: 6px;
  border-radius: var(--radius-full); background: var(--color-primary);
}
.calendar__day--other-month { color: var(--color-text-muted); }
.calendar__day--selected { background: var(--color-primary); color: var(--color-text-primary); }

/* ─── MEMBER CARD ─── */
.member-card {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-lg); background: var(--surface-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.member-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.member-card__avatar {
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--color-primary-subtle); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-size: var(--text-xl);
  color: var(--color-primary); flex-shrink: 0;
}
.member-card__info { flex: 1; }
.member-card__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); }
.member-card__detail { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: var(--space-xs); }

/* ─── MODAL ─── */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--surface-overlay);
  z-index: var(--z-modal-backdrop); animation: backdropIn var(--duration-fast) var(--ease-default);
  display: none;
}
.modal-backdrop.active { display: flex; align-items: center; justify-content: center; }
.modal {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl); padding: var(--space-2xl);
  max-width: 560px; width: 90%; max-height: 85vh; overflow-y: auto;
  animation: modalIn var(--duration-normal) var(--ease-spring);
  z-index: var(--z-modal);
}
.modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); }
.modal__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; }
.modal__close {
  background: none; border: none; color: var(--color-text-tertiary);
  font-size: var(--text-xl); cursor: pointer; padding: var(--space-sm);
  border-radius: var(--radius-md); transition: background var(--duration-fast), color var(--duration-fast);
}
.modal__close:hover { background: var(--surface-elevated); color: var(--color-text-primary); }

/* ─── SECTION HEADING ─── */
.section-heading {
  font-family: var(--font-display); font-size: var(--text-display);
  color: var(--color-text-primary); line-height: var(--leading-none);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.section-heading--gold { color: var(--color-secondary); }
.section-subheading {
  font-family: var(--font-heading); font-size: var(--text-lg);
  color: var(--color-text-secondary); line-height: var(--leading-normal);
  max-width: 65ch; margin-top: var(--space-md);
}

/* ─── STAT BLOCK ─── */
.stat-block { text-align: center; }
.stat-block__number {
  font-family: var(--font-display); font-size: var(--text-5xl);
  color: var(--color-secondary); line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}
.stat-block__label {
  font-family: var(--font-heading); font-size: var(--text-sm);
  color: var(--color-text-tertiary); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); margin-top: var(--space-sm);
}

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center; padding: var(--space-4xl) var(--space-xl);
  color: var(--color-text-tertiary);
}
.empty-state__icon { font-size: var(--text-5xl); margin-bottom: var(--space-lg); opacity: 0.4; }
.empty-state__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-sm); }
.empty-state__text { font-size: var(--text-sm); margin-bottom: var(--space-xl); max-width: 40ch; margin-left: auto; margin-right: auto; }

/* ─── TOAST ─── */
.toast {
  position: fixed; bottom: var(--space-xl); right: var(--space-xl);
  padding: var(--space-md) var(--space-xl); background: var(--surface-elevated);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  font-size: var(--text-sm); color: var(--color-text-primary);
  z-index: var(--z-toast); animation: slideInRight var(--duration-normal) var(--ease-spring);
  box-shadow: var(--shadow-lg);
}
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error { border-left: 3px solid var(--color-error); }

/* ─── DUES STATUS BADGE ─── */
.dues-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); white-space: nowrap;
}
.dues-badge--paid       { background: var(--dues-paid-bg);    color: var(--dues-paid-color); }
.dues-badge--pending    { background: var(--dues-pending-bg);  color: var(--dues-pending-color); }
.dues-badge--overdue    { background: var(--dues-overdue-bg);  color: var(--dues-overdue-color); }
.dues-badge--waived     { background: var(--dues-waived-bg);   color: var(--dues-waived-color); }
.dues-badge--void       { background: var(--dues-void-bg);     color: var(--dues-void-color); }
.dues-badge--payment_failed    { background: var(--dues-failed-bg);  color: var(--dues-failed-color); }
.dues-badge--action_required   { background: var(--dues-action-bg);  color: var(--dues-action-color); }
.dues-badge--refunded   { background: var(--dues-refunded-bg); color: var(--dues-refunded-color); }

/* ─── MEMBERSHIP STATUS BADGE ─── */
.membership-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); white-space: nowrap;
}
.membership-badge--active   { background: var(--membership-active-bg);   color: var(--membership-active-color); }
.membership-badge--pending  { background: var(--membership-pending-bg);  color: var(--membership-pending-color); }
.membership-badge--lapsed   { background: var(--membership-lapsed-bg);   color: var(--membership-lapsed-color); }
.membership-badge--past_due { background: var(--dues-overdue-bg);        color: var(--dues-overdue-color); }
.membership-badge--comped   { background: var(--membership-comped-bg);   color: var(--membership-comped-color); }
.membership-badge--lifetime { background: var(--membership-lifetime-bg); color: var(--membership-lifetime-color); }
.membership-badge--manual   { background: var(--color-info-subtle);      color: var(--color-info); }
.membership-badge--suspended { background: var(--color-error-subtle);    color: var(--color-error); }
.membership-badge--paused   { background: var(--dues-void-bg);           color: var(--color-text-tertiary); }
.membership-badge--expired  { background: var(--dues-void-bg);           color: var(--color-text-tertiary); }

/* ─── CONTENT APPROVAL BADGE ─── */
.approval-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); white-space: nowrap;
}
.approval-badge--pending      { background: var(--approval-pending-bg);   color: var(--approval-pending-color); }
.approval-badge--approved     { background: var(--approval-approved-bg);  color: var(--approval-approved-color); }
.approval-badge--auto_approved { background: var(--approval-approved-bg); color: var(--approval-approved-color); }
.approval-badge--rejected     { background: var(--approval-rejected-bg);  color: var(--approval-rejected-color); }
.approval-badge--archived     { background: var(--approval-archived-bg);  color: var(--approval-archived-color); }

/* ─── CONTENT TYPE TAG ─── */
.type-tag {
  display: inline-flex; align-items: center;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600;
  text-transform: capitalize; white-space: nowrap;
}
.type-tag--news         { background: var(--tag-news-bg);         color: var(--tag-news-color); }
.type-tag--event        { background: var(--tag-event-bg);        color: var(--tag-event-color); }
.type-tag--announcement { background: var(--tag-announcement-bg); color: var(--tag-announcement-color); }
.type-tag--social_post  { background: var(--tag-social-bg);       color: var(--tag-social-color); }
.type-tag--institutional { background: var(--tag-institutional-bg); color: var(--tag-institutional-color); }

/* ─── MEMBER DASHBOARD CARD ─── */
.dash-card {
  background: var(--dash-card-bg); border: 1px solid var(--dash-card-border);
  border-radius: var(--radius-xl); padding: var(--space-xl);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.dash-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.dash-card__label {
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-tertiary); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); margin-bottom: var(--space-sm);
}
.dash-card__value {
  font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700;
  color: var(--color-text-primary); line-height: var(--leading-tight);
}
.dash-card__value--gold { color: var(--dash-stat-color); }
.dash-card__sub {
  font-size: var(--text-sm); color: var(--color-text-tertiary); margin-top: var(--space-xs);
}
.dash-card__icon {
  width: var(--dash-icon-size); height: var(--dash-icon-size);
  border-radius: var(--radius-md); background: var(--color-primary-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); color: var(--color-primary);
  margin-bottom: var(--space-md); flex-shrink: 0;
}
.dash-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-md);
}

/* ─── ADMIN DUES TABLE ─── */
.dues-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
}
.dues-table thead { background: var(--table-header-bg); }
.dues-table th {
  text-align: left; font-family: var(--font-heading); font-size: var(--text-xs);
  font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase;
  letter-spacing: var(--tracking-wider); padding: var(--space-md);
  border-bottom: 1px solid var(--table-border); white-space: nowrap;
}
.dues-table td {
  padding: var(--space-md); border-bottom: 1px solid var(--table-border);
  vertical-align: middle; color: var(--color-text-primary);
}
.dues-table tr:nth-child(even) td { background: var(--table-stripe); }
.dues-table tr:hover td { background: var(--table-row-hover); }
.dues-table__name { font-weight: 600; }
.dues-table__amount { font-family: var(--font-heading); font-weight: 600; color: var(--color-secondary); }
.dues-table__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
/* Mobile card fallback — displayed via JS when table overflows on xs */
.dues-table-mobile { display: none; }

/* ─── CONTENT QUEUE ROW / CARD ─── */
.queue-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--duration-fast) var(--ease-default);
  position: relative;
}
.queue-card:hover { border-color: var(--color-border-strong); }
.queue-card--pending      { border-left: 4px solid var(--approval-pending-color); }
.queue-card--approved     { border-left: 4px solid var(--approval-approved-color); }
.queue-card--auto_approved { border-left: 4px solid var(--approval-approved-color); }
.queue-card--rejected     { border-left: 4px solid var(--approval-rejected-color); }
.queue-card--archived     { border-left: 4px solid var(--color-text-tertiary); opacity: 0.75; }
.queue-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.queue-card__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); color: var(--color-text-primary); line-height: var(--leading-snug); }
.queue-card__meta { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-sm); }
.queue-card__summary { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin-bottom: var(--space-sm); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.queue-card__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-border-subtle); }

/* ─── CONTENT HUB CARD ─── */
.content-card {
  background: var(--surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden; display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.content-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-border-strong); }
.content-card--featured { border-color: var(--color-secondary); }
.content-card__image-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-elevated); }
.content-card__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.content-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.content-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.content-card__title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--color-text-primary); line-height: var(--leading-snug); margin-bottom: var(--space-sm); }
.content-card__summary { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); flex: 1; margin-bottom: var(--space-md); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.content-card__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-border-subtle); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.content-card__source-link { font-size: var(--text-xs); color: var(--color-text-link); font-weight: 500; }
.content-card__source-link:hover { color: var(--color-text-link-hover); }

/* ─── PLATFORM TAG ─── */
.platform-tag {
  display: inline-flex; align-items: center;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  background: var(--surface-elevated); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary);
}

/* ─── RELEVANCE TAG ─── */
.relevance-tag { padding: calc(var(--space-xs) / 2) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; }
.relevance-tag--direct   { background: var(--color-primary-subtle); color: var(--color-primary); }
.relevance-tag--adjacent { background: var(--color-secondary-subtle); color: var(--color-secondary); }
.relevance-tag--general  { background: var(--surface-glass); color: var(--color-text-tertiary); }

/* ─── INLINE TAG (pill) ─── */
.tag {
  display: inline-flex; align-items: center;
  padding: calc(var(--space-xs) / 2) var(--space-sm);
  background: var(--surface-elevated); border-radius: var(--radius-full);
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  text-transform: lowercase; white-space: nowrap;
}

/* ─── MOBILE NAV OPEN STATE (also support nav__links--open class from app.js) ─── */
.nav__links--open,
.nav__links.open {
  display: flex !important; flex-direction: column;
  position: absolute; top: var(--nav-height); left: 0; right: 0;
  background: var(--surface-base); padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-dropdown);
  padding-bottom: calc(var(--space-lg) + var(--safe-area-bottom));
}
.nav__links--open a,
.nav__links.open a {
  min-height: var(--touch-target); display: flex; align-items: center;
}

/* ─── FOCUS VISIBLE — universal visible ring (WCAG 2.2 SC 2.4.11) ─── */
/* Thick, offset, high-contrast ring via the focus-ring tokens. Supplements
   component-level :focus-visible rules. Sized for low-vision older alumni. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ─── MODAL — updated close button min-size ─── */
.modal__close { min-height: var(--touch-target); min-width: var(--touch-target); }
.modal__close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

/* ─── FORM INPUT — updated focus (explicit outline for a11y) ─── */
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset);
}

/* ─── CALENDAR ACCESSIBLE FOCUS ─── */
.calendar__day:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset);
}

/* ══════════════════════════════════════════════════════════════════
   SHARED SHELL (js/shell.js) — announce bar · unified nav · drawer ·
   account menu · breadcrumbs. Pages provide only the shell mount points;
   all of this markup is produced by Shell.render().
   ══════════════════════════════════════════════════════════════════ */

/* ─── ANNOUNCE BAR (next-event strip, sits above the fixed nav) ─── */
.announce-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-sticky) + 1);
  height: var(--announce-bar-height); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-lg);
  padding-left: calc(var(--space-lg) + var(--safe-area-left));
  padding-right: calc(var(--space-lg) + var(--safe-area-right));
  background: var(--announce-bar-bg); color: var(--announce-bar-text);
  font-family: var(--font-heading); font-size: var(--text-sm);
  text-align: center; line-height: var(--leading-snug);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.announce-bar__label {
  font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--announce-bar-accent);
  white-space: nowrap; flex-shrink: 0;
}
.announce-bar__text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--announce-bar-text); white-space: nowrap;
}
.announce-bar__link {
  color: var(--announce-bar-link); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.2em;
  min-height: var(--touch-target); display: inline-flex; align-items: center;
  white-space: nowrap; flex-shrink: 0;
}
.announce-bar__link:hover { color: var(--announce-bar-link-hover); }
.announce-bar__dismiss {
  position: absolute; right: var(--space-sm);
  min-width: var(--touch-target); min-height: var(--touch-target);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--announce-bar-text); font-size: var(--text-lg); line-height: 1;
  opacity: 0.8; transition: opacity var(--duration-fast);
}
.announce-bar__dismiss:hover { opacity: 1; }
/* When an announce bar is present, the fixed nav drops below it. js/shell.js sets
   .has-announce on <body> and updates --shell-offset for page padding. */
body.has-announce .nav { top: var(--announce-bar-height); }

/* ─── UNIFIED NAV — primary + actions + account ─── */
.nav__group { display: flex; align-items: center; gap: var(--space-xl); }
.nav__actions { display: flex; align-items: center; gap: var(--space-md); }
.nav__cta { white-space: nowrap; }

/* Account menu (member/admin signed-in state) */
.nav__account { position: relative; }
.nav__account-btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: var(--touch-target); padding: var(--space-xs) var(--space-md);
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-full); cursor: pointer;
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.nav__account-btn:hover { border-color: var(--color-border-strong); }
.nav__account-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full);
  background: var(--color-primary-subtle); color: var(--color-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--text-sm); flex-shrink: 0;
}
.nav__account-caret { font-size: var(--text-xs); opacity: 0.7; }
.nav__menu {
  position: absolute; top: calc(100% + var(--space-sm)); right: 0;
  min-width: 14rem; padding: var(--space-sm);
  background: var(--surface-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown); display: none;
}
.nav__account[data-open="true"] .nav__menu { display: block; }
.nav__menu-link {
  display: flex; align-items: center; gap: var(--space-sm);
  min-height: var(--touch-target); padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav__menu-link:hover, .nav__menu-link.active {
  background: var(--color-primary-subtle); color: var(--color-text-primary);
}
.nav__menu-sep { height: 1px; margin: var(--space-sm) 0; background: var(--color-border-subtle); border: none; }

/* Mobile drawer (focus-trapped, Escape-to-close — wired by js/shell.js) */
.nav__drawer-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
  background: var(--surface-overlay); backdrop-filter: blur(4px);
  display: none;
}
.nav__drawer-backdrop[data-open="true"] { display: block; }
.nav__drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  width: min(86vw, 22rem);
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-xl);
  padding-top: calc(var(--space-xl) + var(--safe-area-top));
  padding-bottom: calc(var(--space-xl) + var(--safe-area-bottom));
  background: var(--surface-raised); border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.nav__drawer-backdrop[data-open="true"] .nav__drawer { transform: translateX(0); }
.nav__drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); }
.nav__drawer-close {
  min-width: var(--touch-target); min-height: var(--touch-target);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-primary); font-size: var(--text-2xl); line-height: 1;
}
.nav__drawer-link {
  display: flex; align-items: center; min-height: var(--touch-target-lg);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md);
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: color var(--duration-fast), background var(--duration-fast);
}
.nav__drawer-link:last-of-type { border-bottom: none; }
.nav__drawer-link:hover, .nav__drawer-link[aria-current="page"] {
  color: var(--color-text-primary); background: var(--color-primary-subtle);
}
.nav__drawer-cta { margin-top: var(--space-lg); }
.nav__drawer-cta .btn { width: 100%; }

/* ─── BREADCRUMBS (schema.org BreadcrumbList; on every page below home) ─── */
/* The bar is the first in-flow block in #site-header, so it owns the clearance
   below the fixed nav (+ announce bar). Pages with breadcrumbs therefore set
   their <main> padding-top to 0 (body.shell-has-breadcrumbs) — the shell handles
   the offset. Pages WITHOUT breadcrumbs pad <main> with var(--shell-offset). */
.shell-breadcrumbs-bar {
  padding-top: calc(var(--shell-offset) + var(--space-md));
  padding-bottom: var(--space-sm);
}
.breadcrumbs__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-xs) var(--space-sm);
}
.breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  font-family: var(--font-heading); font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-xs) var(--space-sm); }
.breadcrumbs__link {
  color: var(--color-text-tertiary);
  text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-color: transparent;
  min-height: var(--touch-target); display: inline-flex; align-items: center;
  transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}
.breadcrumbs__link:hover { color: var(--color-text-primary); text-decoration-color: var(--color-secondary); }
.breadcrumbs__sep { color: var(--color-text-muted); user-select: none; }
.breadcrumbs__current { color: var(--color-text-secondary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   DIM-3 CONTENT COMPONENTS — light surface · pull-quote · prose
   ══════════════════════════════════════════════════════════════════ */

/* ─── LIGHT SURFACE SECTION (eye-rest rhythm vs the dark base) ─── */
.section--light {
  background: var(--surface-light); color: var(--color-text-on-light);
}
.section--light .section-heading,
.section--light .section__header *,
.section--light h1, .section--light h2, .section--light h3 { color: var(--color-text-on-light); }
.section--light .section-subheading,
.section--light p { color: var(--color-text-on-light-secondary); }
.section--light .eyebrow, .section--light .section-heading--gold { color: var(--color-link-on-light); }
.section--light a:not(.btn) {
  color: var(--color-link-on-light);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.section--light a:not(.btn):hover { color: var(--color-link-on-light-hover); }
.section--light .glass-card,
.section--light .card,
.section--light .scholarship-card,
.section--light .content-card {
  background: var(--surface-light-raised);
  border-color: var(--surface-light-border);
  color: var(--color-text-on-light);
}

/* ─── PULL-QUOTE (alumni testimonials) ─── */
.pull-quote {
  position: relative;
  max-width: var(--measure-narrow);
  margin: var(--space-3xl) auto;
  padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl);
  border-left: 4px solid var(--color-secondary);
}
.pull-quote__text {
  font-family: var(--font-heading-serif);
  font-size: var(--text-2xl); font-weight: 500;
  line-height: var(--leading-snug); color: var(--color-text-primary);
  font-style: italic;
}
.pull-quote__text::before { content: '\201C'; color: var(--color-secondary); margin-right: 0.05em; }
.pull-quote__text::after { content: '\201D'; color: var(--color-secondary); margin-left: 0.05em; }
.pull-quote__cite {
  display: block; margin-top: var(--space-md);
  font-family: var(--font-heading); font-size: var(--text-sm); font-style: normal;
  font-weight: 600; letter-spacing: var(--tracking-wide);
  color: var(--color-secondary);
}
.pull-quote__cite::before { content: '\2014\00A0'; color: var(--color-text-tertiary); }
.section--light .pull-quote__text { color: var(--color-text-on-light); }
.section--light .pull-quote__cite { color: var(--color-link-on-light); }

/* ─── PROSE (long-form article body; underlined inline links) ─── */
.prose {
  max-width: var(--measure-prose);
  font-size: var(--text-base); line-height: var(--leading-prose);
  color: var(--color-text-secondary);
}
.prose > * + * { margin-top: var(--space-lg); }
.prose h2 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text-primary); margin-top: var(--space-2xl); }
.prose h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--color-text-primary); margin-top: var(--space-xl); }
.prose a {
  color: var(--color-text-link);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: var(--color-border-strong);
}
.prose a:hover { color: var(--color-text-link-hover); text-decoration-color: var(--color-secondary); }
.prose ul, .prose ol { padding-left: var(--space-xl); }
.prose li + li { margin-top: var(--space-sm); }

/* ─── TEXT UTILITIES (token-backed, no raw values) ─── */
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-sm     { font-size: var(--text-sm); }
.text-prose  { line-height: var(--leading-prose); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.measure        { max-width: var(--measure-body); }
.measure-prose  { max-width: var(--measure-prose); }
.measure-narrow { max-width: var(--measure-narrow); }
.font-serif     { font-family: var(--font-heading-serif); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── RESPONSIVE ─── */
@media (min-width: 480px) {
  .dash-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .dash-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .dues-table-mobile { display: none; }
}

/* Switch to the compact navigation before the complete desktop menu can wrap. */
@media (max-width: 1100px) {
  :root { --nav-height: 4rem; }
  .nav__links { display: none; }
  .nav__menu-btn { display: inline-flex; }
  /* Shell: collapse the desktop primary links + account control into the drawer. */
  .nav__group, .nav__actions { display: none; }
  .nav__inner { padding: 0 var(--space-md); }
  .nav__brand { min-width: 0; }
  .nav__logo {
    font-size: var(--text-xl); letter-spacing: var(--tracking-normal);
    white-space: nowrap;
  }
  .announce-bar {
    justify-content: flex-start;
    padding-left: calc(var(--space-md) + var(--safe-area-left));
    padding-right: calc(var(--touch-target) + var(--space-md) + var(--safe-area-right));
    text-align: left;
  }
  .announce-bar__label { display: none; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .modal { width: 95%; padding: var(--space-xl); max-height: 92dvh; }
  /* Dues table horizontal scroll on small screens */
  .dues-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dues-table { min-width: 600px; }
}

/* Desktop: the mobile drawer + hamburger never show. */
@media (min-width: 1101px) {
  .nav__menu-btn { display: none; }
  .nav__drawer-backdrop { display: none !important; }
}

@media (max-width: 390px) {
  .dues-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-stats-grid { grid-template-columns: 1fr 1fr; }
  .queue-card__actions { flex-direction: column; }
  .queue-card__actions .btn { width: 100%; }
}

/* ═══ LANE F — MEMBER AREA (Dashboard / Profile / My Events / Sign In) ═══ */

/* ─── Dashboard ─── */
.dashboard-greeting {
  margin-bottom: var(--space-2xl);
}
.dashboard-greeting__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}
.dashboard-greeting__role {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-secondary);
  font-weight: 600;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}

.dashboard-card {
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.dashboard-card--membership { border-left: 3px solid var(--color-secondary); }

.dashboard-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.dashboard-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
}
.dashboard-card__head-link {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dashboard-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-prose);
}
.dashboard-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--leading-prose);
}
.dashboard-card__cta {
  margin-top: var(--space-sm);
  align-self: flex-start;
}

.dashboard-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-sm);
}
.dashboard-meta-label { color: var(--color-text-tertiary); }
.dashboard-meta-value { color: var(--color-text-primary); font-weight: 600; }

.dashboard-event-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.dashboard-event-item { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: var(--space-md); }
.dashboard-event-item:last-child { border-bottom: none; padding-bottom: 0; }
.dashboard-event-link { display: flex; flex-direction: column; gap: var(--space-xs); text-decoration: none; }
.dashboard-event-link:hover .dashboard-event-title { color: var(--color-secondary); }
.dashboard-event-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-default);
}
.dashboard-event-meta { font-size: var(--text-sm); color: var(--color-text-tertiary); }

.dashboard-notification-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.dashboard-notification {
  position: relative;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 0 0 var(--space-md) var(--space-md);
}
.dashboard-notification:last-child { border-bottom: 0; padding-bottom: 0; }
.dashboard-notification--unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.dashboard-notification__title { color: var(--color-text-primary); font-weight: 700; text-decoration: none; }
.dashboard-notification__body { margin-top: var(--space-xs); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-prose); }
.dashboard-notification__read {
  margin-top: var(--space-xs);
  border: 0;
  background: transparent;
  color: var(--color-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  padding: var(--space-xs) 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dashboard-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
.dashboard-empty__text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-prose); }

.dashboard-visibility-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  background: var(--color-warning-subtle, rgba(197,165,81,0.1));
  border: 1px solid var(--color-warning, var(--color-secondary));
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  line-height: var(--leading-prose);
}
.dashboard-hint-link {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dashboard skeleton */
.dashboard-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-xl);
}
.dashboard-card--skel {
  height: 200px;
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-card) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow, 1.5s) infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Sign-in page ─── */
.signin-wrap {
  max-width: 480px;
  margin: 0 auto;
}
.signin-card {
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-3xl) var(--space-2xl);
}
.signin-card__header { margin-bottom: var(--space-2xl); }
.signin-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.signin-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.signin-reason {
  background: var(--color-warning-subtle, rgba(197,165,81,0.1));
  border: 1px solid var(--color-warning, var(--color-secondary));
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
}

.signin-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.signin-form__submit { width: 100%; min-height: var(--touch-target); }

.signin-card__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.signin-footer-text { font-size: var(--text-sm); color: var(--color-text-secondary); }
.signin-footer-link {
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Profile page ─── */
.profile-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-3xl);
  align-items: start;
}
.profile-form { display: flex; flex-direction: column; gap: var(--space-xl); }
.profile-form__footer { margin-top: var(--space-md); }

.profile-status {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  margin-bottom: var(--space-xl);
}
.profile-status--success {
  background: rgba(0, 180, 100, 0.1);
  border: 1px solid rgba(0, 180, 100, 0.4);
  color: var(--color-text-primary);
}
.profile-status--error {
  background: rgba(200, 30, 30, 0.1);
  border: 1px solid rgba(200, 30, 30, 0.4);
  color: var(--color-text-primary);
}

.form-group--readonly { opacity: 0.8; }
.form-input-readonly {
  background: var(--surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}
.form-required { color: var(--color-error, #e44); }
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-xs);
  line-height: var(--leading-prose);
}
.form-group--toggle { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-label--toggle {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  font-weight: 600;
}
.form-toggle {
  width: 44px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--color-secondary);
  flex-shrink: 0;
}

/* Profile skeleton */
.profile-skeleton { display: flex; flex-direction: column; gap: var(--space-xl); }
.form-group--skel {
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-card) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: shimmer var(--duration-slow, 1.5s) infinite;
}

/* Sidebar */
.sidebar-card {
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
.sidebar-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}
.sidebar-card__text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-prose); }
.sidebar-link-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.sidebar-link {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── My Events page ─── */
.my-event-list { display: flex; flex-direction: column; gap: var(--space-xl); }
.my-event-list--past { opacity: 0.75; }

.my-event-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
}
.my-event-item--cancelled { opacity: 0.6; }

.my-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  flex-shrink: 0;
}
.my-event-date__mon {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.my-event-date__day {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-none);
}

.my-event-info { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); }
.my-event-title-link {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
}
.my-event-title-link:hover { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }
.my-event-meta { font-size: var(--text-sm); color: var(--color-text-tertiary); }
.my-event-actions { margin-top: var(--space-sm); display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.my-event-empty { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-md); }

/* Responsive: member area */
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar { order: -1; }
  .my-event-item { flex-direction: column; gap: var(--space-md); }
  .signin-card { padding: var(--space-2xl) var(--space-lg); }
}