/* css/components/modals.css */

/* =========================================================================
   1. GLOBAL MODAL BASE STYLES
   =========================================================================

   Sheet-style modifier (mobile-app feel):
     <div class="modal-overlay modal-overlay--sheet">
       <div class="modal-content modal-content--sheet">
         <span class="modal-content__handle" aria-hidden="true"></span>
         ... modal contents ...
       </div>
     </div>

   On phones (<= 767px) this docks the modal to the bottom of the
   viewport, rounds only the top corners, and lifts contents above the
   iPhone home-indicator. On desktop the modifier is a no-op and the
   modal renders centered as usual. Per design-system-spec.md §5.
   ========================================================================= */

/* Modal overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.85); /* Darker Slate for focus */
  display: none;
  align-items: flex-start; 
  justify-content: center;
  padding: 100px var(--space-4) var(--space-8) var(--space-4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFadeIn var(--transition-fast) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 11000;
}
.modal-overlay.is-visible {
  display: flex;
}
  
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  
/* Modal content container */
.modal-content {
  width: 100%;
  max-width: 500px;
  background-color: var(--color-white);
  border-radius: 16px; /* Modern radius */
  padding: var(--space-6);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  animation: modalSlideIn var(--transition-fast) var(--ease-out);
  max-height: 90vh;
  overflow-y: auto;
}
  
@keyframes modalSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
  
/* Modal close button */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-gray-500);
  transition: all var(--transition-fast) var(--ease-in-out);
  cursor: pointer;
  background-color: transparent;
  border: none;
  z-index: 10;
  font-size: 24px;
}

.modal-close:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
  transform: rotate(90deg);
}
  
/* Modal title */
.modal-content h2,
.modal-content h3 {
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  font-weight: var(--font-weight-semibold);
}
  
/* Modal buttons container */
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
  
.btn-modal-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-in-out);
}
  
.btn-modal-primary:hover {
  background-color: var(--color-primary-dark);
}
  
.btn-modal-secondary {
  background-color: var(--color-gray-200);
  color: var(--color-gray-700);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-in-out);
}
  
.btn-modal-secondary:hover {
  background-color: var(--color-gray-300);
  color: var(--color-gray-800);
}
  
/* =========================================================================
   1b. SHEET-STYLE MODIFIER (mobile slide-up bottom sheet)
   ========================================================================= */
@media (max-width: 767px) {
  /* Selectors chain the base + modifier classes so the sheet styles
     out-specify the general .modal-overlay / .modal-content mobile
     overrides further down in this file, regardless of source order. */
  .modal-overlay.modal-overlay--sheet {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content.modal-content--sheet {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 20px 20px 0 0;
    padding: var(--space-3) var(--space-5)
             calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    animation: sheetSlideUp 220ms var(--ease-out);
    max-height: 92vh;
  }

  .modal-content.modal-content--sheet .modal-content__handle {
    display: block;
    width: 40px;
    height: 4px;
    margin: 4px auto var(--space-4);
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
  }
}

@keyframes sheetSlideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Handle is hidden on desktop; modal renders as a centered card. */
.modal-content__handle {
  display: none;
}

/* Modal form elements */
.modal-content .form-group {
  margin-bottom: var(--space-4);
}

.modal-content .form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.modal-content .form-control {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast) var(--ease-in-out);
}

.modal-content .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
  outline: none;
}

/* =========================================================================
   2. EARNINGS INFO & TOOLTIPS (Existing Feature)
   ========================================================================= */

#creditEarningsInfo {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.earnings-row {
  display: flex;
  align-items: center;
  padding: var(--space-1) 0;
  position: relative;
}

.earnings-row.total {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-200);
  font-size: var(--font-size-base);
}

.earnings-row .fa-coins {
  color: #F7C702;
  margin-right: var(--space-1);
}

.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-gray-300);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  margin-right: var(--space-2);
  cursor: pointer;
}

.tooltip-content {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
  z-index: 10;
  display: none;
  width: 250px;
  font-size: var(--font-size-sm);
}

#suggestedNicheWrapper { margin-top: 12px; }

/* =========================================================================
   3. CURRENCY CONVERTER MODAL (Existing Feature)
   ========================================================================= */

.currency-converter-modal-dialog {
  max-width: 450px;
}

.currency-converter-modal-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.currency-converter-modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 var(--space-2);
}

.currency-converter-modal-header p {
  color: var(--color-gray-600);
  margin: 0;
}

.currency-converter-modal-body {
  margin-bottom: var(--space-4);
}

.currency-result-container {
  margin-top: var(--space-4);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#currency-result-text {
  font-size: var(--font-size-lg);
  color: var(--color-gray-800);
  margin: 0;
}

#currency-result-text strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.currency-converter-modal-footer {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  text-align: center;
  background-color: var(--color-gray-100);
  padding: var(--space-3);
  margin: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); /* Negative margin to bleed */
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.currency-result-container .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* =========================================================================
   4. UPGRADE MODAL LISTS (Existing Feature)
   ========================================================================= */

.feature-list-aligned {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.feature-list-aligned li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-gray-700);
}

.feature-list-aligned li:last-child {
  margin-bottom: 0;
}

.feature-list-aligned li i {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.feature-list-aligned li span strong {
  color: var(--color-gray-900);
  font-weight: 600;
}

/* =========================================================================
   5. DNA VERIFICATION MODAL - HIGH END FLAT DESIGN (REVAMPED)
   ========================================================================= */

/* Override overlay: center vertically, suppress overlay scrollbar (body scrolls internally) */
#dna-verification-modal.modal-overlay {
  align-items: center;
  padding: var(--space-4); /* Equal padding all around — no 100px top push */
  overflow: hidden;        /* Overlay never scrolls; modal body handles it */
}

.dna-modal-content {
  max-width: 600px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 16px; /* Larger radius for premium feel */
  overflow: hidden; /* Clip to border-radius, prevent content bleed */
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* Explicit cap — body will scroll, header/footer stay fixed */
}

/* Header */
.dna-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
}

/* Alignment Fix: Ensures content is vertically centered */
.dna-modal-header .dna-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dna-modal-content .dna-modal-title {
  margin: 0;
  font-size: 1.25rem;
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1; /* Stops large line-height from shifting text up */
}

/* Avatar */
.dna-modal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  margin: 0; /* Prevent margins from breaking alignment */
}

/* Body — flex-grows to fill space between header and footer, scrolls when tall */
.dna-modal-body {
  padding: 2rem;
  background-color: #ffffff;
  flex: 1 1 auto;
  min-height: 0; /* Critical: allows flex child to shrink below its content height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Inputs - High End Feel (Taller, Flatter) */
.dna-modal-content .form-control,
.dna-modal-content .form-select-sm {
  height: 50px; /* Force Height */
  padding: 0 16px;
  font-size: 0.95rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #ffffff;
  color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dna-modal-content .form-control:focus {
  border-color: #7c3aed; /* Force Purple Focus */
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
  outline: none;
}

/* Custom Dropdown Arrow */
.dna-modal-content select.form-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 12px;
  padding-right: 2.5rem;
}

/* Tag Container */
.dna-tags-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  min-height: 50px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.dna-tags-input-wrapper:focus-within {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* --- INLINE VALIDATION STYLES (Error State) --- */
.dna-tags-input-wrapper.is-invalid {
  border-color: #ef4444; /* Red */
  background-color: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.dna-field-error {
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: slideDown 0.2s ease-out;
}

.dna-field-error::before {
  content: "\f071"; /* FontAwesome Exclamation Triangle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8em;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The actual text input inside the tag box */
.dna-tag-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  font-size: 0.95rem;
  padding: 4px 0;
  margin-top: 2px;
  background: transparent;
  color: #1e293b;
}

/* Tag Chips - Rectangular/Flat */
.dna-tag-chip {
  display: inline-flex;
  align-items: center;
  background-color: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  user-select: none;
}

.dna-tag-chip:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.dna-tag-chip__remove {
  background: none;
  border: none;
  color: #94a3b8;
  margin-left: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.dna-tag-chip__remove:hover { color: #ef4444; }

/* The "Velvet Rope" Sponsor Box (Green Highlight) */
.dna-sponsor-wrapper {
  background: #f0fdf4; /* Mint Green */
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: 16px;
  margin-top: 24px;
}

.dna-sponsor-wrapper label {
  color: #166534; /* Dark Green Text */
  font-weight: 700;
}

.dna-sponsor-wrapper .dna-tags-input-wrapper {
  border-color: #86efac;
  box-shadow: none;
}

/* Footer & Main Button */
.dna-modal-footer {
  padding: 1.5rem 2rem;
  background-color: #ffffff;
  border-top: 1px solid #f1f5f9;
  border-radius: 0 0 16px 16px;
}

/* Force Purple Button - High Specificity */
#save-dna-btn {
  background-color: #7c3aed;
  border: 1px solid #7c3aed;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  height: 52px;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
  width: 100%;
  transition: all 0.2s ease;
}

#save-dna-btn:hover {
  background-color: #6d28d9;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
}

/* "Complete Later" Dismiss Button */
.dna-dismiss-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: color 0.2s ease;
  text-align: center;
}
.dna-dismiss-btn:hover {
  color: var(--color-gray-700);
}

/* Alerts */
.dna-context-alert {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
}

.dna-context-alert.alert-warning {
  background-color: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

/* Loading Animation - Radar */
.dna-scanner-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dna-scanner-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e8f0;
  position: relative;
  z-index: 2;
  background-color: #f1f5f9;
}

.dna-radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #7c3aed; /* Brand Purple */
  opacity: 0;
  z-index: 1;
}

.dna-radar-ring:nth-child(1) {
  width: 72px;
  height: 72px;
  animation: pulse-ring 2s infinite ease-out;
}

.dna-radar-ring:nth-child(2) {
  width: 72px;
  height: 72px;
  animation: pulse-ring 2s infinite ease-out 0.6s;
}

.dna-radar-ring:nth-child(3) {
  width: 72px;
  height: 72px;
  animation: pulse-ring 2s infinite ease-out 1.2s;
}

@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Loading Text */
.dna-loading-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  min-height: 1.5em;
}

/* Secure Badge */
.dna-secure-badge {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background-color: #f8fafc;
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
}
.dna-secure-badge i { color: #10b981; }

/* Responsive */
@media (max-width: 767px) {
  .modal-content {
    max-width: 90%;
    padding: var(--space-4);
  }
  
  .modal-buttons {
    flex-direction: column-reverse;
  }
  
  .modal-buttons button {
    width: 100%;
  }

  .modal-overlay {
    padding-top: 90px; 
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    padding-bottom: var(--space-6);
  }
  
  /* DNA Specific Mobile Overrides */
  #dna-verification-modal.modal-overlay {
    align-items: flex-start;
    padding: 0; /* Full-screen on mobile needs zero padding */
    overflow: hidden;
  }

  .dna-modal-content {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    max-height: 100dvh; /* dvh handles mobile browser chrome better than vh */
    height: 100dvh;
  }

  .dna-modal-header {
    border-radius: 0;
  }

  /* Footer stays in flex flow (not fixed) — body scrolls above it */
  .dna-modal-footer {
    border-radius: 0;
    position: static;
    box-shadow: 0 -4px 6px -1px rgba(0,0,0,0.05);
    flex-shrink: 0; /* Never shrink — always visible at bottom */
  }

  .dna-modal-body {
    padding-bottom: 1.5rem; /* Normal padding — footer no longer floats above */
  }

  .dna-modal-content .dna-form-row-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* =========================================================================
   MEDIA KIT EXPLAINER MODAL
   ========================================================================= */

.mk-explainer-modal {
    z-index: 10000;
}

.mk-explainer-content {
    max-width: 500px;
    border-radius: var(--radius-xl);
}

.mk-explainer-header {
    border-bottom: 1px solid var(--color-gray-100);
    padding: 1.5rem 1.5rem 1rem;
}

.mk-explainer-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mk-explainer-icon {
    width: 42px;
    height: 42px;
    background: #f0fdf4;
    color: var(--color-success-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mk-explainer-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-gray-800);
}

.mk-explainer-subtitle {
    margin: 2px 0 0;
    color: var(--color-gray-500);
    font-size: 0.85rem;
}

.mk-explainer-body {
    padding: 1.5rem;
}

.mk-explainer-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mk-explainer-benefit {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.mk-explainer-benefit-icon {
    font-size: 1.2rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.mk-explainer-benefit-icon--money { color: var(--color-brand-blue); }
.mk-explainer-benefit-icon--commission { color: #ea580c; }
.mk-explainer-benefit-icon--verify { color: var(--color-gray-600); }

.mk-explainer-benefit-title {
    display: block;
    color: var(--color-gray-800);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.mk-explainer-benefit-desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-gray-500);
    line-height: 1.4;
}

.mk-explainer-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    background-color: #fcfcfc;
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
}

.mk-explainer-footer-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mk-explainer-btn-preview {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-800);
    font-weight: 600;
    padding: 10px 16px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 140px;
}

.mk-explainer-btn-activate {
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    color: var(--color-white);
    padding: 10px 20px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 140px;
}
.mk-explainer-btn-activate:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.mk-explainer-btn-view {
    width: 100%;
    justify-content: center;
}

.mk-explainer-status-text {
    margin-right: auto;
}
/* =========================================================================
   1b. THE MISSING STRUCTURE - header, title, subtitle, body, footer
   =========================================================================

   WHY THIS EXISTS, and it is the root cause of the whole overlay mess.

   CLAUDE.md's Component Library Rule has told every developer and every AI tab
   for months to build overlays from .modal-overlay + .modal-content +
   .modal-close plus a header, body and footer. The overlay, content and close
   button were real. THE HEADER, BODY AND FOOTER WERE NEVER WRITTEN. So every
   feature that dutifully followed the rule reached for classes that did not
   exist, found nothing, and invented its own. Measured 2026-07-29 by
   scripts/overlay_census.php: 91 templates with overlay markup, 104
   stylesheets redefining overlay CSS, seven open/close conventions, and 1,614
   raw style.display writes.

   EVERYTHING BELOW IS SCOPED TO [data-cp-overlay], AND THAT IS NOT OPTIONAL.
   The first draft left these rules global and an adversarial sweep caught it
   doing real damage: 26 existing templates ALREADY use .modal-header,
   .modal-title, .modal-body and .modal-footer alongside their own classes, for
   example class="modal-header mk-explainer-header". Because these rules sit
   later in the bundle at equal specificity, they won. The Media Kit explainer,
   which base_members.twig includes on EVERY member page, went from a clean
   662px card to a 680px one that hit the height cap and clipped its own copy
   mid-sentence, with the title forced from 18.4px to 20px and wrapping onto
   two lines. partials/payment-modal.twig is included globally too, so the same
   overreach was sitting on a checkout surface.

   Scoping by :has(.modal-body) does NOT work and was the first attempt: all 26
   of those templates have a .modal-body, so the scope matched exactly the
   modals it was meant to protect. The overlay root attribute is the only
   honest marker, because it is what the new controller requires and nothing
   older has it.

   Canonical markup:

     <div class="modal-overlay" data-cp-overlay="thing" hidden>
       <div class="modal-content" role="dialog" aria-modal="true"
            aria-labelledby="x-title">
         <button class="modal-close" data-cp-overlay-close aria-label="Close">&times;</button>
         <div class="modal-header">
           <h2 class="modal-title" id="x-title">Title</h2>
           <p class="modal-subtitle">Optional one-liner</p>
         </div>
         <div class="modal-body"> ... </div>
         <div class="modal-footer">
           <button class="button button--ghost" data-cp-overlay-close>Cancel</button>
           <button class="button button--primary">Confirm</button>
         </div>
       </div>
     </div>

   Open and close it with /js/cp-overlay.js. Never with style.display.
   ========================================================================= */

[data-cp-overlay] .modal-header {
  /* Right padding clears the absolutely positioned close button so a long
     title cannot slide underneath it. */
  padding-right: 44px;
  margin-bottom: var(--space-4);
}

[data-cp-overlay] .modal-title {
  /* Declares SIZE and SPACING only. Typeface, weight and colour belong to the
     type system (abstracts/text-styles.css uses 600 across every heading) and a
     component restating them is the drift this file exists to end. A first
     draft set weight 700, lost to the type system at render, and was wrong to
     have tried. Size IS a component decision: a page h2 is --font-size-3xl,
     far too loud inside a dialog. */
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
  /* A one-word orphan on the second line is treated as a bug by
     zero-thinking-design-foundation.md. */
  text-wrap: balance;
}

[data-cp-overlay] .modal-subtitle {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gray-500);
  margin: var(--space-2) 0 0;
}

[data-cp-overlay] .modal-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-gray-700);
}

[data-cp-overlay] .modal-body > *:first-child { margin-top: 0; }
[data-cp-overlay] .modal-body > *:last-child  { margin-bottom: 0; }

[data-cp-overlay] .modal-footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-6);
}

/* Every button in a dialog footer clears the 44px touch floor. Measured on the
   canonical overlay: .button--ghost came out 284x42 while the primary was 50,
   so Cancel sat under this project's own non-negotiable minimum. */
[data-cp-overlay] .modal-footer .button {
  min-height: 44px;
}

/* The primary action sits last on desktop (right edge, where the eye lands)
   but must be FIRST and full width on a phone, because a thumb reaches the
   bottom of the screen and a row of two half-width buttons is a mis-tap. */
@media (max-width: 767px) {
  [data-cp-overlay] .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-2);
  }
  [data-cp-overlay] .modal-footer .button { width: 100%; }
}

/* A footer that also carries a secondary note keeps it on the left. */
[data-cp-overlay] .modal-footer--split { justify-content: space-between; }

/* On a phone a split footer must NOT reverse. A sweep caught the reversal
   putting the note UNDERNEATH the button, so "Cancel anytime" ended up
   captioning "Not now" and read as reassurance about declining rather than
   about the plan. Normal column order keeps the reassurance above the buttons,
   where the DOM already puts it. The old rule here set justify-content inside
   the mobile query, which was dead CSS: the main axis is vertical and the
   footer is content-height, so it could never have any effect. */
@media (max-width: 767px) {
  [data-cp-overlay] .modal-footer--split {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Scroll lock. The controller sets this on <html> AND <body>. BOTH are
   required on this site and body alone does nothing: base/reset.css sets
   html { overflow-x: hidden } to stop sideways scrollbars, and once the root
   element has a non-visible overflow the browser stops propagating the body's
   overflow to the viewport. A sweep caught this, with the class applied, body
   computing to overflow hidden, and the page behind still scrolling 403px
   under a real touch swipe.

   scrollbar-gutter reserves the scrollbar's space permanently, so locking the
   root no longer removes it. Without this a second sweep measured the whole
   desktop page jumping 15px sideways on every open and back on close, which
   the first sweep missed because headless Chromium uses overlay scrollbars. */
html {
  scrollbar-gutter: stable;
}

html.cp-overlay-open,
body.cp-overlay-open {
  overflow: hidden;
}

/* Stop a scroll that reaches the end of the dialog from chaining into the page
   behind it, which is the other half of the same complaint on a phone. */
.modal-overlay {
  overscroll-behavior: contain;
}

/* Width modifiers, so a feature never redeclares .modal-content to be wider. */
[data-cp-overlay] .modal-content--sm  { max-width: 400px; }
[data-cp-overlay] .modal-content--lg  { max-width: 720px; }
[data-cp-overlay] .modal-content--xl  { max-width: 960px; }

/* Locked content shown blurred with one inline unlock, never hidden. Taken
   from what the category leader does, recorded as principle P5 in
   .claude/context/vidiq-teardown.md: showing that the thing EXISTS and putting
   one button on it outperforms hiding it. */
[data-cp-overlay] .modal-locked {
  position: relative;
}
[data-cp-overlay] .modal-locked__veiled {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
[data-cp-overlay] .modal-locked__unlock {
  /* Centred with auto margins, NOT a transform. .button--primary:focus sets
     transform: translateY(-1px) at specificity (0,2,0), which beats a (0,1,0)
     class here and wiped out the centring entirely. It fired every time,
     because the controller focuses the first real button on open and that is
     this one. On a phone the paywall button hung 17px past the card edge with
     its label cut off. */
  position: absolute;
  inset: 0;
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  z-index: 2;
  white-space: nowrap;
  max-width: calc(100% - var(--space-6));
}

/* =========================================================================
   1c. A DIALOG THAT SCROLLS PROPERLY, AND A CLOSE BUTTON YOU CAN HIT
   =========================================================================
   Two more defects a sweep found in the first draft, both on a phone. The demo
   promised that the header and footer stay put and they did not, because
   .modal-content was the scroller, so a long body scrolled the title away and
   put the primary action 2,246px below the fold. And .modal-close was 32x32,
   under this project's own 44px floor, on the very component every future
   overlay is meant to copy.

   Height budget: the overlay pads 100px top and 32px bottom on desktop, 90 and
   24 on a phone, so the cap has to differ or a dialog either overruns the
   screen or wastes 18px of it. dvh not vh, because 100vh is the LARGE viewport
   on iOS Safari and Android Chrome, so with the toolbar showing a vh-capped
   dialog puts its footer back under the fold. The DNA modal in this codebase
   already uses dvh, so the precedent is in-repo.
   ========================================================================= */

[data-cp-overlay] .modal-content:has(.modal-body) {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 132px);
  overflow: hidden;          /* the body scrolls, not the whole card, so the
                                rounded corners stay clean instead of content
                                sliding under them */
}

@media (max-width: 767px) {
  [data-cp-overlay] .modal-content:has(.modal-body) {
    max-height: calc(100dvh - 114px);
  }
}

[data-cp-overlay] .modal-content:has(.modal-body) > .modal-header,
[data-cp-overlay] .modal-content:has(.modal-body) > .modal-footer {
  flex: 0 0 auto;
}

[data-cp-overlay] .modal-content:has(.modal-body) > .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
}

/* Keep the close button visually 32px but give it a real 44x44 hit area, so
   nothing about existing layouts shifts and the tap-target rule is still met. */
[data-cp-overlay] .modal-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Respect a member who has asked their device for less motion. The overlay
   still appears and disappears, it just stops sliding and fading. Raised as a
   fair question by the outside cold read on 2026-07-29, and correct: this file
   ships two keyframe animations (modalFadeIn, modalSlideIn) that ran for
   everyone regardless of the setting. For people with vestibular sensitivity a
   panel flying up the screen is not decoration, it is a symptom trigger. */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-content {
    animation: none !important;
  }
}

/* =========================================================================
   1d. BRIDGE TO THE NEW FOUNDATION
   =========================================================================
   The new design language (abstracts/foundation.css) is OPT-IN: a container
   carries `.fnd` and everything inside it switches to the new paper, ink and
   type. It uses its own token namespace (--fnd-*), deliberately separate from
   the old --color-* / --space-* system, so the two can coexist while the site
   migrates page by page.

   Sections 1b and 1c above are written against the OLD tokens, which is
   correct: most of the site is still the old look and an overlay must match
   the page it opens on. This block is the hinge. Inside a `.fnd` container the
   overlay picks up the new surfaces instead, so the first page rebuilt in the
   new design gets a correct-looking popup with no extra work.

   Deliberately SMALL. Three things only:
     - The TITLE needs nothing. foundation.css already styles h1/h2/h3 inside
       .fnd at specificity (0,1,1), which beats a plain component class, and
       .modal-title sets only size and spacing precisely so it does not fight
       that. Verified: adding .fnd switches the title to Wix Madefor Display
       while keeping the dialog-appropriate 20px.
     - COLOUR does not carry over, because the old and new palettes are
       different namespaces. Mapped below.
     - SPACING is deliberately NOT remapped. The --fnd-s* scale has different
       magnitudes, and a dialog's internal rhythm is a component decision, not
       a page-theme one. Changing it here would silently resize every overlay
       the moment a page opted in.
   ========================================================================= */

.fnd [data-cp-overlay] .modal-subtitle,
[data-cp-overlay].fnd .modal-subtitle {
  color: var(--fnd-text-soft);
}

.fnd [data-cp-overlay] .modal-body,
[data-cp-overlay].fnd .modal-body {
  color: var(--fnd-text);
}

.fnd [data-cp-overlay] .modal-content,
[data-cp-overlay].fnd .modal-content {
  background-color: var(--fnd-card);
  border-radius: var(--fnd-r);
}