/* ==========================================================================
   Be Solar Wise guide pages: Design.md look (v134, 7 November 2026)
   Loaded last on the Solar Wise guide pages (/solar-wise/...) and the contact page,
   after /bw-design.css. APPEARANCE ONLY. The app page loads
   /solar-wise/solar-wise-design.css instead.
   ========================================================================== */

:root{
  --a:var(--d-text); --a2:var(--d-text); --acc:var(--d-accent); --acc2:var(--d-accent-hover); --soft:var(--d-panel); --line:var(--d-line);
  --ink:var(--d-text); --mut:var(--d-text-2); --pop:var(--d-accent); --ok:var(--d-green);
  --white:var(--d-panel); --surface:var(--d-panel);
}
html body main.wrap{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px; }
@media(max-width:700px){ html body main.wrap{ border:0 !important; background:transparent !important; } }
html body main.wrap > h2::before{ background:var(--d-accent) !important; }
html body :is(.grid, .cats, .srcgrid) a{ background:var(--d-canvas) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; color:var(--d-text) !important; box-shadow:none !important; transform:none !important; }
html body :is(.grid, .cats, .srcgrid) a:hover{ background:var(--d-hover) !important; border-color:var(--d-line-input) !important; }
html body :is(.grid, .cats) small{ color:var(--d-text-2) !important; }
html body details.q{ background:var(--d-canvas) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; }
html body details.q:is(:hover, [open]){ border-color:var(--d-line-input) !important; }
html body details.q summary{ color:var(--d-text) !important; }
html body details.q summary::after{ color:var(--d-accent) !important; }
html body details.q p{ color:var(--d-text-2) !important; }
html body .note{ background:var(--d-accent-tint) !important; border:1px solid var(--d-accent-edge) !important; border-radius:8px !important; }
html body .note p{ color:var(--d-text) !important; }
html body .note a{ color:var(--d-text) !important; }
html body .updated-tag{ background:var(--d-hover) !important; color:var(--d-text) !important; font-family:var(--d-mono); font-weight:400; }
html body .tbl th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; font-family:var(--d-body) !important; }
html body :is(ul, ol){ color:var(--d-text-2); }
html body .lede{ color:var(--d-text-2) !important; }
html body .btn[style*="--a"]{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; }

/* ==========================================================================
   Solar Wise layered guides (solar-guide-layers.css)
   ========================================================================== */
:root{
  --sg-amber:var(--d-accent); --sg-amber-text:var(--d-accent); --sg-amber-wash:var(--d-accent-tint); --sg-amber-line:var(--d-accent-edge);
  --sg-coral:var(--d-accent); --sg-coral-text:var(--d-accent);
}
html body .dot-short, html body .dot-tech{ background:var(--d-accent) !important; }
html body .dot-detail{ background:var(--d-text-2) !important; }
html body .dot-tech{ background:transparent !important; border:1px solid var(--d-accent); }
html body .layer-nav a{ background:var(--d-canvas) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; color:var(--d-text) !important; }
html body .layer-nav a:hover{ background:var(--d-hover) !important; }
html body section.short{ background:var(--d-accent-tint) !important; border:1px solid var(--d-accent-edge) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; }
html body section.short :is(h2, li, strong, p){ color:var(--d-text) !important; }
html body section.short .layer-label{ color:var(--d-text-2) !important; }
html body ol.steps li::before{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; font-family:var(--d-mono); }
html body ol.steps li strong{ color:var(--d-text) !important; }
html body .layer-head{ border-color:var(--d-line-input) !important; border-top-width:1px !important; }
html body .layer-head p{ color:var(--d-text-2) !important; }
html body :is(.layer-label, .st .layer-label, .st .t2){ color:var(--d-text-2) !important; }
html body .st .t1{ color:var(--d-text) !important; }
html body figure.dg-fig{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body figure.dg-fig figcaption{ color:var(--d-text-2) !important; }
html body figure.dg-fig .zoom{ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body .dg-overlay{ background:rgba(9,13,22,0.92) !important; }
html body .dg-overlay .sheet{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; }
html body :is(.tb h3, .keywords dt){ color:var(--d-text) !important; }
html body .keywords dd{ color:var(--d-text-2) !important; }
html body .worked{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body .worked .wh{ background:var(--d-hover) !important; color:var(--d-text) !important; }
html body .worked td{ border-color:var(--d-line) !important; }
html body .worked td:last-child{ color:var(--d-text) !important; font-family:var(--d-mono); }
html body .worked tr.total td{ border-top:1px solid var(--d-line-input) !important; color:var(--d-text) !important; }
html body .warn{ background:var(--d-red-tint) !important; border:1px solid var(--d-red-edge) !important; border-radius:8px !important; }
html body .warn p{ color:var(--d-text) !important; }
html body details.tech{ background:var(--d-panel) !important; border:1px solid var(--d-line-input) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; }
html body details.tech > summary{ color:var(--d-text) !important; }
html body details.tech > summary .t2{ color:var(--d-text-2) !important; }
html body details.tech[open] > summary{ border-color:var(--d-line) !important; }
html body .guide-nav a{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body .guide-nav a:hover{ background:var(--d-hover) !important; }
html body .guide-nav small{ color:var(--d-text-2) !important; }
html body .guide-nav b{ color:var(--d-text) !important; }
html body .askbot{ background:var(--d-panel) !important; background-image:none !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body .askbot p{ color:var(--d-text-2) !important; }
html body .askbot strong{ color:var(--d-text) !important; }
html body .askbot a{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-radius:6px !important; }
html body .askbot a:hover{ background:var(--d-accent-hover) !important; }
html body .coming{ color:var(--d-text-2) !important; border-color:var(--d-line-input) !important; }
html body ol.hub-path a{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body ol.hub-path a:hover{ background:var(--d-hover) !important; }
html body ol.hub-path .n{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input); font-family:var(--d-mono); }
html body ol.hub-path li:first-child .n{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; }
html body ol.hub-path b{ color:var(--d-text) !important; }
html body ol.hub-path .b span, html body .small, html body .swipe-hint{ color:var(--d-text-2) !important; }
html body .tbl-scroll th{ color:var(--d-text) !important; }
html body .offer{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; }
html body .offer h4{ color:var(--d-text) !important; }
html body :is(.offer li span, .offer .offer-note){ color:var(--d-text-2) !important; }

/* diagrams: the same pictures, redrawn in the Design.md colours */
html body svg.dg text[fill="#14213D"], html body svg.dg text[fill="#24426E"], html body svg.dg text[fill="#2C5E8C"], html body svg.dg text[fill="#2563A6"], html body svg.dg text[fill="#5E2410"]{ fill:var(--d-text); }
html body svg.dg text[fill="#56637A"]{ fill:var(--d-text-2); }
html body svg.dg text[fill="#FFFFFF"]{ fill:var(--d-on-accent); }
html body svg.dg text:is([fill="#E4572E"], [fill="#C2461F"], [fill="#E0A21B"], [fill="#B97F0A"], [fill="#8F6200"]){ fill:var(--d-accent); }
html body svg.dg :not(text)[fill="#FFFFFF"]{ fill:var(--d-panel); }
html body svg.dg :not(text):is([fill="#F6F8FB"], [fill="#E9EDF3"], [fill="#E8EFF7"], [fill="#CFE0F2"]){ fill:var(--d-hover); }
html body svg.dg :not(text):is([fill="#FCE6DE"], [fill="#F7E2AE"], [fill="#FDEEE9"], [fill="#F4BFAD"]){ fill:var(--d-accent-tint); }
html body svg.dg :not(text):is([fill="#14213D"], [fill="#24426E"], [fill="#2C5E8C"], [fill="#2563A6"], [fill="#E4572E"], [fill="#C2461F"], [fill="#E0A21B"], [fill="#B97F0A"], [fill="#8F6200"]){ fill:var(--d-accent); }
html body svg.dg :not(text)[fill="#56637A"]{ fill:var(--d-text-3); }
html body svg.dg [stroke="#14213D"], html body svg.dg [stroke="#56637A"], html body svg.dg [stroke="#2C5E8C"], html body svg.dg [stroke="#6F8DB8"]{ stroke:var(--d-text-2); }
html body svg.dg [stroke="#D9DFE8"]{ stroke:var(--d-line-input); }
html body svg.dg [stroke="#FFFFFF"]{ stroke:var(--d-panel); }
html body svg.dg :is([stroke="#E4572E"], [stroke="#E0A21B"], [stroke="#C2461F"], [stroke="#8F6200"]){ stroke:var(--d-accent); }
html body svg.dg text{ font-family:var(--d-body); }

/* power-station listings: one framed grid split by hairlines */
html body .ps-cards{ gap:1px !important; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body .ps-cards > .ps-card{ background:var(--d-panel) !important; border:0 !important; border-radius:0 !important; }
html body .ps-card h3{ color:var(--d-text) !important; }
html body .ps-card :is(.ps-spec, p, span){ color:var(--d-text-2) !important; }
html body .ps-card .ps-price strong{ color:var(--d-text) !important; font-family:var(--d-mono); }
html body .ps-card .ps-price span.small, html body .ps-live{ color:var(--d-text-2) !important; }
html body .ps-card a{ color:var(--d-text) !important; }
html body .ps-card p strong{ color:var(--d-text) !important; }
html body .ps-aff{ color:var(--d-text-2) !important; border-color:var(--d-line-input) !important; }