/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

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

/* Skip to content link (accessibility) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* Flash message auto-dismiss fade-out */
.flash-fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ============================================
   EDUKIDS PLAYFUL THEME - CSS Custom Properties
   ============================================ */

:root {
  /* Primary Colors */
  --color-sunny-yellow: #FFD93D;
  --color-coral-orange: #FF6B6B;
  --color-sky-blue: #4ECDC4;
  --color-soft-purple: #7C3AED;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  --gradient-secondary: linear-gradient(135deg, #4ECDC4 0%, #44A3AA 100%);
  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #8B5CF6 100%);

  /* Backgrounds */
  --bg-page: #FFFDF7;
  --bg-card: #FFFFFF;
  --bg-soft: #FFF5EE;
  --bg-soft-alt: #FEF3C7;

  /* Borders */
  --border-card: #FFE4E1;
  --border-default: #FECACA;

  /* Text Colors */
  --text-dark: #1F2937;
  --text-body: #374151;
  /* WCAG AA text tokens (deep-QA 2026-09-24, vis-004). Every value is
     >= 4.5:1 on white AND on the tints it sits on (#F3F4F6, #FFF5EE,
     #FEF3C7, #ECFDF5/#D1FAE5, #FEF2F2/#FEE2E2). Use these for TEXT; the
     bright brand/status hues stay for fills, borders and icons. Not for
     dark surfaces (navy footer keeps #9CA3AF). */
  --text-muted: #5F6673;       /* was #6B7280 (4.39:1 on #F3F4F6) */
  --text-subtle: #636A77;      /* was #9CA3AF (2.53:1 on white) */
  --text-success: #047857;     /* was #059669 / #10B981 */
  --text-success-alt: #15803D; /* was #16A34A */
  --text-warning: #B45309;     /* was #D97706 / #F59E0B */
  --text-orange: #C2410C;      /* was #EA580C */
  --text-danger: #B91C1C;      /* was #DC2626 (3.95:1 on #FEE2E2) */
  --text-coral: #C93A3A;       /* brand coral #FF6B6B as text was 2.78:1 */
  --text-teal: #0F766E;        /* brand teal #4ECDC4 as text was 1.93:1 */
  --text-violet: #7C3AED;      /* was #8B5CF6 */
  --fill-coral-strong: #D23F3F; /* solid coral behind white text (4.64:1) */

  /* Shadows */
  --shadow-card: 0 8px 30px rgba(255, 107, 107, 0.12);
  --shadow-card-hover: 0 12px 40px rgba(255, 107, 107, 0.2);

  /* Border Radius */
  --radius-button: 50px;
  --radius-card: 24px;
  --radius-input: 16px;
  --radius-small: 12px;
}

/* ============================================
   BASE STYLES
   ============================================ */

/* Ensure dialogs don't create overlays when closed */
dialog:not([open]) {
  display: none !important;
}

/* Style dialog backdrop */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Turbo progress bar styling */
.turbo-progress-bar {
  height: 3px;
  background: var(--gradient-primary);
}

/* Reset any potential overlay issues */
body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure clickability */
* {
  pointer-events: auto;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Page Backgrounds */
.bg-page { background: var(--bg-page); }
.bg-soft { background: var(--bg-soft); }
.bg-card { background: var(--bg-card); }

/* Gradient Backgrounds */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }

/* Card Styles */
.card-playful {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}

.card-playful:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-coral-orange);
}

/* Button Styles */
.btn-primary {
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--gradient-primary);
  color: var(--text-dark);
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}

.btn-secondary {
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: 2px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-dark);
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  border-color: var(--color-coral-orange);
  background: var(--bg-soft);
}

.btn-coral {
  padding: 10px 20px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--color-coral-orange);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-sky {
  padding: 10px 20px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--color-sky-blue);
  color: white;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Header Styles */
.header-playful {
  background: var(--gradient-primary);
  padding: 20px 16px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  color: var(--text-dark);
}

/* Form Input Styles */
.input-playful {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-input);
  border: 2px solid var(--border-card);
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.input-playful:focus {
  outline: none;
  border-color: var(--color-coral-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

/* Badge Styles */
.badge-yellow {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-sunny-yellow);
  color: var(--text-dark);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-coral {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-coral-orange);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-sky {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-sky-blue);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.badge-purple {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-soft-purple);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* Alert Styles */
.alert-success {
  padding: 12px 16px;
  background: #ECFDF5;
  border: 2px solid var(--color-sky-blue);
  border-radius: var(--radius-small);
  color: var(--text-success);
}

.alert-error {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 2px solid var(--color-coral-orange);
  border-radius: var(--radius-small);
  color: var(--text-danger);
}

.alert-warning {
  padding: 12px 16px;
  background: var(--bg-soft-alt);
  border: 2px solid var(--color-sunny-yellow);
  border-radius: var(--radius-small);
  color: var(--text-warning);
}

/* Navigation Pills */
.nav-pill {
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nav-pill-active {
  background: var(--gradient-primary);
  color: var(--text-dark);
}

.nav-pill-inactive {
  background: var(--bg-soft);
  color: var(--text-body);
}

.nav-pill-inactive:hover {
  background: var(--color-sunny-yellow);
  color: var(--text-dark);
}

/* Avatar Circle */
.avatar-playful {
  width: 44px;
  height: 44px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  font-weight: 800;
  font-size: 16px;
}

/* Links */
.link-playful {
  color: var(--color-soft-purple);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.link-playful:hover {
  color: var(--color-coral-orange);
}

/* ============================================
   KINDI REUSABLE COMPONENT CLASSES
   --------------------------------------------
   Issue #1 "freeze + pilot": shared component
   classes derived from the repeated inline-style
   patterns across app/views. Built on the existing
   CSS custom properties above. Use these instead of
   adding new inline `style="..."` (see the
   inline-style ratchet guard spec). Migrate more
   pages onto these and ratchet the budget down.

   NOTE: `.kindi-card` is already taken by the
   marketing phone-mockup further down this file, so
   the generic card here is `.kindi-surface`.
   ============================================ */

/* Full-height centred page wrapper (e.g. auth screens). */
.kindi-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-page);
  padding: 20px;
  font-family: 'Nunito', sans-serif;
}

/* White rounded card surface with the standard soft shadow + border. */
.kindi-surface {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--border-card);
}

/* Primary pill button / link (sunny gradient). */
.kindi-btn {
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--gradient-primary);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

/* Secondary pill button / link (outlined, white fill). */
.kindi-btn-secondary {
  padding: 12px 24px;
  border-radius: var(--radius-button);
  border: 2px solid var(--border-card);
  background: var(--bg-card);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

/* FE-001 (a11y): explicit, on-brand keyboard focus ring for the pill buttons so
   focus is unmistakable and consistent with .kindi-input (appearance otherwise
   unchanged — mouse users see no difference via :focus-visible). */
.kindi-btn:focus-visible,
.kindi-btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.45);
}

/* Standard text input / select / number field (rounded, soft border). */
.kindi-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-input);
  border: 2px solid var(--border-card);
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  outline: none;
  background: var(--bg-card);
  box-sizing: border-box;
}

/* FE-001 (a11y): the bare `outline: none` above removed the only visible focus
   indicator, so keyboard users could not see which field was active. Restore a
   clear, brand-coloured focus ring (matching the legacy .input-playful:focus
   pattern but with a stronger 3px ring) without changing the resting look. */
.kindi-input:focus,
.kindi-input:focus-visible {
  border-color: var(--color-coral-orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.35);
}

/* Form field label. */
.kindi-field-label {
  display: block;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
  font-family: 'Nunito', sans-serif;
}

/* Muted helper / secondary text. */
.kindi-muted {
  color: var(--text-muted);
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
}

/* Section heading + empty-state card, extracted so new sections don't have to
   reach for inline styles (see spec/quality/inline_style_budget_spec.rb). */
.kindi-section-heading {
  font-size: 20px;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 16px;
}

.kindi-empty-card {
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 32px;
}

.kindi-empty-card .kindi-muted {
  margin: 0;
  font-size: 14px;
}

/* Inline error box (validation / alert). */
.kindi-error-box {
  background: #FEF2F2;
  border: 2px solid var(--color-coral-orange);
  border-radius: var(--radius-input);
  padding: 16px;
  margin-bottom: 20px;
  color: var(--text-danger);
}

/* ---- Auth screen layout (devise sessions/passwords) ----
   Page-scoped helpers shared by the two-column auth pages.
   Kept narrow because this split-with-illustration layout is
   specific to the unauthenticated auth screens. */
.kindi-auth-row {
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: 900px;
  width: 100%;
}

.kindi-auth-form {
  flex: 1;
  max-width: 400px;
}

.kindi-auth-logo-link {
  text-decoration: none;
}

.kindi-auth-wordmark {
  font-size: 28px;
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 32px;
}

.kindi-auth-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.kindi-auth-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 32px;
}

.kindi-auth-field {
  margin-bottom: 24px;
}

.kindi-auth-field--tight {
  margin-bottom: 20px;
}

.kindi-auth-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-dark);
}

/* Pill text input used on the auth screens. */
.kindi-auth-input {
  width: 100%;
  padding: 14px 20px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-button);
  font-size: 16px;
  box-sizing: border-box;
  font-family: 'Nunito', sans-serif;
}

/* Full-width pill submit (gradient) used on the auth screens. */
.kindi-auth-submit {
  width: 100%;
  padding: 16px;
  background: var(--gradient-primary);
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-button);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
}

.kindi-auth-alert {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 2px solid var(--color-coral-orange);
  border-radius: var(--radius-input);
  margin-bottom: 20px;
  color: var(--text-danger);
  font-size: 14px;
  font-weight: 600;
}

.kindi-auth-notice {
  padding: 12px 16px;
  background: #ECFDF5;
  border: 2px solid var(--color-sky-blue);
  border-radius: var(--radius-input);
  margin-bottom: 20px;
  color: var(--text-success);
  font-size: 14px;
  font-weight: 600;
}

.kindi-auth-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

/* FE-008: review-request card (teacher/parent dashboards) — on-palette. */
.review-prompt {
  background: #FFF5EE;
  border: 2px solid #FFE4E1;
  border-radius: 16px;
  padding: 16px 20px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.review-prompt-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-prompt-icon {
  font-size: 28px;
}

.review-prompt-title {
  color: #1F2937;
  font-weight: 800;
  font-size: 16px;
}

.review-prompt-sub {
  color: var(--text-muted);
  font-size: 13px;
}

.review-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-prompt-actions form {
  margin: 0;
}

.review-prompt-cta {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  color: #1F2937;
  border-radius: 50px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}

.review-prompt-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
}

/* FE-007: admin dashboard "register not taken yet" state (neutral, not red). */
.glance-not-taken {
  text-align: center;
  padding: 12px;
  margin-bottom: 12px;
  background: #F9FAFB;
  border-radius: 14px;
}

.glance-not-taken-title {
  font-size: 20px;
  font-weight: 800;
  color: #374151;
}

.glance-not-taken-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 10px;
}

.glance-not-taken-cta {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  color: #1F2937;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}

.glance-rate-note {
  font-weight: 600;
}

/* FE-005: group headings on the parent notification-preferences list. */
.notif-pref-group {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 16px 8px;
}

/* DX-008: "Resend link" in the admin email-confirmation reminder. */
.confirm-resend-form {
  display: inline;
  margin: 0;
}

.confirm-resend-btn {
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid #93C5FD;
  background: #fff;
  color: #1D4ED8;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

.confirm-resend-btn:focus-visible {
  outline: 2px solid #1D4ED8;
  outline-offset: 2px;
}

/* Text link on the auth screens (Forgot password / Back to sign in). */
.kindi-auth-link {
  color: #B91C1C;
  text-decoration: underline;
  font-weight: 700;
}

/* SEO-010 / QA-009: sign-in heading — ONE <h1> ("Welcome to Kindi!"), the brand
   word a gradient link home. It used to be two separate <h1> elements. */
.kindi-auth-welcome {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 40px;
}

.kindi-auth-welcome-brand {
  display: block;
  margin-top: 8px;
  font-size: 36px;
  text-decoration: none;
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kindi-auth-illustration {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kindi-auth-illustration-card {
  width: 280px;
  height: 400px;
  background: var(--gradient-primary);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(255, 107, 107, 0.3);
  border: 4px solid var(--border-card);
}

.kindi-auth-illustration-emoji {
  font-size: 80px;
  margin-bottom: 20px;
}

.kindi-auth-illustration-title {
  color: var(--text-dark);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}

.kindi-auth-illustration-sub {
  color: var(--text-body);
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .kindi-auth-row {
    flex-direction: column;
    gap: 40px;
  }
  .kindi-auth-illustration {
    display: none;
  }
}

/* ---- Re-enrollment campaigns (page-scoped) ----
   Small button-size variants for the campaigns screens.
   They sit on top of .kindi-btn / .kindi-btn-secondary and
   only adjust padding / font-size, preserving the original
   inline appearance. */
.rec-btn-sm { padding: 10px 18px; }
.rec-btn-xs { padding: 8px 16px; font-size: 13px; }
.rec-empty-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  font-size: inherit;
}
.rec-list { display: flex; flex-direction: column; gap: 12px; }
.rec-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.08);
  border: 2px solid var(--border-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.rec-card-title { font-size: 16px; font-weight: 800; color: var(--text-dark); }
.rec-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.rec-card-actions { display: flex; align-items: center; gap: 10px; }
.rec-status {
  padding: 4px 12px;
  border-radius: var(--radius-button);
  font-size: 11px;
  font-weight: 800;
}
.rec-empty {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--border-card);
}
.rec-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.rec-empty-text { color: var(--text-muted); font-size: 16px; margin: 0; }
.rec-form { max-width: 600px; }
.rec-form-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--border-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rec-error-title { font-weight: 800; color: var(--text-danger); margin-bottom: 8px; }
.rec-error-list { margin: 0; padding-left: 20px; color: var(--text-danger); }
.rec-hint { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; font-family: 'Nunito', sans-serif; }
.rec-submit-row { padding-top: 8px; }

/* Stats Card */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  padding: 20px;
  border: 2px solid var(--border-card);
  box-shadow: var(--shadow-card);
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
}

/* Dialog Styles */
dialog {
  border: 2px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(255, 107, 107, 0.2);
}

/* Table Styles */
.table-playful {
  width: 100%;
  border-collapse: collapse;
}

.table-playful th {
  background: var(--bg-soft);
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--text-dark);
  border-bottom: 2px solid var(--border-card);
}

.table-playful td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-card);
  color: var(--text-body);
}

.table-playful tr:hover {
  background: var(--bg-soft);
}

/* ============================================
   LANDING PAGE STYLES
   ============================================ */

/* --- Sticky Nav --- */
.landing-nav {
  position: fixed;
  /* FE-001: the cookie banner is fixed at top:0, and body{padding-top} cannot
     move an element that is itself fixed — so the banner sat ON the nav and
     intercepted clicks on "Start your free trial" (caught by
     landing_page_spec "CTA links to sign up page"). The JS sets
     --cookie-banner-height while the banner is up, 0 otherwise. */
  top: var(--cookie-banner-height, 0px);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: rgba(255, 253, 247, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--border-card);
}

/* Reserves the fixed .landing-nav's height in normal flow for the public
   sub-pages, which open with a plain section instead of the home hero (whose
   140px top padding already sits under the nav). Rendered only when the nav
   partial is given spacer: true. */
.landing-nav-spacer {
  height: 70px;
}

@media (max-width: 768px) {
  /* The nav is shorter once the links collapse behind the toggle. */
  .landing-nav-spacer {
    height: 60px;
  }
}

.landing-nav-logo {
  font-weight: 800;
  font-size: 22px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

.landing-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.landing-nav-links a {
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-body);
  transition: color 0.2s;
}

.landing-nav-links a:hover {
  color: var(--color-coral-orange);
}

.landing-nav-cta {
  padding: 10px 24px;
  border-radius: var(--radius-button);
  background: var(--gradient-primary);
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.landing-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}

/* --- Mobile Nav Toggle --- */
.landing-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.landing-nav-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.2s;
}

@media (max-width: 768px) {
  .landing-nav-toggle {
    display: flex;
  }

  .landing-nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(255, 253, 247, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 32px 24px;
    border-bottom: 2px solid var(--border-card);
    gap: 16px;
  }

  .landing-nav-links.open {
    display: flex;
  }

  .landing-nav-links .landing-nav-anchor {
    display: block !important;
  }

  .landing-nav-links .landing-nav-cta {
    text-align: center;
  }
}

/* --- Hero --- */
.landing-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-primary);
  padding: 140px 24px 80px;
  text-align: center;
}

.landing-hero::before,
.landing-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  pointer-events: none;
}

.landing-hero::before {
  width: 400px;
  height: 400px;
  background: var(--color-sky-blue);
  top: -120px;
  left: -100px;
}

.landing-hero::after {
  width: 300px;
  height: 300px;
  background: var(--color-soft-purple);
  bottom: -80px;
  right: -60px;
}

.landing-hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.landing-hero h1 {
  font-size: 52px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 16px;
  line-height: 1.15;
}

.landing-hero p {
  font-size: 20px;
  color: var(--text-body);
  margin: 0 0 36px;
  font-weight: 600;
}

.landing-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-btn-white {
  display: inline-block;
  padding: 16px 36px;
  border-radius: var(--radius-button);
  background: #fff;
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}

.landing-btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.landing-btn-outline {
  display: inline-block;
  padding: 16px 36px;
  border-radius: var(--radius-button);
  background: transparent;
  border: 2px solid var(--text-dark);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  transition: background 0.2s;
}

.landing-btn-outline:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* --- Stats Bar --- */
.landing-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 28px 24px;
  background: var(--bg-soft);
  flex-wrap: wrap;
}

.landing-stat {
  text-align: center;
}

.landing-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
}

.landing-stat-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}

/* --- Section Common --- */
.landing-section {
  padding: 80px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.landing-section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 12px;
}

.landing-section-subtitle {
  text-align: center;
  font-size: 18px;
  color: var(--text-muted);
  margin: 0 0 48px;
  font-weight: 600;
}

/* --- Features Grid --- */
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.landing-feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  box-shadow: var(--shadow-card);
}

.landing-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-coral-orange);
}

.landing-feature-icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.landing-feature-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.landing-feature-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- How It Works --- */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.landing-step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--text-dark);
  font-weight: 800;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.landing-step h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.landing-step p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* --- Pricing Section --- */
.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.landing-price-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: var(--shadow-card);
}

.landing-price-card.popular {
  border-color: var(--color-coral-orange);
  transform: scale(1.04);
  box-shadow: 0 12px 40px rgba(255, 107, 107, 0.25);
}

.landing-popular-badge {
  display: inline-block;
  padding: 4px 16px;
  background: var(--color-coral-orange);
  color: #1F2937;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

.landing-price-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.landing-price-amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 8px 0 4px;
}

.landing-price-period {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
  font-weight: 600;
}

.landing-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
}

.landing-price-features li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-body);
  border-bottom: 1px solid var(--border-card);
}

.landing-price-features li:last-child {
  border-bottom: none;
}

.landing-price-cta {
  display: block;
  width: 100%;
  padding: 14px 0;
  border-radius: var(--radius-button);
  background: var(--gradient-primary);
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.landing-price-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
}

/* --- CTA Banner --- */
.landing-cta-banner {
  background: var(--gradient-primary);
  border-radius: var(--radius-card);
  padding: 60px 32px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px;
}

.landing-cta-banner h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 12px;
}

.landing-cta-banner p {
  font-size: 18px;
  color: var(--text-body);
  margin: 0 0 28px;
  font-weight: 600;
}

/* --- Footer --- */
.landing-footer {
  background: #1F2937;
  padding: 48px 24px 24px;
  color: #D1D5DB;
}

.landing-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}

.landing-footer-brand {
  max-width: 280px;
}

.landing-footer-logo {
  font-weight: 800;
  font-size: 22px;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-footer-brand p {
  font-size: 14px;
  /* WCAG AA: #6B7280 on the navy footer was ~3.0:1; #9CA3AF is ~5.8:1 (deep-QA 2026-07-08) */
  color: #9CA3AF; /* navy footer */
  margin: 8px 0 0;
  line-height: 1.6;
}

.landing-footer-col h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px;
}

.landing-footer-col a {
  display: block;
  color: #9CA3AF; /* WCAG AA on navy footer (deep-QA 2026-07-08) */
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.landing-footer-col a:hover {
  color: var(--color-coral-orange);
}

.landing-footer-bottom {
  max-width: 1100px;
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid #374151;
  text-align: center;
  font-size: 13px;
  color: #9CA3AF; /* WCAG AA on navy footer (deep-QA 2026-07-08) */
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .landing-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-price-card.popular {
    transform: scale(1.02);
  }
}

@media (max-width: 768px) {
  .landing-hero h1 {
    font-size: 36px;
  }
  .landing-hero {
    padding: 120px 20px 60px;
  }
  .landing-stats {
    gap: 24px;
  }
  .landing-section-title {
    font-size: 28px;
  }
  .landing-features-grid {
    grid-template-columns: 1fr;
  }
  .landing-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .landing-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .landing-price-card.popular {
    transform: none;
  }
  .landing-cta-banner {
    margin-left: 16px;
    margin-right: 16px;
  }
  .landing-footer-inner {
    flex-direction: column;
  }
  .landing-testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Testimonials */
.landing-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.landing-testimonial-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  border: 2px solid var(--border-soft, #FFE4E1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.landing-testimonial-quote {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  font-style: italic;
  margin: 0 0 20px;
}
.landing-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.landing-testimonial-author strong {
  color: #1F2937;
  font-weight: 700;
}
.landing-testimonial-author span {
  color: var(--text-muted);
  font-size: 14px;
}

/* Floating WhatsApp Button */
.landing-whatsapp-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 1000;
  text-decoration: none;
}
.landing-whatsapp-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}

@media (max-width: 960px) {
  .landing-testimonials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   TUTORIALS DRAWER
   ============================================ */

.tutorials-help-btn {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--text-dark);
  font-size: 22px;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.35);
  z-index: 59;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.tutorials-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.tutorials-overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

.tutorials-drawer {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  height: 100vh;
  background: var(--bg-page);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
  transition: right 0.3s ease;
}
.tutorials-drawer-open {
  right: 0;
}

.tutorials-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  background: var(--gradient-primary);
}
.tutorials-drawer-header h2 {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
}
.tutorials-close-btn {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.tutorials-close-btn:hover {
  background: rgba(255,255,255,0.4);
}

.tutorials-search-wrap {
  padding: 16px 24px 8px;
  position: relative;
}
.tutorials-search {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-input);
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  background: var(--bg-card);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.tutorials-search:focus {
  border-color: var(--color-coral-orange);
}
/* vis-008: visible keyboard focus ring (the rule above sets outline: none). */
.tutorials-search:focus-visible {
  outline: 2px solid #C93A3A;
  outline-offset: 2px;
}
.tutorials-search-clear {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

.tutorials-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

.tutorials-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-family: 'Nunito', sans-serif;
}

/* Category accordion */
.tutorials-category {
  margin-bottom: 8px;
}
.tutorials-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
  transition: background 0.2s;
}
.tutorials-category-header:hover {
  background: var(--bg-soft);
}
.tutorials-category-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s;
  color: var(--text-muted);
}
.tutorials-category-open .tutorials-category-arrow {
  transform: rotate(180deg);
}
.tutorials-category-items {
  display: none;
  padding: 4px 0 0 0;
}
.tutorials-category-open .tutorials-category-items {
  display: block;
}

/* Tutorial cards */
.tutorials-tutorial {
  margin: 4px 0;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-small);
  background: var(--bg-card);
  overflow: hidden;
}
.tutorials-tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.tutorials-tutorial-header:hover {
  background: var(--bg-soft);
}
.tutorials-tutorial-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.tutorials-tutorial-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.tutorials-tutorial-arrow {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 12px;
}
.tutorials-tutorial-open .tutorials-tutorial-arrow {
  transform: rotate(90deg);
}
.tutorials-tutorial-steps {
  display: none;
  padding: 0 16px 16px;
}
.tutorials-tutorial-open .tutorials-tutorial-steps {
  display: block;
}
.tutorials-tutorial-steps ol {
  margin: 0;
  padding: 0 0 0 20px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.7;
}
.tutorials-tutorial-steps li {
  margin-bottom: 6px;
}
.tutorials-step-link {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-coral-orange);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.8rem;
}
.tutorials-step-link:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .tutorials-drawer {
    width: 100vw;
    right: -100vw;
  }
  .tutorials-drawer.tutorials-drawer-open {
    right: 0;
  }
  .tutorials-help-btn {
    /* On mobile the help FAB has been replaced by an in-sidebar
       "Help & Tutorials" entry that fires the same `tutorials:open`
       event. Hiding the FAB removes a persistent collision with
       primary CTAs in the bottom-right of forms and stat strips. */
    display: none;
  }
}
/* Public enrollment form — shared playful-theme components */

.enroll-page {
  min-height: 100vh;
  background: #FFFDF7;
  font-family: 'Nunito', sans-serif;
}

.enroll-header {
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  padding: 32px 16px;
  border-radius: 0 0 24px 24px;
  text-align: center;
}

.enroll-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #1F2937;
  margin: 0;
}

.enroll-header p {
  color: #374151;
  margin: 8px auto 0;
  font-size: 16px;
  max-width: 600px;
}

.enroll-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

.enroll-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12);
  border: 2px solid #FFE4E1;
  margin-bottom: 20px;
}

.enroll-section-heading {
  font-size: 18px;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 16px;
}

.enroll-subheading {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 12px;
}

.enroll-subheading-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 13px;
}

.enroll-label {
  display: block;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 6px;
  font-size: 14px;
}

.enroll-field {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid #FFE4E1;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}

.enroll-field-textarea {
  min-height: 60px;
}

.enroll-field-file {
  padding: 8px;
}

.enroll-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
}

.enroll-row > div {
  flex: 1;
  min-width: 0;
}

.enroll-field-group {
  margin-bottom: 14px;
}

.enroll-field-group-last {
  margin-bottom: 0;
}

.enroll-divider {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #FFE4E1;
}

.enroll-btn-primary {
  padding: 14px 28px;
  border-radius: 50px;
  border: 0;
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  color: #1F2937;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  width: 100%;
}

.enroll-btn-secondary {
  padding: 10px 24px;
  border-radius: 50px;
  border: 2px solid #FFD93D;
  background: #FFFDF7;
  color: #1F2937;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

.enroll-btn-remove {
  padding: 6px 14px;
  border-radius: 50px;
  border: 2px solid #FF6B6B;
  background: #fff;
  color: var(--text-coral);
  font-weight: 700;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}

.enroll-error-block {
  padding: 12px 16px;
  background: #FEF2F2;
  border: 2px solid #FF6B6B;
  border-radius: 16px;
  margin-bottom: 16px;
  color: var(--text-danger);
  font-weight: 600;
}

.enroll-error-block p {
  margin: 0 0 8px;
  font-weight: 800;
}

.enroll-error-block ul {
  margin: 0;
  padding-left: 20px;
}

.enroll-checkbox-row {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.enroll-checkbox-row-flush {
  margin-bottom: 0;
}

.enroll-checkbox {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.enroll-checkbox-label {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.enroll-choice-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.enroll-inline-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  min-width: 0;
}

.enroll-inline-choice-compact {
  font-size: 13px;
}

.enroll-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.enroll-field-followup {
  margin-top: 8px;
}

.enroll-media-consent {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #FFF7ED;
  border: 2px solid #FED7AA;
}

.enroll-media-consent-body {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 12px;
}

.enroll-declaration {
  margin-top: 6px;
  border-radius: 22px;
  border: 2px solid #FDE2D7;
  background: linear-gradient(180deg, #FFF8F3 0%, #FFFCFA 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.enroll-declaration-body {
  padding: 20px;
}

.enroll-declaration-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-coral);
}

.enroll-declaration-copy {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: #374151;
}

.enroll-declaration-copy:last-child {
  margin-bottom: 0;
}

.enroll-declaration-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.enroll-declaration-list li {
  position: relative;
  padding: 14px 16px 14px 46px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #FDE2D7;
  color: #374151;
  line-height: 1.65;
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.06);
}

.enroll-declaration-list li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.12);
}

.enroll-declaration-ack {
  margin: 0;
  padding: 18px 20px 20px;
  border-top: 1px solid #FDE2D7;
  background: rgba(255, 255, 255, 0.75);
}

.enroll-declaration-ack .enroll-checkbox-label {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.6;
}

.enroll-required {
  color: var(--text-coral);
}

.enroll-fee-notice {
  background: #FFF5EE;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
  border: 2px solid #FFE4E1;
}

.enroll-fee-notice p {
  margin: 0;
  color: #1F2937;
  font-weight: 700;
}

.enroll-fee-notice small {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  display: block;
}

.enroll-child-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.enroll-actions {
  margin-top: 10px;
}

.enroll-pickup-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.enroll-pickup-row > input[type="text"],
.enroll-pickup-row > input[type="tel"],
.enroll-pickup-upload {
  flex: 1 1 180px;
  min-width: 0;
}

.enroll-pickup-upload-label {
  display: block;
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.enroll-pickup-row .enroll-btn-remove {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .enroll-header {
    padding: 28px 16px 24px;
  }

  .enroll-header h1 {
    font-size: 24px;
    line-height: 1.2;
  }

  .enroll-header p {
    font-size: 15px;
  }

  .enroll-container {
    padding: 18px 12px 28px;
  }

  .enroll-card {
    padding: 18px 16px;
    border-radius: 20px;
  }

  .enroll-row {
    flex-direction: column;
    gap: 12px;
  }

  .enroll-choice-row {
    flex-direction: column;
    gap: 10px;
  }

  .enroll-option-grid {
    grid-template-columns: 1fr;
  }

  .enroll-actions .enroll-btn-secondary,
  .enroll-child-header .enroll-btn-remove,
  .enroll-pickup-row .enroll-btn-remove {
    width: 100%;
  }

  .enroll-pickup-row {
    gap: 12px;
  }

  .enroll-pickup-row > input[type="text"],
  .enroll-pickup-row > input[type="tel"],
  .enroll-pickup-upload,
  .enroll-pickup-row .enroll-btn-remove {
    flex: 1 1 100%;
  }

  .enroll-declaration-body {
    padding: 18px 16px;
  }

  .enroll-declaration-copy,
  .enroll-declaration-ack .enroll-checkbox-label {
    font-size: 14px;
  }

  .enroll-declaration-list li {
    padding: 13px 14px 13px 40px;
  }

  .enroll-declaration-list li::before {
    top: 17px;
    left: 14px;
    width: 12px;
    height: 12px;
  }

  .enroll-declaration-ack {
    padding: 16px;
  }
}

/* ============================================
   NOTIFICATION BELL DROPDOWN
   ============================================ */

.notification-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
  border: 2px solid #FFE4E1;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.notification-bell-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 999;
}

@media (min-width: 601px) {
  .notification-bell-backdrop {
    display: none !important;
  }
}

@media (max-width: 600px) {
  /* Pin to the viewport so the dropdown can't overflow the screen when
     the bell sits in the right side of a narrow header. */
  .notification-bell-dropdown {
    position: fixed;
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 80px);
  }
}

/* iOS Safari auto-zooms when an input has a computed font-size below 16px.
   Enforce 16px globally on form fields so focus never triggers a zoom. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  font-size: 16px;
}

/* ============================================
   LANDING PAGE — conversion sections (2026-06)
   Hero two-column + product mockup, honest trust
   bar, paper→digital comparison, and FAQ.
   ============================================ */

/* --- Hero: two-column with product preview --- */
.landing-hero-grid {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  text-align: left;
}

.landing-hero-grid .landing-hero-actions {
  justify-content: flex-start;
}

/* FE-006: trial reassurance under the hero CTA — plain dark text (was a
   white-on-orange pill at 1.81:1). */
.landing-hero .landing-hero-microcopy {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 14px 0 0;
}

.landing-hero-eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(31, 41, 55, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 7px 16px;
  border-radius: var(--radius-button);
  margin-bottom: 20px;
}

.landing-hero-visual {
  display: flex;
  justify-content: center;
}

/* --- Phone mockup (mirrors the real Kindi app UI) --- */
.kindi-phone {
  width: 280px;
  background: #1F2937;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 34px 70px rgba(31, 41, 55, 0.4);
}

.kindi-phone-screen {
  background: var(--bg-soft);
  border-radius: 34px;
  overflow: hidden;
  position: relative;
}

.kindi-app-header {
  background: var(--gradient-primary);
  padding: 26px 18px 22px;
  color: #fff;
}

.kindi-app-header .greet {
  font-size: 19px;
  font-weight: 800;
}

.kindi-app-header .sub {
  font-size: 12.5px;
  opacity: 0.92;
  font-weight: 600;
}

.kindi-app-body {
  padding: 14px;
}

.kindi-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.kindi-stat {
  background: #fff;
  border-radius: 16px;
  padding: 12px 6px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.1);
}

.kindi-stat .n {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-dark);
}

.kindi-stat .l {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.kindi-card {
  background: #fff;
  border-radius: 16px;
  padding: 13px 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.1);
  display: flex;
  align-items: center;
  gap: 11px;
}

.kindi-card .ico {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  background: var(--bg-soft-alt);
}

.kindi-card .t {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
}

.kindi-card .s {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.kindi-card .done {
  margin-left: auto;
  color: var(--color-sky-blue);
  font-weight: 800;
  font-size: 15px;
}

/* --- Honest trust bar (replaces vanity stats) --- */
.landing-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px 32px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: var(--bg-soft);
}

.landing-trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-body);
}

.landing-trust-item .ic {
  font-size: 19px;
  line-height: 1;
}

/* --- Paper → digital comparison --- */
.landing-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.landing-compare-card {
  border-radius: var(--radius-card);
  padding: 32px 28px;
  border: 2px solid;
}

.landing-compare-card.is-old {
  background: #fff;
  border-color: #E5E7EB;
}

.landing-compare-card.is-new {
  background: var(--bg-soft);
  border-color: var(--color-coral-orange);
  box-shadow: var(--shadow-card);
}

.landing-compare-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--text-dark);
}

.landing-compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: 13px;
  line-height: 1.4;
}

.landing-compare-list li .mark {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.4;
}

.landing-compare-card.is-old .mark {
  color: var(--text-subtle);
}

.landing-compare-card.is-new .mark {
  color: var(--color-sky-blue);
}

/* --- FAQ (native accordion) --- */
.landing-faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.landing-faq-item {
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-input);
  margin-bottom: 14px;
  overflow: hidden;
}

.landing-faq-item summary {
  padding: 18px 22px;
  font-weight: 800;
  font-size: 16px;
  color: var(--text-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.landing-faq-item summary::-webkit-details-marker {
  display: none;
}

.landing-faq-item summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 700;
  color: var(--color-coral-orange);
  flex-shrink: 0;
  line-height: 1;
}

.landing-faq-item[open] summary::after {
  content: "\2013";
}

.landing-faq-answer {
  padding: 0 22px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  font-weight: 500;
}

.landing-faq-answer a {
  color: var(--color-soft-purple);
  font-weight: 700;
}

@media (max-width: 768px) {
  .landing-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  /* FE-006: tighter mobile hero so the primary CTA is in the first screen. */
  .landing-hero {
    padding-top: 92px;
  }
  .landing-hero-grid .landing-hero-text p:not(.landing-hero-microcopy) {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .landing-hero-grid .landing-hero-actions {
    justify-content: center;
  }
  .landing-hero-eyebrow {
    margin-bottom: 16px;
  }
  .kindi-phone {
    width: 248px;
  }
  .landing-compare-grid {
    grid-template-columns: 1fr;
  }
  .landing-trust {
    gap: 12px 22px;
  }
  .landing-trust-item {
    font-size: 14px;
  }
}

/* ── Report / observation detail views (admin) ─────────────────────────────
   Class-based so the admin progress-report & observation detail pages add
   ZERO inline styles (keeps the inline-style ratchet flat — issue #1). */
.report-detail-card {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 16px;
}
.report-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.report-detail-name { font-weight: 800; font-size: 16px; color: var(--text-dark); }
.report-detail-meta { font-size: 13px; color: var(--text-muted); }
.report-detail-recorded { margin-top: 16px; font-size: 12px; color: var(--text-muted); }
.report-section-title { font-size: 16px; font-weight: 800; color: var(--text-dark); margin: 0 0 8px; }
.report-summary { font-size: 15px; color: var(--text-dark); line-height: 1.6; }
.report-footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--text-muted); }
.report-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.report-status--published { background: #ECFDF5; color: var(--text-success); border: 1px solid var(--color-sky-blue); }
.report-status--draft { background: #FFF8E1; color: #B45309; border: 1px solid var(--color-sunny-yellow); }
.report-domain-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.report-domain-name { font-size: 15px; font-weight: 800; color: var(--text-dark); margin: 0; }
.report-domain-comment { font-size: 14px; color: var(--text-body); line-height: 1.5; }
.report-rating {
  padding: 6px 14px;
  border-radius: var(--radius-button);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: #F3F4F6;
  color: var(--text-muted);
}
.report-rating--achieved { background: #ECFDF5; color: var(--text-success); }
.report-rating--developing { background: #EFF6FF; color: #2563EB; }
.report-rating--emerging { background: #FFFBEB; color: var(--text-warning); }
.report-rating--not_yet { background: #F3F4F6; color: var(--text-muted); }
.report-empty {
  text-align: center;
  padding: 40px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}
.report-domain-pill-row { margin-bottom: 12px; }
.report-domain-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-button);
  background: #EDE9FE;
  color: #6D28D9;
  font-weight: 700;
  font-size: 13px;
}
.report-photos { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.report-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-input);
  border: 2px solid var(--border-card);
}

/* ── Re-enrollment campaigns: index rollup + at-a-glance chips (§C) ─────────
   Class-based so the campaigns index adds ZERO inline styles (ratchet #1). */
.reenroll-panel {
  background: var(--bg-card);
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.reenroll-panel-title { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-bottom: 12px; }
.reenroll-panel-sub { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.reenroll-panel-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.reenroll-table-wrap { overflow-x: auto; }
/* Keyboard-scrollable table regions (axe scrollable-region-focusable, deep-qa 2026-09-28). */
[role="region"][tabindex="0"]:focus-visible,
table[tabindex="0"]:focus-visible { outline: 2px solid #C93A3A; outline-offset: 2px; }
.reenroll-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reenroll-table th {
  text-align: left; font-weight: 700; color: var(--text-muted);
  padding: 8px 10px; border-bottom: 2px solid var(--border-card); white-space: nowrap;
}
.reenroll-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-card); color: var(--text-body); }
.reenroll-year { font-weight: 800; color: var(--text-dark); }
.reenroll-rate { font-weight: 800; color: var(--text-dark); }
.reenroll-num--confirmed { font-weight: 700; color: var(--text-success); }
.reenroll-num--declined { font-weight: 700; color: var(--text-danger); }
.reenroll-num--pending { font-weight: 700; color: #B45309; }
.reenroll-reasons { list-style: none; margin: 0; padding: 0; }
.reenroll-reason {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border-card);
}
.reenroll-reason:last-child { border-bottom: 0; }
.reenroll-reason-cat { font-weight: 700; color: var(--text-dark); font-size: 13px; }
.reenroll-reason-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.reenroll-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.reenroll-chip {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  background: var(--bg-soft); color: var(--text-body); white-space: nowrap;
}
.reenroll-chip--confirmed { background: #ECFDF5; color: var(--text-success); }
.reenroll-chip--declined { background: #FEF2F2; color: var(--text-danger); }
.reenroll-chip--pending { background: #FFF8E1; color: #B45309; }

/* ── Refunds (FIN-006 V1, ledger-only) ─────────────────────────────────────── */
.refund-row { border-color: #FCA5A5 !important; background: #FEF2F2 !important; }
.refund-amount { color: var(--text-danger) !important; }
.refund-form-box {
  margin-top: 14px;
  padding: 16px;
  background: var(--bg-soft);
  border: 2px dashed var(--border-default);
  border-radius: 16px;
}
.refund-form-title { font-weight: 800; font-size: 14px; color: var(--text-dark); margin-bottom: 4px; }
.refund-form-note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.refund-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.refund-field { display: flex; flex-direction: column; gap: 4px; }
.refund-field--grow { flex: 1 1 220px; }
.refund-field span { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.refund-field input {
  padding: 10px 12px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-small);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-card);
}
.refund-field input:focus { outline: none; border-color: var(--color-coral-orange); }
.refund-submit {
  padding: 11px 20px;
  border: 0;
  border-radius: var(--radius-button);
  background: #DC2626;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.refund-submit:hover { background: #B91C1C; }
.refund-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: #FEF2F2;
  color: var(--text-danger);
  font-size: 11px;
  font-weight: 800;
}
/* inline refund form (table cells) — same input treatment without the field wrapper */
.refund-form input[type="text"], .refund-form input[type="number"] {
  padding: 8px 10px;
  border: 2px solid var(--border-card);
  border-radius: var(--radius-small);
  font-size: 13px;
  font-family: inherit;
  background: var(--bg-card);
  min-width: 180px;
}

/* ── Arrears + Subsidy report shared vocabulary ───────────────────────────────
   Extracted 1:1 from the inline styles that previously lived in
   app/views/admin/arrears/{index,show}.html.erb and
   app/views/admin/subsidy_reports/show.html.erb. Both features share the exact
   same visual language (coral-cream cards, pill buttons, tables), so the classes
   are namespaced `.arrears-*` and reused across all three views. Values are
   replicated exactly — do not restyle here; adjust the source design tokens if a
   visual change is intended. */

/* Cards: base has NO margin (index cards sit in a grid/flex-gap);
   `--mb` adds the 20px bottom margin used by show + subsidy cards. */
.arrears-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12);
  border: 2px solid #FFE4E1;
}
.arrears-card--mb { margin-bottom: 20px; }

/* Header action link (secondary pill in the page header). */
.arrears-header-btn {
  padding: 10px 20px;
  border-radius: 50px;
  background: #fff;
  color: #1F2937;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

/* Buttons — secondary (outline) and primary (coral). */
.arrears-btn {
  padding: 10px 18px;
  border-radius: 50px;
  border: 2px solid #FFE4E1;
  background: #fff;
  text-decoration: none;
  font-weight: 700;
  color: #1F2937;
  cursor: pointer;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  display: inline-block;
}
.arrears-btn--danger { color: var(--text-danger); border-color: #FECACA; }
.arrears-btn-primary {
  padding: 10px 18px;
  border-radius: 50px;
  border: none;
  background: var(--fill-coral-strong);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  display: inline-block;
}

/* Summary grid + stat blocks. */
.arrears-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.arrears-stat-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.arrears-stat-value { font-size: 28px; font-weight: 800; margin-top: 4px; }
.arrears-stat-value--red { color: var(--text-danger); }
.arrears-stat-value--dark { color: #1F2937; }
.arrears-stat-value--green { color: var(--text-success); }
.arrears-outstanding { font-size: 32px; font-weight: 800; color: var(--text-danger); }

/* Empty states. `.arrears-empty` combines with `.arrears-card` and overrides the
   card padding (must stay declared after `.arrears-card`); `.arrears-empty-inner`
   is the nested empty container used inside a card (subsidy). */
.arrears-empty { text-align: center; padding: 40px; }
.arrears-empty-inner { text-align: center; padding: 20px; }
.arrears-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.arrears-empty-text { font-size: 16px; color: var(--text-muted); font-weight: 700; }

/* Account list rows (index) + shared summary row (show). */
.arrears-list { display: flex; flex-direction: column; gap: 12px; }
.arrears-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.arrears-row-actions { display: flex; align-items: center; gap: 16px; }
.arrears-name { font-weight: 800; font-size: 16px; color: #1F2937; }
.arrears-child-line { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.arrears-meta-line { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.arrears-subtext { font-size: 13px; color: var(--text-muted); }
.arrears-amount { font-size: 20px; font-weight: 800; color: var(--text-danger); }

/* Pills — green status chip; `--ml` adds the 8px left margin used inline (index). */
.arrears-pill {
  padding: 3px 10px;
  background: #ECFDF5;
  color: var(--text-success);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
}
.arrears-pill--ml { margin-left: 8px; }
/* Installment status text — colour keyed off inst.status, weight always 800. */
.arrears-pill-text { font-weight: 800; }
.arrears-pill-text--paid { color: var(--text-success); }
.arrears-pill-text--overdue { color: var(--text-danger); }
.arrears-pill-text--pending { color: var(--text-muted); }

/* Headings + text helpers. */
.arrears-h2 { font-size: 16px; font-weight: 800; color: #1F2937; margin: 0 0 12px; }
.arrears-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.arrears-muted { color: var(--text-muted); }
.arrears-muted-bold { color: var(--text-muted); font-weight: 700; }
.arrears-link { color: var(--text-coral); font-weight: 700; text-decoration: none; }

/* Tables. */
.arrears-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.arrears-thead-row { text-align: left; color: var(--text-muted); font-size: 12px; }
.arrears-tr { border-top: 1px solid #FFE4E1; }
.arrears-tr--total { border-top: 2px solid #FFE4E1; }
.arrears-cell { padding: 8px; }
.arrears-cell--right { text-align: right; }
.arrears-cell--b7 { font-weight: 700; }
.arrears-cell--b8 { font-weight: 800; }
.arrears-cell--red { color: var(--text-danger); }
.arrears-cell--green { color: var(--text-success); }
.arrears-cell--muted { color: var(--text-muted); }

/* Inputs (text/number/date/month/select) + width modifiers (replaces inline widths). */
.arrears-input {
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid #FFE4E1;
  font-size: 14px;
  font-family: 'Nunito', sans-serif;
  box-sizing: border-box;
}
.arrears-input--w140 { width: 140px; }
.arrears-input--w120 { width: 120px; }
.arrears-input--w100 { width: 100px; }
.arrears-input--wfull { width: 100%; }

/* Forms + field wrappers. */
.arrears-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.arrears-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.arrears-inline-form { display: flex; gap: 10px; align-items: end; }
.arrears-aod-form { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.arrears-controls {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
}
.arrears-field-grow { flex: 1; min-width: 180px; }
.arrears-field-grow--wide { min-width: 220px; }
.arrears-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.arrears-btn-row { display: flex; gap: 8px; }

/* Payment-plan section. */
.arrears-plan-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.arrears-plan-total { font-weight: 800; margin-left: 8px; }
.arrears-plan-remaining { color: var(--text-muted); margin-left: 8px; }
.arrears-aod-signed { font-size: 12px; color: var(--text-success); font-weight: 700; margin-top: 4px; }
.arrears-plan-empty { color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }
.arrears-past-plans { margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.arrears-past-plan { margin-right: 10px; }

/* Escalation history. */
.arrears-history { display: flex; flex-direction: column; gap: 10px; }
.arrears-history-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  border-top: 1px solid #FFE4E1;
  padding-top: 10px;
}
.arrears-history-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.arrears-history-label { font-weight: 800; color: #1F2937; }
.arrears-history-notes { font-size: 13px; color: var(--text-muted); }

/* ===== Admin moderation queue (reworked 2026-07-10 — was inline-styled with a
   broken action row: form_with dropped its top-level style:, so the reject
   form lost its flex layout and the Reject button wrapped under the input) === */
.mod-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #FFE4E1; }
/* Specificity + !important deliberately out-rank dashboard.css's legacy
   ".main-body > div a[href]" blanket rule (gradient pill + !important color),
   which otherwise repaints every inactive tab as active. */
.mod-tabs a.mod-tab[href] { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; margin-bottom: 0; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 13px; font-family: 'Nunito', sans-serif; border: 2px solid #FFE4E1; background: #fff; color: var(--text-muted) !important; }
.mod-tabs a.mod-tab--active[href] { background: linear-gradient(135deg, #FFD93D, #FF6B6B); color: #1F2937 !important; border-color: transparent; }
.mod-tab-count { background: #DC2626; color: #fff; border-radius: 50px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.mod-empty { padding: 32px 24px; background: #FFFDF7; border: 2px solid #FFE4E1; border-radius: 20px; text-align: center; color: var(--text-muted); font-family: 'Nunito', sans-serif; }
.mod-empty h2 { margin: 0 0 6px; color: #1F2937; font-size: 18px; }
.mod-empty p { margin: 0; }
.mod-card { background: #fff; border: 2px solid #FFE4E1; border-radius: 20px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 4px 20px rgba(255, 107, 107, 0.08); }
.mod-meta { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.mod-meta strong { color: #1F2937; }
.mod-badge { background: #FEF3C7; color: #B45309; border-radius: 50px; padding: 2px 8px; font-weight: 700; font-size: 11px; white-space: nowrap; }
.mod-body { margin-top: 8px; font-size: 14px; color: #1F2937; line-height: 1.5; }
.mod-body p { margin: 0 0 6px; }
.mod-body p:last-child { margin-bottom: 0; }
.mod-field-label { color: var(--text-muted); font-size: 12px; }
.mod-thumbs { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mod-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 2px solid #FFE4E1; }
.mod-photo { max-width: 240px; max-height: 240px; object-fit: cover; border-radius: 12px; border: 2px solid #FFE4E1; }
/* Single aligned action row: [Approve] [reason input ->grows] [Reject] */
.mod-actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #FFE4E1; align-items: center; flex-wrap: wrap; }
.mod-approve-form { display: contents; }
.mod-approve { padding: 10px 22px; background: linear-gradient(135deg, #FFD93D, #FF6B6B); color: #1F2937; border: none; border-radius: 50px; font-weight: 800; cursor: pointer; font-size: 14px; font-family: 'Nunito', sans-serif; }
.mod-reject-form { display: flex; gap: 8px; flex: 1; min-width: 240px; align-items: center; }
.mod-reject-input { flex: 1; min-width: 0; padding: 10px 14px; border: 2px solid #FFE4E1; border-radius: 50px; font-size: 14px; font-family: 'Nunito', sans-serif; }
.mod-reject-btn { padding: 10px 20px; background: #fff; color: var(--text-danger); border: 2px solid #FECACA; border-radius: 50px; font-weight: 800; cursor: pointer; font-size: 14px; font-family: 'Nunito', sans-serif; white-space: nowrap; }
.mod-reject-btn:hover { border-color: #DC2626; }
@media (max-width: 520px) {
  /* 2026-09-09: at phone widths the note/reason input was squeezed to an
     unusable sliver between the two buttons, and stretching the row left the
     standalone button abnormally tall. Stack every control instead. */
  .mod-actions { flex-direction: column; align-items: stretch; }
  .mod-reject-form { flex-wrap: wrap; min-width: 0; }
  .mod-reject-input { flex: 1 1 100%; }
  .mod-actions .mod-approve,
  .mod-actions .mod-reject-btn { width: 100%; }
}

/* ===== Super-admin activation funnel: per-school table (2026-07-19) ===== */
.actv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.actv-table th { padding: 10px 10px; color: var(--text-muted); font-weight: 700; text-align: left; border-bottom: 2px solid #E5E7EB; white-space: nowrap; }
.actv-table td { padding: 10px 10px; border-bottom: 1px solid #F3F4F6; vertical-align: middle; }
.actv-school { font-weight: 700; color: #1F2937; white-space: nowrap; }
.actv-signup { color: var(--text-subtle); font-size: 11px; }
.actv-stage { text-align: center; font-weight: 800; }
.actv-stage--done { color: var(--text-success); }
.actv-stage--todo { color: #D1D5DB; }
.actv-stuck { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 800; background: #FFF7ED; color: #C2410C; white-space: nowrap; }
.actv-stuck--long { background: #FEF2F2; color: var(--text-danger); }
.actv-done-badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 800; background: #ECFDF5; color: var(--text-success); white-space: nowrap; }
.actv-h2 { font-size: 18px; font-weight: 800; color: #1F2937; margin: 28px 0 4px; }
.actv-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }
.actv-scroll { overflow-x: auto; }

/* ===== Admin roster import (2026-07-19) ===== */
.rimport-card { background: #fff; border: 2px solid #FFE4E1; border-radius: 20px; padding: 20px; margin-bottom: 16px; box-shadow: 0 4px 20px rgba(255, 107, 107, 0.08); }
.rimport-h2 { font-size: 16px; font-weight: 800; color: #1F2937; margin: 0 0 8px; }
.rimport-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 12px; }
.rimport-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rimport-file { font-size: 14px; font-family: 'Nunito', sans-serif; }
.rimport-btn { display: inline-block; padding: 10px 20px; border-radius: 50px; border: 2px solid #FFE4E1; background: #fff; color: #1F2937; text-decoration: none; font-weight: 800; font-size: 14px; font-family: 'Nunito', sans-serif; cursor: pointer; }
.rimport-btn--primary { background: linear-gradient(135deg, #FFD93D, #FF6B6B); border: none; }
.rimport-summary { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rimport-pill { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.rimport-pill--create { background: #ECFDF5; color: var(--text-success); }
.rimport-pill--match { background: #EFF6FF; color: #2563EB; }
.rimport-pill--error { background: #FEF2F2; color: var(--text-danger); }
.rimport-scroll { overflow-x: auto; }
.rimport-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rimport-table th { text-align: left; padding: 8px 10px; color: var(--text-muted); font-weight: 700; border-bottom: 2px solid #FFE4E1; white-space: nowrap; }
.rimport-table td { padding: 8px 10px; border-bottom: 1px solid #FFF5EE; vertical-align: top; }
.rimport-line { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.rimport-strong { font-weight: 700; color: #1F2937; }
.rimport-parent { color: var(--text-muted); font-size: 12px; }
.rimport-errors { color: var(--text-danger); font-size: 12px; margin-top: 2px; }
.rimport-actions { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.rimport-inline { display: inline; }
.rimport-result-list { font-size: 14px; color: #1F2937; line-height: 2; margin: 0 0 14px; padding-left: 18px; }

/* ===== WhatsApp-first invites (2026-07-19) ===== */
.winvite-btn { display: inline-block; padding: 8px 14px; border-radius: 50px; border: 2px solid #FFE4E1; background: #fff; color: #1F2937; text-decoration: none; font-weight: 700; font-size: 12px; font-family: 'Nunito', sans-serif; cursor: pointer; white-space: nowrap; }
/* Anchor variant must out-rank dashboard.css's legacy ".main-body > div a[href]"
   blanket gradient rule (same fight as .mod-tab). */
.winvite-btn--wa,
.main-body a.winvite-btn--wa[href] { border: 2px solid #BBF7D0; background: #ECFDF5; color: #047857 !important; padding: 8px 14px; margin-bottom: 0; font-size: 12px; }
.winvite-btn--wa:hover,
.main-body a.winvite-btn--wa[href]:hover { border-color: #059669; }

/* ===== Public growth pages: subsidy calculator + landing (2026-07-20) ===== */
.subcalc-wrap { max-width: 1100px; margin: 0 auto; padding: 48px 24px; }
.subcalc-card { background: #fff; border: 2px solid #FFE4E1; border-radius: 24px; padding: 24px; box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12); margin-top: 24px; }
.subcalc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.subcalc-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 13px; color: #1F2937; }
.subcalc-field input { padding: 12px 14px; border: 2px solid #FFE4E1; border-radius: 12px; font-size: 16px; font-family: 'Nunito', sans-serif; }
.subcalc-field small { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.subcalc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
.subcalc-result { background: #FFF5EE; border-radius: 16px; padding: 16px; }
.subcalc-result--wide { grid-column: 1 / -1; background: #FFFBEB; }
.subcalc-result-caveat { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.subcalc-result-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.subcalc-result-value { font-size: 28px; font-weight: 800; color: #1F2937; margin-top: 4px; font-variant-numeric: tabular-nums; }
.subcalc-result-value--green { color: var(--text-success); }
.subcalc-result-note { font-size: 14px; color: #1F2937; margin-top: 4px; line-height: 1.5; }
.subcalc-cta { display: flex; gap: 14px; align-items: center; margin: 28px 0; flex-wrap: wrap; }
.subcalc-cta-btn { display: inline-block; padding: 14px 28px; border-radius: 50px; background: linear-gradient(135deg, #FFD93D, #FF6B6B); color: #1F2937; text-decoration: none; font-weight: 800; font-size: 15px; }
.subcalc-cta-link { color: var(--text-coral); font-weight: 700; text-decoration: none; font-size: 14px; }
.subcalc-content { max-width: 760px; margin-top: 12px; }
.subcalc-content h2 { font-size: 20px; font-weight: 800; color: #1F2937; margin: 28px 0 8px; }
.subcalc-content h3 { font-size: 15px; font-weight: 800; color: #1F2937; margin: 16px 0 4px; }
.subcalc-content p { font-size: 14px; color: #4B5563; line-height: 1.7; margin: 0 0 8px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 24px; }
.lp-card { background: #fff; border: 2px solid #FFE4E1; border-radius: 20px; padding: 20px; box-shadow: 0 4px 20px rgba(255, 107, 107, 0.08); }
.lp-card h2 { font-size: 16px; font-weight: 800; color: #1F2937; margin: 0 0 8px; }
.lp-card p { font-size: 14px; color: #4B5563; line-height: 1.6; margin: 0; }
.lp-card a { color: var(--text-coral); font-weight: 700; }
.lp-card h2 a { color: inherit; text-decoration: none; }
.lp-card h2 a:hover { color: var(--text-coral); }

/* ── Status chips ─────────────────────────────────────────────────────
 * FE-003 (2026-07-26 review board): invoice status chips were built from a
 * per-view `status_colors` hash rendered as `#{hex}20` tint-on-solid. Two
 * problems on a money screen:
 *   1. 'open' and 'paid' were BOTH #4ECDC4 — a bursar scanning the fee ledger
 *      could not tell a settled invoice from an unpaid one.
 *   2. Contrast failed badly. Measured: 'Partially Paid' #FFD93D on #FFFAE7 =
 *      1.32:1, 'Open'/'Paid' #4ECDC4 on #E9F9F8 = 1.78:1, both at 12px/700.
 *      AA needs 4.5:1. 'Partially Paid' — the state that most needs follow-up
 *      — was effectively invisible.
 * Five semantically distinct tones, all AA on their own background. Status is
 * never conveyed by colour alone (WCAG 1.4.1): the helper prefixes a glyph.
 */
.kindi-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.kindi-status-chip__glyph { font-size: 11px; line-height: 1; }

/* neutral — draft, cancelled: 10.4:1 */
.kindi-status-chip--neutral { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
/* informational — open, sent, proforma: 8.6:1 */
.kindi-status-chip--info    { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
/* success — paid: 8.9:1 */
.kindi-status-chip--success { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
/* warning — partially paid: 7.6:1 */
.kindi-status-chip--warning { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
/* danger — overdue: 8.2:1 */
.kindi-status-chip--danger  { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }

/* ── Payment / proof-review blocks ────────────────────────────────────
 * Rank-2 remediation (QA-010, TL-003). New markup goes in classes, not
 * inline styles — see spec/quality/inline_style_budget_spec.rb.
 */
.kindi-paid-callout {
  background: #ECFDF5;
  border: 2px solid #4ECDC4;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.kindi-paid-callout__mark  { font-size: 32px; margin-bottom: 8px; }
.kindi-paid-callout__label { font-size: 16px; font-weight: 800; color: #065F46; }

/* QA-010: an over-payment is money the school is holding for the family —
   it must be visible, not folded into a green tick. */
.kindi-credit-callout {
  background: #EFF6FF;
  border: 2px solid #1D4ED8;
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
}
.kindi-credit-callout__amount { font-size: 14px; font-weight: 800; color: #1D4ED8; margin-bottom: 4px; }
.kindi-credit-callout__note   { font-size: 13px; color: #1F2937; }

.kindi-status-banner {
  background: #F9FAFB;
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* TL-003: the reviewing admin must see what the parent declared, and what will
   still be outstanding after approval, before clicking Approve. */
.kindi-proof-amount        { font-size: 13px; margin-top: 4px; font-weight: 700; color: #1F2937; }
.kindi-proof-amount--warn  { color: #92400E; }
.kindi-proof-field         { font-size: 12px; font-weight: 700; color: #374151; }
.kindi-proof-field input {
  padding: 8px 12px;
  border-radius: 50px;
  border: 2px solid #E2E8F0;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  width: 110px;
  margin-left: 4px;
}

/* ── Cookie consent banner ────────────────────────────────────────────
 * FE-001 (2026-07-26 review board), blocker: the banner was a floating
 * position:fixed card at bottom:16px, ~150px tall, sitting ON TOP of the hero.
 * Measured at 390x844 on the home page it covered BOTH primary CTAs —
 * "Start your free trial" (y=695) and "See how it works" (y=766) fell inside
 * the banner rect (y=678-828) and could not be tapped. Every first-time mobile
 * visitor to the marketing surface hit this, silently discarding trial signups
 * from exactly the pages the SEO work was built for.
 *
 * WHY A TOP BAR. A previous fix (deep-QA 2026-07-09) already tried reserving
 * space with body{padding-bottom} while keeping the banner at the bottom. That
 * cannot work: padding-bottom only adds room after the END of the document, so
 * it never moves a hero that lives inside the FIRST viewport — which is exactly
 * where the CTAs are. Any bottom-anchored bar will overlap something in the
 * first screen. A bar fixed to the TOP plus body{padding-top} shifts the entire
 * document down by the bar's height, so nothing can ever be covered.
 */
#cookie-consent-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  max-width: none;
  border-radius: 0;
  padding: 10px 16px;
  background: #1F2937;
  color: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  font-family: 'Nunito', sans-serif;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
#cookie-consent-banner.is-visible { display: flex; }
#cookie-consent-banner .cc-text    { font-size: 13px; line-height: 1.4; flex: 1 1 220px; min-width: 0; }
#cookie-consent-banner .cc-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#cookie-consent-banner a           { color: #FFD93D; text-decoration: underline; } /* on-dark: ~11:1 on the #1F2937 banner */
#cookie-consent-banner button {
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
#cookie-consent-banner button[data-consent="accepted"] {
  border: none;
  background: linear-gradient(135deg, #FFD93D, #FF6B6B);
  color: #1F2937;
}
#cookie-consent-banner button[data-consent="declined"] {
  border: 2px solid #9CA3AF;
  background: transparent;
  color: #fff;
}

/* FE-006: on phones the two-row banner took 103-122px and, with the nav,
   pushed the hero CTA below the fold at 360x780. One compact row instead:
   the text wraps in its own column beside two small buttons. */
@media (max-width: 767px) {
  #cookie-consent-banner { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  #cookie-consent-banner .cc-text { font-size: 12px; line-height: 1.35; flex: 1 1 0; }
  #cookie-consent-banner .cc-actions { gap: 6px; }
  #cookie-consent-banner button { padding: 6px 12px; font-size: 12px; }
}

/* The JS sets this to the measured banker height, so wrapped two-row layouts
   on narrow viewports are handled exactly. These are the fallbacks. */
body.has-cookie-banner { padding-top: var(--cookie-banner-height, 104px); }
@media (min-width: 768px) {
  body.has-cookie-banner { padding-top: var(--cookie-banner-height, 56px); }
  #cookie-consent-banner { padding: 10px 24px; flex-wrap: nowrap; }
}

/* SEO-001: reserve the banner's space BEFORE first paint. consent_boot.js (a
   classic <head> script) adds html.needs-consent when no consent cookie
   exists; the banner and its padding are then in the very first frame instead
   of arriving when Stimulus connects (which shifted the hero after first paint
   on slow mobile: CLS 0.11). The heights are the banner's measured one-row
   sizes, so the controller's later offsetHeight correction moves nothing in
   the common case. :has() keeps it off pages where the banner isn't rendered
   (signed-in pages reached by a Turbo visit keep the <html> class).
   Heights measured with Nunito loaded; the text wraps to 1-4 lines by width. */
html.needs-consent:has(#cookie-consent-banner) { --cookie-banner-height: 97px; }
html.needs-consent #cookie-consent-banner { display: flex; }
html.needs-consent body:has(#cookie-consent-banner) { padding-top: var(--cookie-banner-height); }
@media (min-width: 344px)  { html.needs-consent:has(#cookie-consent-banner) { --cookie-banner-height: 81px; } }
@media (min-width: 384px)  { html.needs-consent:has(#cookie-consent-banner) { --cookie-banner-height: 65px; } }
@media (min-width: 480px)  { html.needs-consent:has(#cookie-consent-banner) { --cookie-banner-height: 48px; } }
@media (min-width: 768px)  { html.needs-consent:has(#cookie-consent-banner) { --cookie-banner-height: 56px; } }
@media (min-width: 1024px) { html.needs-consent:has(#cookie-consent-banner) { --cookie-banner-height: 55px; } }

/* Form action rows + the hint under them (DX-001). */
.kindi-form-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.kindi-form-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* DX-001: day-level "publish all drafts" prompt on the teacher reports index. */
.kindi-bulk-publish {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #FFFBEB;
  border: 2px solid #FDE68A;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.kindi-bulk-publish__text { font-size: 13px; color: #92400E; }

/* FIN-009: the post-onboarding home for Paystack keys on /admin/billing. */
.kindi-payments-card {
  background: #fff;
  border: 2px solid #FFE4E1;
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12);
}
.kindi-payments-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.kindi-payments-card__head h2 {
  font-size: 16px;
  font-weight: 800;
  color: #1F2937;
  margin: 0;
}
.kindi-payments-card__note        { font-size: 14px; color: #4B5563; margin: 0 0 16px; line-height: 1.55; }
.kindi-payments-card__note--warn  { color: #92400E; }
.kindi-payments-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.kindi-field-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  color: #1F2937;
}

/* QA-004: the teacher Children list rendered plain <div> cards, so the richest
   teacher screen (/teacher/children/:id — attendance history, assessments,
   daily reports, photos) was unreachable in the UI and read as a broken app.
   The card is now a real link: clickable, keyboard-focusable, announced. */
.kindi-child-card {
  display: block;
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12);
  border: 2px solid #FFE4E1;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.kindi-child-card:hover { border-color: #FF6B6B; transform: translateY(-2px); }
.kindi-child-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.45);
}

/* QA-003: persistent trial-expired prompt in the admin shell. */
.kindi-trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #FFFBEB;
  border: 2px solid #FDE68A;
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  color: #92400E;
  font-size: 14px;
  line-height: 1.5;
}

/* FE-009: keep "R" and its amount on one line (format_rands uses a plain space). */
.kindi-money { white-space: nowrap; }

/* FE-003/FIN-011: plan-card action + the paid -> paid review step. */
.kindi-plan-card-action {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.kindi-plan-trial-note { margin: -12px 0 20px; font-size: 14px; } /* FIN-004 */
/* FIN-009: plan-card feature list generated from School::PLAN_FEATURES. */
.kindi-plan-features { text-align: left; margin-bottom: 20px; padding: 0 8px; }
.kindi-plan-feature { font-size: 13px; color: var(--text-dark); padding: 3px 0; }
.kindi-plan-feature--added { font-weight: 800; }
.kindi-plan-feature__tick { color: var(--text-success); }
.kindi-plan-review,
.kindi-confirm-step { max-width: 560px; }
.kindi-plan-review .kindi-muted { margin: 0; }
.kindi-plan-review__total {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 4px 0 6px;
}
/* FE-101: the amount leads; two classes outrank dashboard.css's
   `.main-body > div span` (0,1,2), which shrank it to 14px. */
.kindi-plan-review__total .kindi-money { font-size: inherit; font-weight: inherit; }
.kindi-plan-review__total .kindi-plan-review__per {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}
.kindi-plan-review__note,
.kindi-confirm-step__note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark);
}
.kindi-plan-review__list,
.kindi-confirm-step__list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-dark);
}
.kindi-plan-review__actions,
.kindi-confirm-step__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

/* QA-011: branded "this page isn't switched on" card for public visit URLs. */
.kindi-unavailable {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  font-family: 'Nunito', sans-serif;
}
.kindi-unavailable__card {
  max-width: 480px;
  text-align: center;
  background: #fff;
  border: 2px solid #FFE4E1;
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12);
}
.kindi-unavailable__mark { font-size: 56px; margin-bottom: 12px; }
.kindi-unavailable__card h1 { font-size: 22px; font-weight: 800; color: #1F2937; margin: 0 0 10px; }
.kindi-unavailable__card p  { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0 0 24px; }

/* FIN-014: clarifies that the ledger totals are one child's share while the
   invoice list below is the whole household account. */
.kindi-ledger-scope-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: -8px 0 20px;
}

/* ── Public legal / support pages ──────────────────────────────────────
   Reusable set for the public content pages (support, terms, privacy,
   refund policy, PAIA). Extracted 2026-09-09 when /support was added, so
   the new page ships with zero inline styles; terms/privacy/refund can be
   migrated onto these classes to ratchet MAX_INLINE_STYLES down further. */
.kindi-legal {
  font-family: 'Nunito', sans-serif;
  background: #FFFDF7;
  min-height: 100vh;
}

.kindi-legal-header {
  background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%);
  padding: 32px 16px;
  border-radius: 0 0 24px 24px;
  text-align: center;
}

.kindi-legal-header h1 {
  font-size: 32px;
  font-weight: 900;
  color: #1F2937;
  margin: 0;
}

.kindi-legal-header p {
  font-size: 16px;
  color: #1F2937;
  margin: 8px 0 0;
  opacity: 0.8;
}

.kindi-legal-card {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12);
  border: 2px solid #FFE4E1;
  max-width: 800px;
  margin: 24px auto;
}

.kindi-legal-card h2 {
  font-size: 20px;
  font-weight: 800;
  color: #1F2937;
  margin: 28px 0 12px;
}

.kindi-legal-card h2:first-of-type {
  margin-top: 0;
}

.kindi-legal-card p,
.kindi-legal-card li {
  font-size: 15px;
  color: #374151;
  line-height: 1.7;
}

.kindi-legal-card ul {
  padding-left: 24px;
}

.kindi-legal-card a {
  color: #B91C1C;
  text-decoration: underline;
}

.kindi-legal-card a.strong,
.kindi-legal-card strong a {
  font-weight: 700;
}

.kindi-legal-footer {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 28px;
}

@media (max-width: 600px) {
  .kindi-legal-card {
    padding: 22px 18px;
    margin: 16px 12px;
    border-radius: 18px;
  }

  .kindi-legal-header h1 {
    font-size: 26px;
  }
}

/* QA-001: a list row's name that opens the record (children roster). */
.kindi-row-link { color: inherit; text-decoration: none; }
.kindi-row-link:hover,
.kindi-row-link:focus-visible { text-decoration: underline; }

/* QA-001 / CMP-004: irreversible actions on a record's profile page (Delete,
   POPIA erasure), kept apart from the everyday buttons. Sits on .kindi-surface. */
.kindi-danger-zone { margin-top: 20px; border-color: #FECACA; }
.kindi-danger-zone__list { margin: 8px 0 12px; padding-left: 20px; color: var(--text-muted); font-size: 13px; }
.kindi-danger-zone__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.kindi-danger-zone__form .kindi-input { max-width: 320px; }
.kindi-btn-danger { border-color: #FECACA; color: #B91C1C; }

/* FE-107: teacher Time Clock hint — plain text on the gradient card, full
   width so the real actions below it are the only tappable-looking things. */
.teacher-clock-note { flex-basis: 100%; margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 600; }

/* FE-106: row action groups (teacher roster) — wrap between buttons, never
   inside a label ("Remove access" broke onto two lines at 360px). */
.kindi-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kindi-row-actions a,
.kindi-row-actions button { white-space: nowrap; }
.kindi-row-actions form { margin: 0; }

/* FIN-007: bank statement upload errors (unreadable file, no file chosen). */
.bank-import-error,
.form-error-box {
  background: #FEF2F2;
  border: 2px solid #FCA5A5;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #991B1B;
  font-weight: 600;
}

/* ── Events: parent + admin pages (paid events rework 2026-10-11) ── */
.event-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 860px) { .event-page { grid-template-columns: minmax(0, 1fr); } }
.event-card { background: #fff; border-radius: 24px; padding: 24px; border: 2px solid #FFE4E1; box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12); min-width: 0; }
.event-banner { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-size: 14px; }
.event-banner--cancelled { background: #FEF2F2; border: 2px solid #FCA5A5; color: #991B1B; }
.event-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.event-tag { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #F3F4F6; color: #374151; }
.event-tag--price { background: #FEE2E2; color: #991B1B; }
.event-tag--free { background: #CCFBF1; color: #115E59; }
.event-facts { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 20px; }
.event-facts dt { font-size: 13px; color: #5F6673; margin-bottom: 4px; }
.event-facts dd { margin: 0; font-size: 16px; font-weight: 800; color: #1F2937; }
.event-description { border-top: 2px solid #FFE4E1; padding-top: 16px; line-height: 1.6; color: #1F2937; }
.event-calendar { display: inline-block; margin-top: 16px; }
.event-rsvp__title { font-size: 16px; font-weight: 800; color: #1F2937; margin: 0 0 12px; }
.event-note { font-size: 13px; color: #92400E; background: #FEF3C7; border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.event-waiver { border: 2px solid #FFE4E1; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.event-waiver summary { font-weight: 800; cursor: pointer; }
.event-waiver__body { max-height: 220px; overflow-y: auto; margin-top: 8px; line-height: 1.6; }
.event-children { display: flex; flex-direction: column; gap: 14px; }
.event-child { background: #FFF5EE; border-radius: 16px; padding: 14px; }
.event-child__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.event-child__avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%); color: #1F2937; }
.event-child__name { font-weight: 800; color: #1F2937; }
.event-status { margin-left: auto; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #F3F4F6; color: #374151; }
.event-status--going { background: #D1FAE5; color: #065F46; }
.event-status--pending { background: #FEF3C7; color: #92400E; }
.event-status--not-going { background: #FEE2E2; color: #991B1B; }
.event-fee { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px; }
.event-fee__state { font-weight: 800; }
.event-fee__state--paid { color: #065F46; }
.event-fee__state--credit { color: #1D4ED8; }
.event-fee__pay { margin-left: auto; }
.event-child__actions { display: flex; flex-direction: column; gap: 8px; }
.event-child__actions .button_to, .event-child__actions form { margin: 0; }
.event-sign { display: flex; flex-direction: column; gap: 6px; }
.event-sign__label { font-size: 12px; color: #5F6673; }
.event-sign__input { padding: 10px 14px; border-radius: 12px; border: 2px solid #FFE4E1; font-size: 14px; width: 100%; box-sizing: border-box; }
.event-btn--going, .event-btn--not-going { width: 100%; }
.event-signed { font-size: 12px; color: #065F46; margin: 0 0 10px; }
.admin-cancel { max-width: 720px; }
.admin-cancel__title { font-size: 18px; font-weight: 800; color: #1F2937; margin: 0 0 12px; }
.admin-cancel__list { margin: 0 0 20px; padding-left: 20px; line-height: 1.7; color: #1F2937; }
.admin-cancel__form { display: flex; flex-direction: column; gap: 12px; }
.admin-cancel__label { font-weight: 700; color: #1F2937; }
.admin-cancel__input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 12px; border: 2px solid #FFE4E1; font-size: 14px; font-family: inherit; }
.admin-cancel__choice { border: 2px solid #FFE4E1; border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.admin-cancel__choice legend { font-weight: 800; padding: 0 6px; }
.admin-cancel__option { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; cursor: pointer; }
.admin-event-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-event-section { margin-bottom: 20px; }
.admin-event-section__title { font-size: 18px; font-weight: 800; color: #1F2937; margin: 0 0 14px; }
.admin-event-subtitle { font-size: 15px; font-weight: 800; margin: 16px 0 8px; }
.admin-event-note { font-size: 14px; color: #374151; margin: 0 0 12px; }
.admin-event-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
.admin-event-summary--counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-event-summary > div { background: #FFF5EE; border: 2px solid #FFE4E1; border-radius: 16px; padding: 12px; text-align: center; }
.admin-event-summary dt { font-size: 12px; font-weight: 700; color: #5F6673; }
.admin-event-summary dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; color: #1F2937; }
@media (max-width: 700px) { .admin-event-summary, .admin-event-summary--counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-event-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-event-checklist li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #FFF5EE; border-radius: 12px; padding: 10px 12px; }
.admin-event-table { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.admin-event-table__row { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr 1.6fr 1.3fr 1.3fr; gap: 10px; align-items: center; padding: 10px 12px; background: #FFF5EE; border-radius: 12px; min-width: 0; }
.admin-event-table__row > span { min-width: 0; overflow-wrap: anywhere; }
.admin-event-table__row--head { background: none; font-weight: 800; color: #5F6673; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-event-table__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.admin-event-table__actions form { margin: 0; }
@media (max-width: 900px) {
  .admin-event-table__row--head { display: none; }
  .admin-event-table__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .admin-event-table__row > span[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: #5F6673; }
}
.event-fee-pill { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #F3F4F6; color: #374151; }
.event-fee-pill--paid { background: #D1FAE5; color: #065F46; }
.event-fee-pill--unpaid, .event-fee-pill--part-paid { background: #FEF3C7; color: #92400E; }
.event-fee-pill--credit { background: #DBEAFE; color: #1E40AF; }
.event-fee-pill--refunded, .event-fee-pill--refund-processing { background: #EDE9FE; color: #5B21B6; }
.event-fee-pill--cancelled { background: #F3F4F6; color: #4B5563; }
.event-status--pending-payment { background: #FEF3C7; color: #92400E; }
.event-status--invited { background: #F3F4F6; color: #374151; }
.admin-event-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.admin-event-footer form { margin: 0; }
.admin-events { display: flex; flex-direction: column; gap: 12px; }
.admin-events__card { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px; }
/* des-001: flex: 1 (basis 0) let the actions squeeze the details to ~20px on a
   phone — one glyph per line. A 260px basis makes the actions wrap underneath. */
.admin-events__main { display: flex; gap: 16px; align-items: flex-start; flex: 1 1 260px; min-width: 0; }
.admin-events__date { min-width: 56px; text-align: center; background: linear-gradient(135deg, #FFD93D 0%, #FF6B6B 100%); border-radius: 16px; padding: 8px 10px; display: flex; flex-direction: column; }
.admin-events__day { font-size: 22px; font-weight: 800; color: #1F2937; line-height: 1; }
.admin-events__month { font-size: 12px; font-weight: 700; color: #374151; text-transform: uppercase; }
.admin-events__details { min-width: 0; }
.admin-events__title { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.admin-events__title a { color: #1F2937; text-decoration: none; }
.admin-events__title a:hover, .admin-events__title a:focus-visible { text-decoration: underline; }
.admin-events__meta { font-size: 13px; color: #5F6673; overflow-wrap: anywhere; }
.admin-events__tags { margin: 8px 0 0; }
.admin-events__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-events__actions form { margin: 0; }
.admin-events__empty { text-align: center; padding: 40px; }
.admin-events__empty-icon { font-size: 48px; margin-bottom: 12px; }
.refund-form--stacked { display: flex; flex-direction: column; gap: 12px; }
.refund-methods { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.refund-method { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #1F2937; cursor: pointer; }
.refund-request { border-bottom: 2px dashed #FFE4E1; padding-bottom: 14px; margin-bottom: 14px; }
/* pmt-003: inherited #fff text on a #fff button — Decline / Release were invisible. */
.refund-submit--secondary { background: #fff; color: #B91C1C; box-shadow: inset 0 0 0 2px #FECACA; }
.refund-submit--secondary:hover { background: #FEF2F2; color: #991B1B; }
.credit-refund-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.credit-refund-form__label { font-size: 12px; font-weight: 700; color: #374151; }
.credit-refund-form__input { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; border: 2px solid #BFDBFE; font-family: inherit; font-size: 13px; }
.kindi-ledger-credit-note { background: #EFF6FF; border: 2px solid #BFDBFE; border-radius: 14px; padding: 10px 14px; color: #1E3A8A; font-size: 14px; margin: 0 0 12px; }
.invoice-proof { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.invoice-proof__note { font-size: 13px; color: #5F6673; }
.parent-credit__amount { font-size: 32px; font-weight: 800; color: #1D4ED8; margin: 0; }
.parent-credit__note { font-size: 13px; color: #5F6673; margin: 8px 0 0; }
.parent-credit__row { font-size: 13px; font-weight: 800; color: #1D4ED8; }
.owed-total { font-size: 15px; color: #1F2937; margin: 0 0 16px; }
.owed-group { margin-bottom: 16px; }
.owed-group__title { font-size: 16px; font-weight: 800; color: #1F2937; margin: 0 0 12px; }
.owed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.owed-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF5EE; border-radius: 12px; padding: 10px 12px; }
.owed-item__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.owed-item__meta, .owed-item__note { font-size: 12px; color: #5F6673; overflow-wrap: anywhere; }
.owed-item__amount { font-weight: 800; color: #1D4ED8; white-space: nowrap; }
.owed-dashboard-link { display: block; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: #EFF6FF; color: #1E3A8A; font-weight: 700; font-size: 13px; text-decoration: none; }
.invoice-credit-label { font-size: 16px; font-weight: 800; color: #1D4ED8; }
.invoice-credit-amount { font-size: 20px; font-weight: 800; color: #1D4ED8; }

/* deep-qa 2026-10-11 vis-002: form rows side by side on desktop, stacked on
   phones. Fixed 1fr tracks plus the Lexxy toolbar's min-content widened the
   column past the viewport, and .main-content's overflow-x:hidden clipped it
   with no scrollbar (End time, Capacity and Use Template were unreachable). */
.kindi-form-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kindi-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kindi-form-grid-min, 220px)), 1fr)); gap: 16px; }
.kindi-form-grid--compact { --kindi-form-grid-min: 150px; gap: 12px; align-items: end; }
.kindi-form-grid--spaced { margin-bottom: 12px; }
.kindi-form-hint-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

/* deep-qa des-002: a child's ledger at phone width. The three summary tiles
   wrap instead of overflowing, and each transaction stacks its amounts under
   labels instead of losing the Credit and Balance columns off the edge. */
.ledger-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-bottom: 24px; }
.ledger-summary__tile { background: #fff; border-radius: 24px; padding: 20px; box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12); border: 2px solid #FFE4E1; min-width: 0; }
.ledger-summary__label { font-size: 14px; color: #5F6673; margin-bottom: 4px; }
.ledger-summary__value { font-size: 28px; font-weight: 800; color: #1F2937; overflow-wrap: anywhere; }
.ledger-table { border: 2px solid #FFE4E1; border-radius: 16px; overflow: hidden; }
.ledger-table__head, .ledger-table__row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 100px 100px 100px; gap: 12px; padding: 12px 16px; }
.ledger-table__head { background: #FFF5EE; font-weight: 700; font-size: 13px; color: #5F6673; }
.ledger-table__row { border-top: 2px solid #FFE4E1; align-items: center; }
.ledger-table__num { text-align: right; }
@media (max-width: 640px) {
  .ledger-table__head { display: none; }
  .ledger-table__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
  .ledger-table__row > :nth-child(-n+2) { grid-column: 1 / -1; }
  /* An entry is a debit or a credit: show that one next to the balance. */
  .ledger-table__num--empty { display: none; }
  .ledger-table__num { text-align: left; white-space: nowrap; }
  .ledger-table__num::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: #5F6673; }
}

/* deep-qa des-003: the audit log at phone width. Rows become stacked cards
   (When · Who · Action, then Resource on its own line) instead of squeezing
   Resource to one character per line inside a clipping card. */
.audit-log-card { background: #fff; border-radius: 24px; box-shadow: 0 8px 30px rgba(255, 107, 107, 0.12); border: 2px solid #FFE4E1; overflow: hidden; }
.audit-log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.audit-log-table th { padding: 12px 16px; color: #5F6673; font-weight: 700; background: #FFF7ED; text-align: left; }
.audit-log-table td { padding: 12px 16px; color: #1F2937; }
.audit-log-table tbody tr { border-top: 1px solid #FFE4E1; }
.audit-log-table__when { white-space: nowrap; }
.audit-log-table__action { padding: 3px 10px; border-radius: 50px; background: #FFF7ED; font-weight: 700; color: #B45309; }
.audit-log-table__resource { color: #5F6673; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .audit-log-table thead { display: none; }
  .audit-log-table tbody tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 12px 16px; }
  .audit-log-table td { padding: 0; }
  .audit-log-table td.audit-log-table__resource { flex-basis: 100%; }
}

/* deep-qa fnl-002: the admin dashboard's "waiting for your approval" card. */
.dash-approval-card { display: block; margin-bottom: 16px; padding: 14px 16px; border-radius: 16px; background: #FFFBEB; border: 2px solid #FCD34D; text-decoration: none; }
.dash-approval-card:hover { border-color: #F59E0B; }
.dash-approval-card__title { display: block; font-weight: 800; color: #92400E; }
.dash-approval-card__body { display: block; margin-top: 2px; font-size: 13px; color: #5F6673; }

/* deep-qa fnl-015: the Add a child form. */
.add-child-form { display: block; max-width: 760px; }
.add-child-form__heading { font-size: 16px; font-weight: 800; color: #1F2937; margin: 0 0 12px; }
.add-child-form__heading:not(:first-child) { margin-top: 24px; }
.add-child-form__hint { margin: -4px 0 12px; font-size: 13px; }
.add-child-form__check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 700; color: #1F2937; }
.add-child-form__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.add-child-form__errors { background: #FEF2F2; border: 2px solid #FECACA; border-radius: 16px; padding: 12px 16px; margin-bottom: 20px; color: #991B1B; font-size: 14px; }
.add-child-form__errors ul { margin: 6px 0 0; padding-left: 18px; }