/* Siqwes theme: Nebula night v1 (Creative, 2026-10-24; founder pick "T3 Nebula night"). DRAFT for Web. Not deployed.
   Spec: brand/specs/theme-nebula-night-v1.md. Applies to ALL Siqwes surfaces: siqwes.com, business., education., realestate.,
   assistants., bookkeeping. (landing, /class/, blog, legal) and members.siqwes.com (dashboard, course, lesson, class pages, auth).
   Real outer space: near-black neutral sky #06060A, faint violet/teal/rose nebula haze, single-dot neutral stars, thin white light
   trails. Replaces the X-banner navy sky (space-scroll-v2), the navy glass tint (glass-v3), the navy header and the navy reading
   panel #0E1A36 @94% (blog-v1 §6 / brand-guidelines §9a). Untouched: logos, wordmark, the Siqwes star, fonts, niche accent hues,
   layout, spacing, markup, motion timings.
   LOAD ORDER: LAST stylesheet on every page.
     Pages sites:   site.<hash>.css > tokens.<hash>.css > class.<hash>.css (/class/ only) > theme-nebula-night-v1.css
     Members:       ... > glass-v3.css > ma-v13.css > lesson-reading-panel-v1.css (reading routes) > theme-nebula-night-v1.css
   ASSETS: brand/theme/nebula-night-v1/{stars-far,stars-near,trails}.svg served at /brand/theme/nebula-night-v1/ on every host
   (same-origin: CSP img-src 'self' is enough; no data: URIs needed). Stop serving /brand/space/waves.svg after rollout.
   Pure CSS, CSP-safe: no JS, no inline style, no new markup. */

/* ================= 1. Tokens (old navy -> new neutral) ================= */
:root{
  /* --- space --- */
  --nn-space:#06060A;              /* page / sky base (was #050B18-#0A1838) */
  --nn-space-top:#08080D;          /* top of the sky gradient (was #0A1838) */
  --nn-neb-violet:rgba(150,110,210,.14);
  --nn-neb-teal:rgba(90,160,165,.08);
  --nn-neb-rose:rgba(190,120,170,.08);
  /* --- surfaces --- */
  --nn-panel:#191B20;              /* the ONE reading panel, every site (was #0E1A36) */
  --nn-card:#17181D;               /* glass tint base (was #0E1A38) */
  --nn-header:#0E0F13;             /* header bar (was #07122B) */
  --nn-well:#101115;               /* inset wells inside panels (was #08122A) */
  --nn-well-deep:#0A0B0D;          /* prompt well inside a Try-it box (was #040A1A) */
  --nn-well-hover:#16181C;         /* prompt hover (was #0B1733) */
  --nn-on-accent:#0B0C10;          /* text on cyan / accent fills (was navy #0B1F45) */

  /* space-scroll v2 names */
  --sp-navy-hi:#2A2D33;--sp-navy-1:var(--nn-space-top);--sp-navy-2:var(--nn-space-top);--sp-navy-3:var(--nn-space);--sp-navy-4:var(--nn-space);
  --sp-blue:#9BE8F6;               /* was electric #1677FF nebula; no longer used for glows */
  --sp-float:rgba(23,24,29,.88);
  --sp-hover-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(47,211,238,.45),0 0 28px rgba(47,211,238,.14);

  /* dark theme names */
  --dk-page:var(--nn-space);--bg-page:var(--nn-space);
  --dk-sunken:var(--nn-well);--dk-surface:#24262B;--dk-surface-2:#2E3036;
  --dk-hairline:#3A3C42;--dk-border-disabled:#4A4C53;--dk-border-input:#8C9099;
  --dk-notice-bg:#202227;--dk-blue-250:#C9CDD4;
  --dk-action-text:var(--nn-on-accent);
  --dk-text-body:#CFD6E1;          /* was #BAC2CF: one body grey everywhere = the reading-panel body colour */
  --dk-text-meta:#B4BCCB;          /* was #A9B1C1: one meta grey everywhere = --read-meta */
  --dk-focus-ring:0 0 0 2px var(--nn-space),0 0 0 5px var(--color-cyan-400,#2FD3EE);
  --dk-error-bg:#3A2427;--dk-success-bg:#1D3329;--dk-warning-bg:#3A3222;

  /* glass v3 names: neutral smoke instead of navy */
  --glass-tint:rgba(23,24,29,.80);   /* .80: card text stays AA even if a white star sat under the blur (spec §8) */
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  --glass-fill:var(--glass-sheen),var(--glass-tint);
  --glass-fill-hover:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(23,24,29,.86);
  --glass-blur:blur(22px) saturate(100%) brightness(.7);
  --glass-border:rgba(255,255,255,.12);
  --glass-border-hover:rgba(255,255,255,.24);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.14);
  --glass-glow:inset 0 0 28px rgba(255,255,255,.02);
  --glass-shadow:0 20px 50px -12px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);
  --glass-shadow-hover:0 28px 60px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);
  --glass-solid:rgba(23,24,29,.92);
  --glass-header-fill:rgba(14,15,19,.88);
  --glass-header-blur:blur(14px) saturate(100%);
  --glass-input-bg:rgba(0,0,0,.45);
  --glass-input-border:rgba(255,255,255,.42);   /* field edge >=3:1 (1.4.11) on every glass panel; was .18 (1.5:1) */
  --glass-accent-bar:linear-gradient(90deg,var(--color-cyan-400,#2FD3EE),var(--color-cyan-200,#9BE8F6));
  --glass-focus-ring:var(--dk-focus-ring);

  /* reading panel (blog-v1 §6 names): ONE neutral charcoal panel, never tinted */
  --read-fill:rgba(25,27,32,.96);  /* #191B20 @ 96% (was #0E1A36 @ 94%) */
  --read-border:rgba(255,255,255,.12);
  --read-highlight:inset 0 1px 0 rgba(255,255,255,.14);
  --read-shadow:var(--glass-shadow);
  --read-well:var(--nn-well);
  --read-well-deep:var(--nn-well-deep);
  --read-well-hair:rgba(255,255,255,.10);
  /* --read-text #CFD6E1, --read-meta #B4BCCB, links #9BE8F6: unchanged (AAA on the new panel, see spec §8) */

  /* members-area names */
  --m-glass:rgba(23,24,29,.80);--m-well:rgba(0,0,0,.45);
  --m-float-shadow:0 18px 48px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --m-focus:var(--dk-focus-ring);
  --sp-float-shadow:var(--glass-shadow);--m-glass-hair:var(--glass-border);

  /* site header names */
  --sh-navy:var(--nn-on-accent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glass-fill:var(--glass-solid);--glass-fill-hover:rgba(28,30,35,.94);--glass-header-fill:rgba(14,15,19,.96);--read-fill:#191B20}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glass-fill:var(--glass-solid);--glass-fill-hover:rgba(28,30,35,.94);--glass-header-fill:rgba(14,15,19,.97);
    --glass-blur:none;--glass-header-blur:none;--read-fill:#191B20;--read-blur:none}
}

/* ================= 2. The sky: three layers, one continuous field (no bands, no seams) =================
   L0 html (fixed, static): near-black + faint nebula haze.  L1 body::before (fixed, far stars, drifts -12vh).
   L2 body::after (fixed, light trails + near stars, drifts -40vh). Motion rules come from space-scroll-v2 (unchanged). */
html{
  background-color:var(--nn-space) !important;
  background-image:
    radial-gradient(15vmax 9vmax at 88% 18%,var(--nn-neb-violet),rgba(150,110,210,0) 70%),
    radial-gradient(11vmax 7vmax at 9% 64%,var(--nn-neb-teal),rgba(90,160,165,0) 70%),
    radial-gradient(8vmax 5vmax at 80% 86%,var(--nn-neb-rose),rgba(190,120,170,0) 70%),
    linear-gradient(180deg,var(--nn-space-top) 0%,var(--nn-space) 100%) !important;
  background-attachment:fixed !important;background-repeat:no-repeat !important;
}
body::before{
  background-image:url("/brand/theme/nebula-night-v1/stars-far.svg") !important;
  background-size:700px 700px !important;background-repeat:repeat !important;filter:none;
}
body::after{
  background-image:url("/brand/theme/nebula-night-v1/trails.svg"),url("/brand/theme/nebula-night-v1/stars-near.svg") !important;
  background-size:cover,1000px 1000px !important;background-position:center top,0 0 !important;background-repeat:no-repeat,repeat !important;
  opacity:.9;
}
@media (max-width:600px){body::after{opacity:.7}}
/* blog pages keep their quieter near layer (.4 / .3) from blog-v1; nothing to override */

/* scrims behind hero copy, legal prose and the signup panel: same recipe, neutral (navy blobs would show as seams on #06060A) */
.hero--flow .hero__copy::before{background:radial-gradient(closest-side,rgba(6,6,10,.82) 0%,rgba(6,6,10,.70) 55%,rgba(6,6,10,0) 100%) !important}
main.page > .container > .prose:not(.read-surface)::before{background:radial-gradient(closest-side,rgba(6,6,10,.80) 0%,rgba(6,6,10,.66) 55%,rgba(6,6,10,0) 100%) !important}
.section--signup:has(.signup-panel)::before{background:radial-gradient(ellipse 90% 60% at 50% 50%,rgba(6,6,10,.80) 0%,rgba(6,6,10,.55) 52%,rgba(6,6,10,0) 80%) !important}

/* footer fades out of the sky */
.site-footer{background:linear-gradient(180deg,rgba(6,6,10,0) 0%,rgba(6,6,10,.80) 45%,rgba(6,6,10,.94) 100%) !important}
.site-footer .footer-social:hover{background:#24262B}
.site-footer .footer-social:focus-visible{box-shadow:0 0 0 2px var(--nn-space),0 0 0 5px #2FD3EE}

/* ================= 3. Header: neutral smoked glass; niche accent hairline (site-header-v1 ::after) stays ================= */
.site-header,.site-header.sh{
  background:var(--glass-header-fill) !important;
  -webkit-backdrop-filter:var(--glass-header-blur) !important;backdrop-filter:var(--glass-header-blur) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px -18px rgba(0,0,0,.7);
}
.sh__home:hover{background:rgba(255,255,255,.06)}

/* ================= 4. Glass panels with hard-coded navy (tokens cover the rest) ================= */
.soon,.cancel-page__panel,.blog-band{background:var(--glass-fill) !important}
.signup-panel{background:rgba(23,24,29,.94) !important}
.m-next{background:var(--glass-fill) !important}
.signup__what,.signup__full{background:rgba(0,0,0,.28)}
:is(.glass,.signup,.signup-panel) .select option,.signup-panel .select option,select option{background:#191B20;color:#FFFFFF}
.signup-panel .input:focus,.signup-panel .select:focus,.signup-panel .input:focus-visible,.signup-panel .select:focus-visible{
  box-shadow:0 0 0 2px rgba(6,6,10,.9),0 0 0 5px var(--dk-focus,#2FD3EE)}
.signup-panel::before,.blog-cta::before{background:var(--glass-accent-bar) !important}
.niche-card:hover{box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--nc,#9BE8F6) 60%,transparent),0 0 28px color-mix(in srgb,var(--nc,#9BE8F6) 18%,transparent)}
.m-card:hover{box-shadow:var(--glass-shadow-hover),var(--glass-highlight),0 0 28px color-mix(in srgb,var(--nc,var(--niche-accent,#9BE8F6)) 14%,transparent)}

/* fields: the signup panel sets its own edge; give it the same 3:1 edge */
.signup-panel :is(.input,.select),:is(.glass,.signup,.m-glass,.m-login__panel,.m-panel) :is(.input,.select,textarea,input[type="email"],input[type="text"],input[type="password"]){border-color:var(--glass-input-border)}

/* ================= 5. Reading panel (blog posts, blog heads, legal .read-surface, lesson + class pages) =================
   The panel recipe in blog-v1 §6 reads the --read-* tokens above; only the hard-coded wells need restating. */
.blog-read,.read-surface,.blog-head{background:var(--read-fill) !important;border-color:var(--read-border) !important}
.blog-read .blog-try__prompt:hover{background:var(--nn-well-hover) !important}
.blog-prose pre{background:rgba(0,0,0,.45)}
.blog-try__prompt{background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.blog-read .blog-try__prompt{background:var(--read-well-deep)}
.m-prompt{background:rgba(0,0,0,.45)}
.blog-read .m-prompt{background:var(--read-well)}

/* ================= 6. Image placeholders (shown while an image loads; never navy) ================= */
.blog-card,.blog-card__img,.blog-post__hero img,.blog-prose img,.m-figure img{background:var(--nn-space) !important}
.class-cover img{background:var(--nn-well) !important}

/* ================= 7. Buttons, chips, status: text on cyan/accent fills is near-black, not navy ================= */
.chip[aria-current="page"],.chip[aria-current="page"]:hover{color:var(--nn-on-accent)}
.m-status--done,.m-markdone__box,.ma-done-btn .ma-done-tick,.module__n{color:var(--nn-on-accent)}
.m-check input{background:rgba(0,0,0,.45)}
.m-check input::before{background:var(--nn-on-accent)}
.btn--primary{color:var(--nn-on-accent)}
.btn--primary:hover{box-shadow:0 0 22px rgba(47,211,238,.35)}
.sh__cta:hover{background:rgba(255,255,255,.06);border-color:#9BE8F6}
.sh__cta:active{background:rgba(255,255,255,.10)}

/* ================= 8. Reduced motion: the sky is a still photograph (no drift, no rise-in, no twinkle) ================= */
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none !important;translate:none !important}
  body::after{opacity:.9}
}
@media (prefers-reduced-motion:reduce) and (max-width:600px){body::after{opacity:.7}}
/* Creative live-check REPORT 2026-10-25 Fix 4 (spec §6): legal prose links turn white on hover, like blog prose */
.read-surface a:hover{color:#FFFFFF}