/* =============================================================
   ZenithNord — the light theme below the hero
   Loaded after an-mobile.css, before an-motion.css.

   Rewritten 2026-08-27 (fourth pass) to drop the blue entirely.
   Earlier passes built the page out of the hero's DAY sky, so the
   ground was a pale blue and the ink a deep one. The brand reads
   yellow and purple, so the blue is gone: the ground is a warm
   paper carrying a trace of the yellow, every heading is the
   hero's dawn plum, and gold is the accent throughout.

   The colours still come from the hero — just from the dawn and
   sunset ramps rather than the midday one:

     dawn    #0A0E22 #1B1A3E #3E2246 #6E2A3E #A83A2A #D65A1E
     sunset  #0B1026 #231A44 #4E2148 #8C2C34 #C4401C #E85E14

   TWO RULES THIS FILE ENFORCES
   1. Nothing may touch .chero or anything inside it. body{color}
      is inherited and the hero headline has no colour of its own,
      so flipping the body once turned the headline dark on a dark
      sky. Every dark island is re-protected below.
   2. Gold is never text on a light ground — #FFC533 on #FAF6EE is
      1.5:1. Gold stays a fill, a bar, a border. Text that used to
      be gold becomes --warm (#A83A2A), the dawn ember.
   ============================================================= */

:root{
  /* No blue. The ground is a warm paper carrying a trace of the brand
     yellow, the ink is the hero's plum, and gold is the accent throughout.
     Measured on the tightest ground (--band #F3E7D2):
       --ink 12.8   --body 9.0   --soft 7.0   --mute 5.4   --warm 5.2      */
  --page:#FAF6EE;      /* warm paper, a trace of the yellow */
  --band:#F3E7D2;      /* the alternating section, further into the yellow */
  --card:#FFFFFF;
  --ink:#3E2246;       /* hero dawn gradient, stop 3 — every heading */
  --body:#4A3358;      /* plum, softened, for running copy */
  --soft:#5C4269;
  --mute:#6B5477;      /* captions and small print. Do not lighten. */
  --warm:#A83A2A;      /* dawn ember — links and small caps labels */
  --warm-deep:#8C2C34;
  --deep:#231A44;      /* sunset plum — the dark bands */
  --plate:#231A44;     /* diagrams sit on the plum now, not the sky */
  --gold:#FFC533;
  --gold-deep:#C8952E;
  --ember:#E85E14;
  --line:rgba(62,34,70,.16);
  --edge:rgba(62,34,70,.30);
}

/* ---------------- surfaces ---------------- */
body{background:var(--page);color:var(--ink);}

/* The islands that stay dark on a light page and must keep light
   text. Each sits on its own dark ground, so body{color} must not
   reach it. This list is the bug from pass one, written down. */
.chero,.chero-in{color:#fff;}
#mobile-menu,#mobile-menu nav a{color:#fff;}
#mobile-menu .mm-label{color:#D8C4DE;}
#mobile-menu .mm-call{color:#E8DCEC;}
.lb-cap,.lb-cap span,.lb-x,.lb-nav{color:#fff;}
.psplit-img figcaption,.gal figcaption b{color:#fff;}
.gal figcaption span{color:#E8DCEC;}

section{background:var(--page);}
#local,section[style*="#1B1E22"],section[style*="#0A5580"]{background:var(--band) !important;}
footer{background:var(--band);border-top:1px solid var(--line);}

/* the nav bar stays dark over the hero, so the menu that hangs off
   it stays dark too — turning the panel white left its links at 1.49:1 */
.drop-menu,.drop-menu a,.drop-menu a small,.drop-menu li.drop-group{background:initial;}

/* the dark accent: the closing call to action, in sunset plum */
.cta-panel{background:var(--deep);border-top:3px solid var(--gold);}
.cta-panel h2{color:#fff;}
.cta-panel p{color:#E8DCEC;}

.section-subtitle,.service-card p,.why-item p,details p,.foot-brand p,
.foot-col p,.foot-col a,.foot-bottom p,.statband span,.split p,.step p,
.duty-table td,.contact-block p,.grp-card span,.zone p,.srow p,.fit p,
.ph,.fgas-accred span,.psplit p,.after p{color:var(--body);}

a.area-pill,span.area-pill,.ztags span,.zsw button{color:var(--soft);}
.chg div p,.calc-scale,.calc-note,
.af-note,.auto-ctl span,.calc-cell span,.af-cell span,
.phase span,.foot-legal{color:var(--mute);}

/* ---------------- what used to be gold text ---------------- */
.statband b,.split-kicker,.split .spec em,.quoteband cite,.duty-table th,
.inline-links a,.contact-block a,.form-label,
.service-more,.chg div .lab,.dg-head span,.calc-ctl label,.seg button,
details summary .plus,.foot-col a:hover,.lc-hero .pr-strap em{color:var(--warm);}
.service-card,.contact-block{box-shadow:inset 0 4px 0 0 var(--gold),0 8px 26px rgba(62,34,70,.14) !important;}
.service-card:hover,.contact-block:hover{
  border-color:var(--edge) !important;
  box-shadow:inset 0 4px 0 0 var(--ember),0 14px 34px rgba(62,34,70,.22) !important;}
.service-card::after{background:linear-gradient(100deg,transparent,rgba(62,34,70,.06),transparent) !important;}

.why-item{background:rgba(255,197,51,.20);border-left-color:var(--ember);}
.statband{border-top-color:var(--line);border-bottom-color:var(--line);}
.duty-table th{border-bottom-color:var(--edge);}
.duty-table td{border-bottom-color:var(--line);}
.split,.psplit{border-bottom-color:var(--line);}
details{border-bottom-color:var(--line);}
a.area-pill,span.area-pill{border-color:var(--edge);}
a.area-pill:hover{background:rgba(255,197,51,.34);color:var(--ink);border-color:var(--ember);}
.inline-links a{border-color:var(--edge);}
.inline-links a:hover{background:rgba(255,197,51,.34);color:var(--ink);}

/* the numbered spine and step markers were dark discs on dark */
.step::before,.step .dot,.srow .num{background:var(--gold);color:var(--ink);border-color:var(--ember);}
.steps::before,.spine::before{background:linear-gradient(180deg,var(--ember),rgba(62,34,70,.12));}

/* form */
.form-input{border-color:var(--edge);background:#fff;color:var(--ink);}
.form-input::placeholder{color:#6B5477;}
.form-input:hover,.form-input:focus{border-color:var(--ember);}

/* sliders and bars */
input[type=range].calc-range{background:rgba(62,34,70,.18);}
input[type=range].calc-range::-webkit-slider-thumb{border-color:#fff;}
.calc-bar,.af-bar,.effbar{background:rgba(62,34,70,.14);}
.calc-cell,.af-cell{background:rgba(255,197,51,.20);border-color:rgba(62,34,70,.16);border-left-color:var(--ember);}
.seg{background:rgba(62,34,70,.09);}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--ink);}
.phase{background:rgba(62,34,70,.07);border-color:var(--line);}
.phase[aria-selected=true]{background:rgba(255,197,51,.28);border-color:var(--ember);}
.auto-ctl,.dg-legend,.calc-note{border-top-color:var(--line);}

.af-verdict{background:rgba(13,120,58,.12);border-color:rgba(13,120,58,.45);color:#0D783A;}
.af-verdict.bad{background:rgba(168,58,42,.10);border-color:rgba(168,58,42,.42);color:var(--warm);}
.af-verdict b{color:var(--ink);}

/* ---------------- nav ---------------- */
/* sits over the hero, so it reads against a night sky, not the page */
#topnav{background:rgba(10,14,34,0.94);border-bottom-color:rgba(255,197,51,0.30);}

/* ---------------- figures ---------------- */
.psplit-img figcaption,.gal figcaption{
  background:linear-gradient(180deg,transparent,rgba(10,14,34,.86));}


/* =============================================================
   THE DIAGRAM PLATES

   Every diagram is drawn with --sun (#FFC533) as its STROKE — 61
   times in the roof drawings alone — over a dark roof plane, with
   the panels as yellow at .34 opacity. That construction is good,
   but it only works on a dark ground: yellow line art on white is
   1.5:1, which is invisible.

   So the drawings keep the ground they were designed for, and it
   is the hero's own sky (#3E2246, the top of the day gradient).
   They read as windows back into the hero rather than as patches,
   and gold on that plate is 8.0:1.

   Inside a plate the dark theme's variables are restored — that
   is why the values below look like the old palette. They are
   being read against #3E2246, not against the page.
   ============================================================= */
.psplit-art,.dg-art,.split-art,.lc-art{
  background:var(--plate);
  border:1px solid rgba(62,34,70,.35);
  border-radius:14px;
  padding:.6rem;
  box-shadow:0 10px 30px rgba(62,34,70,.20);
}
.psplit-art svg,.dg-art svg,.split-art svg,.lc-art svg,.lc-svg{
  --tint:#E8DCEC;
  --tint-rgb:205,234,250;
  --grid:#B49BC0;
  --muted:#D8C4DE;
  --cold-t:#E8DCEC;
  --roof:#1A1030;
  color:#E8DCEC;          /* the 56 town drawings ink with currentColor */
}
.psplit-art figcaption,.dg-art figcaption,
.split-art figcaption,.lc-art figcaption{
  background:none;color:#FFD873;}

@media(max-width:760px){
  .psplit-art{background:var(--plate);}
  .psplit-art figcaption{color:#FFD873;}
}


/* =============================================================
   THE CONFIGURATOR

   Ported from the ArcticNord review build. It was authored for a
   dark ground — headings at #fff, cards at rgba(255,255,255,.04),
   the result panel at rgba(0,0,0,.24) — so recolouring it for the
   light page would mean overriding almost every rule it has.

   It is the conversion moment on this page, so instead of fighting
   it, it becomes the deepest thing on the page: the hero's sky,
   full width, with the light page either side. It reads as the
   place where the decision happens, and every rule it shipped with
   still does what it was written to do.
   ============================================================= */
#solar-cfg{
  background:linear-gradient(180deg,#3E2246 0%,#1A1030 100%) !important;
  border:1px solid rgba(62,34,70,.45) !important;
  box-shadow:0 18px 48px rgba(62,34,70,.28) !important;
  --tint:#E8DCEC;
  --tint-rgb:205,234,250;
  --muted:#D8C4DE;
  --grid:#B49BC0;
}
/* the gold pill the whole panel drives towards */
#solar-cfg .cfg-cta{background:var(--gold) !important;color:#1A1030 !important;}
#solar-cfg .cfg-cta:hover{background:#FFD873 !important;}

/* Partner accreditations are set as wordmarks, not logos. No logo files
   exist for Tesla, SolaX, SolarEdge or BYD in assets/logos, and setting a
   brand name in our own typeface is both accurate and safe — reproducing
   someone's mark from memory would not be. Swap to <img> once real assets
   are in place; .cfg-brand already sizes them. */
#solar-cfg .cfg-wordmark{
  font-size:.86rem;font-weight:800;letter-spacing:.02em;
  color:#E8DCEC;opacity:.82;text-align:center;line-height:1.25;
}
#solar-cfg .cfg-brand:hover .cfg-wordmark{opacity:1;color:#fff;}
/* the section behind it keeps the page ground, not the band */
#configurator{background:var(--page);}

.auto-ctl button{color:var(--warm);border-color:var(--edge);}
.auto-ctl button:hover{background:var(--gold);color:var(--ink);}
.dg-legend b{color:var(--body);}
#sv-cap b{color:var(--ink) !important;}
section .land-note{color:var(--body);}

/* #6EEA9B was tuned to glow on graphite and is 1.9:1 on the page.
   #0D783A is the darkest point clearing 4.5:1 on all three grounds. */
.tick,.ok-text{color:#0A6B33;}


/* -------------------------------------------------------------
   These are not stylesheet colours at all — the calculator writes
   el.style.color from JavaScript and two links carry an inline
   gold. An inline style beats a normal rule, so these are the only
   places in this file that need !important.
   ------------------------------------------------------------- */
.phase b{color:var(--ink) !important;}
.phase span{color:var(--mute) !important;}
.phase[aria-selected=true] b{color:var(--ink) !important;}
.auto-ctl button{color:var(--warm) !important;}
.calc-cell b,.af-cell b,#sc-self,#sc-exp,#sc-save{color:var(--ink) !important;}
.calc-viz span,.calc-out span{color:var(--mute) !important;}
.contact-form a,.contact-form p a{color:var(--warm) !important;}
.dg-cap b{color:var(--ink) !important;}