/* ═══════════════════════════════════════════════════════════════════
   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.

   The pop-up's buttons and typing boxes are styled HERE (the block
   "the pop-up's own controls" below), from pricing/index.html's .btn
   and login/index.html's .input, with every button a pill.

   modals_v7.css (2026-10-30) replaces modals.css under a new name,
   because /assets/* is cached for a week. modals.css stays for anything
   still pointing at it. ⛔ The other sites load THIS file from the main
   site, so the main site must go live before any of them points here.
   ═══════════════════════════════════════════════════════════════════ */

/* 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(122,173,142,.25); }
html[data-theme="light"]{ --scrim: rgba(40,20,60,.45); --modal-ring: rgba(40,89,63,.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); }

/* 44px to tap, centered where the old 30px button sat (14 + 15 = 7 + 22) */
.m-close{
  position:absolute; top:7px; right:7px; width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:50%;
  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, #D78380); 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, #D78380); }
.m-status.ok{ color:var(--ok, #64A973); }

/* member / unverified state banner — the reason at the TOP of a purchase
   modal, with its one action button (10-09) */
.m-state{ margin:6px 0 14px; padding:12px 14px; border:1px solid var(--accent);
  border-radius:var(--r-sm); }
.m-state[hidden]{ display:none; }
.m-state-msg{ margin:0; font-size:13.5px; line-height:1.5; color:var(--text); }
.m-state-act{ margin-top:12px; }

.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, #D78380); }
.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(100,169,115,.10);
  border:1px solid rgba(100,169,115,.40); font-size:12.5px;
  color:#a9c089; line-height:1.4;
}
html[data-theme="light"] .m-freebie{ color:#28593F; }
.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;
}

/* ── the pop-up's own controls ───────────────────────────────────────
   ⛔ THESE WERE NEVER HERE. The header promised .btn and .input "copied
   from pricing + login", but only pricing, the sports home page and the
   log-in page styled them, so elsewhere (measured 2026-10-30: the homepage,
   about, terms, writings, and oracle) the pop-up's email and password were
   bare white browser boxes, and on most of those its "Log in" was a gray
   browser button. Scoped to .modal, so a page's own .btn never changes, and
   (0,2,0) beats a page's `button, .btn { font-family }`, which on oracle
   was the typewriter face. */
.modal .input{
  display:block; width:100%; min-height:44px; padding:11px 13px;
  font:inherit; font-family:var(--sans); font-size:16px;
  color:var(--text); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-sm); transition:border-color .15s, background .15s;
}
.modal .input:focus{ outline:none; border-color:var(--accent); background:var(--surface-2, var(--bg)); }
.modal .input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.modal .input::placeholder{ color:var(--text-3); }
.modal .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 22px;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.02em;
  color:var(--text-2); background:transparent; border:1px solid var(--line);
  border-radius:999px; cursor:pointer; text-decoration:none;
  transition:color .15s, border-color .15s, filter .15s;
}
.modal .btn:hover{ color:var(--accent); border-color:var(--accent); }
.modal .btn.primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.modal .btn.primary:hover{ filter:brightness(1.08); color:var(--accent-ink); }
.modal .btn.full{ width:100%; }
.modal .btn:disabled{ opacity:.55; cursor:wait; }
.modal .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

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

/* ⛔ THE `hidden` ATTRIBUTE DID NOT HIDE ANYTHING HERE. decorateFoundingCards()
   closes the offer with cta.setAttribute('hidden',''), which relies on the UA
   sheet's [hidden]{display:none} — and an AUTHOR rule always beats the UA
   sheet, whatever its specificity. All three founding CTAs carry one:
   .fo-cta{display:flex} (home), .pclose .go{display:inline-flex} (pricing),
   .tier-cta{display:inline-flex} (sports). So the closed button stayed fully
   visible on every surface that has it, and only the caption changed. */
[data-founding-cta][hidden]{ display:none !important; }