/* =============================================================
   AI Filings — nto-selector.css
   NTO Role Selector Widget
   All styles scoped under .aif-nto-selector to prevent leakage.

   Severity color additions (not in site palette):
     --aif-warning: #B45309  (amber — introduced for WARNING severity only)
   All other values match the existing AI Filings site palette.
   ============================================================= */

/* ── Widget Variables ─────────────────────────────────── */
.aif-nto-selector {
  --aif-red:       #D32F2F;   /* FATAL severity + site accent */
  --aif-amber:     #B45309;   /* WARNING severity — introduced */
  --aif-gray:      #6B7280;   /* NON-FATAL severity */
  --aif-bg:        #FAFAFA;
  --aif-surface:   #FFFFFF;
  --aif-text:      #1A1A1A;
  --aif-secondary: #4A4A4A;
  --aif-border:    #E5E7EB;
  --aif-radius:    6px;
  --aif-transition: 0.22s ease;
}

/* ── Widget Container ─────────────────────────────────── */
.aif-nto-selector {
  background: var(--aif-bg);
  border: 1px solid var(--aif-border);
  border-radius: 10px;
  padding: 2rem 1.75rem;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--aif-text);
  line-height: 1.6;
}

/* Override the site's 500px FAQ accordion cap — NTO result cards can be much taller.
   Using a high value rather than 'none' so the CSS transition still animates. */
#nto-selector.open .faq-answer {
  max-height: 3000px;
}

/* When inside an FAQ answer, give it room to breathe */
.faq-answer .aif-nto-selector {
  margin-top: 0.25rem;
  border-color: transparent;
  background: transparent;
  padding: 0.5rem 0 0.25rem;
}

/* ── Inner Wrapper (animated on state changes) ─────────── */
.aif-nto-inner {
  animation: aif-fade-in 0.22s ease both;
}

@keyframes aif-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Persistent Disclaimer ────────────────────────────── */
.aif-nto-disclaimer {
  font-size: 0.75rem;
  color: var(--aif-secondary);
  line-height: 1.5;
  padding: 0.625rem 0.875rem;
  background: #F3F4F6;
  border-radius: var(--aif-radius);
  margin-bottom: 1.5rem;
}

.aif-nto-disclaimer--result {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* ── Back / Start Over ─────────────────────────────────── */
.aif-start-over {
  background: none;
  border: none;
  color: var(--aif-secondary);
  font-size: 0.8125rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color var(--aif-transition);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aif-start-over:hover { color: var(--aif-text); }
.aif-start-over:focus-visible {
  outline: 2px solid var(--aif-red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Question Title ───────────────────────────────────── */
.aif-nto-question {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--aif-text);
  margin: 0 0 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ── Choice Grid ──────────────────────────────────────── */
.aif-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}

/* ── Choice Button ────────────────────────────────────── */
.aif-choice-btn {
  width: 100%;
  text-align: left;
  background: var(--aif-surface);
  border: 1.5px solid var(--aif-border);
  border-radius: var(--aif-radius);
  padding: 0.875rem 1.1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--aif-text);
  cursor: pointer;
  transition:
    border-color var(--aif-transition),
    background   var(--aif-transition),
    box-shadow   var(--aif-transition);
  min-height: 48px; /* touch target */
  line-height: 1.4;
}

.aif-choice-btn:hover {
  border-color: var(--aif-red);
  background: #FFF5F5;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.08);
}

.aif-choice-btn:focus-visible {
  outline: none;
  border-color: var(--aif-red);
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
}

.aif-choice-btn:active {
  background: #FFECEC;
  transform: translateY(1px);
}

/* ── Result Card ──────────────────────────────────────── */
.aif-result-card {
  background: var(--aif-surface);
  border: 1px solid var(--aif-border);
  border-radius: 8px;
  padding: 1.75rem;
  margin-top: 0.5rem;
}

/* ── Result Headline ──────────────────────────────────── */
.aif-result-headline {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.aif-result-must-file {
  color: var(--aif-red);
}

.aif-result-no-file {
  color: var(--aif-text);
}

/* ── Plain-language Rule ──────────────────────────────── */
.aif-result-rule {
  color: var(--aif-secondary);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
  line-height: 1.65;
}

/* ── DEADLINE CALLOUT — dominant visual element ─────────
   Must be the most visually prominent element on a filing
   result card. Do not reduce its visual weight.           */
.aif-deadline-callout {
  background: #FFF0F0;
  border: 2px solid var(--aif-red);
  border-left: 6px solid var(--aif-red);
  border-radius: var(--aif-radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: var(--aif-text);
  line-height: 1.5;
}

.aif-deadline-callout strong {
  color: var(--aif-red);
  font-weight: 700;
  font-size: 1.05rem;
  display: block;
  margin-bottom: 0.25rem;
}

/* ── Recipient List ───────────────────────────────────── */
.aif-recipients-title {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--aif-secondary);
  margin: 0 0 0.75rem;
}

.aif-recipients-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aif-recip-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  border-radius: var(--aif-radius);
  border-left: 4px solid transparent;
}

/* FATAL */
.aif-severity-fatal {
  background: #FFF5F5;
  border-left-color: var(--aif-red);
}

.aif-severity-fatal .aif-recip-name {
  color: var(--aif-red);
  font-weight: 600;
}

/* WARNING */
.aif-severity-warning {
  background: #FFFBEB;
  border-left-color: var(--aif-amber);
}

.aif-severity-warning .aif-recip-name {
  color: var(--aif-amber);
  font-weight: 600;
}

/* NON-FATAL */
.aif-severity-nonfatal {
  background: #F9FAFB;
  border-left-color: var(--aif-gray);
}

.aif-severity-nonfatal .aif-recip-name {
  color: var(--aif-gray);
  font-weight: 600;
}

/* naPrivity muted row */
.aif-severity-null {
  background: #F9FAFB;
  border-left-color: var(--aif-border);
  opacity: 0.75;
}

.aif-recip-name {
  font-size: 0.9375rem;
}

.aif-recip-status {
  font-size: 0.8125rem;
  color: var(--aif-secondary);
  line-height: 1.4;
}

.aif-recip-caution {
  font-size: 0.8125rem;
  color: var(--aif-red);
  margin: 0.375rem 0 0;
  padding: 0.375rem 0.625rem;
  background: rgba(211,47,47,0.06);
  border-radius: 4px;
  line-height: 1.4;
}

/* ── Statute Citation ─────────────────────────────────── */
.aif-citation {
  font-size: 0.8125rem;
  color: var(--aif-secondary);
  margin: 0 0 1.25rem;
}

.aif-citation a {
  color: var(--aif-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(211,47,47,0.4);
  transition: text-decoration-color var(--aif-transition);
}

.aif-citation a:hover {
  text-decoration-color: var(--aif-red);
}

.aif-citation a:focus-visible {
  outline: 2px solid var(--aif-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Attorney Note (fourth-tier) ─────────────────────── */
.aif-attorney-note {
  font-size: 0.875rem;
  color: var(--aif-secondary);
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: #F3F4F6;
  border-radius: var(--aif-radius);
  line-height: 1.5;
}

/* ── CTAs ─────────────────────────────────────────────── */
.aif-cta {
  display: inline-block;
  background: var(--aif-red);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: var(--aif-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity var(--aif-transition), transform var(--aif-transition);
  min-height: 48px;
  margin-top: 0.25rem;
}

.aif-cta:hover { opacity: 0.88; transform: translateY(-1px); color: #FFFFFF; }
.aif-cta:active { transform: translateY(0); }
.aif-cta:focus-visible {
  outline: 2px solid var(--aif-red);
  outline-offset: 3px;
  border-radius: var(--aif-radius);
}

/* ── CTA Row (two buttons side by side, stack on mobile) ─ */
.aif-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
  align-items: stretch;
}

.aif-cta-row .aif-cta {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 200px;
}

/* ── Portal button (green) ────────────────────────────── */
.aif-cta-portal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--aif-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity var(--aif-transition), transform var(--aif-transition);
  min-height: 58px;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 200px;
}

.aif-cta-portal:hover { opacity: 0.88; transform: translateY(-1px); color: #FFFFFF; }
.aif-cta-portal:active { transform: translateY(0); }
.aif-cta-portal:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 3px;
  border-radius: var(--aif-radius);
}

.aif-cta-portal-label {
  font-size: 1rem;
  font-weight: 700;
  display: block;
  letter-spacing: -0.01em;
}

.aif-cta-portal-sub {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.88;
  display: block;
  margin-top: 0.2rem;
  letter-spacing: 0.01em;
}

.aif-cta-secondary {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--aif-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(211,47,47,0.4);
  margin-top: 0.75rem;
  transition: text-decoration-color var(--aif-transition);
}

.aif-cta-secondary:hover {
  text-decoration-color: var(--aif-red);
  color: var(--aif-red);
}

.aif-cta-secondary:focus-visible {
  outline: 2px solid var(--aif-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Landing Page Section Wrapper ─────────────────────── */
.aif-nto-section {
  padding: 4rem 0;
  border-top: 1px solid #E5E7EB;
}

.aif-nto-section .aif-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.aif-nto-section .aif-section-sub {
  color: #4A4A4A;
  font-size: 1rem;
  margin: 0 0 1.75rem;
  line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────── */
@media (min-width: 600px) {
  .aif-choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Q1 only has 4 options — keep them in a single column for clarity */
  .aif-choice-grid[data-cols="1"] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .aif-nto-selector {
    padding: 1.25rem 1rem;
  }

  .aif-result-card {
    padding: 1.25rem;
  }

  .aif-nto-question {
    font-size: 1rem;
  }

  .aif-result-headline {
    font-size: 1.1rem;
  }
}