/* ═══════════════════════════════════════════════════════════════════
   modals.css — signup / login / founding overlays.

   DELIBERATELY DEFINES NO PALETTE TOKENS.

   Every color below is var(--…) resolved from the page's own :root.
   That means light mode needs zero work here: theme.css already
   redefines those tokens under html[data-theme="light"], and this
   file inherits the change for free. If a color ever looks wrong,
   the page is wrong — not this file.

   Components are the page's own recipes: .btn / .btn.primary and
   .input are copied from pricing/index.html + login/index.html so
   the overlay is indistinguishable from the page behind it.
   ═══════════════════════════════════════════════════════════════════ */

/* The ONE genuinely new value: the backdrop. Dark reuses the drop-shadow
   tone already on the page (pricing/index.html:90). Light follows
   theme.css's own override pattern. */
:root{ --scrim: rgba(0,0,0,.6); --modal-ring: rgba(194,199,183,.25); }
html[data-theme="light"]{ --scrim: rgba(40,20,60,.45); --modal-ring: rgba(58,71,34,.25); }

/* --err / --ok are declared per-page on apex, and only on the pages that
   already had forms (login, pricing, contact, forgot, confirm-email). The
   other 34 pages carrying this file — plus oracle and deepdive — never
   declared them, so a bare `color:var(--err)` was INVALID there and a card
   decline rendered as plain body text instead of red.
   Fixed at the USAGE sites below as var(--err, #CC7D62): a two-argument var()
   is a fallback, not a declaration, so a page that defines its own token
   still wins and the no-palette rule above holds. Declaring `--err` on a
   .m-* element instead would have overridden those pages.
   Values copied verbatim from login/index.html:31-32. */

.scrim{
  position:fixed; inset:0; background:var(--scrim);
  display:flex; align-items:flex-start; justify-content:center;
  padding:28px 18px; overflow-y:auto; z-index:2000;
}
.scrim[hidden]{ display:none; }
html.modal-open{ overflow:hidden; }

.modal{
  position:relative; width:100%; max-width:452px; margin:auto;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px 22px;
  color:var(--text); font-family:var(--sans);
}
.modal.wide{ max-width:496px; }
/* the .pcard.featured idiom — accent border + 1px ring, not a glow */
.modal.featured{ border-color:var(--accent); box-shadow:0 0 0 1px var(--modal-ring); }

.m-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--text-3); font-size:16px; line-height:1; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.m-close:hover{ color:var(--accent); border-color:var(--line); }
.m-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.m-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-2); margin:0 0 8px;
}
.modal.featured .m-eyebrow{ color:var(--accent); }
.m-title{
  font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  margin:0 0 6px; color:var(--text); text-wrap:balance;
}
.m-sub{ font-size:13.5px; color:var(--text-2); margin:0 0 20px; }

.m-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:13px; }
.m-field > label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3);
}
.m-row2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:520px){ .m-row2{ grid-template-columns:1fr; } }
.m-hint{ font-size:11.5px; color:var(--text-3); }
.m-err{ font-size:12.5px; color:var(--err, #CC7D62); margin:2px 0 0; min-height:1px; }

/* status line — mirrors the login page's .status ok/err states */
.m-status{ display:none; font-size:12.5px; line-height:1.45; margin:12px 0 0; }
.m-status.show{ display:block; }
.m-status.err{ color:var(--err, #CC7D62); }
.m-status.ok{ color:var(--ok, #93AB78); }

.m-card-slot{
  padding:12px 13px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); font-family:var(--mono); font-size:12px;
  color:var(--text-3); display:flex; align-items:center; gap:9px; line-height:1.4;
}
.m-card-slot .dot{ width:5px; height:5px; border-radius:50%; background:var(--text-3); flex:none; }

.m-checks{ display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
.m-check{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--text-2); line-height:1.45; cursor:pointer;
}
.m-check input{ margin:2px 0 0; accent-color:var(--accent); width:15px; height:15px; flex:none; }
.m-check a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.m-check .req{ color:var(--err, #CC7D62); }
.m-check.locked{ opacity:.55; cursor:default; }

.m-act{ margin-top:18px; }
.m-foot{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--text-3); text-align:center;
}
.m-foot a{ color:var(--accent); text-decoration:none; }
.m-foot a:hover{ text-decoration:underline; }

/* founding price block — the .pcard price idiom */
.m-price{ display:flex; align-items:baseline; gap:10px; margin:2px 0 4px; }
.m-price .amt{ font-size:36px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--text); }
.m-price .u{ font-size:15px; font-weight:600; color:var(--text-2); }
.m-price .was{ font-size:14px; color:var(--text-3); text-decoration:line-through; }
.m-diff{ font-size:12.5px; color:var(--accent); font-weight:600; margin:0 0 16px; }

.m-terms{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:7px; }
.m-terms li{ font-size:12.5px; color:var(--text-2); line-height:1.4; display:flex; gap:9px; }
.m-terms li b{ color:var(--text); font-weight:600; }
.m-terms .mk{ color:var(--accent); font-family:var(--mono); font-size:11px; flex:none; padding-top:1px; }

/* the page's own .freebie recipe */
.m-freebie{
  display:flex; align-items:center; gap:10px; padding:11px 14px; margin:0 0 18px;
  border-radius:var(--r-sm); background:rgba(147,171,120,.10);
  border:1px solid rgba(147,171,120,.40); font-size:12.5px;
  color:#a9c089; line-height:1.4;
}
html[data-theme="light"] .m-freebie{ color:#3a4722; }
.m-freebie b{ color:var(--accent); font-weight:600; }

/* ── tier modals (pass / edge / desk) ───────────────────────────── */

/* monthly ↔ annual. Recipe copied verbatim from the page's own
   .pricing-pill; the selected state reuses that class's own hover
   colors, so no new value is introduced. */
.m-intervals{ display:flex; gap:8px; margin:0 0 14px; }
.m-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text-2); font-family:var(--sans);
  padding:7px 12px; background:transparent;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.m-pill:hover,
.m-pill[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:var(--surface); }
.m-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.m-pill .save{ color:var(--text-3); font-size:11.5px; }
.m-pill[aria-pressed="true"] .save{ color:var(--accent); }

/* tier names read lowercase on the sports page — keep that voice */
.m-tier-name{ text-transform:lowercase; }

.m-feat{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:6px; }
.m-feat li{ font-size:12.5px; color:var(--text-2); line-height:1.4; display:flex; gap:9px; }
.m-feat li b{ color:var(--text); font-weight:600; }
.m-feat .tick{ color:var(--accent); flex:none; }

.m-fine{ font-size:11.5px; color:var(--text-3); line-height:1.5; margin:12px 0 0; }

/* ── pack picker ──────────────────────────────────────────────────
   The catalog step the app surfaces (oracle, deepdive) need, since they
   have no pricing cards to read a pack off. One row per pack, so the
   numbers stay comparable down the column instead of across a grid. */
.m-picks{ display:flex; flex-direction:column; gap:9px; margin:2px 0 4px; }
.m-pick{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:12px;
  width:100%;
  padding:13px 15px;
  text-align:left;
  font-family:var(--sans);
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.m-pick:hover{ border-color:var(--accent); }
.m-pick:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.m-pick.best{ border-color:var(--accent); }
.m-pick .n{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
/* digits line up down the column */
.m-pick .n, .m-pick .p{ font-variant-numeric:tabular-nums; }
.m-pick .n .u{ font-size:12px; font-weight:600; color:var(--text-2); }
.m-pick .r{ font-size:11.5px; color:var(--text-3); }
.m-pick.best .r{ color:var(--accent); font-weight:600; }
.m-pick .p{ font-size:15px; font-weight:600; color:var(--text-2); justify-self:end; }
.m-pick:hover .p{ color:var(--text); }
.m-pick .tag{
  position:absolute; top:-7px; right:12px;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent);
  padding:2px 7px; border-radius:999px;
}

@media (prefers-reduced-motion: reduce){
  .modal, .m-close, .btn, .m-pill{ transition:none !important; }
}