/* The Liberty Church — You Count brand system
   Shared visual layer for member journeys, staff workspaces and dashboards. */
:root {
  --navy: #003264;
  --navy-deep: #001a38;
  --navy-raised: #0a3f78;
  --navy-tint: #e2eaf4;
  --mist: #eef1f6;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #0b1730;
  --muted: #4e5a70;
  --line: #d5dbe5;
  --field-border: #6e7a90;
  --amber: #f0a500;
  --amber-hover: #ffb61c;
  --amber-tint: #fdefc8;
  --green: #003264;
  --green2: #0a3f78;
  --gold: #f0a500;
  --magenta: #e84b4b;
  --love: #e84b4b;
  --life: #3b82f6;
  --laughter: #f0a500;
  --learning: #16a34a;
  --leadership: #7c3aed;
  --success: #15803d;
  --success-tint: #e3f4e8;
  --danger: #b42318;
  --danger-tint: #fde7e4;
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Sacramento", "Brush Script MT", cursive;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-large: 22px;
  --shadow-card: 0 12px 32px rgba(0, 26, 56, .08);
  --shadow-lift: 0 30px 60px rgba(0, 26, 56, .18);
}

html { background: var(--mist); }
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans) !important;
}
body {
  color: var(--ink);
  background: var(--mist);
}
::selection { color: #fff; background: var(--navy-raised); }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--amber) !important;
  outline-offset: 3px !important;
}

/* Five-L signature: always Love, Life, Laughter, Learning, Leadership. */
.member-topbar,
.campaign-header,
.ops-hub > header,
.scanner-app > header,
.premium-sidebar,
.sidebar {
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg,
    var(--love) 0 20%, var(--life) 20% 40%, var(--laughter) 40% 60%,
    var(--learning) 60% 80%, var(--leadership) 80% 100%) 1 !important;
}

h1, h2, h3,
.admin-head h2,
.crm-greeting h3,
.ops-panel h3,
.security-audit h3,
.review-record header h3,
.login-card h2,
.workspace-login h1 {
  color: var(--ink);
  font-family: var(--font-display) !important;
  letter-spacing: -.035em !important;
}
.eyebrow,
.campaign-kicker,
.nav-label {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
}
.eyebrow::before { background: var(--amber) !important; }

/* Buttons and controls */
.btn,
.campaign-continue,
.campaign-form-panel .btn,
.login-card .btn,
.workspace-login .btn,
.admin .btn.secondary {
  min-height: 52px;
  padding: 13px 22px;
  border: 1px solid var(--amber) !important;
  border-radius: var(--radius-control) !important;
  color: var(--ink) !important;
  background: var(--amber) !important;
  box-shadow: 0 4px 0 #b87900 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.btn:hover,
.campaign-continue:hover,
.campaign-form-panel .btn:hover,
.login-card .btn:hover,
.workspace-login .btn:hover,
.admin .btn.secondary:hover {
  color: var(--ink) !important;
  background: var(--amber-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #b87900 !important;
}
.btn:active,
.campaign-continue:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #b87900 !important;
}
.btn.secondary {
  border-color: var(--navy) !important;
  color: #fff !important;
  background: var(--navy) !important;
  box-shadow: none !important;
}
.btn.secondary:hover { color: #fff !important; background: var(--navy-raised) !important; }
.btn.ghost,
.admin .btn.ghost {
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.btn.ghost:hover { background: var(--navy-tint) !important; }
.btn.danger { border-color: var(--danger) !important; color: var(--danger) !important; background: var(--danger-tint) !important; box-shadow: none !important; }
.btn:disabled { border-color: var(--line) !important; color: #7b8494 !important; background: #e8ebf0 !important; box-shadow: none !important; }

.input,
.field input,
.field select,
.field textarea,
.admin-search input,
.table-toolbar input,
.ops-toolbar input,
.login-card input,
.workspace-login input {
  min-height: 52px;
  border: 1.5px solid var(--field-border) !important;
  border-radius: var(--radius-control) !important;
  color: var(--ink) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.input:hover,
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--navy) !important; }
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 50, 100, .13) !important;
}
.field label { color: var(--ink) !important; font-weight: 600 !important; }

/* Member journey */
.member-topbar {
  background: var(--navy-deep) !important;
  box-shadow: 0 8px 28px rgba(0, 26, 56, .18);
}
.member-shell { background: var(--mist); }
.portal-card,
.card,
.member-review,
.headshot-control,
.household-section,
.family-attendee-row {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
.portal-card::before { background: var(--amber) !important; }
.stepper i { background: #c8d0dc !important; }
.stepper i.on { background: var(--amber) !important; }
.profile-section-title {
  border-left-color: var(--amber) !important;
  background: var(--mist) !important;
}
.choice { border-color: var(--line) !important; }
.choice.active { color: #fff !important; background: var(--navy) !important; }
.notice { border-left: 4px solid var(--amber); background: var(--amber-tint) !important; }
.notice.green { border-left-color: var(--success); background: var(--success-tint) !important; }
.notice.red { border-left-color: var(--danger); background: var(--danger-tint) !important; }
.headshot-frame { box-shadow: 0 0 0 2px var(--amber), 0 10px 24px rgba(0, 26, 56, .12) !important; }
.remove-household { color: var(--danger) !important; }
.identity-result,
.identity-panel { border-left-color: var(--amber) !important; background: var(--mist) !important; }
.identity-result span,
.identity-panel span { color: var(--navy) !important; }
.survey-invitation { border-color: var(--line) !important; background: linear-gradient(140deg, var(--navy-tint), #fff) !important; }

/* Campaign landing and verification entrance */
.campaign-welcome-header {
  justify-content: flex-start !important;
  padding-inline: clamp(24px, 5vw, 72px) !important;
}
.campaign-welcome-header .campaign-wordmark {
  width: clamp(96px, 9vw, 118px) !important;
}
.campaign-form-stage .campaign-header {
  height: 82px !important;
  padding: 10px clamp(18px, 5vw, 64px) !important;
  background: var(--navy-deep) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 8px 28px rgba(0, 26, 56, .2);
}
.campaign-form-stage .campaign-header .campaign-wordmark {
  width: 104px !important;
}
.campaign-form-stage .campaign-header .campaign-wordmark img,
.member-topbar .campaign-wordmark img {
  max-height: 48px !important;
}
.member-topbar {
  min-height: 78px !important;
  height: 78px !important;
  padding: 10px clamp(16px, 4vw, 38px) !important;
}
.member-topbar .campaign-wordmark {
  width: 104px !important;
  flex: 0 0 104px !important;
}
.member-topbar .member-wordmark {
  gap: 18px !important;
}
.member-topbar .member-care-title {
  margin-left: 0 !important;
  padding-left: 18px !important;
  font-size: 12px !important;
}
.campaign-welcome .campaign-shade,
.campaign-form-stage .campaign-shade {
  background: linear-gradient(rgba(0, 26, 56, .45), rgba(0, 26, 56, .72)) !important;
}
.campaign-welcome-copy h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.055em !important;
}
.campaign-welcome-copy h1 span { color: var(--amber) !important; }
.campaign-typed {
  border-color: var(--amber) !important;
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
}
.campaign-continue {
  border-color: var(--amber) !important;
  background: var(--amber) !important;
}
.campaign-survey-link { color: #fff; text-underline-offset: 5px; }
.campaign-form-panel,
.login-card,
.workspace-login > section {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: var(--radius-large) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--shadow-lift) !important;
}
.campaign-form-panel .campaign-kicker,
.login-card .eyebrow { color: var(--navy) !important; }

/* Wallet preview remains card-like and uses the shared brand hierarchy. */
.youcount-card-preview {
  border: 1px solid rgba(240, 165, 0, .55) !important;
  box-shadow: 0 20px 44px rgba(0, 26, 56, .22) !important;
}
.apple-wallet-button,
.google-wallet-button { min-height: 52px; border-radius: var(--radius-control) !important; }

/* Admin and operational CRM */
.admin {
  color: var(--ink);
  background: var(--mist) !important;
  font-family: var(--font-sans) !important;
}
.sidebar,
.admin .premium-sidebar {
  background: var(--navy-deep) !important;
  box-shadow: 8px 0 30px rgba(0, 26, 56, .12);
}
.admin-brand > b { font-family: var(--font-display) !important; letter-spacing: -.02em !important; }
.sidebar .nav-label { color: #aeb9cc !important; }
.sidebar .nav-btn { color: #e8edf5 !important; border-radius: var(--radius-control) !important; }
.sidebar .nav-btn:hover { background: rgba(255, 255, 255, .08) !important; }
.sidebar .nav-btn.active {
  color: #fff !important;
  background: var(--navy-raised) !important;
  box-shadow: inset 4px 0 var(--amber);
}
.admin-main { color: var(--ink); background: var(--mist); }
.metric,
.review-record,
.table-wrap,
.empty-queue,
.ops-panel,
.people-list-card,
.survey-visual,
.survey-feedback-panel,
.checkin-ledger,
.scanner-card,
.checkin-summary,
.crm-summary-cards article,
.ops-toolbar,
.service-progress {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
.metric-icon { color: var(--navy) !important; background: var(--navy-tint) !important; }
.metric:nth-child(3n+2) .metric-icon { color: #8a5b00 !important; background: var(--amber-tint) !important; }
.metric:nth-child(3n+3) .metric-icon { color: var(--success) !important; background: var(--success-tint) !important; }
.progress { background: #e3e7ed !important; }
.progress i,
.progress-track i { background: linear-gradient(90deg, var(--navy), var(--life)) !important; }
.badge { color: var(--navy) !important; background: var(--navy-tint) !important; }
.badge.warn { color: #744c00 !important; background: var(--amber-tint) !important; }
.badge.red { color: var(--danger) !important; background: var(--danger-tint) !important; }
.admin .notice.green { border-left-color: var(--success) !important; background: var(--success-tint) !important; }
.mobile-admin-nav { background: var(--navy-deep) !important; }

/* Staff app launcher: glass stays, colours now belong to one system. */
.ops-hub { color: #fff !important; background: var(--navy-deep) !important; font-family: var(--font-sans) !important; }
.ops-hub::before {
  background: linear-gradient(rgba(0, 26, 56, .70), rgba(0, 26, 56, .86)),
    url("assets/staff-community-login-v1.webp") center/cover no-repeat !important;
}
.ops-hub > header { background: rgba(0, 26, 56, .82) !important; }
.ops-hub .ops-hub-intro h1 { font-family: var(--font-display) !important; letter-spacing: -.035em !important; }
.ops-hub .ops-app-launcher {
  border-color: rgba(255, 255, 255, .25) !important;
  background: linear-gradient(145deg, rgba(10, 63, 120, .64), rgba(0, 26, 56, .74)) !important;
}
.ops-hub .ops-app i { background: var(--navy-raised) !important; }
.ops-hub .ops-app.blue i { border-bottom: 4px solid var(--life) !important; background: var(--navy-raised) !important; }
.ops-hub .ops-app.rose i { border-bottom: 4px solid var(--love) !important; background: var(--navy-raised) !important; }
.ops-hub .ops-app.gold i { border-bottom: 4px solid var(--laughter) !important; background: var(--navy-raised) !important; }
.ops-hub .ops-app.mint i { border-bottom: 4px solid var(--learning) !important; background: var(--navy-raised) !important; }
.ops-hub .ops-app h2 { font-family: var(--font-display) !important; letter-spacing: -.02em !important; }

/* Survey analytics */
.survey-visual h3,
.survey-feedback-panel h3,
.health-dashboard h2 { font-family: var(--font-display) !important; }
.survey-bar i,
.health-bar i { background: var(--navy) !important; }
.survey-bar:nth-child(5n+2) i { background: var(--life) !important; }
.survey-bar:nth-child(5n+3) i { background: var(--amber) !important; }
.survey-bar:nth-child(5n+4) i { background: var(--learning) !important; }
.survey-bar:nth-child(5n+5) i { background: var(--leadership) !important; }

@media (max-width: 900px) {
  .admin-main { background: var(--mist); }
}
@media (max-width: 580px) {
  .campaign-welcome-header {
    justify-content: flex-start !important;
    padding: 12px 18px !important;
  }
  .campaign-welcome-header .campaign-wordmark {
    width: 88px !important;
  }
  .campaign-form-stage .campaign-header {
    height: 70px !important;
    padding: 8px 14px !important;
  }
  .campaign-form-stage .campaign-header .campaign-wordmark {
    width: 86px !important;
  }
  .campaign-form-stage .campaign-header .campaign-wordmark img,
  .member-topbar .campaign-wordmark img {
    max-height: 42px !important;
  }
  .campaign-form-stage {
    padding-top: 92px !important;
  }
  .member-topbar {
    min-height: 68px !important;
    height: 68px !important;
    padding: 8px 12px !important;
  }
  .member-topbar .campaign-wordmark {
    width: 84px !important;
    flex-basis: 84px !important;
  }
  .member-topbar .member-wordmark { gap: 10px !important; }
  .member-topbar .member-care-title {
    padding-left: 10px !important;
    font-size: 10px !important;
  }
  .app:has(.member-topbar) .member-shell { padding-top: 86px !important; }
  .campaign-welcome-copy h1 {
    max-width: 100%;
    font-size: clamp(38px, 10.7vw, 44px) !important;
    letter-spacing: -.055em !important;
    white-space: normal !important;
  }
  .portal-card, .card { border-radius: 12px !important; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
  .btn, .choice, .portal-card, .card { border: 1px solid CanvasText !important; }
}