/* HOM3 v4p -- CELESTIAL theme. The screensaver's stars become the
   actual background: deep navy void, light-blue primaries, sun-yellow
   accents, the three-block HOUSE mark in gold, and a real computed
   moon phase REPLACING the anchor in its slot. Fifth theme on the
   shared --lrw-* contract. prefers-reduced-motion honored. ASCII. */

html.theme-celestial{
  --lrw-metal:#f5c542;
  --lrw-metal-lo:#2e4a6b;
  --lrw-ink:#e8f0fa;
  --lrw-paper:#081226;
  --ce-void:#050d1f; --ce-navy:#081226; --ce-navy-2:#0c1a34;
  --ce-blue:#7db8e8; --ce-blue-2:#5a9fd8; --ce-blue-hi:#9ccdf2;
  --ce-sun:#f5c542; --ce-gold:#ffd76a;
  --ce-text:#e8f0fa; --ce-dim:#8aa3c0;
  --ce-ok:#6fd0a8; --ce-warn:#ffb020;
}
html.theme-celestial, html.theme-celestial body{
  color:var(--ce-text);
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.8),
      transparent 55%),
    radial-gradient(1px 1px at 78% 8%, rgba(200,225,255,.7),
      transparent 55%),
    radial-gradient(1.5px 1.5px at 34% 64%, rgba(255,255,255,.55),
      transparent 55%),
    radial-gradient(1px 1px at 61% 41%, rgba(255,241,200,.65),
      transparent 55%),
    radial-gradient(1px 1px at 89% 73%, rgba(200,225,255,.6),
      transparent 55%),
    radial-gradient(1.5px 1.5px at 8% 86%, rgba(255,255,255,.5),
      transparent 55%),
    radial-gradient(1px 1px at 47% 12%, rgba(255,255,255,.6),
      transparent 55%),
    radial-gradient(900px 480px at 50% -12%,
      rgba(125,184,232,.10), transparent 60%),
    linear-gradient(180deg, var(--ce-void), var(--ce-navy) 55%,
      #060f24);
  background-attachment: fixed;
}
html.theme-celestial h1, html.theme-celestial h2,
html.theme-celestial h3{
  color:var(--ce-text); letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(125,184,232,.35); position:relative;
}
html.theme-celestial h1::after, html.theme-celestial h2::after{
  content:""; display:block; height:2px; margin-top:6px;
  background:linear-gradient(90deg, var(--ce-sun),
    rgba(245,197,66,.15) 60%, transparent);
  box-shadow:0 0 10px rgba(245,197,66,.55);
}
html.theme-celestial ::selection{ background:var(--ce-sun);
  color:#081226; }
html.theme-celestial a{ color:var(--ce-blue-hi); }
html.theme-celestial a:hover{ color:var(--ce-gold);
  text-shadow:0 0 8px rgba(245,197,66,.6); }
html.theme-celestial nav a, html.theme-celestial .tabs a,
html.theme-celestial .tab{
  color:var(--ce-dim); border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s, text-shadow .15s; }
html.theme-celestial nav a:hover, html.theme-celestial .tab:hover{
  color:var(--ce-blue-hi);
  text-shadow:0 0 8px rgba(125,184,232,.6); }
html.theme-celestial nav a.active, html.theme-celestial .tab.active,
html.theme-celestial nav a[aria-current]{
  color:var(--ce-sun); border-bottom-color:var(--ce-sun);
  text-shadow:0 0 10px rgba(245,197,66,.6); }
html.theme-celestial button, html.theme-celestial .btn,
html.theme-celestial input[type="submit"]{
  background:linear-gradient(180deg, var(--ce-blue),
    var(--ce-blue-2));
  color:#071426; border:1px solid rgba(156,205,242,.8);
  border-radius:8px; letter-spacing:.08em; font-weight:600;
  transition:box-shadow .15s, filter .15s, transform .05s; }
html.theme-celestial button:hover, html.theme-celestial .btn:hover{
  filter:brightness(1.07);
  box-shadow:0 0 0 1px rgba(156,205,242,.7),
    0 0 18px rgba(125,184,232,.45); }
html.theme-celestial button:active{ transform:translateY(1px); }
html.theme-celestial .ag-mini, html.theme-celestial .ag-ghost,
html.theme-celestial .sm-mini, html.theme-celestial .st-ghost,
html.theme-celestial .llp-how, html.theme-celestial .lb-tab,
html.theme-celestial .cx-toggle, html.theme-celestial .lb-toggle{
  background:rgba(12,26,52,.6); color:var(--ce-blue-hi);
  border-color:rgba(125,184,232,.45); }
html.theme-celestial .lb-tab.on{ color:var(--ce-sun);
  border-color:var(--ce-sun);
  box-shadow:0 0 10px rgba(245,197,66,.3); }
html.theme-celestial .st-gate{
  background:linear-gradient(180deg, var(--ce-gold),
    var(--ce-sun) 58%, #d9a41f);
  color:#231903; border:1px solid var(--ce-gold);
  box-shadow:0 0 0 1px rgba(255,225,140,.6),
    0 8px 30px rgba(245,197,66,.4); }
html.theme-celestial input, html.theme-celestial textarea,
html.theme-celestial select{
  background:rgba(6,14,30,.85); color:var(--ce-text);
  border:1px solid var(--lrw-metal-lo); caret-color:var(--ce-sun);
  border-radius:7px; }
html.theme-celestial input:focus,
html.theme-celestial textarea:focus,
html.theme-celestial select:focus{
  outline:none; border-color:var(--ce-blue);
  box-shadow:0 0 0 1px var(--ce-blue),
    0 0 0 3px rgba(125,184,232,.25),
    0 0 14px rgba(125,184,232,.35); }
html.theme-celestial .card, html.theme-celestial .panel,
html.theme-celestial .ag-card, html.theme-celestial .st-card,
html.theme-celestial .sm-line, html.theme-celestial .sw-card,
html.theme-celestial .cx-card, html.theme-celestial .lb-card{
  background:linear-gradient(180deg, rgba(12,26,52,.72),
    rgba(6,14,30,.72));
  border-color:rgba(125,184,232,.22); }
html.theme-celestial .cx-card, html.theme-celestial .lb-card,
html.theme-celestial .st-card{ position:relative; }
html.theme-celestial .cx-card:hover,
html.theme-celestial .lb-card:hover,
html.theme-celestial .st-card:hover{
  border-color:rgba(125,184,232,.55);
  box-shadow:0 0 16px rgba(125,184,232,.22); }
html.theme-celestial .cx-card:hover::before,
html.theme-celestial .lb-card:hover::before{
  content:""; position:absolute; top:6px; right:8px; width:26px;
  height:14px; pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 2px 11px, var(--ce-sun) 60%,
      transparent 61%),
    radial-gradient(1.3px 1.3px at 13px 3px,
      var(--ce-blue-hi) 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 24px 8px, var(--ce-sun) 60%,
      transparent 61%); }
html.theme-celestial ::-webkit-scrollbar{ width:10px; height:10px; }
html.theme-celestial ::-webkit-scrollbar-track{ background:#060f24; }
html.theme-celestial ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--ce-blue-2), #2e4a6b);
  border-radius:5px; border:2px solid #060f24; }
html.theme-celestial ::-webkit-scrollbar-thumb:hover{
  background:var(--ce-blue); }
html.theme-celestial th{ color:var(--ce-sun);
  letter-spacing:.12em; text-transform:uppercase; font-size:.72em;
  border-bottom:1px solid var(--lrw-metal-lo); }
html.theme-celestial tr:hover td{
  background:rgba(125,184,232,.06); }
html.theme-celestial code, html.theme-celestial pre{
  background:#0a1730; color:#cfe4f7;
  border:1px solid rgba(125,184,232,.25); }
html.theme-celestial .ok, html.theme-celestial .up{
  color:var(--ce-ok); }
html.theme-celestial .warn{ color:var(--ce-warn); }
html.theme-celestial .err, html.theme-celestial .down{
  color:#ff7a8a; }
html.theme-celestial .ll-frame{
  border-color:rgba(125,184,232,.5);
  box-shadow:0 0 0 1px rgba(125,184,232,.3),
    0 14px 44px rgba(30,80,140,.45); }
html.theme-celestial .llp-stage, html.theme-celestial .llv-title,
html.theme-celestial .st-brand, html.theme-celestial .sm-brand,
html.theme-celestial .ag-title{ color:var(--ce-sun); }

/* ---- the three-block HOUSE mark, gold ---- */
.ce-house{ display:none; vertical-align:middle; }
html.theme-celestial .ce-house{ display:inline-block; }
html.theme-celestial img.hom3-logo-orig{ display:none; }
.ce-house rect{ fill:var(--ce-sun, #f5c542); }
html.theme-celestial [class*="logo"] svg *,
html.theme-celestial [class*="lockup"] svg *,
html.theme-celestial .logo svg *{
  fill:var(--ce-sun) !important; stroke:var(--ce-sun); }

/* ---- moon slot: lives in _base.html next to the tabs, shown by
   the theme class exactly the way the nautical anchor is ---- */
#hom3-moon-slot{ display:none; }
html.theme-celestial #hom3-moon-slot{ display:inline-flex;
  align-items:center; vertical-align:middle; cursor:default;
  line-height:0; margin:0 .35rem; }
#hom3-moon-slot canvas{ display:block;
  filter:drop-shadow(0 0 6px rgba(232,240,250,.35)); }

/* ---- fx host ---- */
.ce-fx{ position:fixed; inset:0; pointer-events:none; z-index:0;
  display:none; }
html.theme-celestial .ce-fx{ display:block; }
.ce-fx canvas{ width:100%; height:100%; display:block; }
@media (prefers-reduced-motion: reduce){
  .ce-fx canvas{ display:none; } }