/* -------------------------------------------------------------------------- */
/* VIEW TRANSITIONS - Disabled (caused motion sickness on frequent nav)       */
/* To re-enable: change navigation: none to navigation: auto                  */
/* -------------------------------------------------------------------------- */
@view-transition {
  navigation: none;
}

/* -------------------------------------------------------------------------- */
/* AUTH PAGE PROTECTION - Hide protected pages until auth confirmed           */
/* JS reveals by adding class: document.documentElement.classList.add('auth-verified') */
/* -------------------------------------------------------------------------- */
html.admin-page:not(.auth-verified) {
  visibility: hidden;
}

html.member-page:not(.auth-verified) {
  visibility: hidden;
}

/* -------------------------------------------------------------------------- */
/* FEATURE NAV ITEMS - resolved before first paint to avoid nav layout shift  */
/*                                                                            */
/* Which nav items a member sees depends on what their program has enabled.   */
/* Deciding that from JS after the DOM is ready means every navigation paints  */
/* a nav of the wrong length and then reflows it — the Surveys item appearing  */
/* and the Forum item vanishing, on every single page load.                    */
/*                                                                            */
/* frontend/member-branding.js is a blocking <head> script and the program     */
/* payload is already in localStorage, so the decision costs nothing and can   */
/* be made before the sidebar is parsed. It sets these classes on <html>; the  */
/* markup ships hidden-by-default so an unknown answer never flashes an item   */
/* the member is not entitled to. Same mechanism as .auth-verified above.      */
/* -------------------------------------------------------------------------- */
/* Hidden by default, so an unknown answer never flashes an item the member is
   not entitled to. Deliberately NOT the `hidden` attribute: this stylesheet
   carries `[hidden] { display: none !important }`, which no amount of
   specificity can reveal, and reaching for !important here would make the nav
   depend on which rule shouted loudest. */
.sidebar-item[data-nav="surveys"] {
  display: none;
}

html.program-has-surveys .sidebar-item[data-nav="surveys"] {
  display: flex;
}

html.program-no-forum .sidebar-item[data-nav="forum"] {
  display: none;
}

/* Considering Care members get the reduced navigation: Dashboard, Our
   Program, Learning Paths, Resources, My Favorites, Support Circle and
   Surveys. The class is set on <html> by frontend/member-branding.js from the
   session user's membershipStage; the same items live in the mobile drawer
   with the same class, so one rule hides both. */
html.member-considering-care .sidebar-item[data-nav="events"],
html.member-considering-care .sidebar-item[data-nav="stories"],
html.member-considering-care .sidebar-item[data-nav="forum"] {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* LUCIDE ICONS - Reserve space before createIcons() runs to prevent shift    */
/* -------------------------------------------------------------------------- */
[data-lucide] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* -------------------------------------------------------------------------- */
/* REDUCED MOTION - Respect user's motion preferences for accessibility       */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable view transitions for users who prefer reduced motion */
  @view-transition {
    navigation: none;
  }
}

:root {
  /* -------------------------------------------------------------------------- */
  /* 1. COLOR SYSTEM                                                            */
  /* -------------------------------------------------------------------------- */

  /* Anchor Colors (Preserved) */
  --color-primary-navy: #002950;
  --color-accent-blue: #73B5F5;
  --color-accent-teal: #80DAD0;
  --color-link: #2B7AC7;

  /* Neutrals (Slate-based for cool, calm feel) */
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  
  --color-border: #E2E8F0;
  --color-border-muted: #F1F5F9;
  
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;  /* Slate 600 - for secondary information */
  --color-text-muted: #64748B;
  --color-text-on-navy: #FFFFFF;

  /* Semantic Colors (Muted, Healthcare-friendly) */
  --color-success: #006B5E;  /* Teal-based success */
  --color-success-bg: #E6F4F2;
  --color-success-text: #004D43;

  --color-info: #0D5A9E;     /* Deep blue info */
  --color-info-bg: #E8F1FA;
  --color-info-text: #0A4578;

  --color-primary-bg: #E0EDF9; /* Light tint of primary navy for backgrounds */
  --color-primary-border: rgba(0, 41, 80, 0.2); /* Primary navy at 20% for subtle borders */

  /* Overlay colors for backdrop-filter elements */
  --color-overlay-light: rgba(255, 255, 255, 0.95);
  --color-overlay-dark: rgba(100, 116, 139, 0.9); /* Slate overlay for subdued states */
  --color-warning-border: rgba(245, 158, 11, 0.3); /* Warning color at 30% for subtle borders */
  --color-success-border: rgba(16, 185, 129, 0.3); /* Success color at 30% for subtle borders */
  --color-danger-border: rgba(244, 63, 94, 0.3); /* Danger color at 30% for subtle borders */

  --color-warning: #F59E0B;  /* Amber 500 */
  --color-warning-bg: #FFFBEB;
  --color-warning-text: #78350F;

  --color-danger: #F43F5E;   /* Rose 500 */
  --color-danger-bg: #FFF1F2;
  --color-danger-text: #881337;

  /* Error aliases (same as danger - for semantic clarity) */
  --color-error: var(--color-danger);
  --color-error-bg: var(--color-danger-bg);
  --color-error-text: var(--color-danger-text);

  /* Destructive alias (same as danger) */
  --color-destructive: var(--color-danger);

  /* Interaction States */
  --color-action-hover: #003666; /* Slightly lighter navy for primary hover */
  --color-action-pressed: #001F3D;
  --color-action-selected: #E0F2FE; /* Very light blue */
  --color-action-disabled: #CBD5E1;
  --color-focus-ring: rgba(115, 181, 245, 0.4); /* Based on accent blue */
  --color-focus-ring-error: rgba(244, 63, 94, 0.4);

  /* Table Tokens */
  --table-row-selected-bg: #F0F9FF; /* Lighter selection - Sky 50 */
  --table-row-selected-border: #BAE6FD; /* Subtle selection border - Sky 200 */

  /* -------------------------------------------------------------------------- */
  /* 2. TYPOGRAPHY                                                              */
  /* -------------------------------------------------------------------------- */
  
  --font-family-base: 'Inter', sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Type Scale (Size / Line-Height) */
  --text-h1-size: 32px;
  --text-h1-line-height: 40px;

  --text-h2-size: 24px;
  --text-h2-line-height: 32px;

  --text-h3-size: 20px;
  --text-h3-line-height: 28px;

  --text-body-size: 16px;
  --text-body-line-height: 24px;

  --text-small-size: 14px;
  --text-small-line-height: 20px;

  --text-micro-size: 12px;
  --text-micro-line-height: 16px;

  /* Legacy aliases (used in older sections; prevents undefined token failures) */
  --text-sm-size: 14px;
  --text-xs-size: 12px;
  --text-xsmall-size: 12px;

  /* -------------------------------------------------------------------------- */
  /* 3. SPACING & LAYOUT                                                        */
  /* -------------------------------------------------------------------------- */

  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  --layout-max-width: 1200px;
  --layout-padding-horizontal: 24px;

  /* -------------------------------------------------------------------------- */
  /* 4. RADII                                                                   */
  /* -------------------------------------------------------------------------- */

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px; /* Default */
  --radius-lg: 18px;
  /* One step above lg, for surfaces that meet an edge rather than float on the
     page — the member notification sheet's top corners are the first use. */
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------------------- */
  /* 5. BORDERS & SHADOWS                                                       */
  /* -------------------------------------------------------------------------- */

  --border-width-default: 1px;
  
  --shadow-none: none;
  --shadow-overlay: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* -------------------------------------------------------------------------- */
  /* 6. LAYOUT                                                                   */
  /* -------------------------------------------------------------------------- */

  --sidebar-width: 200px;

}

/* Mobile: collapse sidebar width for full-bleed footer */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }
}

/* -------------------------------------------------------------------------- */
/* RESET & BASE STYLES                                                        */
/* -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
  margin: 0;
}

:where(img, picture, video, canvas, svg) {
  display: block;
  max-inline-size: 100%;
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(ul, ol) {
  padding-inline-start: 1.5rem;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  line-height: var(--text-body-line-height);
  -webkit-font-smoothing: antialiased;
  padding: var(--space-40);
}

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY UTILITIES                                                       */
/* -------------------------------------------------------------------------- */

h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-24);
}

h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-16);
}

h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-navy);
  margin-bottom: var(--space-12);
}

p {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  margin-bottom: var(--space-16);
  max-width: 65ch;
}

.text-small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

.text-micro {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
}

.text-muted {
  color: var(--color-text-muted);
}

.label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------- */
/* COMPONENT LIBRARY (PHASE 2)                                               */
/* -------------------------------------------------------------------------- */

/* --- A. BUTTONS --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-16);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn:disabled, .btn.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Sizes */
.btn-sm {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--space-16);
  font-size: var(--text-small-size);
}

.btn-md {
  height: 40px;
  min-height: 40px;
  padding: 0 var(--space-16);
  font-size: var(--text-body-size);
}

.btn-lg {
  height: 48px;
  min-height: 48px;
  padding: 0 var(--space-24);
  font-size: var(--text-body-size);
}

/* Icon Buttons - Square with min touch target */
.btn-icon {
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
}

.btn-icon.btn-lg {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

/* Variants */
.btn-primary {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}
.btn-primary:hover {
  background-color: var(--color-action-hover);
}
.btn-primary:active {
  background-color: var(--color-action-pressed);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background-color: var(--color-background);
  border-color: var(--color-border);
}
.btn-secondary:active {
  background-color: #E2E8F0;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}
.btn-outline:hover {
  background-color: rgba(0, 41, 80, 0.05);
}
.btn-outline:active {
  background-color: rgba(0, 41, 80, 0.1);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
}
.btn-ghost:hover {
  background-color: var(--color-background);
}
.btn-ghost:active {
  background-color: var(--color-border);
}
.btn-ghost.destructive {
  color: var(--color-danger-text);
}
.btn-ghost.destructive:hover {
  background-color: var(--color-danger-bg);
}

.btn-destructive {
  background-color: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: transparent;
}
.btn-destructive:hover {
  background-color: #FFE4E6;
}
.btn-destructive:active {
  background-color: #FECDD3;
}

.btn-link {
  background-color: transparent;
  color: var(--color-link);
  padding: 0;
  height: auto;
  border-radius: 0;
  border: none;
  cursor: pointer;
}
.btn-link:hover {
  text-decoration: underline;
}
.btn-link-danger {
  background-color: transparent;
  color: var(--color-danger-text);
  text-decoration: none;
  font-weight: inherit;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px -6px;
}
.btn-link-danger:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  text-decoration: none;
}
.btn-link-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Two-column form grid — compact field layout */
.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.form-row-grid .form-row-action {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Logic chip row — vertical spacing for AND/OR badges between filter rows */
.filter-logic-chip-row {
  text-align: center;
  margin: var(--space-8) 0;
}

/* Button Group */
.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px; /* Overlap borders */
}
.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  margin-left: 0;
}
.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* Loading */
.btn-loading {
  position: relative;
  color: transparent !important; /* Hide text */
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid currentColor; /* Use text color */
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  color: var(--color-text-muted); /* Fallback color if transparent */
}
.btn-primary.btn-loading::after {
  color: var(--color-text-on-navy);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- B. CARDS --- */

.card {
  background-color: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.card-clickable {
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
a.card-clickable {
  text-decoration: none;
  color: inherit;
}
.card-clickable:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--color-accent-blue);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
}

/* Stacked card header with title + subtitle in column layout */
.card-header--stacked {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
}

.card-header--stacked .card-subtitle {
  margin-top: var(--space-2);
}

/* ==========================================================================
   CARD HEADER TYPOGRAPHY
   Card titles are 20px (h3-size) or 16px (sm). Never 24px - that's page-title.
   ========================================================================== */

.card-title {
  font-size: var(--text-h3-size); /* 20px - DO NOT change to h2-size (24px) */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.card-title-sm {
  font-size: var(--text-body-size); /* 16px - smaller card section headers */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.card-subtitle {
  font-size: 14px; /* Same as page-subtitle but separate class for cards */
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.card-icon {
  color: var(--color-accent-blue);
  margin-bottom: var(--space-16);
}

.card-footer {
  margin-top: auto; /* Push to bottom */
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-muted);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
}

/* --- B2. SPECIALIZED CARD PATTERNS --- */

/* Card Pattern Grid (3-column responsive) */
.card-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  padding: var(--space-8) 0;
}

@media (max-width: 1024px) {
  .card-pattern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .card-pattern-grid {
    grid-template-columns: 1fr;
  }
}

/* Card with Hero Image */
.card-visual {
  padding: 0;
  overflow: hidden;
}

.card-visual .card-hero {
  position: relative;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-visual .card-hero-icon {
  color: rgba(255, 255, 255, 0.4);
}

.card-visual .card-body {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Hero Gradients */
.card-hero-navy {
  background: linear-gradient(135deg, var(--color-primary-navy) 0%, #1a4a6e 100%);
}

.card-hero-teal {
  background: linear-gradient(135deg, #4EB8A4 0%, var(--color-accent-teal) 100%);
}

.card-hero-blue {
  background: linear-gradient(135deg, #4A9FE8 0%, var(--color-accent-blue) 100%);
}

/* Card Meta Row */
.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.card-meta-left {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Card Details */
.card-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.card-detail-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.card-detail-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

/* Card Progress */
.card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.card-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.card-progress-bar {
  height: 6px;
  background: var(--color-border-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.card-progress-fill {
  height: 100%;
  background: var(--color-primary-navy);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* Horizontal Bar Chart */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.bar-chart-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.bar-chart-label {
  flex-shrink: 0;
  width: 140px;
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
}

.bar-chart-bar-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.bar-chart-bar {
  flex: 1;
  height: 24px;
  background: var(--color-border-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bar-chart-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.bar-chart-fill--new {
  background: var(--color-text-muted);
}

.bar-chart-fill--at-risk {
  background: var(--color-danger);
}

.bar-chart-fill--low-engagement {
  background: var(--color-warning);
}

.bar-chart-fill--active {
  background: var(--color-success);
}

.bar-chart-value {
  flex-shrink: 0;
  width: 32px;
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* Card Tags */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* Card CTA (full-width button) */
.card-cta {
  margin-top: var(--space-8);
}

.card-cta .btn {
  width: 100%;
  justify-content: center;
}

/* EVENT CARD */
.card-event .card-title {
  font-size: var(--text-h4-size);
}

/* LEARNING PATH CARD */
.card-learning .card-description {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* RESOURCE CARD */
.card-resource .card-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.card-resource .card-type-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-info);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-resource .card-title-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card-resource .card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
}

.card-resource .card-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ===================================================================
   RESOURCE CARD COMPONENT
   A clickable card with media, type pill, bookmark overlay, title,
   description, and tags at bottom.
   =================================================================== */

.resource-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, outline 0.15s ease;
}

.resource-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-muted);
}

/* Focus-within: visible ring when any element inside card has focus */
.resource-card:focus-within {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Media container */
.resource-card-media {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  flex-shrink: 0;
}

.resource-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: #FFFFFF;
}

/* Type pill - overlay top-left */
.resource-card-type {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.resource-card-type i,
.resource-card-type svg {
  flex-shrink: 0;
}

/* Bookmark button - overlay top-right on image */
/* Lifts an inline save button above surrounding media. Must stay ahead of the
   card rules below: .resource-card-bookmark positions itself absolutely, and
   this same-specificity rule would otherwise win on source order and drag the
   button back into the flow. */
[data-bookmark-toggle] {
  position: relative;
  z-index: 2;
}

.resource-card-bookmark {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-muted);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.resource-card-bookmark:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--color-text-primary);
}

.resource-card-bookmark:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 1px;
}

.resource-card-bookmark[aria-pressed="true"] {
  color: var(--color-primary-navy);
  background: rgba(255, 255, 255, 1);
}

.resource-card-bookmark[aria-pressed="true"]:hover {
  color: var(--color-primary-navy);
}

/* Fill the bookmark icon when pressed (Lucide sets fill="none" as attribute on paths) */
.resource-card-bookmark[aria-pressed="true"] svg,
.resource-card-bookmark[aria-pressed="true"] svg *,
[data-bookmark-toggle][aria-pressed="true"] svg,
[data-bookmark-toggle][aria-pressed="true"] svg * {
  fill: currentColor !important;
}

/* Type pill - inline variant */
.resource-card--type-inline .resource-card-type {
  position: static;
  background: var(--color-background);
  backdrop-filter: none;
  margin-bottom: var(--space-8);
  width: fit-content;
  z-index: auto;
}

/* Body container */
.resource-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16);
  gap: var(--space-8);
}

/* Title - uses stretched link pattern for card clickability */
.resource-card-title {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link inside title makes the whole card clickable */
.resource-card-link {
  color: inherit;
  text-decoration: none;
}

.resource-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide default link focus since card has focus-within */
.resource-card-link:focus-visible {
  outline: none;
}

/* Description with line clamp */
.resource-card-desc {
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-card-desc--3-lines {
  -webkit-line-clamp: 3;
}

/* Tags row - positioned at bottom of card body */
.resource-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: auto;
  padding-top: var(--space-8);
}

.resource-card-tags .badge {
  font-size: var(--text-xxs-size);
}

/* Variant: Featured resource card (larger, horizontal) */
.resource-card--featured {
  flex-direction: row;
}

.resource-card--featured .resource-card-media {
  width: 280px;
  height: auto;
  min-height: 200px;
}

.resource-card--featured .resource-card-body {
  padding: var(--space-20);
}

.resource-card--featured .resource-card-title {
  font-size: var(--text-base-size);
  -webkit-line-clamp: 3;
}

.resource-card--featured .resource-card-desc {
  font-size: var(--text-sm-size);
  -webkit-line-clamp: 3;
}

.resource-card--featured .resource-card-tags {
  margin-top: auto;
}

/* ===================================================================
   EVENT CARD COMPONENT
   A clickable card with media, state pill overlay, tags, title,
   description, date/time, and action button.
   =================================================================== */

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, outline 0.15s ease;
}

.event-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-muted);
}

/* Focus-within: visible ring when any element inside card has focus */
.event-card:focus-within {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Media container */
.event-card-media {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  flex-shrink: 0;
}

.event-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: #FFFFFF;
}

/* State pill - overlay top-left */
.event-card-state {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(4px);
  z-index: 1;
}

/* State variants */
.event-card-state--live {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.event-card-state--upcoming {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-primary);
}

.event-card-state--past {
  background: rgba(100, 116, 139, 0.9);
  color: var(--color-surface);
}

.event-card-state--cancelled {
  background: rgba(100, 116, 139, 0.9);
  color: var(--color-surface);
}

.event-card-state--full {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Body container */
.event-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16);
  gap: var(--space-8);
}

/* Tags row */
.event-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Title - uses stretched link pattern for card clickability */
.event-card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link inside title makes the whole card clickable */
.event-card-link {
  color: inherit;
  text-decoration: none;
}

.event-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide default link focus since card has focus-within */
.event-card-link:focus-visible {
  outline: none;
}

/* Description with line clamp */
.event-card-desc {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date/time block */
.event-card-datetime {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.event-card-date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.event-card-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

/* Footer with action button - includes divider line above */
.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-muted);
}

/* Action button base - stays above stretched link */
.event-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 36px;
  padding: 0 var(--space-16);
  font-family: var(--font-family-base);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.event-card-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.event-card-action:disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}

/* Action button variants */
.event-card-action--primary {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.event-card-action--primary:hover {
  background-color: var(--color-action-hover);
}

.event-card-action--muted {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: transparent;
}

.event-card-action--muted:hover {
  background-color: #D1FAE5;
}

.event-card-action--danger {
  background-color: transparent;
  color: var(--color-danger-text);
  border-color: var(--color-border);
}

.event-card-action--danger:hover {
  background-color: var(--color-danger-bg);
  border-color: transparent;
}

/* Secondary info in footer */
.event-card-meta {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* Past/Cancelled card subdued styling */
.event-card--past,
.event-card--cancelled {
  opacity: 0.75;
}

.event-card--past:hover,
.event-card--cancelled:hover {
  box-shadow: none;
  border-color: var(--color-border);
}

.event-card--past .event-card-img,
.event-card--cancelled .event-card-img {
  filter: grayscale(0.5);
}

/* ===================================================================
   LEARNING PATH CARD COMPONENT
   A clickable card with media, status/required pill overlays, bookmark,
   title, description, metrics, category badges, progress bar, and action.
   Uses stretched-link pattern for full-card clickability.
   =================================================================== */

.learning-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, outline 0.15s ease;
}

.learning-path-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-muted);
}

/* Focus-within: visible ring when any element inside card has focus */
.learning-path-card:focus-within {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

/* Media container */
.learning-path-card-media {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  flex-shrink: 0;
}

.learning-path-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background-color: #FFFFFF;
}

/* Overlay pills container - top-left for status + required */
.learning-path-card-overlay {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  z-index: 1;
}

/* Status pill base */
.learning-path-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(4px);
}

/* Status variants */
.learning-path-card-status--new {
  background: var(--color-primary-bg);
  color: var(--color-primary-navy);
  border: 1px solid var(--color-primary-border);
}

.learning-path-card-status--not-started {
  background: var(--color-overlay-light);
  color: var(--color-text-primary);
}

.learning-path-card-status--in-progress {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border);
}

.learning-path-card-status--completed {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}

/* Required indicator pill */
.learning-path-card-required {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  backdrop-filter: blur(4px);
}

/* Bookmark button - overlay top-right on image */
.learning-path-card-bookmark {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-overlay-light);
  color: var(--color-text-muted);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.learning-path-card-bookmark:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.learning-path-card-bookmark:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 1px;
}

.learning-path-card-bookmark[aria-pressed="true"] {
  color: var(--color-primary-navy);
  background: var(--color-surface);
}

.learning-path-card-bookmark[aria-pressed="true"]:hover {
  color: var(--color-primary-navy);
}

/* Fill the bookmark icon when pressed */
.learning-path-card-bookmark[aria-pressed="true"] svg,
.learning-path-card-bookmark[aria-pressed="true"] svg * {
  fill: currentColor !important;
}

/* Body container */
.learning-path-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16);
  gap: var(--space-8);
}

/* Title - uses stretched link pattern for card clickability */
.learning-path-card-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stretched link inside title makes the whole card clickable */
.learning-path-card-link {
  color: inherit;
  text-decoration: none;
}

.learning-path-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Hide default link focus since card has focus-within */
.learning-path-card-link:focus-visible {
  outline: none;
}

/* Description with line clamp */
.learning-path-card-desc {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metrics row */
.learning-path-card-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.learning-path-card-metric {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.learning-path-card-metric i,
.learning-path-card-metric svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Tags row for category badges */
.learning-path-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Progress bar container */
.learning-path-card-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.learning-path-card-progress-bar {
  height: 6px;
  background: var(--color-border-muted);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.learning-path-card-progress-fill {
  height: 100%;
  background: var(--color-primary-navy);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* Completed state - green progress bar */
.learning-path-card--completed .learning-path-card-progress-fill {
  background: var(--color-success);
}

.learning-path-card-progress-label {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* Footer with action button - includes divider line above */
.learning-path-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-muted);
}

/* Action button base - stays above stretched link */
.learning-path-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  height: 36px;
  padding: 0 var(--space-16);
  font-family: var(--font-family-base);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.learning-path-card-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Action button variants */
.learning-path-card-action--primary {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.learning-path-card-action--primary:hover {
  background-color: var(--color-action-hover);
}

.learning-path-card-action--secondary {
  background-color: transparent;
  color: var(--color-primary-navy);
  border-color: var(--color-border);
}

.learning-path-card-action--secondary:hover {
  background-color: var(--color-background);
  border-color: var(--color-border-muted);
}

/* Completed card styling */
.learning-path-card--completed .learning-path-card-img {
  filter: saturate(0.8);
}

/* STORY / FORUM CARD */
.card-story {
  padding: var(--space-24);
}

.card-story .card-author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.card-story .card-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-border-muted);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}

.card-story .card-author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-story .card-author-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
}

.card-story .card-author-time {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.card-story .card-quote {
  font-size: var(--text-body-size);
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-style: italic;
}

.card-story .card-engagement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.card-story .card-engagement-stats {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.card-story .card-engagement-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* GROUP / CIRCLE CARD */
.card-group .card-title {
  font-size: var(--text-h4-size);
}

.card-group .card-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.card-group .card-members {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.card-group .card-avatars {
  display: flex;
  align-items: center;
}

.card-group .card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  background: var(--color-border-muted);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  margin-left: -8px;
}

.card-group .card-avatar:first-child {
  margin-left: 0;
}

.card-group .card-avatar-more {
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.card-group .card-message-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

/* Tag Badge (outlined style for cards) */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  background: transparent;
}

/* ===================================================================
   CATEGORY BADGE SYSTEM
   Shared category badges for Resource cards and Event cards.
   Limit to 1–2 badges per card for scannability.
   
   Allowed categories (use only these):
   Boundaries, Addiction, Orientation, Codependency, Family,
   Recovery, Parenting, Wellness, Health
   =================================================================== */

.badge-category {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  height: 22px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* Category badge color variants - mapped to design tokens */
.badge-category--navy {
  background-color: rgba(0, 41, 80, 0.08);
  border-color: rgba(0, 41, 80, 0.2);
  color: var(--color-primary-navy);
}

.badge-category--teal {
  background-color: var(--color-success-bg);
  border-color: rgba(0, 107, 94, 0.2);
  color: var(--color-success-text);
}

.badge-category--blue {
  background-color: var(--color-info-bg);
  border-color: rgba(13, 90, 158, 0.2);
  color: var(--color-info-text);
}

.badge-category--mint {
  background-color: rgba(128, 218, 208, 0.15);
  border-color: rgba(128, 218, 208, 0.4);
  color: #006B5E;
}

/* Status Badges */
.badge-registered {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid transparent;
}

.badge-required {
  background-color: transparent;
  color: var(--color-warning-text);
  border: 1px solid var(--color-warning-text);
}

.badge-optional {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* --- C. BADGES & TAGS --- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-8);
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

/* Variants */
.badge-neutral { background-color: var(--color-border-muted); color: var(--color-text-primary); }
.badge-primary { background-color: var(--color-primary-navy); color: var(--color-text-on-navy); }
.badge-success { background-color: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-muted { background-color: var(--color-border-muted); color: var(--color-text-secondary); }

/* Source badges - for Pathroot vs Program origin indicators */
.badge-source-pathroot {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-source-program {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Soft Variant (Tinted) - Reuse same classes as above, they are already "soft" by default in palette design */
/* Solid Variants override */
.badge-solid-success { background-color: var(--color-success); color: white; }
.badge-solid-warning { background-color: var(--color-warning); color: white; }
.badge-solid-danger { background-color: var(--color-danger); color: white; }

/* Interactive badge (button-flavoured pill).
   The publish toggle on the program-admin learning paths list renders the
   status pill as a <button> so a program admin can flip their own path between
   draft and published, while a Pathroot-owned path renders the same pill as a
   <span> (frontend/pages/program-admin/learning-paths.js:109 vs :112). .badge
   carries no button reset, so without this the UA button chrome — native
   appearance, default border, button font-family — paints on top of .badge and
   the two pills read as different components.

   Written as button:where(.badge), not button.badge. :where() contributes zero
   specificity, so this weighs (0,0,1) — below every .badge-* variant at (0,1,0)
   — while still beating the UA sheet, which any author rule does on cascade
   origin regardless of specificity. Written as button.badge it would weigh
   (0,1,1) and its `border: none` would silently erase the borders that
   .badge-outline, .badge-source-pathroot, .badge-required, .badge-optional and
   .badge-registered each declare, the moment any of them is rendered on a
   <button>. Today none are; the toggle is the only button-flavoured pill. This
   is written so that stays true by construction rather than by nobody noticing.

   Deliberately declares no background-color, color, font-size or font-weight
   either: the variants own those. */
button:where(.badge) {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
}

/* Keeps the pill keyboard focusable with a visible ring. Matches the .btn
   focus treatment (common.css:361) rather than inventing one; box-shadow
   follows the pill's border-radius, so the ring hugs the badge shape. */
button:where(.badge):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Tags (Small list) */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* --- D. ALERTS & CALLOUTS --- */
/* ALERT SYSTEM: Canonical alert styles. Do not duplicate selectors.
   Use .alert-info/.alert-success/.alert-warning/.alert-danger for inline alerts.
   Use .alert--info/.alert--success/.alert--warning/.alert--danger for card-based alerts.
   Scope overrides by container if needed. */

.alert {
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font-size: var(--text-small-size);
  line-height: var(--text-body-line-height);
}

.alert-title {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
  display: block;
}

.alert-info { background-color: var(--color-info-bg); color: var(--color-info-text); border: 1px solid rgba(13, 90, 158, 0.2); }
.alert-success { background-color: var(--color-success-bg); color: var(--color-success-text); border: 1px solid rgba(0, 107, 94, 0.2); }
.alert-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid rgba(245, 158, 11, 0.2); }
.alert-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid rgba(244, 63, 94, 0.2); }

.alert-banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  width: 100%;
}

/* --- E. TOASTS --- */

.toast-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 320px;
}

.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.toast-success { border-left: 4px solid var(--color-success); }
.toast-error { border-left: 4px solid var(--color-danger); }
.toast-warning { border-left: 4px solid var(--color-warning); }
.toast-info { border-left: 4px solid var(--color-info); }

.toast-content { flex: 1; }
.toast-title { font-weight: var(--font-weight-medium); font-size: var(--text-small-size); margin-bottom: 2px; }
.toast-message { font-size: var(--text-small-size); color: var(--color-text-muted); }
.toast-close { color: var(--color-text-muted); cursor: pointer; }

/* --- F. LOADING & EMPTY STATES --- */

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 4px; }

.skeleton-text {
  height: 16px;
  background-color: var(--color-border-muted);
  border-radius: var(--radius-xs);
  margin-bottom: var(--space-8);
  width: 100%;
}
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }

.skeleton-block {
  height: 120px;
  background-color: var(--color-border-muted);
  border-radius: var(--radius-md);
}

.empty-state {
  text-align: center;
  padding: var(--space-48) var(--space-24);
  background: var(--color-background);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.empty-state h3 {
  margin: 0;
  color: var(--color-text-primary);
}

.empty-state p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 400px;
  text-align: center;
}

.empty-state .btn {
  margin-top: var(--space-8);
}

/* --- G. FORMS (Wrappers & Basics) --- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.form-label {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-hint {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* Required field asterisk - only the asterisk span is red, not the label text */
/* Usage: <label class="form-label">Field <span class="form-label-required">*</span></label> */
.form-label-required {
  color: var(--color-danger);
  font-weight: 400;
}

.input-base {
  height: 40px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  width: 100%;
  transition: all 0.2s ease;
}

textarea.input-base {
  height: auto;
  min-height: 100px;
  padding: var(--space-8) var(--space-12);
  resize: vertical;
}

.input-base:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.input-base:disabled {
  background-color: var(--color-background);
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.form-field.error .input-base {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}
.form-field.error .input-base:focus {
  box-shadow: 0 0 0 3px var(--color-focus-ring-error);
}

.form-helper {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.form-error {
  font-size: var(--text-micro-size);
  color: var(--color-danger-text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Form row layouts */
.form-row {
  display: flex;
  gap: var(--space-16);
}

.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.form-success {
  font-size: var(--text-micro-size);
  color: var(--color-success-text);
}

/* --- H. DIVIDERS --- */

.divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-24) 0;
  width: 100%;
}

.divider-label {
  display: flex;
  align-items: center;
  margin: var(--space-24) 0;
}

.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.divider-text {
  padding: 0 var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* -------------------------------------------------------------------------- */
/* LOGIN SCREEN (pathroot.com login)                                          */
/* Split-layout login page. Scoped under .login-* classes.                    */
/* -------------------------------------------------------------------------- */

body:has(.login-page) {
  padding: 0;
  margin: 0;
  height: 100%;
}

html:has(.login-page) {
  height: 100%;
}

.login-page {
  display: flex;
  height: 100vh;
  width: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  overflow: hidden;
}

.login-left {
  flex: 1;
  background: var(--color-primary-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow: hidden;
}

.login-left-inner {
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

.login-heading {
  font-size: 45px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #ffffff;
}

.login-subtext {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
  color: #ffffff;
  opacity: 0.88;
}

.login-image-wrapper {
  margin-bottom: 20px;
}

.login-image {
  width: 80%;
  border-radius: 12px;
}

.login-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-benefits li {
  color: #ffffff;
  opacity: 0.88;
  font-size: 15px;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.login-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent-teal);
}

.login-left-footer {
  margin-top: auto;
  padding-top: 40px;
}

.login-left-logo {
  height: 26px;
  width: auto;
  vertical-align: -0.35em;
  margin: 0 3px;
}

.login-left-footer .login-footer-text {
  font-size: 12px;
  color: #ffffff;
  opacity: 0.85;
  margin: 0;
  line-height: 1.5;
}

.login-powered-text {
  font-size: 12px;
  color: #ffffff;
  opacity: 0.85;
  margin: 0 0 8px;
}

.login-relationship-text {
  font-size: 13px;
  color: #ffffff;
  opacity: 0.78;
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

.login-right {
  flex: 1;
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow-y: auto;
}

.login-card {
  background: var(--color-surface);
  padding: 50px;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.login-card-heading {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

.login-card-subtext {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0 0 30px;
}

.login-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  margin-top: 16px;
}

.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 16px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
  outline: none;
  border-color: var(--color-primary-navy);
  box-shadow: 0 0 0 3px rgba(0, 41, 80, 0.1);
}

.login-form input[type="email"]::placeholder,
.login-form input[type="password"]::placeholder {
  color: var(--color-text-muted);
}

.login-password-help-row {
  margin-top: 8px;
}

.login-forgot-link {
  font-size: 14px;
  color: var(--color-primary-navy);
  text-decoration: none;
  font-weight: 500;
}

.login-forgot-link:hover {
  text-decoration: underline;
}

.login-forgot-link:focus-visible {
  outline: 2px solid var(--color-primary-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.login-remember-row {
  margin: 24px 0 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
}

.login-remember-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-navy);
}

.login-remember-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary-navy);
  outline-offset: 2px;
}

.login-remember-row label {
  margin: 0;
  font-weight: 400;
}

.login-button {
  width: 100%;
  padding: 16px;
  margin-top: 16px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary-navy);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.login-button:hover {
  opacity: 0.92;
}

.login-button:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
}

.login-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-footer-text {
  margin: 20px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.login-footer-text strong {
  color: var(--color-text-primary);
}

.login-error {
  background: var(--color-error-bg, #fef2f2);
  color: var(--color-error, #dc2626);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  display: none;
}

.login-error.show {
  display: block;
}

@media (max-width: 900px) {
  .login-page {
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
  }
  .login-left {
    display: none;
  }
  .login-card {
    padding: 32px 24px;
    width: 100%;
    max-width: 400px;
  }
}


/* ============================================
   Content System Redesign — New Classes
   Added: 2026-08-11
   Source: Resources Update/Content Redesign - Contributors/styles.css
   ============================================ */

.btn-icon--circle {
  position: relative;
  border-radius: 50%;
  border: 0;
}

.btn-icon--circle::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  pointer-events: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.btn-icon--circle i,
.btn-icon--circle svg {
  position: relative;
  z-index: 1;
}

.btn-icon--circle[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.content-section-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  background: var(--color-border);
}

.content-section-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.lp-overview-hero {
  position: relative;
  display: block;
  width: 100%;
}

.lp-overview-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.lp-overview-progress-label {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.lp-overview-progress-count {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  white-space: nowrap;
}

body[data-program-theme] .lp-overview-progress-fill {
  background: var(--member-primary);
}

.lp-step-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lp-step-row:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lp-step-row-indicator {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px; 
}

.lp-step-row--completed .lp-step-row-indicator {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.lp-step-row--in-progress .lp-step-row-indicator {
  background: color-mix(in srgb, var(--color-primary-navy) 12%, transparent);
  color: var(--color-primary-navy);
}

body[data-program-theme] .lp-step-row--in-progress .lp-step-row-indicator {
  background: color-mix(in srgb, var(--member-primary) 12%, transparent);
  color: var(--member-primary);
}

.lp-step-row--not-started .lp-step-row-indicator {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
}

.lp-step-row--not-started .lp-step-row-indicator [data-lucide] {
  display: none;
}

.lp-step-row-body {
  flex: 1;
  min-width: 0;
}

.lp-step-row-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
  margin: 0 0 var(--space-4) 0;
}

.lp-step-row-status {
  flex-shrink: 0;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  align-self: center;
  white-space: nowrap;
}

.lp-step-row--completed .lp-step-row-status {
  color: var(--color-success-text);
}

.lp-step-row--in-progress .lp-step-row-status {
  color: var(--color-primary-navy);
}

body[data-program-theme] .lp-step-row--in-progress .lp-step-row-status {
  color: var(--member-primary);
}

.accordion--sections {
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.accordion--sections .accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  
  background: var(--color-surface);
}

.accordion--sections .accordion-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.accordion--sections .accordion-content {
  display: block; 
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.3s;
}

.accordion--sections .accordion-item.open .accordion-content {
  max-height: 600px; 
  opacity: 1;
  visibility: visible;
  
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s;
}

.context-link {
  color: inherit;
  text-decoration: none;
}

.context-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.learning-path-step-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px; 
}

.learning-path-step-nav::-webkit-scrollbar {
  display: none;
}

.learning-path-step-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.learning-path-step-nav-item.is-active {
  background: var(--color-background);
  border-color: var(--color-primary-navy);
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-semibold);
}

body[data-program-theme] .learning-path-step-nav-item.is-active {
  background: var(--member-accent-soft);
  border-color: var(--member-primary);
  color: var(--member-primary);
}

.learning-path-step-nav-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.learning-path-step-nav-item.is-active .learning-path-step-nav-index {
  background: var(--color-primary-navy);
  color: #fff;
}

body[data-program-theme] .learning-path-step-nav-item.is-active .learning-path-step-nav-index {
  background: var(--member-primary);
}

.learning-path-step-nav-item.is-complete .learning-path-step-nav-index {
  background: var(--color-success);
  color: #fff;
}

.learning-path-step-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.lp-step-footer {
  text-align: center;
}

.lp-step-footer-primary {
  display: flex;
  flex-direction: column;
  
  gap: var(--space-8);
}

.lp-step-completed-indicator {
  display: inline-flex;
  align-items: center;
  align-self: center; 
  gap: var(--space-4);
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-success-text);
}

.lp-step-footer-state {
  display: none;
}

[data-learning-step-state="in-progress"] .lp-step-footer-state--in-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

[data-learning-step-state="completed"] .lp-step-footer-state--completed {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.creatable-select-option.selected,
.creatable-select-option--selected {
  background-color: var(--color-accent-blue-subtle);
  color: var(--color-accent-blue);
}

.creatable-select-option-name {
  display: block;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: inherit;
  line-height: var(--text-base-lh);
}

.creatable-select-option-meta {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creatable-select-option--selected .creatable-select-option-meta,
.creatable-select-option.selected .creatable-select-option-meta {
  color: var(--color-accent-blue);
  opacity: 0.8;
}

.event-detail-header .member-detail-cta-row .btn {
  min-height: 44px;
}

.event-detail-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.event-detail-info-row i {
  flex-shrink: 0;
}

.content-media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.content-key-takeaways {
  width: 100%;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-20);
}

body[data-program-theme] .content-key-takeaways {
  background: var(--member-accent-soft);
}

.content-key-takeaways-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-12) 0;
  line-height: var(--text-base-lh);
}

.content-key-takeaways-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.content-key-takeaways-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
}

.content-key-takeaways-icon {
  flex-shrink: 0;
  margin-top: 3px; 
  color: var(--color-primary-navy);
}

body[data-program-theme] .content-key-takeaways-icon {
  color: var(--member-primary);
}

.content-contributor {
  width: 100%;
}

.content-contributor-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-16) 0;
  line-height: var(--text-base-lh);
}

.content-contributor-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.content-contributor-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  user-select: none;
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

body[data-program-theme] .content-contributor-avatar {
  background: var(--member-primary);
  color: var(--member-on-primary, var(--color-text-on-navy));
}

.content-contributor-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.content-contributor-name {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
}

.content-contributor-meta {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
}

.content-contributor-bio {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
}

.content-contributor-row--interactive {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  align-items: center; 
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease;
}

.content-contributor-action {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform 150ms ease;
}

.content-contributor-row--interactive:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Contributor photo inside the avatar circle. The avatar is a fixed-size
   circle, so the image fills it and is cropped centrally — which is why the
   contributor uploader crops square (see contributor-editor.js). */
.content-contributor-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.content-contributor-avatar--large {
  width: 64px;
  height: 64px;
  font-size: var(--text-body-size);
}

/* Organization contributors.
   The avatar stays a CIRCLE everywhere on the member side — that is the
   established shape and it does not change. The only difference for an org is
   that its logo is fitted whole inside that circle instead of being cropped to
   fill it, so a wordmark keeps its ends. */
/* The contributor mark sits beside the NAME, not the description.
   .content-contributor-row--interactive sets align-items:center so the chevron
   stays vertically centred; that also centred the avatar against the whole
   name + organization + bio stack, leaving it floating next to the paragraph.
   align-self on the avatar alone tops it out beside the name and leaves the
   chevron centred. Applies to every member contributor row — resource, event,
   learning-path step and story — and to the modal profile. */
.content-contributor-row .content-contributor-avatar,
.content-contributor-modal-profile .content-contributor-avatar {
  align-self: flex-start;
}

.content-contributor-avatar--org {
  padding: 4px;
}

/* A white backdrop behind an uploaded image.
   The avatar's background is the program's brand colour
   (body[data-program-theme] .content-contributor-avatar, ~line 3065), which showed
   straight through a transparent logo and tinted it. The theme selector is
   repeated here deliberately: that rule is 0,2,0, so a plain
   .content-contributor-avatar--logo would lose to it on every branded member page.
   This rule sits later in the file, so at equal specificity it wins.
   Only images get this — with initials, the branded background is correct. */
.content-contributor-avatar--logo,
body[data-program-theme] .content-contributor-avatar--logo {
  background: #FFFFFF;
}

.content-contributor-avatar-img--contain {
  object-fit: contain;
}

.content-contributor-modal-eyebrow {
  font-size: var(--text-xs-size, var(--text-small-size));
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-4) 0;
  line-height: 1;
}

.content-contributor-modal-profile {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

.content-contributor-modal-bio {
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
  margin: 0;
}

.content-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

@media (max-width: 768px) {
  .content-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .content-related-grid {
    grid-template-columns: 1fr;
  }
}

.content-engagement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-20);
}

.content-engagement-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.content-engagement-action svg,
.content-engagement-action i svg {
  fill: none;
  transition: fill 150ms ease;
}

.content-engagement-action[aria-pressed="true"] svg,
.content-engagement-action[aria-pressed="true"] i svg {
  fill: currentColor;
}

.content-engagement-action[aria-pressed="true"] {
  color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

body[data-program-theme] .content-engagement-action[aria-pressed="true"] {
  color: var(--member-primary);
  border-color: var(--member-primary);
}

.content-engagement-action:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.content-engagement-count {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
}

.content-preview-region {
  position: relative;
  width: 100%;
  min-height: 360px;
  background: var(--color-border-muted);
}

.content-renderer-body {
  padding: var(--space-24);
}

.content-taxonomy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-8);
  background: var(--color-background);
  line-height: 1;
}

.content-taxonomy i,
.content-taxonomy svg {
  display: block;
  flex-shrink: 0;
}

/* Includes .content-linked-badge, not just links: a crumb that has nowhere to
   link to renders as a span (learning-path sections, and the fallback when a
   category has no slug), and would otherwise inherit the body size and sit
   larger than the format chip beside it. */
.content-taxonomy a,
.content-taxonomy .content-linked-badge {
  font-size: var(--text-xs-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.content-taxonomy a:hover {
  color: var(--color-text-primary);
}

.content-taxonomy-sep {
  font-size: var(--text-xs-size);
  color: var(--color-text-tertiary);
  user-select: none;
}

.content-linked-badge {
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.content-linked-badge:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.content-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.content-meta-time {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
}

.content-share {
  position: relative;
}

.content-share > summary {
  list-style: none;
}

.content-share > summary::-webkit-details-marker {
  display: none;
}

.content-share > summary::marker {
  display: none;
}

.content-share-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  left: auto;
  z-index: 10;
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: var(--space-4) 0;
}

.content-share-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  line-height: var(--text-base-lh);
  transition: background-color 150ms ease;
}

.content-share-menu-item:hover {
  background: var(--color-surface-hover, var(--color-border-soft));
}

.content-share-menu-item:focus-visible {
  background: var(--color-surface-hover, var(--color-border-soft));
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.content-share-composer-field {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.content-share-composer-field:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.content-share-composer-field .content-share-composer-input {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
  resize: vertical;
  min-height: 100px;
}

.content-share-composer-field .content-share-composer-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

.content-share-composer-field .member-forum-editor-toolbar {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.content-share-attachment {
  position: relative;
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
  padding: var(--space-12);
  
  padding-right: calc(var(--space-12) + 44px + var(--space-4));
}

.content-share-attachment-preview {
  display: flex;
  gap: var(--space-12);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: calc(var(--space-4) * -1);
}

.content-share-attachment-preview:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.content-share-attachment-media {
  flex-shrink: 0;
}

.content-share-attachment-image {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.content-share-attachment-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.content-share-attachment-format {
  display: block;
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.content-share-attachment-title {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.content-share-attachment-summary {
  font-size: var(--text-micro-size);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Date/location line on event attachments. The handoff only styled this on the
   posted card (.content-shared-post-meta); the composer preview needs it too so
   the two renderings match. */
.content-share-attachment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-4);
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.content-share-attachment-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.content-share-attachment-source {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.content-share-attachment-remove {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.content-share-attachment-remove:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.content-shared-post {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  padding: var(--space-12);
  margin-top: var(--space-12);
  text-decoration: none;
  color: inherit;
  transition: background-color 150ms ease;
}

.content-shared-post-media {
  flex: 0 0 80px;
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.content-shared-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-shared-post-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.content-shared-post-format {
  display: block;
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.content-shared-post-title {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.content-shared-post-summary {
  font-size: var(--text-micro-size);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.content-shared-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-4);
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.content-shared-post-meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.content-shared-post-source {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.content-shared-post:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.content-detail-header-top {
  display: flex;
  align-items: center;
  width: 100%;
  align-self: stretch;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.content-detail-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.content-detail-header-left .member-type-label--inline {
  border: 1px solid var(--color-border);
  margin-bottom: 0;
}

/* The format chip and the taxonomy pill sit side by side here, so they are
   aligned to one height. The design system's own values leave them 4px apart,
   which reads as two different components rather than a matched pair. */
.content-detail-header-left .member-type-label--inline,
.content-detail-header-left .content-taxonomy {
  box-sizing: border-box;
  min-height: 26px;
}

.content-detail-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-left: auto;
}

.content-detail-header-right .btn-icon.btn-ghost {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
}

.content-detail-header-right .btn-icon.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 5px;                           
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.content-detail-header-right .btn-icon.btn-ghost i,
.content-detail-header-right .btn-icon.btn-ghost svg {
  position: relative;
  z-index: 1;
}

.content-detail-header-right .btn-icon.btn-ghost:hover::before {
  border-color: var(--color-text-secondary);
}

.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.member-dashboard-event-preview {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: var(--space-12) var(--space-16);
}

.member-dashboard-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.member-dashboard-event-chip--registered {
  color: var(--color-success, #2e7d32);
  background: var(--color-success-soft, color-mix(in srgb, #2e7d32 10%, transparent));
}

.member-dashboard-event-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.member-dashboard-event-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

.member-dashboard-event-actions {
  margin-top: var(--space-6);
}

.member-dashboard-event-row-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  background: color-mix(in srgb, var(--brand-primary, var(--color-primary-navy)) 10%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-2) 0;
  gap: 1px;
}

.member-dashboard-event-row-date-month {
  font-size: 9px;
  font-weight: 700;
  color: var(--brand-primary, var(--color-primary-navy));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.member-dashboard-event-row-date-day {
  font-size: var(--text-small-size);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.support-circle-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  align-items: start;
  margin-top: var(--space-32, 2rem);
}

.support-circle-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.support-circle-roster {
  display: none;
}

.support-circle-hero-inner {
  display: flex;
  gap: var(--space-24);
  align-items: center;
}

.support-circle-hero-body {
  flex: 1;
  min-width: 0;
}

.support-circle-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-24);
}

.support-circle-title-block {
  flex: 1;
  min-width: 0;
}

.support-circle-rename-view {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.support-circle-title {
  font-size: var(--text-lg-size, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.support-circle-rename-edit {
  display: flex;
  flex-direction: column;
}

.support-circle-rename-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.support-circle-description {
  line-height: 1.6;
}

.support-circle-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.support-circle-meta-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.support-circle-meta-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.support-circle-meta-names {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.support-circle-avatar-stack {
  display: flex;
  flex-direction: row;
}

.support-circle-avatar-stack .avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin-left: -10px;
  border: 2px solid var(--color-surface);
}

.support-circle-avatar-stack .avatar:first-child {
  margin-left: 0;
}

.support-circle-cover-wrap {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
}

.support-circle-cover {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--color-border);
}

.support-circle-cover-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.support-circle-cover-wrap:hover .support-circle-cover-overlay,
.support-circle-cover-overlay:focus {
  opacity: 1;
}

.support-circle-cover-overlay:focus {
  outline: 2px solid var(--brand-focus-ring, var(--member-primary, var(--color-accent-teal)));
  outline-offset: 2px;
}

.support-circle-composer-prompt {
  flex: 1;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-family: inherit;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  padding: var(--space-8) var(--space-16);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.support-circle-composer-prompt:hover {
  border-color: var(--member-primary, var(--color-accent-teal));
}

.support-circle-composer-prompt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-focus-ring, var(--member-primary, var(--color-accent-teal)));
}

.support-circle-composer-body {
  padding-bottom: 0;
}

.support-circle-composer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-12);
}

.support-circle-composer-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-small-size);
  flex-wrap: wrap;
}

.support-circle-composer-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.support-circle-composer-separator {
  color: var(--color-text-muted);
}

.support-circle-composer-textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
  font-family: inherit;
}

.support-circle-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
}

.support-circle-composer-image-preview {
  margin-top: var(--space-8);
}

.support-circle-composer-image-wrap {
  position: relative;
  display: inline-block;
}

.support-circle-composer-image-wrap img {
  max-height: 200px;
  max-width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}

.support-circle-composer-remove-image {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.support-circle-composer-remove-image:hover {
  background: rgba(0, 0, 0, 0.75);
}

.support-circle-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.support-circle-post .card-body {
  padding: 20px;
}

.support-circle-post-header .avatar {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.support-circle-roster-item .avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}

.support-circle-post-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.support-circle-post-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.support-circle-post-author {
  font-size: var(--text-small-size);
}

.support-circle-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.support-circle-post-body {
  font-size: var(--text-small-size);
  line-height: 1.65;
  color: var(--color-text-primary);
  margin: 14px 0 0;
}

.support-circle-post-img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-top: 16px;
  margin-bottom: 14px;
}

/* Images inside user-written post bodies.
 *
 * These arrive through the forum WYSIWYG (forum-editor.js), which inserts a
 * bare <img> at the source image's intrinsic size via execCommand. It applies
 * an inline max-width:100% but no height cap, and only to images added through
 * the toolbar in that session — a pasted image gets nothing. Nothing else
 * constrained them: .forum-post-content in member.css styles the container and
 * its <p> children only, and no program-admin page loads member.css at all, so
 * a rule placed there would not reach the admin-side forum. This lives in
 * common.css, which every forum surface loads.
 *
 * width:auto with a max-height keeps the aspect ratio and caps how much of the
 * feed one image can occupy, rather than cropping it the way object-fit:cover
 * would on an attachment thumbnail.
 */
/* Forum author avatar.
 *
 * Lives here, not in member.css, because program-admin/forum.js and the
 * program-admin forum pages render these same member-forum-* classes, and NO
 * page under Website/program-admin/ loads member.css. While this rule sat in
 * member.css the class was entirely unstyled on the admin side, so an avatar
 * image — sized width:100%/height:100% against its container — had no
 * container size to fill and rendered at its intrinsic pixel size.
 *
 * The size belongs on this container, never on the <img> itself: an inline
 * width/height on the image outranks this rule and defeats it.
 */
.member-forum-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--color-primary-navy);
  color: #fff;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.member-forum-avatar--anon {
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Rendered post bodies. There are two container classes, not one:
 *   .member-forum-content   — forum-post.js, which BOTH member/forum/post.html
 *                             and program-admin/forum/post.html load
 *   .forum-post-content     — forum-topic.js and member/forum/topic.html
 * [data-post-content] is on the same elements and catches any future renderer.
 * Support circle bodies are escaped plain text and cannot hold an <img>; their
 * attached photo is .support-circle-post-img, capped above. */
.member-forum-content img,
.forum-post-content img,
[data-post-content] img,
/* ...and the composer, where the contenteditable inherits the textarea class
 * (forum-editor.js:130), so an image looks right while it is being written. */
.member-forum-editor-textarea img,
.member-forum-reply-textarea img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
  margin: var(--space-8) 0;
}

.support-circle-post-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 12px;
}

.support-circle-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.support-circle-action-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-background);
}

.support-circle-action-btn:focus-visible {
  outline: 2px solid var(--brand-focus-ring, var(--member-primary, var(--color-accent-teal)));
  outline-offset: 2px;
}

.support-circle-action-btn[data-liked="true"] {
  color: var(--member-primary, var(--color-accent-teal));
}

.support-circle-action-btn[data-liked="true"] svg {
  fill: currentColor;
}

.support-circle-count-pill {
  font-size: 15px;
  font-weight: var(--font-weight-medium, 500);
  min-width: 14px;
  text-align: left;
}

.support-circle-comments {
  padding: var(--space-12) 20px var(--space-16);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  background: var(--color-background);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.support-circle-comments .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.support-circle-comment {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.support-circle-comment-body {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-8) var(--space-12);
  min-width: 0;
}

.support-circle-comment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.support-circle-comment-menu-wrap {
  position: relative;
  flex-shrink: 0;
  margin: -4px -4px 0 0;
}

.support-circle-comment-menu-trigger {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.support-circle-comment-menu-trigger:hover,
.support-circle-comment-menu-trigger[aria-expanded="true"],
.support-circle-comment-menu-trigger:focus-visible {
  opacity: 1;
}

.support-circle-comment-menu {
  display: block;
  position: absolute;
  right: 0;
  left: auto;
  top: 100%;
  margin-top: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  min-width: 180px;
  z-index: 20;
  overflow: hidden;
}

.support-circle-comment-menu[hidden] {
  display: none;
}

.support-circle-reply-compose {
  display: block;
}

.support-circle-reply-collapsed {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.support-circle-reply-prompt {
  flex: 1;
  text-align: left;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-family: inherit;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  padding: var(--space-6) var(--space-12);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.support-circle-reply-prompt:hover {
  border-color: var(--member-primary, var(--color-accent-teal));
}

.support-circle-reply-prompt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-focus-ring, var(--member-primary, var(--color-accent-teal)));
}

.support-circle-reply-send-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-circle-reply-expanded {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.support-circle-reply-compose-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.support-circle-reply-input {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  font-family: inherit;
  min-height: 72px;
}

.support-circle-reply-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.support-circle-roster-title {
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 22px 0;
}

.support-circle-roster-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.support-circle-roster-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.support-circle-feed-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-24) 0 var(--space-8);
}

.support-circle-feed-footer-text {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  margin: 0;
}

.support-circle-roster-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.stories-page-header {
  margin-bottom: var(--space-24);
}

.stories-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8) 0;
}

.stories-page-copy {
  margin: 0;
  line-height: 1.6;
  max-width: 52ch;
}

.story-hero {
  padding: 0;
  overflow: hidden;
  margin-bottom: var(--space-24);
}

.story-hero-inner {
  display: flex;
  flex-direction: column;
}

.story-hero-content {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.story-hero-content .badge {
  align-self: flex-start;
}

.story-hero-title {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0;
}

.story-hero-excerpt {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

.story-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.story-hero-author {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.story-hero-cta-btn {
  align-self: flex-start;
}

.story-hero-image {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.story-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-surface) 0%, transparent 35%);
  pointer-events: none;
}

.story-hero-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.member-dashboard-cta-banner--stories {
  background: linear-gradient(to right, #FFF3EA 0%, #FFFFFF 100%);
  margin-bottom: var(--space-24);
}

.member-dashboard-cta-banner--stories .member-dashboard-cta-banner-icon {
  color: var(--color-accent-orange);
}

.member-dashboard-cta-banner--stories:focus-within {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
}

.story-share-cta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.story-reassurance-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-4) var(--space-12);
}

.story-section {
  margin-bottom: var(--space-32);
}

.story-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.story-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.story-count {
  display: block;
}

.story-rail {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-8);
  scrollbar-width: none;
}

.story-rail::-webkit-scrollbar {
  display: none;
}

.story-rail-inner {
  display: flex;
  gap: var(--space-12);
  align-items: stretch;
}

.story-card--rail {
  flex-shrink: 0;
  width: 220px;
  scroll-snap-align: start;
}

.story-detail-cover {
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.story-card-cover-generated {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-background-soft), var(--color-surface));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--brand-primary);
}

.story-card-cover-generated--alt {
  background: linear-gradient(135deg, var(--color-surface), var(--brand-background-soft));
}

.story-card-cover-generated--warm {
  background: linear-gradient(135deg, var(--color-warning-bg), var(--color-background));
}

.story-card-cover-generated--cool {
  background: linear-gradient(135deg, var(--color-primary-bg), var(--color-surface));
}

.story-card-byline {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
}

.story-search-row {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-16);
}

.story-search-wrap {
  position: relative;
  flex: 1;
}

.story-search-icon {
  position: absolute;
  left: var(--space-12);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.story-search-input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 38px;
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.story-filter-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.story-filter-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1;
}

.story-filter-chip:hover {
  border-color: var(--color-accent-teal);
}

.story-filter-chip.active {
  background-color: var(--color-accent-teal);
  border-color: var(--color-accent-teal);
  color: #fff;
}

.story-load-more {
  text-align: center;
  margin-top: var(--space-24);
}

.story-detail-page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.story-detail-card {
  padding: 0;
  overflow: hidden;
}

.story-detail-figure {
  width: 100%;
  line-height: 0;
  margin: 0;
}

.story-detail-figure-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.story-detail-content {
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.story-detail-content .badge {
  align-self: flex-start;
}

.story-detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin: 0;
}

.story-detail-byline {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.story-detail-byline-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story-detail-byline-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.story-detail-byline-rel {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0;
}

.story-detail-body {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text-primary);
  width: 100%;
}

.story-detail-body p {
  margin: 0;
  max-width: none;
}

.story-detail-body p + p {
  margin-top: var(--space-16);
}

.story-reactions {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: flex-start;
}

.story-reactions-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
}

.story-reactions-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.story-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.story-reaction-btn:hover {
  border-color: var(--member-primary, #F47C20);
  color: var(--member-primary, #F47C20);
}

.story-reaction-btn[data-reacted="true"] {
  background: #FFF3EA;
  border-color: var(--member-primary, #F47C20);
  color: var(--member-primary, #F47C20);
}

.story-submit-page {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.story-submit-fields-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.story-submit-textarea {
  min-height: 220px;
  resize: vertical;
}

.story-word-count {
  display: flex;
  justify-content: flex-end;
}

.story-submit-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-12);
}

.story-submit-notice {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  padding: var(--space-12) var(--space-16);
  background-color: var(--member-accent-soft, #FFF3EA);
  border: 1px solid var(--member-primary, #F47C20);
  border-radius: var(--radius-md);
  color: var(--member-primary, #F47C20);
}

.story-submit-notice p {
  margin: 0;
}

.stories-tabs.tabs-group .tab-content {
  padding-top: var(--space-24);
}

.my-story-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.my-story-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-16);
}

.my-story-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}

.my-story-item-meta {
  flex: 1;
  min-width: 0;
}

.my-story-item-status {
  flex-shrink: 0;
}

.my-story-item-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.my-story-item-footer {
  display: flex;
  align-items: center;
}

.my-story-item-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.my-story-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.story-search-status {
  flex-shrink: 0;
  min-width: 152px;
}

.story-cover-type-label {
  font-size: var(--text-xs-size);
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: 1.3;
  padding: 0 var(--space-8);
}

.my-story-item-thumb .story-cover-type-label {
  display: none;
}

/* -- Story filter chips (reusable) -- */
.filter-chip-section {
  padding: var(--space-16) 0;
}

.filter-chip-section:first-child {
  padding-top: 0;
}

.filter-chip-section-label {
  margin: 0 0 var(--space-12) 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* -- Saved state for story bookmark overlay -- */
/* Same program colour as every other saved state; the white pill keeps it
   legible over the card image. */
.resource-card-bookmark[data-story-save][data-saved="true"] {
  color: var(--member-primary, var(--color-accent-teal));
  background: rgba(255, 255, 255, 1);
}

.resource-card-bookmark[data-story-save][data-saved="true"] svg {
  fill: currentColor;
}

/* ---- Stories responsive ---- */

@media (max-width: 479px) {
  .my-story-item {
    flex-direction: column;
    gap: 0;
  }
  .my-story-item-thumb {
    width: 100%;
    height: 100px;
    border-radius: 0;
  }
}

@media (min-width: 640px) {
  /* Recommended rail → 4-column grid at tablet+ */
  .story-rail {
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .story-rail-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-16);
    align-items: stretch;
  }
  .story-card--rail {
    width: auto;
    scroll-snap-align: unset;
  }
  .story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-submit-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .story-submit-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

@media (min-width: 960px) {
  .story-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .story-hero-inner {
    flex-direction: row;
    align-items: stretch;
  }
  .story-hero-content {
    flex: 1;
    padding: var(--space-32);
    justify-content: center;
  }
  .story-hero-title {
    font-size: 1.625rem;
  }
  .story-hero-image {
    width: 340px;
  }
  .story-hero-image::after {
    background: linear-gradient(to right, var(--color-surface) 0%, transparent 45%);
  }
  .story-hero-img {
    height: 100%;
    min-height: 280px;
  }
  .story-detail-figure-img {
    height: 380px;
  }
  .story-detail-content {
    padding: var(--space-32) var(--space-32);
  }
  .story-detail-title {
    font-size: 1.875rem;
  }
  .story-detail-body {
    font-size: 1.0625rem;
  }
}

/* Story Detail related rail: scroll on mobile + tablet, 3-col grid at wide desktop only.
   Counteracts the base .story-rail >=640px grid transition so no row-wrap occurs at tablet. */
@media (min-width: 640px) {
  .story-rail--detail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-8);
  }
  .story-rail--detail .story-rail-inner {
    display: flex;
    grid-template-columns: unset;
  }
  .story-rail--detail .story-card--rail {
    width: 260px;
    scroll-snap-align: start;
  }
}

@media (min-width: 1100px) {
  .story-rail--detail {
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .story-rail--detail .story-rail-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    align-items: stretch;
  }
  .story-rail--detail .story-card--rail {
    width: auto;
    scroll-snap-align: unset;
  }
}

.repeatable-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.repeatable-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.repeatable-list-drag {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  cursor: grab;
  display: flex;
  align-items: center;
  padding: var(--space-4);
}

.repeatable-list-drag:active {
  cursor: grabbing;
}

.repeatable-list-input {
  flex: 1;
  min-width: 0;
}

.repeatable-list-add {
  margin-top: var(--space-4);
}

.repeatable-list-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 72px;
}

.repeatable-list-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  flex-shrink: 0;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.contributor-selector {
  position: relative;
}

.contributor-selector-empty {
  
}

.contributor-selector-selected {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.contributor-selected-preview {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.contributor-selected-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  user-select: none;
  background: var(--color-primary-navy);
  color: var(--color-text-on-navy);
}

.contributor-selected-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.contributor-selected-name {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contributor-selected-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contributor-selected-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contributor-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.contributor-source-badge {
  margin-left: auto;
  flex-shrink: 0;
}

.est-time-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.est-time-input {
  width: 80px;
  flex-shrink: 0;
}

.est-time-unit {
  font-size: var(--text-body-size);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
  white-space: nowrap;
}

.contributor-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.contributor-cell-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand-muted, #dbeafe);
  color: var(--color-brand, #1d4ed8);
  font-size: var(--text-xs-size, 11px);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0.03em;
  user-select: none;
}

.contributor-cell-avatar--teal {
  background: #ccfbf1;
  color: #0d9488;
}

.contributor-cell-avatar--purple {
  background: #ede9fe;
  color: #7c3aed;
}

.contributor-cell-avatar--slate {
  background: var(--color-surface-hover, #f1f5f9);
  color: var(--color-text-secondary, #64748b);
}

.contributor-cell-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.contributor-cell-bio {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

.usage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.usage-summary-link {
  font-size: var(--text-body-size);
  color: var(--color-text-link, var(--color-brand));
  text-decoration: none;
  line-height: var(--text-base-lh);
}

.usage-summary-link:hover {
  text-decoration: underline;
}

.usage-summary--compact .usage-summary-link {
  font-size: var(--text-small-size);
}

.contributor-image-fallback {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--color-brand-muted, #dbeafe);
  color: var(--color-brand, #1d4ed8);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0.03em;
  user-select: none;
}

.contributor-image-fallback--teal {
  background: #ccfbf1;
  color: #0d9488;
}

.contributor-image-fallback--purple {
  background: #ede9fe;
  color: #7c3aed;
}

.contributor-image-fallback--slate {
  background: var(--color-surface-hover, #f1f5f9);
  color: var(--color-text-secondary, #64748b);
}

.metadata-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border-default));
}

.metadata-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.metadata-label {
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  line-height: var(--text-base-lh);
  font-weight: 500;
}

.metadata-value {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: var(--text-base-lh);
  text-align: right;
}

.screen-grid-sidebar--two-thirds {
  grid-template-columns: 2fr 1fr;
}

.repeatable-list-row--bordered {
  border: 1px solid var(--color-border-default, var(--color-border));
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  background: var(--color-surface);
}

.repeatable-list-row--bordered .repeatable-list-input {
  border: none;
  background: transparent;
  box-shadow: none;
  padding-left: var(--space-4);
}

.repeatable-list-empty {
  padding: var(--space-12) 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.multiselect-trigger--chips {
  height: auto;
  min-height: 38px;
  align-items: flex-start;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  flex-wrap: nowrap; 
}

.multiselect-chips-area {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
}

.multiselect-chips-area .badge {
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
}

.card-body--compact {
  padding: 0 var(--space-12) var(--space-8);
}

.card-body--compact > .form-field:last-child {
  margin-bottom: 0;
}

.multiselect-chips-placeholder {
  font-size: var(--text-body-size);
  color: var(--color-text-muted);
  line-height: var(--text-base-lh);
}

.multiselect-trigger--chips .multiselect-icon {
  flex-shrink: 0;
  align-self: center;
  margin-left: var(--space-8);
}

.uploader--identity.uploader-thumbnail {
  aspect-ratio: 1 / 1;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
}

.uploader--identity:not(.uploader-empty) {
  padding: var(--space-16);
  overflow: visible;
}

.uploader--identity .uploader-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  position: static;
  width: auto;
  height: auto;
}

.uploader--identity .uploader-preview-actions {
  position: static;
}

.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Core shared styles - loaded by both admin and member pages */
/* Requires base.css loaded first */


/* ============================================================================ */
/* PHASE 3: NAVIGATION + LAYOUT + FORMS                                         */
/* ============================================================================ */

/* -------------------------------------------------------------------------- */
/* NAVIGATION: APP HEADER (TOP BAR)                                           */
/* -------------------------------------------------------------------------- */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-24);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.header-page-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.header-search {
  position: relative;
  width: 280px;
}

.header-search .input-base {
  padding-left: 40px;
  height: 36px;
  background-color: var(--color-background);
  border-color: var(--color-border);
}

.header-search .input-base:focus {
  background-color: var(--color-surface);
  border-color: var(--color-accent-blue);
}

.header-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
  position: relative;
}

.header-icon-btn:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.header-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.header-icon-btn.has-notification::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

.header-user {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-user:hover {
  background-color: var(--color-background);
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}

.header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* User Menu Dropdown */
.header-user-wrapper {
  position: relative;
}

/* Legacy header dropdown: here .header-user-menu is the PANEL, hidden until the
   wrapper opens. Scoped to .header-user-wrapper because the design system's
   newer <details class="header-user-menu"> puts the same class on the CONTAINER —
   unscoped, this rule hid that entire control, avatar included. */
.header-user-wrapper .header-user-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  padding: var(--space-4) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 1000;
}

.header-user-wrapper.open .header-user-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background: none;
  border: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.header-user-menu-item:hover {
  background: var(--color-background);
}

.header-user-menu-item--danger {
  color: var(--color-destructive);
}

.header-user-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.header-user-menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.header-user-info {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.header-user-name {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.header-user-email {
  font-size: var(--text-xsmall-size);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Rootie AI Button */
.header-ai-btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-blue));
  color: var(--color-primary-navy);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.header-ai-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* -------------------------------------------------------------------------- */
/* NAVIGATION: SIDEBAR                                                         */
/* -------------------------------------------------------------------------- */

.sidebar {
  width: 220px;
  min-height: 100vh;
  background-color: var(--color-primary-navy);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}

.sidebar.collapsed {
  width: 72px;
}

.sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--color-accent-teal);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-navy);
}

.sidebar-logo-text {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: white;
}

.sidebar-logo-img {
  display: block;
  width: 75%;
  height: auto;
  max-height: 80px;
  margin: 0 auto var(--space-8);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  object-fit: contain;
}

.sidebar.collapsed .sidebar-logo-text {
  display: none;
}

.sidebar-content {
  flex: 1;
  padding: var(--space-16) var(--space-12);
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: var(--space-16);
}

.sidebar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: var(--space-12) var(--space-8);
}

.sidebar-section-label {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--space-8);
  margin-bottom: var(--space-8);
  margin-top: var(--space-16);
}

.sidebar-section:first-child .sidebar-section-label {
  margin-top: 0;
}

.sidebar.collapsed .sidebar-section-label {
  display: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-regular);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.sidebar-item.active .sidebar-item-icon {
  color: var(--color-accent-teal);
}

.sidebar-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.sidebar-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-item-label {
  display: none;
}

/* The open-survey count is drawn as a pseudo-element fed by a custom property
   rather than an appended <span>, so it lands in the first paint with the item
   it belongs to instead of being inserted a frame later. The link carries an
   aria-label for the count, since pseudo-element text is not dependable to
   assistive technology. */
html.program-surveys-waiting [data-nav="surveys"]::after {
  content: var(--program-surveys-waiting, "");
}

.sidebar-item-badge,
html.program-surveys-waiting [data-nav="surveys"]::after {
  /* .sidebar-item is a flex row with no justify-content, so the badge has to
     claim the free space itself to sit against the trailing edge. */
  margin-left: auto;
  font-size: var(--text-micro-size);
  background-color: var(--color-accent-teal);
  color: var(--color-primary-navy);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
  font-weight: var(--font-weight-medium);
}

.sidebar.collapsed .sidebar-item-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 8px;
  height: 8px;
  padding: 0;
}

/* Nested sidebar items */
.sidebar-nested {
  margin-left: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-nested .sidebar-item {
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-small-size);
}

.sidebar.collapsed .sidebar-nested {
  display: none;
}

/* Sidebar user profile */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.sidebar-user:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-small-size);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--text-micro-size);
  color: rgba(255, 255, 255, 0.6);
}

.sidebar.collapsed .sidebar-user-info {
  display: none;
}

/* Collapsed sidebar item relative for badge positioning */
.sidebar.collapsed .sidebar-item {
  position: relative;
  justify-content: center;
  padding: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* NAVIGATION: TABS                                                            */
/* -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

.tab.active {
  color: var(--color-primary-navy);
  border-bottom-color: var(--color-primary-navy);
}

.tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.tab:disabled {
  color: var(--color-action-disabled);
  cursor: not-allowed;
}

.tab-icon {
  width: 16px;
  height: 16px;
}

/* Icon-only tabs */
.tabs-icon-only .tab {
  padding: var(--space-12);
}

.tabs-icon-only .tab .tab-label {
  display: none;
}

/* Tabs inside Card (padded panel) */
.tabs-group--in-card .tabs {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}

.tab-panel {
  display: block;
}

.tab-panel.tab-content--hidden {
  display: none;
}

.tab-panel-body {
  padding: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* NAVIGATION: BREADCRUMBS                                                     */
/* -------------------------------------------------------------------------- */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

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

.breadcrumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb-link:hover {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  border-radius: 2px;
}

.breadcrumb-separator {
  color: var(--color-border);
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.breadcrumb-section {
  color: var(--color-text-muted);
  cursor: default;
  pointer-events: none;
}

.breadcrumb-truncated {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------- */
/* LAYOUT: APP SHELL                                                           */
/* -------------------------------------------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-background);
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-content {
  flex: 1;
  padding: var(--space-24);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* -------------------------------------------------------------------------- */
/* LAYOUT: DASHBOARD PATTERNS                                                  */
/* -------------------------------------------------------------------------- */

/* Member Dashboard (Low density, calm) */
.dashboard-member {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.dashboard-hero-card {
  background: linear-gradient(135deg, var(--color-primary-navy), #003D75);
  color: var(--color-text-on-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
}

.dashboard-hero-card h2 {
  color: var(--color-text-on-navy);
  margin-bottom: var(--space-8);
}

.dashboard-hero-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-16);
}

/* Welcome Banner - Reusable pattern for dashboard greetings */
.welcome-banner {
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
}

.welcome-banner-navy {
  background: linear-gradient(135deg, var(--color-primary-navy) 0%, #003d73 100%);
}

.welcome-banner-green {
  background: linear-gradient(135deg, #1a6b4a 0%, #2d8a62 100%);
}

.welcome-banner-title {
  font-size: var(--text-xl-size);
  font-weight: var(--font-weight-semibold);
  color: white;
  margin: 0 0 var(--space-4) 0;
}

.welcome-banner-subtitle {
  font-size: var(--text-sm-size);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.welcome-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.welcome-banner-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.welcome-banner-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .welcome-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .welcome-banner-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

.dashboard-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-24);
}

.dashboard-rail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-24);
}

@media (max-width: 900px) {
  .dashboard-rail {
    grid-template-columns: 1fr;
  }
}

/* Staff Dashboard (Moderate density) */
.dashboard-staff {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-16);
}

/* -------------------------------------------------------------------------- */
/* KPI SYSTEM B: KPI ITEMS (dashboard / legacy)                               */
/* Base definitions for .kpi-label, .kpi-value, .kpi-change                   */
/* Used with .kpi-card (legacy) and .kpi-item contexts                        */
/* For admin list screens, use KPI SYSTEM A (.kpi-card-*) instead             */
/* -------------------------------------------------------------------------- */

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}

/* Base .kpi-label - minimal definition */
.kpi-label {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

/* Base .kpi-value - minimal definition */
.kpi-value {
  font-size: var(--text-h2-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
}

/* Base .kpi-change - minimal definition */
.kpi-change {
  font-size: var(--text-micro-size);
}

/* Dashboard context: spacing adjustments for .kpi-card usage */
.kpi-card .kpi-label {
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.kpi-card .kpi-change {
  margin-top: var(--space-4);
}

.kpi-change.positive {
  color: var(--color-success);
}

.kpi-change.negative {
  color: var(--color-danger);
}

.dashboard-two-col {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-24);
}

@media (max-width: 1024px) {
  .dashboard-two-col {
    grid-template-columns: 1fr;
  }
}

/* Admin Dashboard (Denser, still calm) */
.dashboard-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* -------------------------------------------------------------------------- */
/* FORMS: SELECT                                                               */
/* -------------------------------------------------------------------------- */

.select-wrapper {
  position: relative;
}

.select-base {
  height: 40px;
  padding: 0 var(--space-32) 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  width: 100%;
  cursor: pointer;
  appearance: none;
  transition: all 0.2s ease;
}

.select-base:hover {
  border-color: var(--color-text-muted);
}

.select-base:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.select-base:active {
  background-color: var(--color-background);
}

.select-base:disabled {
  background-color: var(--color-background);
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.select-base:disabled:hover {
  border-color: var(--color-border);
}

.select-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

.form-field.error .select-base {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.select-wrapper.error .select-base {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.form-field.success .select-base {
  border-color: var(--color-success);
}

/* Dropdown menu (visual spec) */
.select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}

.select-option {
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-small-size);
  cursor: pointer;
  transition: background 0.1s ease;
}

.select-option:hover {
  background-color: var(--color-background);
}

.select-option:active {
  background-color: var(--color-action-selected);
}

.select-option.selected {
  background-color: var(--color-action-selected);
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-medium);
}

.select-option.selected:hover {
  background-color: #CCE4FC;
}

/* -------------------------------------------------------------------------- */
/* FORMS: CHECKBOX                                                             */
/* -------------------------------------------------------------------------- */

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  cursor: pointer;
}

.checkbox-input {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.checkbox-wrapper:hover .checkbox-input {
  border-color: var(--color-accent-blue);
}

.checkbox-input.checked {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.checkbox-input.checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.checkbox-input.checked .checkbox-icon {
  color: white;
}

.checkbox-input.indeterminate {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.checkbox-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.checkbox-input.disabled {
  background-color: var(--color-background);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.checkbox-input.disabled.checked {
  background-color: var(--color-action-disabled);
}

.checkbox-wrapper.error .checkbox-input {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.checkbox-label {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.checkbox-label.disabled {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FORMS: CHECKBOX GROUP (MULTI-SELECT)                                        */
/* -------------------------------------------------------------------------- */

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.checkbox-row input[type="checkbox"] {
  width: var(--space-16);
  height: var(--space-16);
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary-navy);
}

.checkbox-row span {
  user-select: none;
}

/* -------------------------------------------------------------------------- */
/* FORMS: RADIO                                                                */
/* -------------------------------------------------------------------------- */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.radio-group.horizontal {
  flex-direction: row;
  gap: var(--space-24);
}

.radio-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  cursor: pointer;
}

.radio-input {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.radio-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.radio-wrapper:hover .radio-input {
  border-color: var(--color-accent-blue);
}

.radio-input.selected {
  border-color: var(--member-primary, var(--color-primary-navy));
}

.radio-input.selected::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--member-primary, var(--color-primary-navy));
  border-radius: 50%;
}


/* Ported verbatim from the Surveys & Forms delta handoff (styles.css:13570,
   13575). Multi-select survey answers set .selected on .checkbox-input, but only
   the radio variant had a rule — so ticking a checkbox produced no visible mark. */
.checkbox-input.selected {
  border-color: var(--member-primary, var(--color-primary-navy));
  background-color: var(--member-primary, var(--color-primary-navy));
}


.checkbox-input.selected::after {
  content: '';
  display: block;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--color-surface);
  border-bottom: 2px solid var(--color-surface);
  transform: rotate(-45deg) translate(0, -1px);
}

.radio-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.radio-input.disabled {
  background-color: var(--color-background);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.radio-input.disabled.selected::after {
  background-color: var(--color-action-disabled);
}

.radio-wrapper.error .radio-input {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.radio-label {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.radio-label.disabled {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FORMS: SWITCH/TOGGLE                                                        */
/* -------------------------------------------------------------------------- */

.switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}

.switch-track {
  width: 44px;
  height: 24px;
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.switch-track.on {
  background-color: var(--color-success);
}

.switch-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--color-surface);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.switch-track.on .switch-thumb {
  transform: translateX(20px);
}

.switch-track:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.switch-track.disabled {
  background-color: var(--color-border-muted);
  cursor: not-allowed;
}

.switch-track.disabled .switch-thumb {
  background-color: var(--color-background);
}

.switch-label {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
}

.switch-label.disabled {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FORMS: SEGMENTED CONTROL                                                    */
/* -------------------------------------------------------------------------- */
/* Usage: Two or more mutually-exclusive options as distinct button-like pills */
/* Structure: .segmented-control > .segmented-option (label wrapping radio)    */
/* Accessibility: Uses real radio inputs, visible focus ring, selected state   */

.segmented-control {
  display: inline-flex;
  gap: var(--space-8);
  background: transparent;
  border: none;
  padding: 0;
}

.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.segmented-option:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-background);
}

.segmented-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.segmented-option:has(input:checked) {
  background-color: var(--color-primary-bg);
  color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
}

.segmented-option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* -------------------------------------------------------------------------- */
/* FORMS: INPUT WITH ICONS                                                     */
/* -------------------------------------------------------------------------- */

.input-with-icon {
  position: relative;
}

.input-with-icon .input-base {
  padding-left: 40px;
}

.input-with-icon.trailing .input-base {
  padding-left: var(--space-12);
  padding-right: 40px;
}

.input-with-icon.both .input-base {
  padding-left: 40px;
  padding-right: 40px;
}

.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.input-icon.leading {
  left: 12px;
}

.input-icon.trailing {
  right: 12px;
}

.input-action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-4);
  border-radius: var(--radius-xs);
  transition: color 0.15s ease;
}

.input-action:hover {
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* FORMS: HELPER TEXT PATTERNS                                                 */
/* -------------------------------------------------------------------------- */

.helper-neutral {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.helper-error {
  font-size: var(--text-micro-size);
  color: var(--color-danger-text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.helper-success {
  font-size: var(--text-micro-size);
  color: var(--color-success-text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* FORMS: INPUT WITH FIXED PREFIX (PATH INPUT)                                 */
/* -------------------------------------------------------------------------- */

.input-prefix-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-prefix-group:focus-within {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-12);
  background-color: var(--color-background);
  color: var(--color-text-muted);
  font-size: var(--text-body-size);
  font-family: var(--font-family-base);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  user-select: none;
}

.input-prefix-input {
  flex: 1;
  border: none;
  border-radius: 0;
  min-width: 0;
}

.input-prefix-input:focus {
  outline: none;
  box-shadow: none;
}

.input-prefix-group--success {
  border-color: var(--color-success);
}

.input-prefix-group--success:focus-within {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(0, 107, 94, 0.2);
}

.input-prefix-group--error {
  border-color: var(--color-danger);
}

.input-prefix-group--error:focus-within {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-focus-ring-error);
}

/* -------------------------------------------------------------------------- */
/* FORMS: COLOR PICKER FIELD                                                   */
/* -------------------------------------------------------------------------- */

.color-field {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
}

.color-swatch-input {
  width: 44px;
  height: 44px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-swatch-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch-input::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
}

.color-swatch-input::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
}

.color-swatch-input:hover {
  border-color: var(--color-accent-blue);
}

.color-swatch-input:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.color-hex-input {
  flex: 1;
  min-width: 100px;
  max-width: 140px;
  font-family: var(--font-family-mono);
  text-transform: lowercase;
}

.color-hex-input.input-error {
  border-color: var(--color-danger);
}

.color-hex-input.input-error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-focus-ring-error);
}

/* -------------------------------------------------------------------------- */
/* PREVIEW BOX                                                                  */
/* -------------------------------------------------------------------------- */

.preview-box {
  padding: var(--space-12);
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.preview-box-lg {
  padding: var(--space-24);
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Program header preview for Appearance tab */
.program-header-preview {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background-color: var(--color-primary-navy);
  border-radius: var(--radius-sm);
}

.program-header-preview-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: white;
  padding: 4px;
  object-fit: contain;
}

.program-header-preview-text h4 {
  color: white;
  margin: 0;
  font-size: var(--text-body-size);
}

.program-header-preview-text p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: var(--text-small-size);
}

/* Constrained width for prefix inputs */
.input-prefix-group--constrained {
  max-width: 400px;
}

/* -------------------------------------------------------------------------- */
/* FORMS: SAVE PATTERNS                                                        */
/* -------------------------------------------------------------------------- */

/* Inline Save - Right-aligned save/cancel buttons */
.form-actions-inline {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

/* Sticky Save Bar */
.save-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-24);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 50;
}

.save-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.save-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.save-bar-status {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-size);
  color: var(--color-success);
}

.save-bar-status.unsaved {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* BUILDER: MICRO-PATTERNS                                                     */
/* -------------------------------------------------------------------------- */

.status-draft {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-published {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-scheduled {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.preview-callout {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-info-bg);
  border: 1px solid rgba(13, 90, 158, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-info-text);
}

.preview-callout-icon {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* DEMO: PHASE 3 LAYOUT EXAMPLES                                               */
/* -------------------------------------------------------------------------- */

.phase3-demo-shell {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-32);
}

.app-sidebar {
  width: 200px;
  min-height: 400px;
  background: var(--color-primary-navy);
  padding: var(--space-16) var(--space-12);
  display: flex;
  flex-direction: column;
}

.app-sidebar .sidebar-logo {
  margin-bottom: var(--space-16);
}

.app-sidebar .sidebar-logo-text {
  font-size: var(--text-body-size);
  color: white;
}

.app-sidebar .sidebar-section-label {
  color: rgba(255, 255, 255, 0.5);
}

.app-sidebar .sidebar-item {
  color: rgba(255, 255, 255, 0.8);
}

.app-sidebar .sidebar-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.app-sidebar .sidebar-item.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.app-sidebar .sidebar-item.active .sidebar-item-icon {
  color: var(--color-accent-teal);
}

.app-sidebar .sidebar-footer-demo {
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------- */
/* SIDEBAR LIGHT VARIANT                                                       */
/* Toggle with .sidebar--light class on .app-sidebar                   */
/* -------------------------------------------------------------------------- */

.app-sidebar.sidebar--light {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.app-sidebar.sidebar--light .sidebar-logo-img {
  border-bottom-color: var(--color-border);
}

/* Hide white logo, show color logo in light mode */
.app-sidebar.sidebar--light .sidebar-logo-img.logo-dark {
  display: none;
}

.app-sidebar.sidebar--light .sidebar-logo-img.logo-light {
  display: block;
}

/* Default: show dark logo, hide light logo */
.app-sidebar .sidebar-logo-img.logo-light {
  display: none;
}

.app-sidebar .sidebar-logo-img.logo-dark {
  display: block;
}

.app-sidebar.sidebar--light .sidebar-logo-text {
  color: var(--color-primary-navy);
}

.app-sidebar.sidebar--light .sidebar-divider {
  background: var(--color-border);
}

.app-sidebar.sidebar--light .sidebar-section-label {
  color: var(--color-text-muted);
}

.app-sidebar.sidebar--light .sidebar-item {
  color: var(--color-text-secondary);
}

.app-sidebar.sidebar--light .sidebar-item:hover {
  background-color: rgba(0, 41, 80, 0.06);
  color: var(--color-primary-navy);
}

.app-sidebar.sidebar--light .sidebar-item.active {
  background-color: rgba(0, 41, 80, 0.1);
  color: var(--color-primary-navy);
}

.app-sidebar.sidebar--light .sidebar-item.active .sidebar-item-icon {
  color: var(--color-primary-navy);
}

.app-sidebar.sidebar--light .sidebar-footer-demo {
  border-top-color: var(--color-border);
}

/* -------------------------------------------------------------------------- */
/* SIDEBAR FOOTER WITH THEME TOGGLE                                           */
/* -------------------------------------------------------------------------- */
/* SIDEBAR FOOTER SYSTEM: Canonical sidebar footer styles.
   Avoid duplicate selectors; scope by sidebar container if needed. */

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-12);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.app-sidebar.sidebar--light .sidebar-footer {
  border-top-color: var(--color-border);
}

.sidebar-footer .switch-label {
  color: rgba(255, 255, 255, 0.7);
}

.app-sidebar.sidebar--light .sidebar-footer .switch-label {
  color: var(--color-text-secondary);
}

.sidebar-footer-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm-size);
  transition: background-color 0.15s ease;
}

.sidebar-footer-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.app-sidebar.sidebar--light .sidebar-footer-toggle {
  color: var(--color-text-secondary);
}

.app-sidebar.sidebar--light .sidebar-footer-toggle:hover {
  background-color: rgba(0, 41, 80, 0.06);
  color: var(--color-primary-navy);
}

.phase3-header-demo {
  height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-16);
}

/* ============================================================================ */
/* PHASE 4: ADMIN PATTERNS (DATA + FLOWS)                                        */
/* ============================================================================ */

/* -------------------------------------------------------------------------- */
/* TABLES: CONTAINER & STRUCTURE                                               */
/* -------------------------------------------------------------------------- */

.table-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.table-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.table-search {
  width: 320px;
  min-width: 200px;
  max-width: 400px;
}

.table-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.table-filters-btn:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-text-primary);
}

.table-filters-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.table-checkbox-cell {
  width: 48px;
}

/* INPUT SIZE SYSTEM: .input-sm is the canonical compact input. 
   Avoid duplicate selectors; scope variants by container. */
.input-sm {
  height: 36px;
}

.select-auto {
  width: auto;
  padding: var(--space-6) var(--space-12);
}

.table-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.table-bulk-actions {
  display: none;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-action-selected);
  border-bottom: 1px solid var(--color-border);
}

.table-bulk-actions.visible {
  display: flex;
}

.table-cell-center {
  text-align: center;
}

.table-bulk-actions-count {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-navy);
}

.table-select-all-link {
  font-size: var(--text-small-size);
  color: var(--color-accent-blue);
  text-decoration: underline;
  cursor: pointer;
  margin-left: var(--space-8);
}

.table-select-all-link:hover {
  color: var(--color-primary-navy);
}

.table-wrapper {
  overflow-x: auto;
}

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

.table th,
.table td {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  border-bottom: 1px solid var(--color-border-muted);
}

.table th {
  background-color: var(--color-background);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: var(--text-micro-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr {
  transition: background-color 0.1s ease;
}

.table tbody tr:hover {
  background-color: var(--color-background);
}

.table tbody tr.selected {
  background-color: var(--table-row-selected-bg);
  border-left: 2px solid var(--table-row-selected-border);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Sortable Headers */
.table-header-sortable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  transition: color 0.15s ease;
}

.table-header-sortable:hover {
  color: var(--color-text-primary);
}

.table-header-sortable.active {
  color: var(--color-primary-navy);
}

.table-sort-icon {
  opacity: 0.4;
}

.table-header-sortable.active .table-sort-icon {
  opacity: 1;
}

/* Row Selection Checkbox */
.table-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.table-checkbox:hover {
  border-color: var(--color-accent-blue);
}

.table-checkbox.checked {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
  color: white;
}

.table-checkbox.checked::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}

.table-checkbox.indeterminate {
  background-color: var(--color-primary-navy);
  border-color: var(--color-primary-navy);
  color: white;
}

.table-checkbox.indeterminate::after {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

/* Table Compact (smaller padding for tight spaces) */
.table.table-compact th,
.table.table-compact td {
  padding: var(--space-8) var(--space-12);
}

.table.table-compact th {
  font-size: 11px;
}

/* Drawer Table Container (constrained height for drawers) */
.drawer-table-container {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.drawer-table-container .table-toolbar {
  border-bottom: 1px solid var(--color-border-muted);
  background-color: var(--color-surface);
}

.drawer-table-container .table-wrapper {
  max-height: 280px;
  overflow-y: auto;
}

.drawer-table-container .pagination {
  border-top: 1px solid var(--color-border-muted);
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-surface);
}

/* Row Actions */
.table-actions-cell {
  width: 48px;
  text-align: center;
}

.table-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.table-action-btn:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.table-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* Data Links (for clickable names in table cells) */
.data-link {
  color: var(--color-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.15s ease;
}

.data-link:hover {
  color: var(--color-primary-navy);
  text-decoration: underline;
}

.data-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  border-radius: 2px;
}

/* Action Menu Dropdown */
.dropdown-container {
  position: relative;
}

.table-action-menu {
  display: none;
  position: fixed;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  min-width: 160px;
  z-index: 1000;
  overflow: hidden;
}

.table-action-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.table-action-menu-item:hover {
  background-color: var(--color-background);
}

/* Destructive Actions
   Use .table-action-menu-item--danger for all destructive table actions.
   Do NOT use generic .destructive classes in tables.
   The --danger modifier follows BEM convention and is the canonical pattern.
*/
.table-action-menu-item--danger,
.table-action-menu-item.destructive {
  color: var(--color-danger-text);
}

.table-action-menu-item--danger:hover,
.table-action-menu-item.destructive:hover {
  background-color: var(--color-danger-bg);
}

/* Open state for action menus (toggled by JS) */
.table-action-menu.open,
.table-action-menu.ds-action-menu-open {
  display: block;
}

/* Position is calculated dynamically by JS for fixed menus */

/* Status Pills for Tables */
.status-active {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-disabled {
  background-color: var(--color-border-muted);
  color: var(--color-text-muted);
}

.status-archived {
  background-color: var(--color-border-muted);
  color: var(--color-text-muted);
}

/* Table Empty States */
.table-empty-state {
  padding: var(--space-48) var(--space-24);
  text-align: center;
}

.table-empty-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-16);
}

.table-empty-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.table-empty-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  max-width: 400px;
  margin: 0 auto var(--space-16);
}

/* Table Loading Skeleton */
.table-skeleton-row td {
  padding: var(--space-16);
}

.table-skeleton-cell {
  height: 16px;
  background-color: var(--color-border-muted);
  border-radius: var(--radius-xs);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.table-skeleton-cell.w-20 { width: 20%; }
.table-skeleton-cell.w-30 { width: 30%; }
.table-skeleton-cell.w-40 { width: 40%; }
.table-skeleton-cell.w-60 { width: 60%; }

/* -------------------------------------------------------------------------- */
/* TABLES: PAGINATION                                                          */
/* -------------------------------------------------------------------------- */

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  flex-wrap: wrap;
  gap: var(--space-12);
}

.table-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.table-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.table-per-page {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.table-per-page-label {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.table-per-page-select {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  background: var(--color-surface);
  cursor: pointer;
}

.table-per-page-select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.pagination-info {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pagination-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.pagination-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-btn.active {
  background-color: var(--color-primary-navy);
  color: var(--color-text-on-navy);
  border-color: var(--color-primary-navy);
}

.pagination-ellipsis {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* FILTER CHIPS                                                                */
/* -------------------------------------------------------------------------- */

.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-action-selected);
  border: 1px solid var(--color-accent-blue);
  border-radius: var(--radius-pill);
  font-size: var(--text-micro-size);
  color: var(--color-primary-navy);
}

.filter-chip-label {
  font-weight: var(--font-weight-medium);
}

.filter-chip-value {
  color: var(--color-text-primary);
}

.filter-chip-remove {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  margin-left: var(--space-4);
}

.filter-chip-remove:hover {
  background-color: var(--color-primary-navy);
  color: white;
}

.filter-clear-all {
  font-size: var(--text-micro-size);
  color: var(--color-link);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4);
  margin-left: var(--space-8);
}

.filter-clear-all:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* FILTER PANEL (DRAWER STYLE)                                                 */
/* -------------------------------------------------------------------------- */

.filter-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.filter-panel.open {
  transform: translateX(0);
}

.filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.filter-panel-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
}

.filter-panel-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
}

.filter-panel-close:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24);
}

.filter-panel-section {
  margin-bottom: var(--space-24);
}

.filter-panel-section-title {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-12);
}

.filter-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-top: 1px solid var(--color-border);
  gap: var(--space-12);
}

/* -------------------------------------------------------------------------- */
/* DRAWER (SLIDE-OVER PANEL)                                                   */
/* -------------------------------------------------------------------------- */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100%;
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-overlay);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-16) var(--space-24);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-16);
}

.drawer-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1;
  min-width: 0;
}

.drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.drawer-close:hover {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

.drawer-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-24);
}

.drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-16) var(--space-24);
  border-top: 1px solid var(--color-border);
  gap: var(--space-12);
}

/* Drawer View Mode */
.drawer-view-row {
  display: flex;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.drawer-view-row:last-child {
  border-bottom: none;
}

.drawer-view-label {
  width: 120px;
  flex-shrink: 0;
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
}

.drawer-view-value {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* MODAL                                                                       */
/* -------------------------------------------------------------------------- */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.is-open {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

/* When used as root container (not inside .modal), hide by default */
body > .modal-overlay,
.screen-wrapper > .modal-overlay,
.app-shell > .modal-overlay {
  display: none;
}

/* Show modal overlay when active (for root-level usage) */
.modal-overlay.active,
.modal-overlay.visible {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Overlay inside .modal is always visible (parent .modal controls visibility) */
.modal .modal-overlay {
  display: block;
}

.modal-dialog {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 400px;
  padding: var(--space-24);
  z-index: 1;
}

/* Modal width variant — used for email preview */
.modal-dialog--wide {
  max-width: 720px;
}

/* Title block on the left, close button on the right. Ported from the design
   system (styles.css); without the flex row the close button stacked below the
   title instead of sitting in the corner. */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}

/* Left region of the modal header — title and optional subtitle. */
.modal-header-left {
  flex: 1;
  min-width: 0;
}

.modal-title {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.modal-description {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.modal-body {
  font-size: var(--text-base-size);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

.modal-body-name {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-8);
}

.modal-body-warning {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

/* Progress bar underline */
.wizard-stepper-compact-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-border);
}

.wizard-stepper-compact-progress-fill {
  height: 100%;
  width: 50%; /* Default: Step 1 active = 50% (halfway) */
  background: var(--color-primary-navy);
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}

/* Connector line between steps - vertically centered with step circles (28px height) */
.wizard-stepper-compact-connector {
  width: 48px;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--space-4);
  align-self: flex-start;
  margin-top: 13px; /* Centers with 28px circle */
}

.wizard-stepper-compact-connector.completed {
  background: var(--color-success);
}

/* Ported verbatim from the Surveys & Forms delta handoff (styles.css:5680-5766).
   Without it the [data-*-only] attributes have no rule at all, so every
   template-only, edit-template-only and from-template-only element renders
   alongside the survey-only ones and ?mode=template shows both wizards at once. */
/* -------------------------------------------------------------------------- */
/* WIZARD MODES (template / edit-template / from-template)                    */
/* -------------------------------------------------------------------------- */

[data-template-only],
[data-template-create-only],
[data-edit-template-only],
[data-from-template-only],
[data-from-locked-template-only] {
  display: none;
}

.wizard-mode-template [data-survey-only],
.wizard-mode-edit-template [data-survey-only] {
  display: none;
}

.wizard-mode-template [data-template-only],
.wizard-mode-edit-template [data-template-only] {
  display: revert;
}

.wizard-mode-template [data-template-create-only] {
  display: revert;
}

.wizard-mode-edit-template [data-edit-template-only] {
  display: revert;
}

.wizard-mode-from-template [data-from-template-only] {
  display: revert;
}

.wizard-mode-from-locked-template [data-from-locked-template-only] {
  display: revert;
}

/* Locked survey mode: Step 1 — all form controls are visually read-only      */
.wizard-mode-from-locked-template [data-wizard-panel="1"] .tile-option {
  pointer-events: none;
}

.wizard-mode-from-locked-template [data-wizard-panel="1"] .tile-option:not(.selected) {
  opacity: 0.5;
}

.wizard-mode-from-locked-template [data-wizard-panel="1"] .input-base,
.wizard-mode-from-locked-template [data-wizard-panel="1"] .textarea-base {
  pointer-events: none;
  opacity: 0.65;
  cursor: default;
}

.wizard-mode-from-locked-template [data-wizard-panel="1"] .radio-wrapper {
  pointer-events: none;
  cursor: default;
}

/* Locked survey mode: Step 2 — hide add / reorder / remove affordances       */
.wizard-mode-from-locked-template [data-wizard-panel="2"] .accordion-row-grip,
.wizard-mode-from-locked-template [data-wizard-panel="2"] .accordion-row-actions,
.wizard-mode-from-locked-template [data-wizard-panel="2"] [data-testid="button-add-question"],
.wizard-mode-from-locked-template [data-wizard-panel="2"] [data-revealable] {
  display: none;
}

/* Locked survey mode: Step 2 — question edit forms are read-only when open   */
.wizard-mode-from-locked-template [data-wizard-panel="2"] .accordion-content .input-base,
.wizard-mode-from-locked-template [data-wizard-panel="2"] .accordion-content .textarea-base {
  pointer-events: none;
  opacity: 0.65;
  cursor: default;
}

.wizard-mode-from-locked-template [data-wizard-panel="2"] .accordion-content .switch-track {
  pointer-events: none;
  opacity: 0.65;
  cursor: default;
}

/* Locked survey mode: Steps 1 & 2 footers — hide Save Draft                 */
.wizard-mode-from-locked-template [data-wizard-footer-step="1"] [data-testid="button-save-1"],
.wizard-mode-from-locked-template [data-wizard-footer-step="2"] [data-testid="button-save-2"] {
  display: none;
}


/* ============================================================================ */
/* PHASE 5: ADVANCED PATTERNS (ROLES + NOTIFICATIONS + SETTINGS + CHARTS)       */
/* ============================================================================ */

/* -------------------------------------------------------------------------- */
/* DEMO: PHASE 5 LAYOUT HELPERS                                                */
/* -------------------------------------------------------------------------- */

.phase5-demo-shell {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-32);
}

.phase5-example-screen {
  min-height: 600px;
  display: flex;
}


/* ============================================================================ */
/* NORMALIZATION LAYER: SEMANTIC HELPERS                                         */
/* ============================================================================ */
/* Minimal semantic classes for design system reference files.
   Organized into: Page Structure, Spacing, Layout, Demo Helpers, Component States */

/* -------------------------------------------------------------------------- */
/* A. PAGE STRUCTURE                                                           */
/* Classes for design system documentation pages only                          */
/* -------------------------------------------------------------------------- */

.ds-page-header {
  margin-bottom: var(--space-48);
}

.ds-page-header h1 {
  margin-bottom: var(--space-8);
}

.ds-page-header h2 {
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.ds-nav-links {
  margin-top: var(--space-8);
}

.ds-nav-separator {
  color: var(--color-text-muted);
  margin: 0 8px;
}

.ds-nav-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.ds-phase-header {
  margin-bottom: var(--space-48);
}

.ds-phase-header h2 {
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.ds-label-block {
  margin-bottom: var(--space-16);
  display: block;
}

.ds-label-sm {
  margin-bottom: var(--space-12);
}

.ds-label-section {
  margin: var(--space-32) 0 var(--space-12);
}

/* -------------------------------------------------------------------------- */
/* B. SEMANTIC SPACING                                                         */
/* ds-block: standard vertical rhythm between content blocks                   */
/* ds-stack: parent container that spaces children vertically                  */
/* ds-cluster: horizontal grouping with wrapping                               */
/* -------------------------------------------------------------------------- */

/* Block spacing (margin-bottom) - use on individual elements */
.ds-block {
  margin-bottom: var(--space-24);
}

.ds-block--sm {
  margin-bottom: var(--space-16);
}

.ds-block--lg {
  margin-bottom: var(--space-32);
}

/* Stack: vertical gap between children */
.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ds-stack--sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ds-stack--lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Cluster: horizontal grouping */
.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: center;
}

.ds-cluster--top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: flex-start;
}

.ds-cluster--sm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

/* -------------------------------------------------------------------------- */
/* C. LAYOUT GRIDS                                                             */
/* Reusable grid patterns for design system demos                              */
/* -------------------------------------------------------------------------- */

.ds-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.ds-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.ds-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.ds-grid-main-aside {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-24);
}

.ds-grid-panel {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* E. CHART FRAME                                                              */
/* Container heights for chart demos. Bar heights use inline --h variable.     */
/* -------------------------------------------------------------------------- */

.chart-frame {
  height: 200px;
}

.chart-frame--sm {
  height: 120px;
}

.chart-frame--md {
  height: 160px;
}

/* Chart bar with variable height: use style="--h: 70%" */
.chart-bar {
  height: var(--h, 50%);
}

/* Button demo mock states */
.btn-hover-mock {
  background-color: var(--color-action-hover);
}

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer;
}

/* Form demo container */
.form-demo-container {
  max-width: 400px;
}

/* Tab demo mock states */
.tab-default-demo {
  border-bottom: 2px solid transparent;
}

.tab-hover-demo {
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/* Sidebar item hover demo */
.sidebar-item-hover-demo {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* HEADER SEARCH SYSTEM: .header-search-sm/md/lg are the canonical header search widths.
   Avoid duplicate selectors; scope overrides by container. */
.header-search-sm {
  width: 180px;
}

.header-search-md {
  width: 200px;
}

.header-search-lg {
  width: 220px;
}

.header-search-xl {
  width: 240px;
}

.textarea-md {
  min-height: 80px;
}

.textarea-compact {
  min-height: 80px;
}

/* Form input states */
.input-success {
  border-color: var(--color-success);
}

.input-with-trailing {
  padding-right: 40px;
}

/* Select demo states */
.select-hover-demo {
  border-color: var(--color-text-muted);
}

.select-active-demo {
  background-color: var(--color-background);
}

.select-focused-demo {
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.select-option-hover {
  background-color: var(--color-background);
}

/* Preview text styles */
.ds-preview-text {
  margin: 0;
  margin-top: 4px;
}

/* Button with active filter */
.btn-filter-active {
  background: var(--color-action-selected);
  border-color: var(--color-accent-blue);
}

/* Badge variants */
.badge-count {
  margin-left: 4px;
  padding: 0 6px;
  height: 18px;
  font-size: 10px;
}

.badge-small {
  height: 18px;
  font-size: 10px;
}

.badge-mini {
  height: 16px;
  font-size: 9px;
}

/* Table action active */
.table-action-btn-active {
  background: var(--color-background);
}

/* Button justify start */
.btn-justify-start {
  justify-content: flex-start;
}

/* Checkbox icon color */
.checkbox-icon-white {
  color: white;
}

/* Icon fill current color */
.icon-fill {
  fill: currentColor;
}

/* Margin left auto utility */
.ds-ml-auto {
  margin-left: auto;
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL STATE LABEL VARIANTS                                             */
/* -------------------------------------------------------------------------- */

.ds-state-label-block {
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-8);
}

.ds-state-label-block-lg {
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-12);
}

.ds-state-label-inline {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL FLEX COLUMN VARIANTS                                             */
/* -------------------------------------------------------------------------- */

.ds-flex-col-sm {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ds-flex-col-lg {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL GRID VARIANTS                                                    */
/* -------------------------------------------------------------------------- */

.ds-grid-2-gap-lg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-32);
}

.ds-grid-span-full {
  grid-column: 1 / -1;
}

.ds-grid-3-sm {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

/* ============================================================================
   SCREEN LAYOUT CLASSES
   Used by actual application screens (member/, program-admin/, screens/admin/)
   ============================================================================ */

/* Screen wrapper - flex container for sidebar layout */
.screen-wrapper {
  display: flex;
  min-height: 100vh;
  border-radius: 0;
}

/* Sidebar in screen context - sticky so it stays visible while body scrolls */
.screen-sidebar {
  flex-shrink: 0;
  border-radius: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow-y: auto;
}

/* Main content column */
.screen-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Content area - no overflow, body scrolls naturally */
.screen-content {
  flex: 1;
  padding: var(--space-24);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Opt-in page loading overlay - add data-loading to .screen-content in HTML */
.screen-content[data-loading]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-background, #f8f9fa);
  z-index: 100;
}

.screen-content[data-loading]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border, #e5e7eb);
  border-top-color: var(--color-primary, #6366f1);
  border-radius: 50%;
  animation: page-loading-spin 0.75s linear infinite;
  z-index: 101;
}

@keyframes page-loading-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Content wrapper inside screen-content for proper sticky footer behavior */
.screen-content > *:not(.page-footer) {
  flex-shrink: 0;
}

/* Header without border-radius for screens */
.screen-header {
  border-radius: 0;
}

/* Grid layouts for screens */
.screen-grid-panel {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-24);
}

.screen-grid-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-24);
}

/* Card variants for screens */
.card-content {
  padding: var(--space-20);
}

.card-media {
  padding: 0;
  overflow: hidden;
  position: relative;
}

.card-media-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background-color: #FFFFFF;
}

.card-media-badge {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
}

.card-media--placeholder {
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.card-media-body {
  padding: var(--space-16);
}

/* Feature image in cards */
.card-feature-img {
  width: 180px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: #FFFFFF;
}

/* Card meta info row */
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-16);
}

.card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Card horizontal layout */
.card-horizontal {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-horizontal-body {
  flex: 1;
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
}

/* Progress bar wrapper in cards */
.card-progress {
  margin-top: auto;
}

/* Full-width button */
.btn-full {
  width: 100%;
}

/* Section with title */
.screen-section-title {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.screen-section-title-sm {
  font-size: var(--text-base-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

/* ==========================================================================
   PAGE HEADER TYPOGRAPHY
   Page titles are 24px (h2-size). Card titles are 20px - never use card-title
   for page headers. Use .page-title only on screen-level H1 elements.
   ========================================================================== */

.page-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.page-title {
  font-size: var(--text-h2-size); /* 24px - larger than card-title (20px) */
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin: 0 0 var(--space-4) 0;
}

.page-subtitle {
  font-size: 14px; /* Same as card-subtitle but separate class for pages */
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

.card-description {
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-12) 0;
  line-height: 1.4;
}

/* Assigned by line */
.card-assigned {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Progress text */
.progress-text {
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
}

/* Utility: margin-bottom spacers */
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }

/* Badge alignment */
.badge-self-start {
  align-self: flex-start;
}

/* Chevron muted (for header dropdowns) */
.chevron-muted {
  color: var(--color-text-muted);
}

/* Welcome banner full width */
.welcome-banner-full {
  width: 100%;
}

/* Grid for recommended cards */
.screen-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

/* Sidebar widget section */
.sidebar-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Sidebar theme toggle control */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.theme-toggle-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.theme-toggle-btn i {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------- */
/* DASHBOARD UTILITY CLASSES                                                  */
/* -------------------------------------------------------------------------- */

/* Additional margin utilities */
.mb-12 { margin-bottom: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

/* Icon accent colors */
.icon-accent-blue {
  color: var(--color-accent-blue);
}

.icon-accent-teal {
  color: var(--color-accent-teal);
}

/* Card meta items */
.card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Progress container */
.card-progress-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Progress fill variant */
.card-progress-fill--teal {
  background: var(--color-accent-teal);
}

/* -------------------------------------------------------------------------- */
/* CARD WIDGET (Sidebar Cards)                                                */
/* -------------------------------------------------------------------------- */

.card-widget {
  padding: var(--space-16);
  gap: var(--space-12);
}

.card-widget-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.card-widget-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-widget-icon--teal {
  background: var(--color-accent-teal-bg, #E6F7F5);
  color: var(--color-accent-teal);
}

.card-widget-icon--purple {
  background: var(--color-accent-purple-bg, #F3E8FF);
  color: var(--color-accent-purple, #9333EA);
}

.card-widget-title {
  font-size: var(--text-base-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
}

.card-widget-text {
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
  margin: 0;
}

.card-widget-footnote {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin: var(--space-8) 0 0 0;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* EVENT LIST (Sidebar Compact Events)                                        */
/* -------------------------------------------------------------------------- */

.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.event-list-item {
  display: flex;
  gap: var(--space-12);
}

.event-list-item--border {
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.event-date-box {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.event-date-day {
  font-size: var(--text-xs-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1;
}

.event-date-month {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.event-list-title {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.event-list-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin: 0;
}

/* Screen section title small variant */
.screen-section-title-sm {
  font-size: var(--text-base-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* BODY RESET (for screen pages)                                               */
/* -------------------------------------------------------------------------- */

.body-reset {
  margin: 0;
  padding: 0;
  background: var(--color-background);
}

/* -------------------------------------------------------------------------- */
/* CARD WIDGET EXTENSIONS                                                      */
/* -------------------------------------------------------------------------- */

.card-widget-value {
  font-size: var(--text-3xl-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.card-widget-label {
  font-size: var(--text-sm-size);
  color: var(--color-text-secondary);
}

.card-widget-icon--blue {
  background: var(--color-action-selected);
  color: var(--color-accent-blue);
}

.card-widget-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.card-widget-icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* -------------------------------------------------------------------------- */
/* BAR CHART EXTENSIONS                                                        */
/* -------------------------------------------------------------------------- */

.bar-chart-bar--success-bg {
  background: var(--color-success-bg);
}

.bar-chart-bar--info-bg {
  background: var(--color-info-bg);
}

.bar-chart-bar--danger-bg {
  background: var(--color-danger-bg);
}

.bar-chart-fill--info {
  background: var(--color-accent-blue);
}

/* -------------------------------------------------------------------------- */
/* ATTENTION ROWS (Needs Attention Section)                                    */
/* -------------------------------------------------------------------------- */

.attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) 0;
}

.attention-row--border {
  border-bottom: 1px solid var(--color-border-muted);
}

.attention-info {
  flex: 1;
}

.attention-link {
  font-size: var(--text-sm-size);
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.attention-link:hover {
  text-decoration: underline;
}

.attention-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------- */
/* SIGNAL ROWS (Growth & Trust Signals Section)                                */
/* -------------------------------------------------------------------------- */

.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) 0;
}

.signal-row--border {
  border-bottom: 1px solid var(--color-border-muted);
}

.signal-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.signal-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.signal-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.signal-icon--muted {
  background: var(--color-border-muted);
  color: var(--color-text-muted);
}

.signal-label {
  font-size: var(--text-sm-size);
  color: var(--color-text-primary);
}

.signal-value {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* CIRCLE ROWS (New Support Circles Section)                                   */
/* -------------------------------------------------------------------------- */

.circle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  background: var(--color-border-muted);
  border-radius: var(--radius-sm);
}

.circle-info {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.circle-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-avatar--teal {
  background: var(--color-accent-teal);
  color: var(--color-primary-navy);
}

.circle-details {
  display: flex;
  flex-direction: column;
}

.circle-name {
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.circle-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* ENTITY LIST ROWS (Builder Screens)                                          */
/* -------------------------------------------------------------------------- */

.entity-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Scrollable selection panel list — constrained height for inline panels */
.selection-panel-list {
  max-height: 240px;
  overflow-y: auto;
}

.entity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border-muted);
  transition: background-color 0.1s ease;
}

.entity-row:last-child {
  border-bottom: none;
}

.entity-row:hover {
  background-color: var(--color-background);
}

.entity-row-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--color-border-muted);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lesson drag grip — plain icon wrapper, no background or tint */
.lesson-drag-grip {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  cursor: grab;
}

.lesson-drag-grip:active {
  cursor: grabbing;
}

/* Lesson type icon (tinted) — colorizes entity-row-icon based on content type */
/* Lesson type icon sizing - larger container for content type icons */
[class*="lesson-type-icon--"] {
  width: 40px;
  height: 40px;
}

.lesson-type-icon--text {
  background-color: var(--color-info-text);
  color: var(--color-info-bg);
}

.lesson-type-icon--video {
  background-color: var(--color-success-text);
  color: var(--color-success-bg);
}

.lesson-type-icon--audio {
  background-color: var(--color-accent-purple);
  color: var(--color-white);
}

.lesson-type-icon--pdf {
  background-color: var(--color-error-text);
  color: var(--color-error-bg);
}

.lesson-type-icon--presentation {
  background-color: var(--color-accent-orange);
  color: var(--color-white);
}

.lesson-type-icon--survey {
  background-color: var(--color-warning-text);
  color: var(--color-warning-bg);
}

.lesson-type-icon--resource {
  background-color: var(--color-text-secondary);
  color: var(--color-border-muted);
}

.lesson-type-icon--event {
  background-color: var(--color-primary-navy);
  color: var(--color-primary-bg);
}

/* -------------------------------------------------------------------------- */
/* SELECTABLE TILES (4-up grid)                                               */
/* -------------------------------------------------------------------------- */
/* Usage: Tile-based selection for lesson types, content types, etc.          */
/* Container: .tile-selector                                                  */
/* Tile: .tile-option with data-tile-value for selection state                */

.tile-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-12);
}

@media (max-width: 480px) {
  .tile-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact variant for drawer contexts (3-column layout) */
.tile-selector--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Authoring variant for editor screens (5/3/2 responsive columns, compact tiles) */
.tile-selector--authoring {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 2-column variant for location/schedule tiles */
.tile-selector--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile-selector--2col .tile-option {
  padding: var(--space-16);
  min-height: auto;
  gap: var(--space-8);
  flex: 1;
}

/* 3-column variant for location tiles with hybrid option */
.tile-selector--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tile-selector--3col .tile-option {
  padding: var(--space-12);
  min-height: auto;
  gap: var(--space-6);
  flex: 1;
}

@media (max-width: 640px) {
  .tile-selector--3col {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* 4-column variant for resource editor format selector */
.tile-selector--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
  .tile-selector--4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile-selector--4col .tile-option {
  padding: var(--space-16);
  min-height: 100px;
  gap: var(--space-8);
}

.tile-selector--4col .tile-option-icon {
  width: 36px;
  height: 36px;
}

@media (max-width: 1024px) {
  .tile-selector--authoring {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .tile-selector--authoring {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile-selector--authoring .tile-option {
  padding: var(--space-12);
  min-height: 88px;
  gap: var(--space-4);
}

.tile-selector--authoring .tile-option-icon {
  width: 32px;
  height: 32px;
}

.tile-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16);
  min-height: 112px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tile-option:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-background);
}

.tile-option[aria-selected="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.tile-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
}

.tile-option-icon--plain {
  background: transparent;
  color: var(--color-text-primary);
}

.tile-option-label {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.entity-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.entity-row-title {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.entity-row-title:hover {
  color: var(--color-primary-navy);
  text-decoration: underline;
}

.entity-row-meta {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}

/* Lesson rows: keep title at top regardless of whether description exists */
.lesson-row {
  align-items: flex-start;
}

.entity-row-badge {
  flex-shrink: 0;
}

.entity-row-actions {
  flex-shrink: 0;
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* ADD ROW: Dotted full-width action row for builder interfaces               */
/* -------------------------------------------------------------------------- */

.add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  color: var(--color-text-secondary);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  gap: var(--space-8);
}

.add-row:hover {
  background-color: var(--color-border-muted);
  border-color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* SCREEN BODY & UTILITY CLASSES                                               */
/* -------------------------------------------------------------------------- */

.screen-body {
  margin: 0;
  background: var(--color-background);
}

.screen-header {
  border-radius: 0;
}

/* Card widget extensions */
.card-widget-meta {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.card-widget-value-sm {
  font-size: var(--text-lg-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.card-widget-icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Avatar utilities */
.avatar-xl {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  text-align: center;
}

.avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm-size);
  font-weight: var(--font-weight-medium);
  color: white;
}

.avatar-sm--blue {
  background: var(--color-accent-blue);
}

.avatar-sm--success {
  background: var(--color-success);
}

.avatar-sm--muted {
  background: var(--color-text-muted);
}

/* Avatar component - circular container for user photos or initials
 * Usage: <img class="avatar avatar--sm" src="..."> or 
 *        <div class="avatar avatar--sm avatar--initials avatar--teal">AB</div>
 */
.avatar {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  object-fit: cover;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.avatar--initials {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Avatar color modifiers using existing design tokens */
.avatar--teal {
  background: var(--color-accent-teal);
  color: var(--color-primary-navy);
}

.avatar--blue {
  background: var(--color-accent-blue);
  color: var(--color-primary-navy);
}

.avatar--purple {
  background: var(--color-accent-purple);
  color: white;
}

.avatar--orange {
  background: var(--color-accent-orange);
  color: var(--color-primary-navy);
}

.avatar--green {
  background: var(--color-success);
  color: white;
}

.avatar--navy {
  background: var(--color-primary-navy);
  color: white;
}

/* Table thumbnail - small square container for table row thumbnails */
.ds-thumb-square-sm {
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.ds-thumb-square-sm img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px);
}

/* Table thumbnail - medium square container for table row thumbnails */
.ds-thumb-square-md {
  width: var(--space-48);
  height: var(--space-48);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.ds-thumb-square-md img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px);
}

/* Table thumbnail placeholder SVG sizing - ensures consistent icon rendering */
.ds-thumb-square-sm svg {
  width: var(--space-16);
  height: var(--space-16);
}

.ds-thumb-square-md svg {
  width: var(--space-24);
  height: var(--space-24);
}

/* Icon-based thumbnail modifier - centers icon with subtle background */
.ds-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-bg);
  color: var(--color-primary-navy);
}

/* Activity list styling */
.activity-list {
  padding: 0;
}

/* Participant row styling */
.participant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.participant-row--highlight {
  background: var(--color-action-selected);
}

/* Form field display (read-only fields) */
.form-field-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.form-field-label {
  font-size: var(--text-xs-size);
  color: var(--color-text-muted);
}

.form-field-value {
  font-size: var(--text-sm-size);
  color: var(--color-text-primary);
  padding: var(--space-12);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

/* Tab content visibility */
.tab-content--hidden {
  display: none;
}

/* Card section divider */
.card-section-divider {
  padding-bottom: var(--space-20);
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-muted);
}

/* Text utilities */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.text-nowrap {
  white-space: nowrap;
}

/* Badge variant */
.badge-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

/* -------------------------------------------------------------------------- */
/* SCREEN CLEANUP SEMANTIC CLASSES                                            */
/* -------------------------------------------------------------------------- */

/* KPI Value Variants */
.kpi-value--warning {
  color: var(--color-warning);
}

.kpi-value--danger {
  color: var(--color-danger);
}

/* ALERT ICON SYSTEM: Canonical alert-icon styles. Do not duplicate selectors.
   Use modifiers .alert-icon--warning/.alert-icon--danger/.alert-icon--info/.alert-icon--success for color variants. */
.alert-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-icon--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.alert-icon--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.alert-icon--info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.alert-icon--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* CARD HEADER ROW SYSTEM: Canonical header-row styles.
   Avoid duplicate selectors; scope by container if needed. */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.card-header-row--last {
  border-bottom: none;
}

/* Badge Fixed Width Variant */
.badge--fixed {
  min-width: 64px;
  justify-content: center;
}

/* Table Column Width Classes */
.table-col-checkbox {
  width: 48px;
}

.table-col-actions {
  width: 48px;
}

/* Modal Size Variants */
.modal--sm {
  max-width: 480px;
}

.modal--lg {
  max-width: 720px;
}

.alert--danger {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
}

.alert--danger .card-title-sm {
  color: var(--color-danger-text);
}

.alert--danger .card-description {
  color: var(--color-danger-text);
  margin-top: var(--space-8);
}

.alert--warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.alert--info {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info);
}

.alert--success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
}

/* Screen Grid Panel (for stat boxes within cards) */
.screen-grid-panel {
  padding: var(--space-16);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

/* Modal overlay is always visible when modal is open (controlled by .modal.is-open) */

/* Sidebar theme toggle in header */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sidebar-theme-toggle:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}


/* ============================================================================
   KPI SYSTEM A: KPI CARDS (admin list screens)
   - Uses .kpi-card-label, .kpi-card-value, .kpi-card-subtext
   - Informational metrics display (not clickable)
   - Three variants: Summary, Delta, Distribution
   - For dashboard/legacy screens, use KPI SYSTEM B (.kpi-label, .kpi-value)
   ============================================================================ */

/* Base KPI Card (admin screens - extends legacy .kpi-card with flex layout) */
.kpi-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.kpi-card-label {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.kpi-card-value {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.kpi-card-subtext {
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

/* KPI Summary Variant (.kpi-card--summary) */
/* Used for: Total members, Total support circles, Total referrals, Total reviews */
.kpi-card--summary .kpi-card-value {
  margin-top: var(--space-4);
}

/* KPI Card List (for ranked items like top categories) */
.kpi-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.kpi-card-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

/* KPI Delta Variant (.kpi-card--delta) */
/* Used for: New members, Active members change, Engagement change */
.kpi-card--delta .kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-xs);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-8);
}

.kpi-delta--up {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.kpi-delta--down {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.kpi-delta--neutral {
  background: var(--color-background);
  color: var(--color-text-muted);
}

.kpi-delta-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* KPI Distribution Variant (.kpi-card--distribution) */
/* Used for: Support circles by stage, Engagement breakdown */
.kpi-card--distribution .kpi-dist-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-12);
  background: var(--color-background);
}

.kpi-dist-seg {
  height: 100%;
  min-width: 0;
  /* Width is set via JS based on data-value attribute */
}

/* Distribution segment color variants */
.kpi-dist-seg--risk {
  background: var(--color-danger);
}

.kpi-dist-seg--low {
  background: var(--color-warning);
}

.kpi-dist-seg--active {
  background: var(--color-success);
}

.kpi-dist-seg--new {
  background: var(--color-info);
}

/* Distribution legend */
.kpi-dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.kpi-dist-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-micro-size);
  line-height: var(--text-micro-line-height);
  color: var(--color-text-secondary);
}

.kpi-dist-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.kpi-dist-legend-color--risk {
  background: var(--color-danger);
}

.kpi-dist-legend-color--low {
  background: var(--color-warning);
}

.kpi-dist-legend-color--active {
  background: var(--color-success);
}

.kpi-dist-legend-color--new {
  background: var(--color-info);
}

.kpi-dist-legend-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* -------------------------------------------------------------------------- */
/* PROGRAM DETAIL: Logo tile and status rows                                  */
/* -------------------------------------------------------------------------- */

/* Program logo tile (240×80 max dimensions, matches recommended upload size 3:1 ratio) */
.program-logo-tile {
  max-width: 240px;
  max-height: 80px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  object-fit: contain;
  background: var(--color-background);
  flex-shrink: 0;
  padding: var(--space-12);
}

/* Large logo preview container (240×240) */
.program-logo-tile-lg {
  width: 240px;
  height: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  object-fit: contain;
  background: var(--color-background);
  padding: var(--space-16);
}

.logo-upload-preview {
  display: flex;
  justify-content: center;
}

.thumbnail-preview-square {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  overflow: hidden;
}

.thumbnail-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
}

/* Status row: 2-column layout with space-between */
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.status-row:last-child {
  border-bottom: none;
}

.status-row .badge {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* PAGE FOOTER ACTIONS                                                        */
/* -------------------------------------------------------------------------- */

.page-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  background: transparent;
  border-top: 1px solid var(--color-border);
  z-index: 50;
  flex-shrink: 0;
}

.page-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  max-width: 100%;
}

.page-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.page-footer-note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-muted);
}

.page-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: auto;
}

/* Sticky footer variant - fixed to viewport bottom for save/cancel screens */
.page-footer--sticky {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background-color: var(--color-surface);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Demo-only: inline footer for documentation examples */
.page-footer--demo {
  position: relative;
}

/* Page content padding helper to prevent content from hiding behind fixed footer */
[data-sticky-footer-offset] {
  padding-bottom: var(--space-64);
}

/* -------------------------------------------------------------------------- */
/* WIZARD FOOTER                                                               */
/* -------------------------------------------------------------------------- */

.wizard-footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.wizard-footer-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
}

.wizard-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.wizard-footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-left: auto;
}

/* -------------------------------------------------------------------------- */
/* COLLAPSIBLE PANEL STATE                                                     */
/* -------------------------------------------------------------------------- */

.is-collapsed {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* SECTION HEADER (Builder Patterns)                                           */
/* -------------------------------------------------------------------------- */

.section-header {
  padding-bottom: var(--space-8);
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* ADD-ROW ICON CIRCLE                                                         */
/* -------------------------------------------------------------------------- */

.add-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-info-text);
  color: var(--color-info-bg);
  margin-right: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* LESSON ROW CONTAINER (Builder Pattern)                                      */
/* -------------------------------------------------------------------------- */

.lesson-row {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
}

.entity-row--card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  border-bottom: none;
}

[data-nav-sublist="true"] {
  padding-left: var(--space-24);
}

/* SortableJS drag and drop styles */
.sortable-ghost {
  opacity: 0.4;
  background: var(--color-info-bg);
}

.sortable-chosen {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sortable-drag {
  opacity: 1;
  background: var(--color-bg);
}

/* Section ghost styling */
[data-section-id].sortable-ghost {
  border: 2px dashed var(--color-primary);
  background: var(--color-info-bg);
}

/* Module/lesson ghost styling */
[data-module-id].sortable-ghost {
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-sm);
}

.section-drag-grip {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
  cursor: grab;
}

.section-drag-grip:hover {
  color: var(--color-text-secondary);
}

.section-drag-grip:active {
  cursor: grabbing;
}

/* -------------------------------------------------------------------------- */
/* LEARNING PATH BUILDER SCOPED RULES                                          */
/* -------------------------------------------------------------------------- */

[data-screen="learning-path-builder"] .entity-list,
[data-screen="application-builder"] .entity-list {
  background: transparent;
  border: none;
  overflow: visible;
}

[data-screen="learning-path-builder"] .lesson-row,
[data-screen="application-builder"] .lesson-row {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-8);
}

[data-screen="learning-path-builder"] .lesson-row:last-child,
[data-screen="application-builder"] .lesson-row:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* SECTION NUMBER BADGE                                                        */
/* -------------------------------------------------------------------------- */

.section-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-border-muted);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body-size);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* UPLOADER COMPONENT                                                          */
/* -------------------------------------------------------------------------- */

.uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  text-align: center;
  min-height: 120px;
  margin-bottom: var(--space-8);
}

.uploader-thumbnail {
  aspect-ratio: 4 / 3;
  max-width: 100%;
  background-color: #FFFFFF;
  padding: var(--space-24);
}

.uploader--header.uploader-thumbnail {
  aspect-ratio: 4 / 1;
}

.uploader-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.uploader-icon {
  color: var(--color-text-muted);
}

.uploader-actions {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  justify-content: center;
}

.uploader-uploaded {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  justify-content: center;
}

.uploader-file-icon {
  color: var(--color-accent-blue);
}

.uploader-filename {
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.uploader-preview {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  isolation: isolate; /* Create stacking context for z-index to work */
}

.uploader-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
}

/* Logo uploader: use contain instead of cover to preserve aspect ratio */
.uploader-thumbnail--logo .uploader-preview-img {
  object-fit: contain;
  padding: var(--space-12);
}

/* Hover overlay for thumbnail actions */
.uploader-hover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10; /* Ensure overlay is above placeholder */
  pointer-events: none; /* Allow clicks to pass through when hidden */
}

.uploader-preview:hover .uploader-hover-overlay {
  opacity: 1 !important;
  pointer-events: auto !important; /* Enable clicks when visible */
}

.uploader-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  transition: transform 0.15s ease, background 0.15s ease;
}

.uploader-icon-btn:hover {
  transform: scale(1.1);
  background: var(--color-surface);
}

.uploader-icon-btn--danger:hover {
  background: var(--color-danger-light, #fee2e2);
  color: var(--color-danger, #dc2626);
}

/* Legacy: Show "Use Default" button only when thumbnail is custom */
.uploader-preview-actions {
  display: flex;
  gap: var(--space-8);
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
}

/* Hide remove/trash button when no custom thumbnail */
.uploader[data-thumbnail-mode="default"] [data-use-default],
.uploader[data-thumbnail-mode="default"] [data-action="remove"] {
  display: none !important;
}

.uploader[data-thumbnail-mode="custom"] [data-use-default] {
  display: inline-flex !important;
}

.uploader-replace-btn {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
}

.uploader:not(.uploader-empty) {
  border-style: solid;
  padding: 0;
  overflow: hidden;
}

.uploader:not(.uploader-empty) .uploader-placeholder {
  display: none;
}

.uploader.uploader-empty .uploader-uploaded,
.uploader.uploader-empty .uploader-preview {
  display: none;
}

/* Media uploader variant (video/audio/file) - gray background, more padding */
.uploader--media {
  background-color: var(--color-background);
  padding: var(--space-32) var(--space-24);
  min-height: 140px;
}

.uploader--media:not(.uploader-empty) {
  padding: var(--space-24);
}

/* Video uploader with persistent header and expandable link section */
.uploader--video {
  min-height: 160px;
  padding: var(--space-32) var(--space-24);
}

.uploader-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.uploader-link-section {
  display: none;
  width: 100%;
  max-width: 360px;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-subtle);
}

.uploader[data-link-mode="true"] .uploader-link-section {
  display: block;
}

.uploader-link-input {
  width: 100%;
  margin-bottom: var(--space-8);
}

/* Toggle button active state */
.uploader[data-link-mode="true"] [data-video-link-toggle] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Legacy link state - hidden (replaced by new pattern) */
.uploader-link-state {
  display: none;
}

.uploader-link-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/* MULTISELECT COMPONENT                                                       */
/* -------------------------------------------------------------------------- */

.multiselect {
  position: relative;
}

.multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background-color: var(--color-surface);
}

.multiselect-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.multiselect-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.multiselect-value.has-selection {
  color: var(--color-text-primary);
}

.multiselect-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.multiselect.is-open .multiselect-icon {
  transform: rotate(180deg);
}

.multiselect-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.multiselect-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.multiselect-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.multiselect-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  outline: none;
}

.multiselect-search-input::placeholder {
  color: var(--color-text-muted);
}

.multiselect-options {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-4) 0;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
}

.multiselect-option:hover {
  background-color: var(--color-surface-hover);
}

.multiselect-option input[type="checkbox"] {
  flex-shrink: 0;
}

.multiselect-option.hidden {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* CREATABLE SELECT COMPONENT                                                  */
/* -------------------------------------------------------------------------- */

.creatable-select {
  position: relative;
}

.creatable-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  text-align: left;
  background-color: var(--color-surface);
}

.creatable-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.creatable-select-value.has-selection {
  color: var(--color-text-primary);
}

.creatable-select-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.creatable-select.is-open .creatable-select-icon {
  transform: rotate(180deg);
}

.creatable-select-dropdown {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

.creatable-select-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.creatable-select-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.creatable-select-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  outline: none;
}

.creatable-select-search-input::placeholder {
  color: var(--color-text-muted);
}

.creatable-select-options {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-4) 0;
}

.creatable-select-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-8) var(--space-12);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  background: none;
  border: none;
}

.creatable-select-option:hover {
  background-color: var(--color-surface-hover);
}

.creatable-select-option.selected {
  background-color: var(--color-accent-blue-subtle);
  color: var(--color-accent-blue);
}

.creatable-select-option.hidden {
  display: none;
}

.creatable-select-option--disabled,
.creatable-select-option[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--color-surface-subtle);
}

.creatable-select-option--disabled:hover,
.creatable-select-option[disabled]:hover {
  background-color: var(--color-surface-subtle);
}

.creatable-select-create {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  text-align: left;
  padding: var(--space-8) var(--space-12);
  cursor: pointer;
  font-size: var(--text-small-size);
  color: var(--color-accent-blue);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
}

.creatable-select-create:hover {
  background-color: var(--color-surface-hover);
}

/* ============================================================
   SCHEDULE CONTROL
   A reusable date/time/timezone picker component
   ============================================================ */

.schedule-control {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.schedule-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

.schedule-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: var(--space-8) var(--space-12);
  /* Match .input-base/.select-base white, not --color-input-background (grey):
     these triggers sit beside real inputs and grey reads as disabled.
     Deliberate divergence from the handoff, which declares
     --color-input-background here but never defines that custom property, so the
     declaration is invalid-at-computed-value-time and the handoff renders white
     too. `node scripts/audit-handoff-css.mjs --selector schedule-trigger` will
     report this one value difference; it is expected. */
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Scoped padding for trailing icon - schedule-trigger uses flexbox, not input-base */
.schedule-control .input-with-icon.trailing .schedule-trigger {
  padding-right: 40px;
}

.schedule-trigger:hover {
  border-color: var(--color-border-hover);
}

.schedule-trigger:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.schedule-trigger[aria-expanded="true"] {
  border-color: var(--color-border-focus);
}

.schedule-trigger.error {
  border-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

.schedule-value {
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
}

.schedule-value.text-muted {
  color: var(--color-text-muted);
}

/* Popover */
.schedule-popover {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 200;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.schedule-popover[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Calendar popover header */
.schedule-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.schedule-month {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Day of week labels */
.schedule-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  padding: var(--space-8) var(--space-12) var(--space-4);
}

.schedule-dow span {
  text-align: center;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* Calendar grid */
.schedule-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  padding: var(--space-4) var(--space-12) var(--space-12);
}

.schedule-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-small-size);
  color: var(--color-text-primary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.schedule-day:hover {
  background-color: var(--color-background);
}

.schedule-day:focus-visible {
  outline: none;
  background-color: var(--color-background);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.schedule-day.is-today {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-blue);
}

.schedule-day.is-selected {
  background-color: var(--color-accent-blue);
  color: var(--color-text-on-primary);
}

.schedule-day.is-selected:hover {
  background-color: var(--color-accent-blue-hover);
}

.schedule-day.is-other-month {
  color: var(--color-text-muted);
}

.schedule-day.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.schedule-day.is-disabled:hover {
  background: none;
}

/* Calendar footer */
.schedule-popover-footer {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-12);
  border-top: 1px solid var(--color-border);
}

/* Time list popover */
.schedule-time-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.schedule-time-option {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.schedule-time-option:hover {
  background-color: var(--color-background);
  cursor: pointer;
}

.schedule-time-option:focus-visible {
  outline: none;
  background-color: var(--color-background);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.schedule-time-option.is-selected {
  background-color: var(--color-accent-blue);
  color: var(--color-text-on-primary);
}

.schedule-time-option.is-selected:hover {
  background-color: var(--color-accent-blue-hover);
}

/* ============================================================
   DAY SELECTOR
   Row of day-of-week checkboxes for recurrence (S M T W T F S)
   ============================================================ */

.day-selector {
  display: flex;
  gap: var(--space-8);
}

.day-option {
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--text-body-size);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.day-label:hover {
  border-color: var(--color-border-hover);
  background-color: var(--color-surface-hover);
}

.day-option input[type="checkbox"]:checked + .day-label {
  background-color: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-text-on-primary);
}

.day-option input[type="checkbox"]:focus-visible + .day-label {
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}


/* ============================================================
   FILE VIEWER
   Embedded viewers for PDFs, Office docs, and images
   ============================================================ */

.file-preview-panel {
  margin-top: var(--space-24);
}

.file-preview-container {
  min-height: 300px;
}

.file-viewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  background-color: var(--color-background);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.file-viewer-iframe {
  width: 100%;
  height: 500px;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.file-viewer--pdf .file-viewer-iframe {
  height: 600px;
}

.file-viewer--office .file-viewer-iframe {
  height: 500px;
}

.file-viewer-fallback {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
}

.file-viewer--image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}

.file-viewer-img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.file-viewer--unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-32);
  text-align: center;
}

.file-viewer-icon {
  color: var(--color-text-muted);
}

/* Uploading state */
[data-uploader="file"].uploading .uploader-placeholder {
  opacity: 0.5;
  pointer-events: none;
}

[data-uploader="file"].uploading::after {
  content: 'Uploading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
}

/* Video Preview */
.video-preview-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-preview-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Audio Preview */
.audio-preview-player {
  width: 100%;
  border-radius: var(--radius-md);
}

/* Rich Text Editor */
.rich-text-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rich-text-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.rich-text-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.rich-text-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.rich-text-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 var(--space-4);
}

.rich-text-content {
  min-height: 100px;
  padding: var(--space-12);
  outline: none;
  font-size: var(--text-body-size);
  line-height: 1.5;
}

.rich-text-content:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
}

.rich-text-content:focus:empty::before {
  opacity: 0.5;
}


/* ============================================================
   NAVIGATION EDITOR - DRAG AND DROP
   Styles for drag-drop reordering and nesting in navigation editor
   ============================================================ */

.nav-top-level-item,
.nav-child-item {
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav-top-level-item.dragging,
.nav-child-item.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

/* Drop indicator - show line above/below for insert position */
.nav-top-level-item.nav-drop-indicator::before,
.nav-child-item.nav-drop-indicator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-accent-blue);
  z-index: 10;
}

.nav-top-level-item.nav-drop-indicator[data-drop-position="before"]::before,
.nav-child-item.nav-drop-indicator[data-drop-position="before"]::before {
  top: -1px;
}

.nav-top-level-item.nav-drop-indicator[data-drop-position="after"]::before,
.nav-child-item.nav-drop-indicator[data-drop-position="after"]::before {
  bottom: -1px;
  top: auto;
}

/* Drop target - highlight when item will become a child */
.nav-top-level-item.nav-drop-target {
  background-color: var(--color-accent-blue-bg, rgba(59, 130, 246, 0.1));
  border-color: var(--color-accent-blue);
  border-radius: var(--radius-sm);
}

.nav-top-level-item.nav-drop-target > .entity-row--card {
  border-color: var(--color-accent-blue);
}

/* Children container for nested items */
.nav-children-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-24);
  margin-top: var(--space-4);
}

.nav-child-item {
  position: relative;
}

/* Drag grip cursor */
.nav-drag-grip {
  cursor: grab;
}

.nav-drag-grip:active {
  cursor: grabbing;
}

/* Make sure nav items have position relative for pseudo-elements */
.nav-top-level-item {
  position: relative;
  margin-bottom: var(--space-8);
}

/* Restore bottom border for nav item cards (entity-row--card removes it for stacked lists) */
.nav-top-level-item > .entity-row--card,
.nav-child-item > .entity-row--card {
  border-bottom: 1px solid var(--color-border);
}

/* Drop zone for nesting items */
.nav-drop-zone {
  min-height: 32px;
  margin: var(--space-8) 0 0 24px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-drop-zone::before {
  content: "Drop here to nest";
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.6;
}

.nav-drop-zone:not(:empty)::before {
  display: none;
}

.nav-drop-zone:not(:empty) {
  border: none;
  min-height: 0;
  margin-top: var(--space-4);
}

/* When something is being dragged over the drop zone */
.nav-drop-zone.sortable-ghost {
  min-height: 48px;
  border-color: var(--color-primary);
  background: var(--color-info-bg);
}

/* Trash button styling */
.nav-top-level-item .text-danger,
.nav-child-item .text-danger {
  color: var(--color-danger);
}

.nav-top-level-item .text-danger:hover,
.nav-child-item .text-danger:hover {
  background-color: var(--color-danger-bg);
}

/* -------------------------------------------------------------------------- */
/* LISTS: ACCORDION                                                            */
/* -------------------------------------------------------------------------- */

.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-16);
  background: var(--color-surface);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: background 0.15s ease;
}

.accordion-header:hover {
  background-color: var(--color-background);
}

.accordion-header:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring);
}

.accordion-header.disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.accordion-header.disabled:hover {
  background: var(--color-surface);
}

.accordion-icon {
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 var(--space-16) var(--space-16);
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  line-height: 1.6;
  display: none;
}

.accordion-item.open .accordion-content {
  display: block;
}

/* -------------------------------------------------------------------------- */
/* ADDITIONAL UTILITIES                                                        */
/* -------------------------------------------------------------------------- */

.ds-stack--md > * + * { margin-top: var(--space-16); }
.text-center { text-align: center; }
.p-24 { padding: var(--space-24); }


/* ============================================================ */

/* ---- Migrated from styles.css: shared components ---- */

.card--nav-compact {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.card-header p {
  max-width: none;
}

.card-title--section {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--font-weight-medium);
}

.ds-block-editor {
  display: flex;
  gap: var(--space-16);
  min-height: 400px;
}

.ds-block-editor-block {
  position: relative;
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-24);
  margin-bottom: var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
}

.ds-block-editor-block-handle {
  position: absolute;
  left: var(--space-4);
  top: var(--space-12);
  color: var(--color-text-muted);
}

.ds-block-editor-block:last-child {
  margin-bottom: 0;
}

.ds-block-editor-canvas {
  flex: 1;
}

.ds-block-editor-palette {
  flex: 0 0 160px;
}

.ds-stack--center {
  align-items: center;
  text-align: center;
}

.event-card-action--secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.event-card-action--secondary:hover {
  background-color: var(--color-background);
}

.event-card-media > .event-card-state {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: 1;
}

.event-card-media-overlay {
  position: absolute;
  top: var(--space-12);
  pointer-events: none;
  z-index: 1;
}

.event-card-media-overlay .resource-card-bookmark {
  position: static;
  top: auto;
  right: auto;
}

.event-card-media-overlay--top-left {
  left: var(--space-12);
}

.event-card-media-overlay--top-right {
  right: var(--space-12);
}

.learning-context-bar {
  margin-bottom: var(--space-24);
}

.learning-path-card--featured {
  flex-direction: row;
  border-color: var(--color-primary-border);
}

.learning-path-card--featured .learning-path-card-body {
  padding: var(--space-24) var(--space-16) var(--space-24) var(--space-24);
  justify-content: center;
}

.learning-path-card--featured .learning-path-card-footer {
  border-top: none;
  padding-top: var(--space-8);
}

.learning-path-card--featured .learning-path-card-media {
  width: 200px;
  height: auto;
  min-height: 160px;
  flex-shrink: 0;
}

.learning-path-card--featured .learning-path-card-title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  -webkit-line-clamp: unset;
}

.learning-path-card-featured {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  background: var(--color-warning);
  color: var(--color-text-on-dark);
  backdrop-filter: blur(4px);
}

.learning-section-group {
  margin-top: var(--space-24);
}

.lesson-row.drag-over {
  border-color: var(--color-info-text);
  box-shadow: 0 0 0 2px var(--color-info-bg);
}

.lesson-row.dragging {
  opacity: 0.5;
}

.mt-24 {
  margin-top: var(--space-24);
}

.resource-card--mini .resource-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.resource-card--mini .resource-card-media {
  flex: 0 0 96px;
  height: 96px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.resource-card--mini .resource-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.resource-card--mini .resource-card-title {
  margin: 0;
}

.resource-card--mini .truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-card--mini > .card-body {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
}

.resource-list-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.switch-track.on.disabled {
  background-color: var(--color-border-muted);
  cursor: not-allowed;
}

.switch-track.on.disabled .switch-thumb {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.table-action-menu--up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.uploader-placeholder-icon {
  /* These four came from an inline style block in createThumbnailUploader, which
     meant the dashed empty-state border could not be restyled from here at all —
     inline wins over every stylesheet rule, so a circular uploader still drew a
     square dashed box. Moved here so the shape modifiers below can reach it. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.uploader-placeholder-icon svg {
  color: var(--color-text-muted);
}

.uploader-placeholder-icon:hover {
  border-color: var(--color-accent-blue);
  background: var(--color-background);
}

.uploader-placeholder-text {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  pointer-events: none;
}

.uploader[data-has-image="false"] .uploader-hover-overlay {
  display: none !important;
}

.uploader[data-thumbnail-mode="default"] [data-use-default] {
  display: none !important;
}

[data-bookmark-toggle] {
  cursor: pointer;
}

@media (max-width: 1024px) {
  .ds-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .ds-grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ds-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  /* .ds-grid-4 has always collapsed here; .ds-grid-3 only did so under
     body[data-brand], which reads as an oversight rather than a decision — 33
     pages use these grids without that attribute. A three-card KPI row held its
     three columns at phone widths and pushed the page sideways. */
  .ds-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-brand] .ds-grid-2,
  body[data-brand] .ds-grid-3,
  body[data-brand] .ds-grid-4 {
    grid-template-columns: 1fr;
  }
  body[data-brand] .learning-path-card--featured {
    flex-direction: column;
  }
  body[data-brand] .learning-path-card--featured .learning-path-card-action {
    display: block;
    width: 100%;
    text-align: center;
  }
  body[data-brand] .learning-path-card--featured .learning-path-card-body {
    padding: var(--space-16) var(--space-20);
  }
  body[data-brand] .learning-path-card--featured .learning-path-card-footer {
    padding-bottom: var(--space-4);
  }
  body[data-brand] .learning-path-card--featured .learning-path-card-media {
    width: 100%;
    height: 200px;
    min-height: auto;
  }
  body[data-brand] .screen-sidebar {
    display: none;
  }
}

/* Below a phone's width two KPI cards leave no room for their labels. */
@media (max-width: 520px) {
  .ds-grid-3,
  .ds-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   GAP FILLERS
   ----------------------------------------------------------------------------
   Classes that markup and page modules already emit but that had no rule in any
   stylesheet, so the elements rendered unstyled. Each one is aligned to the
   component it is clearly a synonym of, rather than given a new look, so
   nothing changes visually except that these stop being invisible/broken.
   Found by scripts/audit-member-classes.mjs.
   ============================================================================ */

/* ---- Image placeholders --------------------------------------------------
   Card media boxes fall back to these when a record has no image. Previously
   they inherited only the white background of their .*-img sibling, giving a
   blank white rectangle. */
.member-content-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* .member-thumb-square--placeholder is declared in member.css instead: its
   base class lives there, and member.css loads last. */
.resource-card-img--placeholder,
.event-card-img--placeholder,
.learning-path-card-img--placeholder,
.member-content-card-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-secondary, #F1F5F9);
  background-image: linear-gradient(135deg, var(--color-surface-secondary, #F1F5F9), var(--color-background, #fff));
  color: var(--color-text-muted, #94A3B8);
}

.member-content-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
}

/* ---- Empty states --------------------------------------------------------
   .empty-state already styles its h3/p by element selector; these give the
   same treatment to the explicit class names the modules emit. */
.empty-state-icon {
  color: var(--color-text-muted, #94A3B8);
  margin-bottom: var(--space-12);
}

.empty-state-title {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.empty-state-desc {
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-16);
  max-width: 46ch;
}

/* ---- Buttons -------------------------------------------------------------- */
.btn-danger {
  background: var(--color-error, #dc2626);
  border-color: var(--color-error, #dc2626);
  color: #fff;
}

.btn-danger:hover {
  filter: brightness(0.94);
}

.btn-xs {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-xs-size, 12px);
  line-height: 1.2;
}

/* ---- Forms ---------------------------------------------------------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}

.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.checkbox-text {
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
}

/* ---- Dropdown menus (forum) ---------------------------------------------
   Mirrors .table-action-menu, which is the same component elsewhere. */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  padding: var(--space-4);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  z-index: 60;
  display: none;
}

.dropdown--right .dropdown-panel {
  left: auto;
  right: 0;
}

.dropdown.open .dropdown-panel,
.dropdown-panel.open {
  display: block;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--color-text-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--color-surface-secondary);
}

.dropdown-item--danger {
  color: var(--color-error, #dc2626);
}

/* ---- Drawer state + size modifiers -------------------------------------- */
.drawer--open,
.drawer.open {
  transform: translateX(0);
}

.drawer-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.drawer--sm {
  max-width: 360px;
}

.drawer--right {
  right: 0;
  left: auto;
}

/* ---- Modal close --------------------------------------------------------- */
.modal-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
}

/* ---- Loading skeleton ---------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-secondary, #F1F5F9) 25%,
    var(--color-border, #E2E8F0) 37%,
    var(--color-surface-secondary, #F1F5F9) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: pr-skeleton 1.4s ease infinite;
}

@keyframes pr-skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Media viewers ------------------------------------------------------- */
.video-embed,
.video-player,
.resource-video-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.video-embed iframe,
.video-player iframe,
.video-player video,
.resource-video-viewer iframe,
.resource-video-viewer video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.resource-file-viewer {
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-secondary);
}

/* ---- Badge + bookmark states -------------------------------------------- */
.badge-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* Saved state.
   The click handler toggles .bookmarked, but a freshly rendered page only
   carries the server's state in aria-pressed — so keying the colour solely off
   the class made a save look correct until the next reload. aria-pressed is the
   value every render site already sets, so it drives the styling too. */
.bookmarked,
[data-bookmark-toggle][aria-pressed="true"] {
  color: var(--member-primary, var(--color-accent-teal));
}

.bookmarked svg,
.bookmarked i,
[data-bookmark-toggle][aria-pressed="true"] svg,
[data-bookmark-toggle][aria-pressed="true"] i {
  fill: currentColor;
}

/* ---- Utilities the markup already assumes -------------------------------- */
.text-body { font-size: var(--text-body-size); line-height: var(--text-body-line-height); }
.text-lg   { font-size: var(--text-h3-size); line-height: var(--text-h3-line-height); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.flex-shrink-0 { flex-shrink: 0; }
.mb-0  { margin-bottom: 0; }
.mt-4  { margin-top: var(--space-4); }
.mb-20 { margin-bottom: var(--space-20); }

/* Completing the spacing scale. .mt-8, .mt-12, .mt-1, .mb-6 and .mb-32 were used
   across roughly 45 surveys and program-admin pages but defined nowhere, so the
   intended margin silently resolved to zero. --space-* has no 1 or 6 step, so
   those two map to the nearest real token rather than inventing new ones. */
.mt-1  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-6  { margin-bottom: var(--space-8); }
.mb-32 { margin-bottom: var(--space-32, 32px); }
.ds-stack--xs > * + *   { margin-top: var(--space-4); }
.ds-cluster--xs         { gap: var(--space-4); }
.ds-cluster--right      { justify-content: flex-end; }
.ds-cluster--between    { justify-content: space-between; }

/* ---- Cascade corrections (common.css internal ordering) ------------------
   These modifiers are declared above the base classes they override, so at
   equal specificity the base won and the modifier was dead. Re-asserted here
   at the end of the file. Found by scripts/audit-member-css.mjs. */

.accordion--sections {
  border: none;
  border-radius: 0;
  overflow: visible;
}

.creatable-select-option--selected {
  color: var(--color-accent-blue);
}

.screen-grid-sidebar--two-thirds {
  grid-template-columns: 2fr 1fr;
}

.multiselect-trigger--chips {
  align-items: flex-start;
}

/* ============================================================================
   TOKEN ALIASES
   ----------------------------------------------------------------------------
   These names are referenced throughout the stylesheets but were never defined,
   so every declaration using them was dropped by the browser (a `var(--x)` with
   no definition and no fallback invalidates the whole declaration). They are
   naming drift, not new design decisions — each is aliased to the canonical
   token that already exists rather than given an invented value.

   Found by scripts/audit-css-tokens.mjs; re-run it after touching tokens.
   ============================================================================ */

:root {
  /* Text */
  --color-text: var(--color-text-primary);
  --color-text-default: var(--color-text-primary);
  --color-text-subtle: var(--color-text-secondary);
  --color-text-tertiary: var(--color-text-muted);
  --color-text-disabled: var(--color-text-muted);
  --color-text-link: var(--color-link, var(--color-accent-blue));
  --color-text-on-primary: var(--color-text-on-navy);
  --color-text-on-dark: var(--color-text-on-navy);
  --color-muted: var(--color-text-muted);
  --color-white: var(--color-text-on-navy);

  /* Surfaces */
  --color-surface-secondary: #F1F5F9;
  --color-surface-raised: var(--color-surface-elevated);
  --color-surface-hover: #F1F5F9;
  --color-surface-subtle: var(--color-surface-secondary);
  --color-surface-alt: var(--color-surface-secondary);
  --color-surface-muted: var(--color-surface-secondary);
  --color-bg: var(--color-background);
  --color-bg-default: var(--color-background);
  --color-bg-subtle: var(--color-surface-secondary);
  --color-bg-hover: var(--color-surface-secondary);
  --color-bg-elevated: var(--color-surface-elevated);
  --color-background-subtle: var(--color-surface-secondary);
  --color-input-background: var(--color-background);

  /* Borders */
  --color-border-default: var(--color-border);
  --color-border-subtle: var(--color-border-muted);
  --color-border-soft: var(--color-border-muted);
  --color-border-strong: #CBD5E1;
  --color-border-hover: #CBD5E1;
  --color-border-focus: var(--color-focus-ring, var(--color-accent-blue));
  --color-focus: var(--color-focus-ring, var(--color-accent-blue));

  /* Brand + accents */
  --color-brand: var(--color-primary-navy);
  --color-primary: var(--color-primary-navy);
  --color-brand-muted: var(--color-text-secondary);
  --color-primary-subtle: var(--color-surface-secondary);
  --color-accent: var(--color-accent-teal);
  --color-teal: var(--color-accent-teal);
  --color-accent-soft: #FFF8F3;
  --color-accent-blue-bg: #EFF6FF;
  --color-accent-blue-subtle: #EFF6FF;
  --color-accent-blue-hover: #1649b0;
  --color-accent-teal-bg: #E6F5F4;

  /* Status */
  --color-success-soft: color-mix(in srgb, var(--color-success) 10%, transparent);
  --color-success-light: var(--color-success-bg);
  --color-success-dark: var(--color-success-text);
  --color-danger-light: var(--color-error-bg);

  /* Spacing (the scale starts at 4; these two are used by tighter components) */
  --space-2: 2px;
  --space-10: 10px;

  /* Type */
  --text-base-size: var(--text-body-size);
  --text-base-lh: var(--text-body-line-height);
  --line-height-base: var(--text-body-line-height);
  --line-height-normal: var(--text-body-line-height);
  --line-height-relaxed: 1.7;
  --text-lg-size: 18px;
  --text-xl-size: 20px;
  --text-3xl-size: var(--text-h1-size);
  --text-h4-size: 17px;
  --text-xxs-size: 11px;
  --text-sm-lh: var(--text-small-line-height);
  --text-micro-lh: var(--text-micro-line-height);
  --font-size-base: var(--text-body-size);
  --font-size-sm: var(--text-small-size);
  --font-size-xs: var(--text-xs-size);

  /* Tailwind-style scale names used across the sheets. They were only ever
     defined in page-builder/builder.css, which no page links, so every one of
     these declarations was being dropped. Aliased to the canonical scale. */
  --text-xs: var(--text-xs-size);
  --text-sm: var(--text-sm-size);
  --text-base: var(--text-base-size);
  --text-lg: var(--text-lg-size);
  --text-xl: var(--text-xl-size);

  /* Same story for the shadow scale; mapped onto the two platform shadows
     whose values these already matched. */
  --shadow-sm: var(--shadow-hover);
  --shadow-md: var(--shadow-hover);
  --shadow-lg: var(--shadow-overlay);
  --font-size-2xl: var(--text-h2-size);
  --font-size-3xl: var(--text-h1-size);
  --font-weight-normal: var(--font-weight-regular);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Shape + elevation */
  --radius-full: 999px;
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ==========================================================================
   DESIGN SYSTEM PARITY — rules present in the handoff's styles.css that were
   missed when this file was ported. Found by scripts/audit-handoff-css.mjs.

   Deliberately NOT ported (our implementation differs on purpose):
     * { margin: 0; padding: 0 }          we have our own reset
     .table-action-menu positioning       ours is position: fixed, so the
                                          handoff's right/top would pin the
                                          menu to the viewport corner
     .table-container > child radii       pairs with overflow: visible, which
                                          ours does not use
     .resource-card-media / .event-card-media height
                                          ours is a responsive aspect-ratio box
                                          rather than a fixed pixel height
     .resource-detail-prose p line-height prose.css owns article typography
   ========================================================================== */

/* ---- Base --------------------------------------------------------------- */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.btn-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring);
  border-radius: 2px;
}

.member-type-label--inline {
  z-index: auto;
}

.header-avatar {
  text-decoration: none;
}

/* ---- Header user menu (details/summary disclosure) ---------------------- */
.header-user-menu {
  position: relative;
}

.header-user-menu summary {
  list-style: none;
  cursor: pointer;
}

.header-user-menu summary::-webkit-details-marker {
  display: none;
}

.header-user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: var(--space-4);
  z-index: 20;
}

.header-user-menu-item {
  border-radius: var(--radius-md);
}

.header-user-menu-item:hover {
  outline: none;
}

.header-user-menu-item:focus {
  background: var(--color-border-muted);
  outline: none;
}

/* ---- Modal -------------------------------------------------------------- */
.modal-close:hover {
  background-color: var(--color-background);
}

.modal-body--scroll {
  overflow-y: auto;
  max-height: 60vh;
}

/* ---- Content preview panel ---------------------------------------------- */


/* ---- Program logo tile -------------------------------------------------- */
.program-logo-tile {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-logo-tile-lg {
  max-width: 100%;
  max-height: 240px;
}

/* ---- Multiselect / creatable select ------------------------------------- */
.multiselect-option:focus-visible {
  background-color: var(--color-surface-hover);
  outline: 2px solid var(--color-primary-navy);
  outline-offset: -2px;
}

.multiselect-option input[type="checkbox"] {
  width: var(--space-16);
  height: var(--space-16);
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary-navy);
}

.creatable-select-option:hover {
  outline: none;
}

.creatable-select-option:focus-visible {
  background-color: var(--color-surface-hover);
  outline: 2px solid var(--color-primary-navy);
  outline-offset: -2px;
}

.creatable-select-option:disabled,
.creatable-select-option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Member ------------------------------------------------------------- */
body[data-program-theme] [data-bookmark-toggle][aria-pressed="true"],
body[data-program-theme] [data-bookmark-toggle][aria-pressed="true"]:hover {
  color: var(--member-primary);
}

.member-breadcrumbs a:not(.member-breadcrumbs-home) {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.member-breadcrumbs a:not(.member-breadcrumbs-home):hover {
  color: var(--color-primary-navy);
  text-decoration: none;
}

.resource-detail-header {
  margin-bottom: calc(-1 * var(--space-8));
}

.member-detail-title-block {
  width: 100%;
}

.member-forum-identity-row--no-rule {
  padding-bottom: 0;
  border-bottom: none;
}

/* ---- Form rows ---------------------------------------------------------- */
/* Dropdowns inside a grid row must not be clipped by the cell. */
.form-row-grid .form-field,
.form-row-grid .select-wrapper {
  overflow: visible;
}

.form-row-grid input[type="number"] {
  min-width: 0;
  width: 100%;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
  .drawer-footer {
    padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom));
  }

  #reportContentDrawer .drawer-footer {
    position: static;
    border-top: none;
    justify-content: stretch;
    flex-direction: column;
    padding: var(--space-16) var(--space-24) calc(var(--space-24) + env(safe-area-inset-bottom));
  }

  #reportContentDrawer .drawer-footer .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .lp-step-row {
    flex-wrap: wrap;
  }

  .lp-step-row-status {
    width: 100%;
    padding-left: calc(24px + var(--space-12));
    align-self: auto;
  }

  .content-share-attachment-preview,
  .content-shared-post {
    flex-direction: column;
  }

  .content-share-attachment-image {
    width: 100%;
    height: 140px;
  }

  .content-shared-post-media {
    width: 100%;
    height: 140px;
    flex: none;
  }
}

/* ---- Hover (pointer devices only) --------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .lp-step-row:hover {
    background: var(--color-background);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
  }

  .context-link:hover {
    color: var(--color-text-primary);
  }

  .content-contributor-row--interactive:hover {
    background-color: var(--color-surface-raised);
  }

  .content-contributor-row--interactive:hover .content-contributor-action {
    transform: translateX(2px);
  }

  .content-engagement-action:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-text-secondary);
  }

  body[data-program-theme] .content-engagement-action:hover {
    color: var(--member-primary);
    border-color: var(--member-primary);
    background-color: var(--member-accent-soft);
  }

  .content-linked-badge:hover {
    text-decoration: none;
    color: var(--color-text-primary);
    border-color: var(--color-text-secondary);
  }

  .content-share-menu-item {
    transition: background-color 150ms ease, transform 150ms ease;
  }

  .content-share-menu-item:hover {
    transform: translateX(2px);
  }

  .content-share-attachment-preview:hover {
    background: var(--color-background);
    text-decoration: none;
  }

  .content-share-attachment-remove:hover {
    background: var(--color-background);
    border-color: var(--color-text-muted);
  }

  .content-shared-post:hover {
    background: var(--color-surface);
  }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .accordion--sections .accordion-content,
  .accordion--sections .accordion-item.open .accordion-content,
  .content-contributor-row--interactive,
  .content-contributor-action,
  .content-engagement-action,
  .content-engagement-action svg,
  .content-engagement-action i svg {
    transition: none;
  }

  .content-contributor-row--interactive:hover .content-contributor-action {
    transform: none;
  }

  .content-share-menu-item {
    transition: background-color 150ms ease;
  }

  .content-share-menu-item:hover {
    transform: none;
  }
}


/* ==========================================================================
   DESIGN SYSTEM PARITY — part 2

   The remainder of the handoff's styles.css that our stylesheets never picked
   up. Most of it is the Surveys subsystem (.survey-*, .accordion-row,
   .filter-*, .chart-ring-*, .card--inset, .modal-dialog--scrollable and
   friends), whose screens live under Website/surveys/ and load this file —
   they were rendering with the markup but none of the component styles.
   Also here: the .page-header row used by stories and the program-admin list
   pages, and the program-themed progress fill on the member dashboard.

   Found by scripts/audit-handoff-css.mjs; emitted by
   scripts/emit-missing-handoff-css.mjs. Rules we deliberately diverge on are
   listed in the part 1 block above and are not repeated here.
   ========================================================================== */

.filter-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-8);
  align-items: start;
}


.card--inset {
  background-color: var(--color-background);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
}


.card--rule-set {
  background: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: visible;
}


.rule-set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-background);
  border-bottom: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: var(--font-weight-medium);
}


.card--rule-set > .form-stack {
  padding: var(--space-16);
}


.card--filter {
  background-color: var(--color-background);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
}


.card--compact-header {
  gap: var(--space-8);
}


.card--compact-header .card-header {
  margin-bottom: 0;
}


.resource-card-type--inline {
  z-index: auto;
}







.table-action-menu-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-4) 0;
}


.modal-dialog--scrollable {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
}


.modal-dialog--scrollable .modal-header {
  flex-shrink: 0;
  padding: var(--space-24) var(--space-24) var(--space-16);
}


.modal-dialog--scrollable .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-24) var(--space-24);
}


.modal-dialog--scrollable .modal-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: var(--space-16) var(--space-24) var(--space-24);
  border-top: 1px solid var(--color-border);
}


.activity-item {
  position: relative;
}


.activity-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--color-border-muted);
}


.activity-content {
  padding-top: var(--space-4);
}


.activity-title {
  margin-bottom: var(--space-4);
}


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


.accordion-header--static {
  cursor: default;
  pointer-events: none;
  flex: 1;
  width: auto;
  padding: var(--space-12) var(--space-8);
  background: transparent;
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-regular);
}


.accordion-header--static:hover {
  background: transparent;
}


.accordion--questions .accordion-header {
  flex: 1;
  width: auto;
  padding: var(--space-12) var(--space-8);
  background: transparent;
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-regular);
}


.accordion--questions .accordion-header:hover {
  background: transparent;
}


.accordion-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: transparent;
  transition: background 0.12s ease;
}


.accordion-row:hover {
  background: var(--color-surface);
}


.accordion-row-grip {
  display: flex;
  align-items: center;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12);
  color: var(--color-text-muted);
  cursor: grab;
  flex-shrink: 0;
}


.accordion-row-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}


.accordion-row-actions {
  display: flex;
  align-items: center;
  padding-right: var(--space-8);
  flex-shrink: 0;
}


.accordion--questions .accordion-content {
  padding: var(--space-16);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-body-size);
  color: var(--color-text-primary);
}


.question-type-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: var(--color-border);
}


.question-type-icon--rating {
  background: var(--color-accent-teal);
  color: var(--color-primary-navy);
}


.question-type-icon--yes-no {
  background: var(--color-info);
  color: #fff;
}


.question-type-icon--long-answer {
  background: var(--color-accent-purple);
  color: #fff;
}


.question-type-icon--new {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
}


.answer-choice-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: 0;
}


.answer-choice-row .input-base {
  flex: 1 1 auto;
}


.answer-choice-row [data-remove-choice] {
  flex-shrink: 0;
  color: var(--color-danger);
  opacity: 0.6;
}


.answer-choice-row [data-remove-choice]:hover {
  color: var(--color-danger);
  opacity: 1;
  background: var(--color-danger-bg);
}


.editor-action-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}


.accordion--questions {
  border: none;
  border-radius: 0;
  overflow: visible;
}


.accordion--questions .accordion-item {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-12);
  padding: 0;
  position: relative;
}


.accordion--questions .accordion-item:last-child {
  margin-bottom: 0;
}


.accordion--questions .accordion-row {
  border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
}


.accordion--questions .accordion-item.open .accordion-content {
  border-bottom-left-radius: calc(var(--radius-sm) - 1px);
  border-bottom-right-radius: calc(var(--radius-sm) - 1px);
}


.form-stack .answer-choice-row ~ .add-row {
  margin-top: var(--space-12);
}


.chart-canvas-wrap--ring {
  display: flex;
  justify-content: center;
  align-items: center;
}


.chart-canvas-wrap--ring--lg {
  padding: var(--space-16) 0;
}


.chart-canvas-wrap--ring--lg .chart-ring-center-wrap {
  width: 280px;
}


.chart-ring-center-wrap {
  position: relative;
  display: inline-block;
}


.chart-ring-label-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}


.chart-ring-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}


.chart-ring-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}


.ds-cluster--xs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}


.ds-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
}


.survey-funnel {
  display: flex;
  flex-direction: column;
}


.survey-funnel-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border);
}


.survey-funnel-row:last-child {
  border-bottom: none;
}


.survey-funnel-row-main {
  flex: 1;
  min-width: 0;
}


.survey-funnel-checkpoint {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}


.survey-funnel-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}


.survey-funnel-bar {
  flex: 1;
  height: 6px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}


.survey-funnel-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
}


.survey-funnel-bar-fill--core {
  background: var(--color-success);
}


.survey-funnel-bar-fill--cp1 {
  background: var(--color-accent-blue);
}


.survey-funnel-bar-fill--cp2 {
  background: var(--color-accent-teal);
}


.survey-funnel-bar-pct {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}


.survey-funnel-row-stat {
  text-align: right;
  flex-shrink: 0;
}


.survey-funnel-count {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}


.survey-funnel-rate {
  font-size: var(--text-micro-size);
  color: var(--color-text-muted);
}



.page-meta {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}


.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}


.page-header-left {
  min-width: 0;
  flex: 1 1 auto;
}


.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-shrink: 0;
}


.table-col-nowrap {
  white-space: nowrap;
}


.table-col-compact {
  white-space: nowrap;
  width: 130px;
}


.table-col-question {
  min-width: 150px;
  max-width: 210px;
}


.table-col-header-text {
  display: block;
  white-space: normal;
  line-height: 1.4;
  font-weight: inherit;
}


.entity-row--selectable {
  cursor: pointer;
}


.entity-row--selected {
  background-color: var(--color-background);
  border-left: 3px solid var(--color-accent-blue);
}


.export-option-check {
  color: var(--color-accent-blue);
  flex-shrink: 0;
}


body[data-program-theme] .member-featured-item-progress-fill {
  background: var(--member-primary);
}


.member-content-card-body--bottom-actions {
  align-items: stretch;
}


.member-content-card-body--bottom-actions .member-content-card-actions {
  display: flex;
  align-items: flex-end;
}


.wizard-sticky-aside {
  position: sticky;
  top: calc(64px + var(--space-24));
  align-self: start;
}



.survey-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}


/* Ported verbatim from the Surveys & Forms delta handoff (styles.css:13479, 13491,
   13535). The member take page renders .survey-choice-item as the outer label of
   every choice; the inner .radio-native / .radio-input / .radio-label already come
   from the shared radio component. Without this rule the card had no border,
   padding or selected state. .radio-wrapper is not a substitute — it is a bare
   flex row with no card treatment. */
.survey-choice-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color 0.15s ease;
}


.survey-choice-item:hover {
  border-color: var(--member-primary, var(--color-primary-navy));
}


.survey-choice-item.selected {
  border-color: var(--member-primary, var(--color-primary-navy));
  background: var(--color-background);
}


.survey-scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}


.survey-scale-labels {
  display: flex;
  justify-content: space-between;
}


/* Ported verbatim from the delta handoff (styles.css:13503, 13520, 13524). Rating
   and NPS questions render these buttons; unstyled they collapsed to bare text. */
.survey-scale-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  flex: 1 0 40px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: border-color 0.15s ease;
}


.survey-scale-btn:hover {
  border-color: var(--member-primary, var(--color-primary-navy));
}


.survey-scale-btn.selected {
  border-color: var(--member-primary, var(--color-primary-navy));
  background: var(--member-primary, var(--color-primary-navy));
  color: var(--member-primary-ink, var(--color-surface));
}


.member-survey-question-title {
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--text-body-line-height);
  margin-bottom: var(--space-8);
}




.survey-section {
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: visible;
}


.survey-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--color-background);
  border-bottom: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}


.survey-section-header-info {
  flex: 1;
  min-width: 0;
}


.survey-section-body {
  background: var(--color-surface);
  padding: var(--space-12) var(--space-16);
}


.section-add-inline {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0 var(--space-4);
}


.continuation-row-preview {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.survey-continuation-actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}


.survey-builder-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}


.survey-builder-actions .btn {
  border: var(--border-width-default) solid var(--color-border-muted);
}


.section-add-inline .btn {
  border: var(--border-width-default) solid var(--color-border-muted);
}


.step2-builder {
  background-color: var(--color-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}


.builder-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}


.filter-logic-row {
  display: flex;
  align-items: center;
  margin: var(--space-8) 0;
}


.filter-logic-row--or {
  margin: var(--space-12) 0;
}


.badge-logic {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: var(--border-width-default) solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}


.badge-logic--or {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border: var(--border-width-default) solid var(--color-border);
}


.filter-summary {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16) var(--space-12) var(--space-20);
  background: var(--color-background);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-sm);
}


.rule-set-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-20);
}


.filter-row-footer {
  display: flex;
  align-items: center;
  padding: var(--space-10) var(--space-16);
  margin-top: var(--space-12);
  border-top: var(--border-width-default) solid var(--color-border);
}


.filter-row-actions {
  display: inline-flex;
  gap: var(--space-12);
  margin-left: auto;
  padding-right: var(--space-16);
  padding-bottom: var(--space-12);
}


.filter-summary-text {
  flex: 1;
  font-size: var(--font-size-sm);
  min-width: 0;
}


.filter-summary-actions {
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
}


[data-draggable].is-dragging {
  opacity: 0.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}


.filter-summary[data-filter-row-click] {
  cursor: pointer;
}


.filter-summary[data-filter-row-click]:hover {
  background: var(--color-surface-raised, var(--color-surface));
}


.filter-row-grid .form-field {
  overflow: visible;
}


.filter-row-grid .select-wrapper {
  overflow: visible;
}


.filter-row-grid input[type='number'] {
  min-width: 0;
  width: 100%;
}


.filter-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}


[data-filter-form] .card--filter {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


[data-filter-form] .filter-row-footer {
  background: var(--color-background);
  border: var(--border-width-default) solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-10) var(--space-16);
  margin-top: 0;
}


.btn-ghost--bordered {
  border: var(--border-width-default) solid var(--color-border);
}


.btn-ghost--bordered:hover {
  border-color: var(--color-accent-blue, var(--color-border));
}


.accordion--questions .accordion-content .editor-action-row {
  margin-left: calc(-1 * var(--space-16));
  margin-right: calc(-1 * var(--space-16));
  margin-bottom: calc(-1 * var(--space-16));
  padding: var(--space-12) var(--space-16);
  background: var(--color-background);
  border-top: var(--border-width-default) solid var(--color-border);
  border-radius: 0;
  margin-top: var(--space-8);
}


.card--inset .filter-summary {
  background-color: var(--color-surface);
}


.card--inset .card--filter {
  background-color: var(--color-surface);
}


.card--inset [data-filter-form] .filter-row-footer {
  background: var(--color-surface);
}


.survey-section-wrapper {
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}


.survey-section-wrapper .survey-section-header {
  display: block;
  padding: var(--space-16) var(--space-20);
  background: var(--color-background);
  border-bottom: var(--border-width-default) solid var(--color-border);
  border-radius: 0;
  align-items: unset;
  gap: unset;
}


.survey-section-eyebrow {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-micro-line-height);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}


.survey-section-name {
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-small-line-height);
  color: var(--color-text-primary);
}


.survey-section-desc {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-secondary);
  margin-top: var(--space-8);
}


.survey-section-wrapper .survey-section-body {
  padding: var(--space-20);
}


.survey-continuation-step {
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-32) var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-16);
}


.survey-continuation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success);
  flex-shrink: 0;
}


.survey-continuation-title {
  font-size: var(--text-h3-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-h3-line-height);
  color: var(--color-text-primary);
}


.survey-continuation-body {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  color: var(--color-text-secondary);
  max-width: 380px;
}


.survey-continuation-step .survey-continuation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-top: 0;
}



@media (max-width: 1200px) {
  .ds-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }


}

@media (max-width: 768px) {
  .ds-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }


}

@media (max-width: 480px) {
  .ds-grid-5 {
    grid-template-columns: 1fr;
  }


}

@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }


  .page-header-actions {
    width: 100%;
  }


}

/* Circular Share / Bookmark buttons: hover and reduced-motion states from the
   design system that were missed in the port. */
@media (hover: hover) and (pointer: fine) {
  .btn-icon--circle:hover::before {
    border-color: var(--color-text-secondary);
    background: var(--color-background);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-icon--circle::before {
    transition: none;
  }
}

/* ==========================================================================
   Content preview (ds-content-preview-*)

   Lives in common.css, not admin.css: the resource, module, event and item
   editors render this markup and are reached from both page sets, and admin.css
   is not loaded by member pages.

   Renamed from .ds-content-thumbnail-*. That rename (719b49c2) was started and
   abandoned: the markup on 13 pages moved to the new name, the JS kept querying
   the old one, and only the first 6 of 22 rules were copied across — so those
   previews were both unstyled and unwired.
   ========================================================================== */
.ds-content-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ds-content-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ds-content-preview-area {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16);
}

.ds-content-preview-text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ds-content-preview-text p {
  margin: 0 0 var(--space-8) 0;
}

.ds-content-preview-text p:last-child {
  margin-bottom: 0;
}

/* Page content preview with overlay */
.ds-content-preview-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 450px;
  cursor: pointer;
  border: 1px solid var(--color-border);
}

.ds-content-preview-canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.ds-content-preview-canvas {
  background: #ffffff;
  width: 1400px;
  min-height: 600px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  transform-origin: top center;
}

.ds-content-preview-iframe {
  background: #ffffff;
  width: 1400px;
  height: 600px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  transform-origin: top center;
  border: none;
}

.ds-content-preview-canvas-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
  padding: var(--space-8);
}

.ds-content-preview-canvas-block {
  position: relative;
  max-width: 100%;
}

.ds-content-preview-canvas-block--text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  max-height: 60px;
  overflow: hidden;
}

.ds-content-preview-canvas-block--heading {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.ds-content-preview-canvas-block--image {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.ds-content-preview-canvas-block--button {
  display: inline-block;
  padding: var(--space-8) var(--space-16);
  background: var(--color-primary);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

.ds-content-preview-canvas-block--divider {
  width: 80%;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-4) 0;
}

.ds-content-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-16);
  z-index: 2;
}

.ds-content-preview-overlay:hover {
  background: rgba(255, 255, 255, 0.25);
}

.ds-content-preview-overlay-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ds-content-preview-overlay-title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.ds-content-preview-meta {
  position: absolute;
  bottom: var(--space-16);
  left: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Circle picker rows in the program-admin custom email editor. The hover was an
   inline onmouseover/onmouseout pair, which a script hash cannot cover — so it
   was dead under the site CSP and forced this file to be scanned for handlers. */
.circle-option:hover {
  background: var(--color-surface-secondary, #f8fafc);
}

/* Unsaved-draft banner. Moved from member.css: it is shown by
   application-builder.js and resource-editor.js, both of which run on admin pages
   that do not load member.css — so the warning rendered as unstyled inline text
   instead of a banner exactly where it matters most. */
.draft-banner {
  background: linear-gradient(135deg, #fef3cd 0%, #fff3cd 100%);
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 24px;
}
.draft-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.draft-banner__icon {
  color: #856404;
  flex-shrink: 0;
}
.draft-banner__icon svg {
  width: 20px;
  height: 20px;
}
.draft-banner__text {
  flex: 1;
  color: #856404;
  font-size: 14px;
  font-weight: 500;
  min-width: 200px;
}
.draft-banner__discard {
  background: transparent;
  border: 1px solid #856404;
  color: #856404;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.draft-banner__discard:hover {
  background: #856404;
  color: white;
}

@media (max-width: 639px) {
  .draft-banner {
    margin: 12px 16px;
  }
  
  .draft-banner__content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .draft-banner__discard {
    width: 100%;
    text-align: center;
  }
}


/* Toast fade-out. The success toast used to vanish abruptly after 3s; admins
   reported saving, seeing nothing, and going back to check whether it worked. */
.toast--leaving {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .toast--leaving { transition: none; }
}


/* Uploader preview shapes.
   The preview should look like the place the image is going — an admin should
   not have to save and navigate away to find out what they will get. */
/* The dashed (empty) and solid (filled) borders both live on .uploader itself, so
   the radius has to beat the other .uploader rules — hence the doubled class.
   Every layer that paints a box is included, or one of them shows square corners
   poking through the round frame. */
.uploader.uploader-thumbnail--circle,
.uploader.uploader-thumbnail--circle .uploader-preview,
.uploader.uploader-thumbnail--circle .uploader-preview-img,
.uploader.uploader-thumbnail--circle .uploader-placeholder,
.uploader.uploader-thumbnail--circle .uploader-placeholder-icon,
.uploader.uploader-thumbnail--circle .uploader-hover-overlay,
.uploader.uploader-thumbnail--circle .uploader-uploaded {
  border-radius: 50%;
}

/* Keep the frame a true circle rather than an ellipse. */
.uploader.uploader-thumbnail--circle {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.uploader-thumbnail--rounded,
.uploader-thumbnail--rounded .uploader-preview,
.uploader-thumbnail--rounded .uploader-preview-img {
  border-radius: var(--radius-md, 8px);
}

/* A finished mark is fitted whole and padded, never cropped. The frame shape is
   set separately, so this must not impose one of its own. */
.uploader-preview-img--contain {
  object-fit: contain;
  padding: 8px;
}


/* ── Role-aware side navigation ───────────────────────────────────────────
 * A page that serves BOTH admin roles ships both navigations and marks each
 * with data-sidebar-role. frontend/role-sidebar.js stamps the signed-in role
 * on <html> from a head script, so the choice is made before first paint —
 * no fetch, no swap, no flash.
 *
 * Default (no data-role, or a role that does not participate): show whatever
 * the build produced and hide nothing. A signed-out visitor about to be
 * redirected to login sees the page exactly as before.
 */
[data-sidebar-role] { display: none; }

:root[data-role="site_admin"] [data-sidebar-role="site_admin"],
:root[data-role="program_admin"] [data-sidebar-role="program_admin"] {
  display: flex;
}

/* No role resolved — a signed-out visitor mid-redirect, or storage unavailable.
 * Fall back to the navigation the build produced for this page, marked
 * data-sidebar-default, so the page is never left with NO sidebar at all. */
:root:not([data-role]) [data-sidebar-default] { display: flex; }


/* ── Role-specific controls on a shared page ──────────────────────────────
 * The sidebar rules above solved the navigation. This solves everything else:
 * the breadcrumb trail, a profile link, a publish button — the small pieces
 * that genuinely differ by role on a page both roles otherwise share.
 *
 * Mark the element with the role it belongs to:
 *
 *   <nav data-role-only="site_admin" data-role-default>...</nav>
 *   <nav data-role-only="program_admin">...</nav>
 *
 * WHY THIS HIDES THE NON-MATCHING ROLE RATHER THAN SHOWING THE MATCHING ONE
 * The sidebar block can say `display: flex` because every sidebar is a flex
 * container. This applies to arbitrary markup — a <nav>, a <button>, an <a>,
 * a table row — each with its own natural display. Starting from hidden would
 * mean guessing a display value per element and getting it wrong somewhere
 * (an <a> forced to block, a <tr> to flex). Starting from visible and hiding
 * only the role that does not apply keeps every element's own display intact
 * and needs no per-element knowledge.
 *
 * WHY IT IS NOT A FLASH
 * frontend/role-sidebar.js stamps data-role on <html> from a classic head
 * script, before the body parses. The match is settled before first paint.
 *
 * WHAT IT IS NOT
 * Presentation, not permission. Hiding a control does not protect the action
 * behind it; every admin endpoint is guarded server-side against the caller's
 * token (workers/shared/auth.js). Use this to keep a page coherent for its
 * audience, never as the reason an action is safe.
 */
:root[data-role="site_admin"] [data-role-only="program_admin"],
:root[data-role="program_admin"] [data-role-only="site_admin"] {
  display: none;
}

/* Signed out, or a role that does not participate: show only what the page
 * nominates as its default, so the page still reads as complete during the
 * moment before a redirect to login. */
:root:not([data-role]) [data-role-only]:not([data-role-default]) {
  display: none;
}

/* The role reveal must not defeat the mobile drawer.
 *
 * :root[data-role="program_admin"] [data-sidebar-role="program_admin"] weighs
 * (0,3,0) and out-specifies .admin-shell--mobile-nav > .screen-sidebar in
 * css/admin.css (0,2,0) — so on a converged page the sidebar stayed docked at
 * phone widths no matter what class the shell carried. Measured at 375px: the
 * page scrolled 373px horizontally with no hamburger, where the twin it
 * replaced showed the drawer and did not overflow.
 *
 * This weighs (0,4,0) and wins. Scoped to the program admin because the drawer
 * is their navigation: a site admin has none on these pages, so hiding their
 * sidebar too would leave a phone with nothing. */
@media (max-width: 768px) {
  :root[data-role="program_admin"] .admin-shell--mobile-nav > [data-sidebar-role="program_admin"] {
    display: none;
  }
}