/* alg-brand.css — THE ASKMUSE CLOTHES. /assets/alg-brand.js decides, this dresses.
   ------------------------------------------------------------------------------------------
   Loaded by every page of the signup funnel, AFTER that page's own <style>, so these tokens win:

       <script src="/assets/alg-brand.js"></script>          <- in <head>, blocking, before any CSS
       ...the page's own styles...
       <link rel="stylesheet" href="/assets/alg-brand.css">  <- last

   WHY THIS IS A FILE AND NOT FOUR COPIES. The funnel is four pages -- the wizard, signup, the
   password reset and the dashboard -- and a visitor walks all of them in one sitting. The brand
   breaking halfway through is worse than not having it: a dark AskMuse wizard handing over to an
   orange Affordable Leads Generation signup tells the customer the two are different companies,
   at the exact moment they are typing a card number. Pasting the block into each page would have
   worked today and drifted by the weekend.

   WHAT A PAGE MUST PROVIDE to be dressed by this file:
     * the shared token names (--void --panel --edge --edge2 --org --org-ink --txt --dim --faint
       --fill --grad --ring --shadow, and the site-wide --bg --card --line --ink --mut --field),
       which every funnel page already declares because they share one skin;
     * two lockups in the header, <a class="logo alg"> and <a class="logo askmuse">. Both stay in
       the markup always and exactly one is in the layout -- so tests/header-theme.cjs still finds
       the ALG lockup it is contracted to find, and no page has to re-render its own header.

   THE HOST LIST LIVES IN THE .js, and a second copy decides what the CHAT calls itself
   (site/api/_chat-impl.mjs, BRAND_HOSTS). tests/setup-brand-askmuse.cjs asserts the two agree.

/* AskMuse LIGHT. He asked for both themes on every page ("Make sure dark and light team
   exist. On the top right, always."), which overrides my earlier call to hide the switch here.
   I had hidden it because AskMuse ships no light mode and inventing one is inventing brand --
   but a hidden control was the wrong half of that argument to keep. So this is a real light
   palette in the AskMuse hues rather than a fallback to the orange one: the same violet and
   teal, on paper instead of ink. */
html[data-brand="askmuse"]{
  color-scheme:light;
  --void:#fbfbfe; --panel:#ffffff; --edge:#e6e6f2; --edge2:#cdcde6;
  --org:#5b5ce0; --org-ink:#3f3fb0; --txt:#12121c; --dim:#3c3c52; --faint:#6b6b85;
  --fill:#f4f4fb; --grid:rgba(91,92,224,.05);
  --grad:linear-gradient(100deg,#6f70ee,#5b5ce0 55%,#9b7ef8 135%);
  --gradtext:linear-gradient(92deg,#5b5ce0,#7c5cf0 55%,#0f9e8e);
  --ring:0 0 0 4px rgba(91,92,224,.18);
  --shadow:0 1px 2px rgba(18,18,28,.05),0 14px 36px -14px rgba(91,92,224,.18);
  --bg:#fbfbfe; --card:#ffffff; --line:#e6e6f2; --ink:#12121c; --mut:#6b6b85; --field:#ffffff;
  font-family:'Outfit','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-brand="askmuse"][data-theme="dark"]{
  color-scheme:dark;
  --void:#07070b; --panel:#0e0e17; --edge:rgba(255,255,255,.085); --edge2:rgba(255,255,255,.16);
  --org:#8b8cf8; --org-ink:#cfcfff; --txt:#f5f5f8; --dim:#a6a6bb; --faint:#77778f;
  --fill:rgba(255,255,255,.045); --grid:rgba(139,140,248,.06);
  --grad:linear-gradient(100deg,#8b8cf8,#5b5ce0 55%,#b89bfb 135%);
  --gradtext:linear-gradient(92deg,#b89bfb,#8b8cf8 45%,#2dd4bf);
  --ring:0 0 0 4px rgba(139,140,248,.28);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -16px rgba(0,0,0,.7);
  --bg:#07070b; --card:#0e0e17; --line:rgba(255,255,255,.085); --ink:#f5f5f8;
  --mut:#a6a6bb; --field:#0a0a11;
  font-family:'Outfit','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-brand="askmuse"] body,
html[data-brand="askmuse"] h1,
html[data-brand="askmuse"] input,
html[data-brand="askmuse"] select,
html[data-brand="askmuse"] textarea,
html[data-brand="askmuse"] button{font-family:inherit}
/* the two lockups: exactly one of them is in the layout at any time */
html[data-brand="askmuse"] .logo.alg{display:none}
.logo.askmuse{display:none}
html[data-brand="askmuse"] .logo.askmuse{display:flex}
.logo.askmuse .logomark{border-radius:9px;overflow:hidden;display:block}
.logo.askmuse .wm{font-weight:600;letter-spacing:-.2px}
.logo.askmuse .wm em{font-style:normal;color:var(--org)}
/* the ambient orbs are orange by default; in this brand they are the accent */
html[data-brand="askmuse"][data-theme="dark"] .orb.a{background:radial-gradient(circle,rgba(139,140,248,.30),transparent 70%)}
html[data-brand="askmuse"][data-theme="dark"] .orb.b{background:radial-gradient(circle,rgba(45,212,191,.20),transparent 70%)}

/* THE ORANGE THE TOKENS DO NOT REACH.
   Most of this page's colour goes through --org / --org-ink / --grad / --ring, so the block above
   moves it. These rules do not: they were written with the literal orange in them, months before
   there was a second brand, and a token swap cannot see them. The screenshot is what found them --
   the ground, the type and the lockup were all correct while REQUIRED badges, the progress rail
   and the selected plan card were still Affordable Leads orange. That is the failure this whole
   brand mode exists to avoid, so every one of them is listed here rather than left for the eye.
   tests/setup-brand-askmuse.cjs now sweeps every visible element's computed colours and fails on
   anything still in the orange family, which is the check that would have caught them. */
html[data-brand="askmuse"] .req,
html[data-brand="askmuse"] .fl b,
html[data-brand="askmuse"] .pill{
  color:#cfcfff;border-color:rgba(139,140,248,.42);background:rgba(139,140,248,.10)}
html[data-brand="askmuse"] .opt{border-color:rgba(255,255,255,.16)}
html[data-brand="askmuse"] #langsw button:focus-visible,
html[data-brand="askmuse"] .btn:focus-visible{outline-color:#b89bfb}
html[data-brand="askmuse"] .steps span.on::before,
html[data-brand="askmuse"] .steps span.done::before{background:linear-gradient(90deg,#2dd4bf,#8b8cf8)}
html[data-brand="askmuse"] .steps span.on i{box-shadow:0 6px 16px -6px rgba(139,140,248,.6)}
html[data-brand="askmuse"] .lang.on{background:rgba(139,140,248,.12)}
html[data-brand="askmuse"] .readbar{background:linear-gradient(90deg,transparent,#8b8cf8,transparent)}
html[data-brand="askmuse"] .readbar i{background:#8b8cf8}
/* the selected plan card was a cream panel (#FFF7ED) -- a white box in the middle of a dark page */
html[data-brand="askmuse"] .plan.on{
  border-color:#8b8cf8;background:rgba(139,140,248,.10);box-shadow:0 0 0 3px rgba(139,140,248,.18)}
html[data-brand="askmuse"] .plan.on .tick{border-color:#8b8cf8;background:#8b8cf8}
html[data-brand="askmuse"] .btn{box-shadow:0 10px 26px -8px rgba(91,92,224,.55)}
html[data-brand="askmuse"] .vplay.playing{background:rgba(139,140,248,.10)}
html[data-brand="askmuse"] .sumrow .gapv{color:#f5a623}

/* ── THE SIGNUP AND RESET PAGES' OWN LITERALS ────────────────────────────────────────────────
   Same class of leak as the wizard's, found the same way: a screenshot, then a sweep. These two
   pages were written with the orange typed in, so the trial badge, the gradient headline, the plan
   pill and the ambient orbs stayed Affordable Leads orange on a black AskMuse page while the
   ground, the type and the lockup were all correct.

   The EN/FR pill is NOT here and could not be: it was painted by JavaScript as an inline style,
   which beats every stylesheet. That one was fixed at its source, in /assets/i18n/ui-lang.js,
   which now reads --org instead of hard-coding #F97316 -- so it follows any brand and any theme,
   including the light palette, rather than needing a rule here per page. */
html[data-brand="askmuse"] .k{
  color:#cfcfff;border-color:rgba(139,140,248,.42);background:rgba(139,140,248,.10)}
html[data-brand="askmuse"] h1 em{
  background:linear-gradient(92deg,#b89bfb,#8b8cf8 45%,#2dd4bf);
  -webkit-background-clip:text;background-clip:text;color:transparent}
html[data-brand="askmuse"] .plan-pill{
  border-color:rgba(139,140,248,.42);background:rgba(139,140,248,.10);color:#cfcfff}
html[data-brand="askmuse"] .steps span.on i{box-shadow:0 6px 16px -6px rgba(139,140,248,.55)}
html[data-brand="askmuse"] .gbtn:hover,
html[data-brand="askmuse"] .alt a{color:var(--org)}
/* the two ambient orbs on signup and reset carry their own orange gradients */
html[data-brand="askmuse"] .orb.a{
  background:radial-gradient(circle at 32% 32%,rgba(139,140,248,.30),rgba(45,212,191,.14) 55%,transparent 72%)}
html[data-brand="askmuse"] .orb.b{
  background:radial-gradient(circle at 60% 40%,rgba(45,212,191,.24),rgba(139,140,248,.12) 60%,transparent 75%)}

/* ── THE DASHBOARD ───────────────────────────────────────────────────────────────────────────
   site/receptionist/app-desktop/index.html has its own token namespace and no dark mode of its
   own. Under this brand the page is dark, because AskMuse is dark; the ALG dashboard is untouched
   and stays the light page it is today. Giving THAT one a light/dark switch is a separate job.

   Read against the AskMuse site's palette: ink #07070b, card white at ~3.5%, hairlines white at
   ~8.5%, text #f5f5f8, muted #a6a6bb, accent #8b8cf8 with #5b5ce0 deep and #b89bfb light, teal
   #2dd4bf. The status colours (success, danger, amber) keep their meaning and are only lifted for
   legibility on a dark ground -- a red that means "failed" must not become a brand colour. */
/* MEASURED, not assumed: html[data-brand="askmuse"] did not win these tokens on the dashboard,
   and :root[data-brand="askmuse"] does. Both were injected live and read back -- the first left
   --alg-bg at the light value, the second took it. There is no !important and no @layer in that
   file, so I cannot name the cause honestly; what I can say is which selector wins, and this is
   it. The funnel block above is left on html[...] because it is proven working there. */
:root[data-brand="askmuse"]{
  --alg-bg:#07070b;
  --alg-surface:#0e0e17;
  --alg-surface-variant:#12121d;
  --alg-card:#0e0e17;
  --alg-card-hover:#16162340;
  --alg-card-border:rgba(255,255,255,.085);
  --alg-border-glow:rgba(139,140,248,.22);
  --alg-subtle-border:rgba(255,255,255,.085);
  --alg-text-primary:#f5f5f8;
  --alg-text-secondary:#a6a6bb;
  --alg-text-muted:#77778f;
  --alg-input-bg:#0a0a11;
  --alg-input-border:rgba(255,255,255,.16);
  --alg-btn-border:rgba(255,255,255,.22);
  --alg-input-border-focus:#8b8cf8;
  --alg-accent:#8b8cf8;
  /* --alg-primary is READ by the "is ready" wall and DEFINED BY NOBODY, so that heading falls
     back to a hard-coded #175CD3 -- a blue from a palette this product left behind in
     September. Defined here for AskMuse only: giving it a value on the ALG side would change
     a colour he has not asked me to change, so that one is his call and is flagged rather
     than quietly fixed. */
  --alg-primary:#8b8cf8;
  --alg-fill:#5b5ce0;
  --alg-fill-ink:#ffffff;
  --alg-sapphire:#8b8cf8;
  --alg-sapphire-light:#b89bfb;
  --alg-cyan:#2dd4bf;
  --alg-cyan-glow:#38bdf8;
  --alg-cyan-light:#7dd3fc;
  --alg-indigo-aura:#5b5ce0;
  --alg-violet-aura:#b89bfb;
  --alg-emerald:#34d399;
  --alg-emerald-glow:#6ee7b7;
  --alg-amber:#fbbf24;
  --alg-amber-light:#fcd34d;
  --alg-amber-gold:#f5a623;
  --alg-rose:#fb7185;
  --alg-sapphire-tint:rgba(139,140,248,.10);
  --alg-success:#34d399;
  --alg-danger:#fb7185;
  --alg-success-surface:rgba(52,211,153,.14);
  --alg-danger-surface:rgba(251,113,133,.14);
  --alg-accent-surface:rgba(139,140,248,.12);
  --alg-shadow-toast:0 6px 20px rgba(0,0,0,.55);
  --alg-font:'Outfit','Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
/* THE MARK, swapped at paint. content:url() on a replaced element means there is never a frame
   with the other brand's logo on screen, which a DOMContentLoaded swap cannot promise. The alt
   text is fixed in alg-brand.js, because CSS cannot reach it and nobody sees it painted. */
/* UNDER /assets/, and that path is load-bearing rather than tidy. The AskMuse site proxies an
   ALLOWLIST of paths to this deployment -- /receptionist, /api, /assets, /js and two named
   images -- so a brand asset at the root 404s on the new domain while working perfectly on
   the old one and in every local test. It did: /askmuse-mark-96.png answered 404 on
   askmuse.ca after a green deploy, which is the whole "the source is right and the artifact
   is wrong" family again. Anything this file references must live under a proxied prefix. */
html[data-brand="askmuse"] img[src="/alg-logo-96.png"]{content:url("/assets/askmuse-mark-96.png")}
