/*
 * New-UI brand LAYER for the public SIGNUP modal (NewSignupPopup).
 *
 * The modal is a react-bootstrap <Modal> that PORTALS to <body>, OUTSIDE the
 * `.new-ui-branded` wrapper <Layout> puts on <main> — so the design-system vars
 * on <main> never reach it. NewSignupPopup instead SELF-BRANDS: for flagged
 * projects (useNewLanding.brandingActive) it adds `new-ui-branded` to the
 * Modal.Body (which already carries `signup-modal-content`) and drops the
 * design-system tokens there as inline `--ls-*` CSS vars
 * (tokensToCssVars(withDefaults(tokens), customFonts)). Modal.Body is the
 * ancestor of every rule in THIS file except panelBg (see its own note): the
 * `<Modal>` ROOT carries a SECOND, identical copy of the vars (class
 * `new-ui-branded-shell`) because `.modal-content` — the element panelBg has
 * to paint — sits BETWEEN the root and Modal.Body, and CSS vars only inherit
 * DOWN, never back up to an ancestor.
 *
 * ── SCOPING ──
 * `new-ui-branded` and `signup-modal-content` sit on the SAME element
 * (Modal.Body), so the scope for every rule except panelBg is the COMPOUND
 * `.new-ui-branded.signup-modal-content` (no descendant space — one class
 * can't be a proper ancestor of the other on the same element). Every rule
 * still starts with `.new-ui-branded`, so it only paints for flagged modals;
 * non-flagged modals get neither the class nor the vars and are byte-for-byte
 * unchanged.
 *
 * ── PER-SLUG STYLESHEETS EXIST — this shaped which spots got a CSS rule ──
 * template.tsx appends `/assets/styles/<slug>.css` (from the CDN) for EVERY
 * project, on top of globals.css. This repo only ships one such sheet
 * in-tree (public/assets/styles/chathamwestryde.css) but any project can have
 * one, and this file can't see them all. Confirmed in chathamwestryde.css:
 * `.bg-steps`/`.bg-steps-one` → #AB9164, `.color-code` → #000 !important,
 * `.text-resend` → #000, `.p-login-popup-p`/`.desc-login` → #5A5961,
 * `.bg-prime`/`.color-six` → var(--filter-boder-color). A plain class rule in
 * THIS file at (0,3,0) beats any of those per-slug (0,1,0) rules outright — so
 * for a colour with no value hardcoded in globals.css today (stepInactive,
 * fieldBg, fieldBorder), adding one here would SILENTLY ERASE whatever a
 * per-slug sheet painted for every flagged project, not just ones that
 * override the signup control. Those three are therefore applied as an
 * INLINE style directly in NewSignupPopup.tsx instead (`signupColor()`),
 * which resolves to `undefined` — no declaration at all — when unset, leaving
 * the normal cascade (globals.css, then the per-slug sheet) exactly as it is
 * today. Only heading/subtitle/btnBg/btnText/stepActive get a CSS rule here:
 * globals.css ALREADY hardcodes a value for each of their targets (so a
 * per-slug sheet re-pointing them is the SAME kind of override this modal
 * already accepted pre-signup-customizer, back when they all just read
 * `--ls-accent`), and helperText/linkText get one too because there is no
 * alternative to a stylesheet rule for them (see the `!important` section).
 *
 * ── SIGNUP-MODAL DESIGN TOKENS — `--ls-signup-*` ──
 * Every colour a developer can set from Landing Page → Design ▾ → General
 * design → "Signup modal" is emitted as its OWN `--ls-signup-*` var (only when
 * set — see designTokens.ts tokensToCssVars), each independently overridable.
 * Every rule below reads `var(--ls-signup-X, <today's chain>)`, so an unset
 * signup colour resolves to exactly what the spot painted before this feature
 * existed — for heading/subtitle/step-active/button-bg that "today" value is
 * itself `var(--ls-accent, #3DACD3)` (the general brand accent this modal
 * already keyed off), so a project that only ever set the general accent (and
 * never touched a signup-specific control) is unaffected.
 *
 *   heading         .p-login-popup-p, .color-six           var(--ls-accent, #3DACD3)
 *   subtitle        .desc-login                            var(--ls-accent, #3DACD3)
 *   btnBg           .form-box .btn-primary bg + border      var(--ls-accent, #3DACD3)
 *   btnText         that button's text                      #fff
 *   stepActive      .bg-prime                                var(--ls-accent, #3DACD3)
 *   stepInactive    the .bg-steps connector div (inline JSX — see above; NOT
 *                   .bg-steps-one, which has no colour of its own: on page 1 it
 *                   ALSO carries .bg-prime and that is what paints it. There is
 *                   no separate "inactive circle colour" in this design.)
 *   helperText      .color-code, .text-resend                #63A491
 *   linkText        terms/privacy links                      #212529 (bootstrap .text-dark)
 *   fieldBg         the .bg-shadow (phone row) div — inline JSX (see above)
 *   fieldBorder     the .bg-shadow border + the OTP input border — both inline JSX
 *   panelBg         .modal-content (via the <Modal> shell — see below)         rgba(255,255,255,0.8)
 *
 * ── SPECIFICITY ──
 *   • `.bg-prime`, `.desc-login`/`.p-login-popup-p`/`.color-six`, `.text-resend`
 *     only compete with plain (0,1,0) globals.css rules, so the compound
 *     (0,3,0) scope wins with no `#root`.
 *   • the primary button needs `#root` (see its own note): once Modal.Body
 *     carries `new-ui-branded`, unit-branding-newui.css's
 *     `#root .new-ui-branded .form-box .btn-primary` (1,3,0) ALSO matches the
 *     modal button, so this file's button rule has to out-rank THAT.
 *
 * ── `!important` — TWO unavoidable exceptions (corrected: an earlier version
 * of this comment claimed none was used anywhere; that was wrong) ──
 *   1. `.color-code` (helperText target) — globals.css sets its colour with
 *      `!important` (`.color-code { color: #63A491 !important }`), so the
 *      override needs `!important` too or it can never land. `.text-resend`
 *      (the OTHER helperText target) carries no `!important` in globals.css,
 *      so its own rule below does not use one.
 *   2. `.text-dark` (linkText target, the terms/privacy links) — this is a
 *      BOOTSTRAP utility class, and bootstrap.min.css ships every `.text-*`
 *      utility with `!important` (`.text-dark { color: rgba(var(--bs-dark-rgb),
 *      var(--bs-text-opacity)) !important }`). There is no way to beat an
 *      `!important` rule without also using `!important` — specificity alone
 *      cannot do it — so this override needs one too. (Both `!important`s here
 *      still resolve correctly: our compound (0,3,0)/(0,4,0) selector out-
 *      specifies the plain (0,1,0) utility it's overriding, so ours wins even
 *      among same-origin `!important` rules.)
 * No OTHER rule in this file uses `!important`. NOTE the tradeoff this implies:
 * unlike stepInactive/fieldBg/fieldBorder above, helperText and linkText have
 * NO inline-style alternative (an inline style can't reliably carry
 * `!important`, so it would lose to globals.css's `.color-code` and
 * bootstrap's `.text-dark`), so for a FLAGGED project these two DO override
 * whatever a per-slug stylesheet painted for `.color-code`/`.text-resend`/
 * `.text-dark`, same as chathamwestryde.css's own `#000`/`#000 !important`
 * values would be. This is the accepted existing tradeoff — the same one the
 * heading/subtitle/btnBg/stepActive rules already made — not a regression.
 */

/* Step indicators (page circles + connector line) — brand fill. Base
 * `.bg-prime` (0,1,0) is #3DACD3. */
.new-ui-branded.signup-modal-content .bg-prime {
  background-color: var(--ls-signup-step-active, var(--ls-accent, #3DACD3));
}

/*
 * Primary Continue / Verify buttons. These are react-bootstrap `.btn-primary`
 * whose background is set DIRECTLY (not via --bs-btn-*) by base
 * `.form-box .btn-primary` (#050705) and `.sign-h .btn-primary` (#3DACD3), and —
 * because Modal.Body now carries `new-ui-branded` — ALSO by unit-branding-
 * newui.css's `#root .new-ui-branded .form-box .btn-primary` (specificity
 * (1,3,0), value `var(--ls-primary-btn, …)`). To honour the accent mapping the
 * button rule is scoped `#root … .form-box .btn-primary` (1,4,0; :hover/:focus/
 * :active at 1,5,0) so it out-ranks BOTH the plain globals rules and that
 * unit-branding rule. Setting only --bs-btn-* vars would lose to the direct
 * background declarations, so the accent is applied as a direct background/
 * border. btnText defaults to white for contrast (the base rule hardcodes
 * `color: #fff` too, so unset is byte-identical). (Every modal primary button
 * lives under `.form-box.sign-h`, so `.form-box` in the selector always holds.)
 */
#root .new-ui-branded.signup-modal-content .form-box .btn-primary,
#root .new-ui-branded.signup-modal-content .form-box .btn-primary:hover,
#root .new-ui-branded.signup-modal-content .form-box .btn-primary:focus,
#root .new-ui-branded.signup-modal-content .form-box .btn-primary:active {
  background-color: var(--ls-signup-btn-bg, var(--ls-accent, #3DACD3));
  border-color: var(--ls-signup-btn-bg, var(--ls-accent, #3DACD3));
  color: var(--ls-signup-btn-text, #fff);
}

/*
 * Brand-blue accent text: the marketing heading (`.p-login-popup-p`) and the
 * OTP "Enter 6-digit code" heading (`.color-six`) both hardcode #3DACD3 in
 * globals.css and share the `heading` token; the step-2 subtitle (`.desc-login`,
 * also #3DACD3) is its OWN `subtitle` token so a developer can diverge the two.
 * The green secondary text (#63A491: `.color-code` / `.text-resend`) is
 * deliberately a SEPARATE `helperText` token below — it's a distinct secondary
 * colour, not the brand accent.
 */
.new-ui-branded.signup-modal-content .p-login-popup-p,
.new-ui-branded.signup-modal-content .color-six {
  color: var(--ls-signup-heading, var(--ls-accent, #3DACD3));
}

.new-ui-branded.signup-modal-content .desc-login {
  color: var(--ls-signup-subtitle, var(--ls-accent, #3DACD3));
}

/* Secondary/helper text — the phone-number-recap chips + Edit button
 * (`.color-code`, globals.css `!important`) and the resend prompt/timer/link
 * (`.text-resend`, no `!important`). See the file header for why only the
 * `.color-code` rule needs `!important`.
 *
 * GATED on `.ls-signup-has-helper`, which NewSignupPopup adds to Modal.Body
 * only when the helperText token is actually SET. Because these two rules need
 * `!important` (so they can't be inline-and-omitted like stepInactive/fieldBg/
 * fieldBorder), an ungated version would out-rank a per-slug
 * `/assets/styles/<slug>.css` value even with NOTHING customised — e.g.
 * chathamwestryde.css's `.color-code { #000 !important }` would flip to
 * #63A491. The gate class restores the project rule: no customisation → no
 * class → this block never matches → that sheet keeps winning. Same shape as
 * the `new-ui-card-overrides` gate the card tokens use. */
.new-ui-branded.signup-modal-content.ls-signup-has-helper .color-code {
  color: var(--ls-signup-helper-text, #63A491) !important;
}

.new-ui-branded.signup-modal-content.ls-signup-has-helper .text-resend {
  color: var(--ls-signup-helper-text, #63A491);
}

/* Terms & Privacy links. Both anchors carry bootstrap's `.text-dark` utility
 * (no project override in globals.css for this route), which resolves to
 * `--bs-dark-rgb` (33, 37, 41 → #212529) — see the file header for why this is
 * the SECOND, unavoidable `!important`. `.text-dark` is used ONLY by these two
 * links inside NewSignupPopup, so the scope stays tight to the modal without
 * needing a more specific selector. GATED on `.ls-signup-has-link` for exactly
 * the reason the helperText block above is gated. */
.new-ui-branded.signup-modal-content.ls-signup-has-link .text-dark {
  color: var(--ls-signup-link-text, #212529) !important;
}

/*
 * stepInactive / fieldBg / fieldBorder have NO rule here — see the "PER-SLUG
 * STYLESHEETS" note in the file header. They're applied as an inline style
 * directly in NewSignupPopup.tsx (the `.bg-steps` connector div, and the
 * `.bg-shadow` phone-row div + the OTP input's `inputStyle`), which omits the
 * declaration entirely when unset instead of unconditionally re-declaring a
 * hardcoded fallback that would beat a per-slug sheet's own value.
 */

/*
 * Modal panel background. Today's REAL panel surface is
 * `.bg-popup-login .modal-content { background-color: rgba(255, 255, 255, 0.8);
 * backdrop-filter: blur(20px); … }` (globals.css) — `.bg-popup-login` is the
 * class the outer <Modal> itself carries. `.modal-content` is an ANCESTOR of
 * Modal.Body (react-bootstrap renders modal-content > modal-header/-body/
 * -footer as siblings), so a var living only on Modal.Body's inline style can
 * never reach it (CSS vars inherit DOWN, never back UP). NewSignupPopup.tsx
 * fixes this at the source: the outer <Modal> ALSO gets `new-ui-branded-shell`
 * + its own copy of the design-token vars (react-bootstrap forwards
 * className/style straight onto the `.modal` root — see Modal.js's
 * renderDialog), which IS an ancestor of `.modal-content`. This rule paints
 * `.modal-content` itself, so it keeps `.modal-content`'s own border-radius,
 * backdrop-filter: blur, and fixed height untouched — only the background-
 * color changes. Fallback is the EXACT today value (rgba(255,255,255,0.8)), so
 * an UNSET token is byte-identical against globals.css.
 *
 * This one CANNOT be made inline-and-omitted like stepInactive/fieldBg/
 * fieldBorder, because `.modal-content` is rendered by react-bootstrap and is
 * not a JSX element we hold a ref to. So it is GATED instead:
 * `.ls-signup-has-panel` goes on the <Modal> root only when the panelBg token
 * is SET. Ungated, this (0,3,0) selector would out-rank a per-slug
 * `.bg-popup-login .modal-content` (0,2,0) rule and pin the panel back to
 * globals' value with nothing customised; gated, an untouched project never
 * matches it at all.
 */
.bg-popup-login.new-ui-branded-shell.ls-signup-has-panel .modal-content {
  background-color: var(--ls-signup-panel-bg, rgba(255, 255, 255, 0.8));
}