/* ============================================================
   ARSON THEORY · DARK MODE
   Activated by <html data-theme="dark"> (set by /assets/dark-mode.js).
   Loaded after the page's inline <style> block so these overrides
   take precedence. One source of truth for all six client-facing forms:
   onboard, join, plus, pro, pitch, support, signing-complete, proposal.
   ============================================================ */

[data-theme="dark"]{
  --bone:  #0a0a0a;
  --ink:   #f7f5f2;
  --line:  rgba(247,245,242,.14);
  --muted: #9a9a9a;
  /* --red stays the same — brand accent reads on both backgrounds */

  /* Tells Chrome / Safari to render native form controls (scrollbars, the
     fallback parts of <select>) in dark mode. Without this, Chrome paints
     its own light-mode chevron OVER our custom one inside <select>. */
  color-scheme: dark;
}

[data-theme="dark"] body{
  background: var(--bone);
  color: var(--ink);
}

[data-theme="dark"] body::before{
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(254,43,9,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 100%, rgba(254,43,9,.08), transparent 60%);
}
[data-theme="dark"] body::after{
  opacity: .15;
  background-image:
    linear-gradient(rgba(247,245,242,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,245,242,.05) 1px, transparent 1px);
}

/* Cards / panels / modals */
[data-theme="dark"] .step,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-head,
[data-theme="dark"] .modal-foot,
[data-theme="dark"] .summary,
[data-theme="dark"] .stat,
[data-theme="dark"] .gate-card{
  background: #171717;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -30px rgba(0,0,0,.8);
}

[data-theme="dark"] .modal-body p,
[data-theme="dark"] .summary dd,
[data-theme="dark"] .stat .small,
[data-theme="dark"] label.field > span,
[data-theme="dark"] label.field span.lbl,
[data-theme="dark"] .choice .title{ color: var(--ink); }

[data-theme="dark"] .modal-body .callout{
  background: rgba(254,43,9,.14);
  border-color: rgba(254,43,9,.45);
  color: var(--ink);
}

/* Inputs / selects / textareas */
[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea{
  background: #1f1f1f;
  color: var(--ink);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .input:focus,
[data-theme="dark"] .select:focus,
[data-theme="dark"] .textarea:focus{
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
[data-theme="dark"] .input::placeholder,
[data-theme="dark"] .textarea::placeholder{ color: rgba(247,245,242,.4); }
[data-theme="dark"] .select{
  /* Light-mode select uses a dark SVG arrow; swap to a light one. Repeat /
     position / size are re-asserted explicitly because some pages override
     these via shorthand and Chrome's dark-mode form rendering can otherwise
     tile our chevron across the whole field. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23f7f5f2' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* Choice cards (radio / checkbox tiles) */
[data-theme="dark"] .choice{
  background: #1f1f1f;
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .choice:hover{ border-color: #fff; }
[data-theme="dark"] .choice:has(input:checked){
  border-color: var(--red);
  background: linear-gradient(0deg, rgba(254,43,9,.14), rgba(254,43,9,.14)), #1f1f1f;
}
[data-theme="dark"] .choice .check{ border-color: rgba(255,255,255,.18); }

/* File upload widgets (pitch + support forms) */
[data-theme="dark"] .upload-wrap{
  background: #1f1f1f;
  border-color: rgba(255,255,255,.18);
}
[data-theme="dark"] .upload-wrap:hover{ border-color: #fff; }
[data-theme="dark"] .upload-wrap.has-file{
  background: rgba(19,163,107,.10);
  border-color: rgba(19,163,107,.55);
}
[data-theme="dark"] .upload-title{ color: var(--ink); }

/* Buttons */
[data-theme="dark"] .btn.ghost{
  color: var(--ink);
  border-color: rgba(255,255,255,.18);
}
[data-theme="dark"] .btn.ghost:hover{ border-color: #fff; }
[data-theme="dark"] .btn.dark{ background: #f7f5f2; color: #0a0a0a; }
[data-theme="dark"] .btn.dark:hover{ background: #fff; }

/* Misc text */
[data-theme="dark"] .lede{ color: rgba(247,245,242,.78); }
[data-theme="dark"] .hint,
[data-theme="dark"] label.field .hint-text,
[data-theme="dark"] .upload-sub,
[data-theme="dark"] .legacy-fallback,
[data-theme="dark"] footer.foot,
[data-theme="dark"] .legal,
[data-theme="dark"] .agree,
[data-theme="dark"] .summary dt{ color: var(--muted); }
[data-theme="dark"] .agree a{ color: var(--red); }

[data-theme="dark"] .section-divider{
  border-color: rgba(255,255,255,.12);
  color: var(--red);
}

/* Signature widget (index.html — Arson tier) */
[data-theme="dark"] .sig-wrap{ background: #1f1f1f; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .sig-tabs{ border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .sig-tab{ color: var(--muted); }
[data-theme="dark"] .sig-tab.active{ color: var(--ink); }
[data-theme="dark"] #sig-canvas{
  background: repeating-linear-gradient(0deg, transparent 0 30px, rgba(247,245,242,.06) 30px 31px);
}
[data-theme="dark"] .sig-baseline{ border-color: rgba(247,245,242,.25); }
[data-theme="dark"] .sig-baseline::after{ color: var(--muted); }
[data-theme="dark"] .sig-clear{
  background: #1f1f1f;
  border-color: rgba(255,255,255,.12);
  color: var(--ink);
}
[data-theme="dark"] .sig-typed-preview{
  color: var(--ink);
  border-color: rgba(255,255,255,.12);
}

/* Pills (badges) — keep red/ink combos legible on dark */
[data-theme="dark"] .pill.tier-plus,
[data-theme="dark"] .pill.tier-pro{ color: #fff; }

/* ============================================================
   SUBSCRIBE.ARSONTHEORY.COM — marketing page surfaces
   The subscribe page uses its own section / math-card / compare-table
   class system (separate from the form pages). Dark these surfaces too.
   ============================================================ */

[data-theme="dark"] section.section{
  background: #171717;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -30px rgba(0,0,0,.8);
}
[data-theme="dark"] section.section.final-cta h2,
[data-theme="dark"] .hero h1,
[data-theme="dark"] h2.section-title{ color: var(--ink); }
[data-theme="dark"] .section-sub{ color: var(--muted); }
[data-theme="dark"] .hero .lede{ color: rgba(247,245,242,.78); }
[data-theme="dark"] .hero .price-line{ color: var(--muted); }
[data-theme="dark"] .hero .price-line strong{ color: var(--ink); }

/* Bundle math card */
[data-theme="dark"] .math-card{
  background: #1f1f1f;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.6);
}
[data-theme="dark"] .math-row{ border-color: rgba(255,255,255,.10); }
[data-theme="dark"] .math-row .lbl{ color: var(--ink); }
[data-theme="dark"] .math-row .lbl span{ color: var(--muted) !important; }
[data-theme="dark"] .math-row .val{ color: var(--muted); }
[data-theme="dark"] .math-total{
  background: linear-gradient(135deg, rgba(254,43,9,.10) 0%, rgba(254,43,9,.20) 100%);
  border-color: rgba(254,43,9,.45);
}
[data-theme="dark"] .math-total .lbl{ color: var(--ink); }
[data-theme="dark"] .math-total .val span{ color: var(--muted) !important; }
[data-theme="dark"] .math-final{
  background: #fff;
  color: #0a0a0a;
}
[data-theme="dark"] .math-final .lbl{ color: #0a0a0a; }
[data-theme="dark"] .math-final .savings{ color: rgba(10,10,10,.55); }

/* Comparison table */
[data-theme="dark"] .compare-table th,
[data-theme="dark"] .compare-table td{ border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .compare-table th{ color: var(--muted); }
[data-theme="dark"] .compare-table td.feat-name{ color: var(--ink); }
[data-theme="dark"] .compare-table .qual{ color: var(--muted); }
[data-theme="dark"] .compare-table th.arson-col,
[data-theme="dark"] .compare-table td.arson-col{
  background: linear-gradient(180deg, rgba(254,43,9,.18), rgba(254,43,9,.10));
  border-left-color: rgba(254,43,9,.50);
  border-right-color: rgba(254,43,9,.50);
}
[data-theme="dark"] .compare-table thead th.arson-col{ border-top-color: rgba(254,43,9,.50); }
[data-theme="dark"] .compare-table tbody tr:last-child td.arson-col{ border-bottom-color: rgba(254,43,9,.50); }
[data-theme="dark"] .compare-table th.arson-col{ color: #ff5240; }
[data-theme="dark"] .compare-table .x{ color: rgba(247,245,242,.30); }

/* "What we don't take" black card stays — its inner zero-cards already
   have rgba whites that work in either theme. Just nudge the heading. */
[data-theme="dark"] .no-take h2.section-title{ color: #fff; }
[data-theme="dark"] .no-take .section-sub{ color: rgba(255,255,255,.7); }

/* Final CTA fine print */
[data-theme="dark"] .final-cta .lede{ color: var(--muted); }
[data-theme="dark"] .final-cta .fine{ color: var(--muted); }

/* Hero CTA buttons — the dark button needs to flip to light in dark mode */
[data-theme="dark"] .btn.dark{
  background: #f7f5f2; color: #0a0a0a;
  box-shadow: 0 12px 28px -10px rgba(255,255,255,.18);
}
[data-theme="dark"] .btn.dark:hover{ background: #fff; }
/* Plan card's "white" annual button — invert for legibility on light surface */
[data-theme="dark"] .plan-card-cta a.btn[style*="background:#fff"]{
  /* Inline style wins; nothing to override here. The white pill on the dark
     plan card already reads well in either theme. */
}

/* Step progress bar — inactive segments use a dark tint in light mode that
   becomes invisible against the dark page background. Invert to a light tint
   so users can still see the empty segments + the red progress filling them. */
[data-theme="dark"] .progress i{ background: rgba(247,245,242,.14); }

/* ============================================================
   THEME TOGGLE BUTTON
   Fixed bottom-right circle with sun (light) / moon (dark) icon.
   ============================================================ */
.theme-toggle{
  position: fixed; bottom: 20px; right: 20px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #0a0a0a;
  border: 1.5px solid rgba(10,10,10,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; appearance: none; padding: 0;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.theme-toggle:hover{
  transform: scale(1.08);
  border-color: #0a0a0a;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.theme-toggle:focus-visible{ outline: 2px solid #fe2b09; outline-offset: 2px; }
.theme-toggle svg{ width: 18px; height: 18px; }
.theme-toggle .moon{ display: none; }

[data-theme="dark"] .theme-toggle{
  background: #1f1f1f; color: #f7f5f2;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
[data-theme="dark"] .theme-toggle:hover{ border-color: #fff; }
[data-theme="dark"] .theme-toggle .sun{ display: none; }
[data-theme="dark"] .theme-toggle .moon{ display: inline; }

@media (max-width: 560px){
  .theme-toggle{ bottom: 14px; right: 14px; width: 40px; height: 40px; }
}
