/* Condition-disclosure modal — overlay + panel + helper styles.
 *
 * Two layouts:
 *   * Desktop / tablet (>= 641px): centered card with backdrop padding,
 *     rounded corners, max-w-2xl. Classic web-modal pattern.
 *   * Mobile (<= 640px): full-screen sheet that slides up. Header is
 *     position:sticky to top, action button row is position:sticky to
 *     bottom, so the primary CTA ("Re-analyze with these conditions")
 *     is always visible without scrolling past a long form.
 *
 * The mobile layout is the one Steve flagged: he had to scroll within
 * the centered panel to find the Re-analyze button on his phone.
 */

.cm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  animation: cmOverlayFadeIn 200ms ease-out;
}

.cm-overlay[hidden] { display: none; }

@keyframes cmOverlayFadeIn {
  from { background: rgba(15, 23, 42, 0); }
  to   { background: rgba(15, 23, 42, 0.75); }
}

.cm-panel {
  position: relative;
  background: #ffffff;
  width: 100%;
  max-width: 42rem;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  padding: 1.5rem 1.5rem 1.25rem;
  /* Cap height so very-tall content scrolls inside the panel. dvh on
     supporting browsers handles iOS Safari's collapsing URL bar. */
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: cmPanelSlideIn 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes cmPanelSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The header (text intro) and the action-button row both want to stay
   pinned on mobile. Both get cm-actions / cm-header treatment via
   position:sticky inside the scroll container (.cm-panel itself). */

.cm-header {
  margin-bottom: 1rem;
  padding-right: 2.5rem;        /* desktop: clear of the close X */
}

.cm-actions {
  margin-top: 1.25rem;
}

.cm-section { margin-top: 1rem; }

/* Help-icon ? circles inside flag labels */
.cm-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.65rem;
  border-radius: 9999px;
  background: #e2e8f0;
  color: #475569;
  cursor: help;
  margin-left: 0.25rem;
}

/* Close X — Apple HIG 44pt minimum tap target */
.cm-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  /* Above the sticky header on mobile */
  z-index: 3;
}
.cm-close:hover,
.cm-close:focus {
  color: #1B2D5A;
  background: rgba(15, 23, 42, 0.05);
  outline: none;
}

/* Result animation: fade in when the result pane is unhidden */
@keyframes cmFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#cmResult:not(.hidden) { animation: cmFadeIn 250ms ease-out; }

/* Lock body scroll while modal is open. JS toggles. */
body.cm-open { overflow: hidden; }

/* Attestation block highlight — JS toggles this class on the label
   wrapping the 'I attest...' checkbox whenever the visitor has touched
   any disclosure input but hasn't ticked the box yet. Pulses red so
   it's impossible to miss. Auto-cleared when they tick the box OR
   clear all their picks. */
.cm-attest-needs-tick {
  background: #FEE2E2 !important;
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
  animation: cmAttestPulse 1.4s ease-in-out infinite;
}
@keyframes cmAttestPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.18); }
}

/* ============================================================
   MOBILE OVERRIDES — full-screen sheet, sticky header & footer
   ============================================================ */
@media (max-width: 640px) {
  .cm-overlay {
    padding: 0;
    align-items: stretch;
    animation: none;
  }
  .cm-panel {
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: none;
    animation: cmSheetSlideUp 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Sticky header — small + compact so the form gets visual priority */
  .cm-header {
    position: sticky;
    top: -1rem;                /* offset the panel padding so it pins flush */
    background: #ffffff;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    z-index: 2;
  }
  .cm-close {
    /* Match the new sticky-header layout */
    top: 0.25rem;
    right: 0.25rem;
  }
  /* Sticky action-button row at the bottom of the form (and result pane) */
  .cm-actions {
    position: sticky;
    bottom: calc(-1rem - env(safe-area-inset-bottom));
    background: #ffffff;
    margin: 1rem -1rem calc(-1rem - env(safe-area-inset-bottom));
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 16px -8px rgba(15, 23, 42, 0.12);
    z-index: 2;
  }
  /* Bigger touch targets on accordion summaries + checkboxes */
  details[data-cat-wrap] summary {
    padding: 0.875rem 0.75rem;
    min-height: 48px;
  }
  .cm-flag,
  .cm-sev {
    transform: scale(1.15);
    transform-origin: left center;
    margin-right: 0.25rem;
  }
  /* Severity radios — wrap as 2-up grid so labels don't truncate */
  .cm-sev-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
  }
}

@keyframes cmSheetSlideUp {
  from { transform: translateY(15%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* Highlights a single field (currently only #cmSummary) when an
   inline validation error specifically points at it. The red border
   plus subtle ring matches the post-purchase form's invalid state.
   Cleared as soon as the user starts typing in the field. */
.cm-field-error {
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.25);
}