/* Theme toggle + dark mode (2026-09-27). Loaded LAST by components/beta-layout and components/beta-app.
   html[data-theme] = chosen mode (system|light|dark); html.dark = what is showing (set by beta/partials/theme-head).
   Dark palette is built from the logo navy #0F172A. Green stays the call-to-action colour: bright green buttons
   with dark text (7:1), bright green for highlights. The checkout modal follows the theme too (Ryan
   2026-09-27; the Stripe card fields switch to Stripe's 'night' theme); the Chatwoot widget stays light. */

/* ---------- toggle button ---------- */
.ml-theme{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:999px;
  border:1px solid transparent;background:transparent;color:inherit;cursor:pointer;font-size:19px;padding:0;
  transition:background .15s,border-color .15s}
.ml-theme:hover{background:rgba(15,23,42,.06)}
.ml-theme:focus-visible{outline:2px solid #12b76a;outline-offset:2px}
.ml-theme iconify-icon{display:none}
html:not([data-theme]) .ml-theme-sys,html[data-theme="system"] .ml-theme-sys,
html[data-theme="light"] .ml-theme-light,html[data-theme="dark"] .ml-theme-dark{display:inline-block}
.bh .ml-theme{color:var(--ink)}
.ba-top .ml-theme{color:var(--body);margin-left:auto}
.ba-top .ml-theme + .ba-icon{margin-left:0}
html.dark .ml-theme:hover{background:rgba(255,255,255,.08)}
@media (max-width:1023px){.bh .ml-theme{margin-left:auto}.bh .bh-burger{margin-left:0}}

/* ---------- dark: page + shared tokens ---------- */
html.dark{color-scheme:dark;background:#0B1120}
html.dark body,html.dark main.bm{background:#0B1120!important;color:#CBD5E1}

html.dark .pv,html.dark .bh,html.dark .bf,html.dark .ba{
  --ink:#F1F5F9;--body:#CBD5E1;--mute:#A3B0C4;--faint:#8A98B0;--line:#23304C;--line2:#1A2540;
  --bg:#0B1120;--card:#111A2E;--green:#34D399;--green-d:#6EE7B7;--green-soft:#0E2A24;--green-tint:#0F2029;
  --tint:#0F2029;--soft:#0E2A24;--mint:#12B76A;--forest:#04150C;--dark:#0F172A;
  --amber:#FCD34D;--amber-bg:#2A2006;--red:#FCA5A5;--red-bg:#2A1015}

/* Every green-filled control: brand green fill, dark text (7:1), the most prominent thing on the page. */
html.dark .bh-cta,html.dark .pv-btn.solid,html.dark .pv .pv-cmp th .pv-btn.solid,html.dark .pv .pv-final .w,
html.dark .pv-form button,html.dark .pv.ps .ps-fields button,html.dark .ba-btn.primary{
  background:#12B76A!important;border-color:#12B76A!important;color:#04150C!important;box-shadow:0 8px 22px -8px rgba(18,183,106,.55)}
html.dark .bh-cta:hover,html.dark .pv-btn.solid:hover,html.dark .pv .pv-final .w:hover,html.dark .pv-form button:hover,
html.dark .pv.ps .ps-fields button:hover,html.dark .ba-btn.primary:hover{background:#34D399!important;border-color:#34D399!important}
html.dark .pv-save,html.dark .pv-ok,html.dark .pv.ps .ps-flag,html.dark .pv.pc .pc-ok,html.dark .pv.pc .pc-bubble.me,html.dark .ba-avatar{
  background:#12B76A;border-color:#12B76A;color:#04150C}

/* Outline buttons */
html.dark .pv-btn:not(.solid){border-color:#33415F;color:var(--ink)!important;background:transparent}
html.dark .pv-btn:not(.solid):hover{background:#16213A}

/* ---------- header / footer ---------- */
html.dark .bh{background:rgba(11,17,32,.88);border-bottom-color:#1C2740}
html.dark .bh-panel,html.dark .bh-drawer,html.dark .bh-dfoot{background:#111A2E}
html.dark .bh-link:hover,html.dark .bh-link.on{background:#16213A;color:#6EE7B7!important}
html.dark .bf{background:#070C18;border-top:1px solid #1C2740}

/* ---------- marketing pages (.pv) ---------- */
html.dark .pv-pill{background:#0F2029;color:#6EE7B7;border-color:#1D3B36}
html.dark .pv-old{background:#0F1729}
/* Navy blocks sit on a navy page: lift them and give them an edge so they still read as blocks. */
html.dark .pv .pv-card.pro,html.dark .pv .pv-green,html.dark .pv .pv-final,html.dark .pv.ph .ph-offer,html.dark .pv.pc .pc-teams{
  background:radial-gradient(120% 120% at 100% 0%,rgba(52,211,153,.18) 0%,rgba(52,211,153,0) 45%),linear-gradient(135deg,#17223D 0%,#1B2745 55%,#22304F 100%);
  border:1px solid #2C3B5E;box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
html.dark .pv .pv-g-cta{background:#111A2E;border:1px solid var(--line)}
html.dark .pv.ph .ph-live-f{background:#0F1729}
html.dark .pv.ph .ph-live-f a{background:#16213A;border-color:var(--line)}
/* Brand icons that are black on light (TikTok, X) need to be light on dark. */
html.dark .pv.ph .ph-live-f a iconify-icon[icon="simple-icons:tiktok"],html.dark .pv.ph .ph-live-f a iconify-icon[icon="simple-icons:x"]{color:#E2E8F0!important}
html.dark .pv.ps .ps-bars b,html.dark .pv.ps .ps-bars s{background:#23304C}
html.dark .pv.ps .ps-bars s{background:#1A2540}
html.dark .pv.ps .ps-av{background:#16213A}
html.dark .pv.pc .pc-err{background:#2A1015;color:#FCA5A5}
@media (max-width:760px){html.dark .pv .pv-cmp th:first-child,html.dark .pv .pv-cmp td:first-child{background:#111A2E}}
html.dark .pv.ph .ph-news b{color:#CBD5E1}
html.dark .pv-toggle small{background:#12B76A;color:#04150C}
html.dark .pv input,html.dark .pv textarea,html.dark .pv select{background:#0F1729;color:#F1F5F9;border-color:#2C3B5E}
html.dark .pv input::placeholder,html.dark .pv textarea::placeholder{color:#7F8DA6}
html.dark .pv.pa .pa-google{border-color:#2C3B5E;background:#111A2E}
html.dark .pv.pa .pa-form input[type=email],html.dark .pv.pa .pa-form input[type=password],html.dark .pv.pa .pa-form input:not([type]){border-color:#2C3B5E;background:#0F1729}

/* Shared beta wrapper (auth pages, flashes) */
html.dark .b-wrap{--b-ink:#F1F5F9;--b-body:#CBD5E1;--b-muted:#A3B0C4;--b-line:#23304C;--b-soft:#0F1729;--b-card:#111A2E;
  --b-accent:#12B76A;--b-accent-ink:#04150C;--b-ok:#6EE7B7;--b-ok-bg:#062A21;--b-err:#FCA5A5;--b-err-bg:#2A1015;--b-warn:#FCD34D;--b-warn-bg:#2A2006}

/* ---------- signed-in app (.ba) ---------- */
html.dark .ba-body{background:#0B1120;color:#CBD5E1}
html.dark .ba-side{background:#0E1628;border-right-color:#1C2740}
.ba-logo .ba-logo-d{display:none}
html.dark .ba-logo .ba-logo-l{display:none}
html.dark .ba-logo .ba-logo-d{display:block}
html.dark .ba-top{background:rgba(11,17,32,.9);border-bottom-color:#1C2740}
html.dark .ba-gsearch{background:#111A2E;border-color:#23304C}
html.dark .ba-gsearch:focus-within{background:#0F1729;border-color:#34D399}
html.dark .ba-gsearch input{color:#F1F5F9}
html.dark .ba-menu,html.dark .ba-card,html.dark .ba-filters,html.dark .ba-tablewrap,html.dark .ba-drawer,html.dark .ba-onboard,
html.dark .ba-conn>iconify-icon{background:#111A2E;border-color:#23304C}
html.dark .ba-btn{background:#16213A;border-color:#2C3B5E}
html.dark .ba-btn:hover{background:#1B2745}
html.dark .ba-input,html.dark .ba-select,html.dark .ba-textarea{background:#0F1729;border-color:#2C3B5E;color:#F1F5F9}
html.dark .ba-table th{background:#0F1729}
html.dark .ba-table tbody tr:hover{background:#16213A}
html.dark .ba-steps-tabs button,html.dark .ba-guide-tabs button,html.dark .ba-tags button.danger{background:#16213A;border-color:#2C3B5E}
html.dark .ba-badge.red{background:#2A1015;color:#FCA5A5}
html.dark .ba-bulk{background:#1B2745;border:1px solid #2C3B5E}
html.dark .ba-bulk select{background:#0F1729;color:#F1F5F9}

/* ---------- dark: checkout modal (.mlc2) ---------- */
html.dark .mlc2 .mlc-backdrop{background:rgba(2,6,16,.72)}
html.dark .mlc2 .mlc-panel{background:#111A2E;color:#CBD5E1;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px #23304C}
html.dark .mlc2 .mlc-left{background:#0E1729;border-right-color:#23304C}
html.dark .mlc2 .mlc-panel h2,html.dark .mlc2 .mlc-label,html.dark .mlc2 .mlc-plans b,html.dark .mlc2 .mlc-chip{color:#F1F5F9}
html.dark .mlc2 .mlc-eyebrow,html.dark .mlc2 .mlc-checks li::before,html.dark .mlc2 .mlc-signin a,html.dark .mlc2 .mlc-details .g,
html.dark .mlc2 .mlc-switch button,html.dark .mlc2 .mlc-signin button,html.dark .mlc2 .mlc-lrow a,html.dark .mlc2 .mlc-who iconify-icon,
html.dark .mlc2 .mlc-who button,html.dark .mlc2 .mlc-secure-m iconify-icon,html.dark .mlc2 .mlc-tabs button.is-on{color:#34D399}
html.dark .mlc2 .mlc-due,html.dark .mlc2 .mlc-details,html.dark .mlc2 .mlc-chip,html.dark .mlc2 .mlc-who{background:#0B1120;border-color:#23304C}
html.dark .mlc2 .mlc-due-l,html.dark .mlc2 .mlc-due-amt{color:#6EE7B7}
html.dark .mlc2 .mlc-due-r,html.dark .mlc2 .mlc-due-price small,html.dark .mlc2 .mlc-signin,html.dark .mlc2 .mlc-secure,html.dark .mlc2 .mlc-legal,
html.dark .mlc2 .mlc-state p,html.dark .mlc2 .mlc-progress span,html.dark .mlc2 .mlc-switch,html.dark .mlc2 .mlc-plans small,html.dark .mlc2 .mlc-secure-m,
html.dark .mlc2 .mlc-sub,html.dark .mlc2 .mlc-tabs button{color:#A3B0C4}
html.dark .mlc2 .mlc-checks,html.dark .mlc2 .mlc-short,html.dark .mlc2 .mlc-who{color:#CBD5E1}
html.dark .mlc2 .mlc-details .t{border-top-color:#23304C}
html.dark .mlc2 .mlc-tabs{border-bottom-color:#23304C}
html.dark .mlc2 .mlc-x{background:#1A2540;color:#F1F5F9}
html.dark .mlc2 .mlc-x:hover{background:#23304C}
html.dark .mlc2 .mlc-seg{background:#0B1120}
html.dark .mlc2 .mlc-seg button{color:#A3B0C4}
html.dark .mlc2 .mlc-seg button.is-on{background:#1A2540;color:#F1F5F9;box-shadow:none}
html.dark .mlc2 .mlc-input{background:#0B1120;border-color:#2A3A5C;color:#F1F5F9}
html.dark .mlc2 .mlc-input::placeholder{color:#6B7A93}
html.dark .mlc2 .mlc-input:focus{border-color:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
html.dark .mlc2 .mlc-input[readonly]{background:#0E1729;color:#A3B0C4}
html.dark .mlc2 .mlc-pay,html.dark .mlc2 [data-mlc-lead-form] .mlc-pay,html.dark .mlc2 [data-mlc-login-form] .mlc-pay{background:#34D399;color:#04150C}
html.dark .mlc2 .mlc-pay:hover,html.dark .mlc2 [data-mlc-lead-form] .mlc-pay:hover,html.dark .mlc2 [data-mlc-login-form] .mlc-pay:hover{background:#6EE7B7}
html.dark .mlc2 .mlc-ok{background:#34D399;color:#04150C}
html.dark .mlc2 .mlc-go{background:#F1F5F9;color:#0B1120}
html.dark .mlc2 .mlc-go:hover{background:#fff;color:#0B1120}
html.dark .mlc2 .mlc-spin{border-color:#23304C;border-top-color:#34D399}
html.dark .mlc2 .mlc-bar{background:#1A2540}
html.dark .mlc2 .mlc-bar i{background:#34D399}
html.dark .mlc2 .mlc-welcome{background:#0E2A24;color:#6EE7B7}
html.dark .mlc2 .mlc-plans button{background:#0B1120;border-color:#2A3A5C}
html.dark .mlc2 .mlc-plans button.is-on{background:#0E2A24;border-color:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
html.dark .mlc2 .mlc-plans em{background:#34D399;color:#04150C}
html.dark .mlc2 .mlc-error{background:#2A1015;color:#FCA5A5}
html.dark .mlc2 .mlc-err-act{background:#111A2E;color:#FCA5A5}
html.dark .mlc2 .mlc-err-act:hover{background:#1A2540}
html.dark .mlc2 .mlc-input[aria-invalid="true"]{border-color:#FCA5A5;box-shadow:0 0 0 3px rgba(252,165,165,.18)}
@media (max-width:760px){html.dark .mlc2 .mlc-left{background:#111A2E}}

/* dark: native checkboxes/radios follow the theme (were bright white on search) */
html.dark input[type=checkbox],html.dark input[type=radio]{color-scheme:dark;accent-color:#34D399}