/* ==========================================================================
   Be Solar Wise app: Design.md look (v134, 7 November 2026)
   Loaded last on the app page (/solar-wise), after /bw-design.css, which holds
   the shared Design.md tokens and family components. The guide pages load
   /solar-wise/solar-wise-guides-design.css instead. APPEARANCE ONLY.
   ========================================================================== */

:root{
  /* on the app page the family's navy (--bw-ink) is mostly a background */
  --bw-ink:var(--d-panel);
  --grape:var(--d-panel); --grape-light:var(--d-hover); --grape-dark:var(--d-canvas);
  --navy:var(--d-panel); --navy-light:var(--d-hover); --navy-dark:var(--d-canvas);
  --coral:var(--d-accent); --coral-dark:var(--d-accent); --sun:var(--d-accent); --sun-dark:var(--d-accent);
  --mint:var(--d-green); --alert:var(--d-red); --alert-dark:var(--d-red);
  --white:var(--d-panel); --surface:var(--d-panel);
  --gray-50:var(--d-canvas); --gray-100:var(--d-panel); --gray-200:var(--d-line-input); --gray-400:var(--d-text-3);
  --gray-600:var(--d-text-2); --gray-800:var(--d-text);
  --pw-red:var(--d-red); --pw-red-wash:var(--d-red-tint); --pw-amber:var(--d-accent); --pw-amber-wash:var(--d-accent-tint); --pw-amber-line:var(--d-accent-edge);
  --pet-tint:var(--d-hover);
  --a:var(--d-text); --a2:var(--d-text); --acc:var(--d-accent); --acc2:var(--d-accent); --soft:var(--d-panel); --mut:var(--d-text-2); --pop:var(--d-accent); --ok:var(--d-green);
  --sky:var(--d-text); --sky-text:var(--d-text); --leaf:var(--d-green);
  --font:var(--d-body); --font-display:var(--d-display); --radius:8px;
}
html body{ background:var(--d-canvas) !important; }
html body :is(button, input, select, textarea){ font-family:var(--d-body); }

/* top bar, bottom phone bar */
html body .topnav{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line) !important; box-shadow:none !important; }
html body .topnav :is(.nav-logo, .brand, .brand-name){ color:var(--d-text) !important; font-family:var(--d-display); }
html body .brand-seal{ background:var(--d-hover) !important; background-image:none !important; box-shadow:none !important; }
html body .nav-btn, html body .icon-btn{ color:var(--d-text-2) !important; background:transparent !important; font-family:var(--d-body) !important; border-radius:6px !important; }
html body .nav-btn:hover, html body .icon-btn:hover{ background:var(--d-hover) !important; color:var(--d-text) !important; }
html body .nav-btn.active{ color:var(--d-text) !important; background:transparent !important; box-shadow:inset 0 -2px 0 var(--d-accent) !important; }
html body .bnav{ background:var(--d-panel) !important; border-top:1px solid var(--d-line) !important; box-shadow:none !important; }
html body .bnav-btn{ color:var(--d-text-2) !important; font-family:var(--d-body); }
html body .bnav-btn.active{ color:var(--d-accent) !important; }
html body .bnav-btn.active::before{ background:var(--d-accent) !important; }

/* home hero: a plain panel band */
html body .hero{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line); color:var(--d-text) !important; }
html body .hero h1{ color:var(--d-text) !important; }
html body .hero h1 .accent{ color:var(--d-accent) !important; background:none !important; -webkit-text-fill-color:currentColor; }
html body .hero :is(p, .hero-sub){ color:var(--d-text-2) !important; }
html body .hero-badge{ background:transparent !important; color:var(--d-accent) !important; border:1px solid var(--d-accent-edge) !important; border-radius:999px !important; }
html body .paw-trail span{ color:var(--d-text-3) !important; background:transparent !important; }
html body .hero .bw-appsbtn.bw-installbtn span, html body .bw-installbtn span{ color:var(--d-text) !important; background:transparent !important; }

/* primary and secondary buttons */
html body :is(.btn-primary, .send-btn, .bw-spot-cta, .breed-row button, #breedSuggestYes, #breedCrossYes, .gate-box .btn){
  background:var(--d-accent) !important; background-image:none !important; color:var(--d-on-accent) !important; border:1px solid var(--d-accent) !important;
  border-radius:6px !important; box-shadow:none !important; font-family:var(--d-body) !important; font-weight:600;
}
html body :is(.btn-primary, .send-btn, .bw-spot-cta, .breed-row button, #breedSuggestYes, #breedCrossYes, .gate-box .btn):hover{ background:var(--d-accent-hover) !important; }
html body :is(.btn-secondary, .btn-secondary-light, .home-actions .btn, .home-actions .btn-secondary, #breedSuggestNo, #breedCrossNo, .footer-nav-btn, .uk-nation-btns button, .dealer-types button, .my-pet-forget){
  background:transparent !important; background-image:none !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important;
  border-radius:6px !important; box-shadow:none !important; font-family:var(--d-body) !important;
}
html body :is(.btn-secondary, .btn-secondary-light, .home-actions .btn, .home-actions .btn-secondary, #breedSuggestNo, #breedCrossNo, .footer-nav-btn, .uk-nation-btns button, .dealer-types button):hover{ background:var(--d-hover) !important; }
html body .dealer-types button.sel{ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; }
html body .btn-urgent{ background:var(--d-red) !important; color:var(--d-on-accent) !important; border:1px solid var(--d-red) !important; border-radius:6px !important; box-shadow:none !important; }
html body .btn-urgent:hover{ background:color-mix(in srgb, var(--d-red) 86%, var(--d-text)) !important; }
html body :is(.back-link, .section-lbl){ color:var(--d-text-2) !important; font-family:var(--d-body) !important; background:transparent !important; }
html body .back-link:hover{ color:var(--d-text) !important; }
html body .section-lbl::before{ background:var(--d-accent) !important; }

/* country picker, your pet, panels */
html body :is(.country-gate, .my-pet, .content-panel, .glance, .more-box, .tool, .check-panel, .breed-suggest, .chat-chips, .ctx-country, .uk-nation-prompt){
  background:var(--d-panel) !important; background-image:none !important; color:var(--d-text); border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important;
}
html body :is(.my-pet, .breed-suggest, .check-now, .advice-disclaimer){ border-left-width:1px !important; }
html body .my-pet{ border-left-color:var(--d-accent) !important; }
html body :is(.my-pet-ico, .pet-header .glyph, .ctx-pet .ctx-ico, .cat-card .glyph, .feature-card .glyph, .cat-card.urgent .glyph){
  background:var(--d-hover) !important; box-shadow:none !important; border:1px solid var(--d-line) !important;
}
html body .glance dl div{ background:var(--d-canvas) !important; border:1px solid var(--d-line); border-radius:6px; }
html body .content-panel :is(p, li){ color:var(--d-text-2); }
html body .content-panel :is(h2, h3, strong){ color:var(--d-text); }
html body .more-box a{ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; }
html body .check-panel{ border-top:1px solid var(--d-red) !important; }
html body .check-panel h2{ color:var(--d-red) !important; }
html body .check-list li{ background:var(--d-red-tint) !important; color:var(--d-text) !important; border-radius:6px !important; }
html body .check-list li::before{ background:var(--d-red) !important; }
html body .check-now{ background:var(--d-red-tint) !important; border:1px solid var(--d-red-edge) !important; color:var(--d-text) !important; }

/* pet picker and topic cards: one framed grid split by hairlines */
html body .features{ gap:1px !important; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body .features > button.feature-card{ background:var(--d-panel) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; }
html body .features > button.feature-card:hover{ background:var(--d-hover) !important; }
html body .feature-card :is(h3){ color:var(--d-text) !important; }
html body .feature-card :is(p){ color:var(--d-text-2) !important; }
html body .feature-card .pet-band{ background:var(--d-hover) !important; }
html body .feature-card .pet-life{ background:transparent !important; color:var(--d-text-2) !important; font-family:var(--d-mono); }
html body .cat-card{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; transform:none !important; color:var(--d-text); }
html body .cat-card:hover{ background:var(--d-hover) !important; }
html body .cat-card.urgent{ background:var(--d-red-tint) !important; border-color:var(--d-red-edge) !important; }
html body .cat-card :is(p, span){ color:var(--d-text-2); }

/* call-outs */
html body .advice-disclaimer{ background:var(--d-accent-tint) !important; border:1px solid var(--d-accent-edge) !important; border-radius:8px !important; color:var(--d-text) !important; }
html body .advice-disclaimer.legal{ background:var(--d-red-tint) !important; border-color:var(--d-red-edge) !important; }
html body :is(.callout-warn, .content-body p.callout-p, .quiz-result.think){ background:var(--d-accent-tint) !important; border-color:var(--d-accent-edge) !important; color:var(--d-text) !important; }
html body :is(.callout-urgent, .quiz-result.no){ background:var(--d-red-tint) !important; border-color:var(--d-red-edge) !important; color:var(--d-text) !important; }
html body :is(.callout-info){ background:var(--d-hover) !important; border-color:var(--d-line-input) !important; color:var(--d-text) !important; }
html body .quiz-result.good{ background:var(--d-green-tint) !important; border-color:var(--d-green-edge) !important; color:var(--d-text) !important; }

/* guide, species and FAQ links on the home screen */
html body .crawl-links{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body .crawl-links a{ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; box-shadow:none !important; }
html body .crawl-links a:hover{ background:var(--d-hover) !important; }
html body .guide-cards li{ background:var(--d-canvas) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; box-shadow:none !important; }
html body .guide-cards li::before{ background:var(--d-accent) !important; }
html body .guide-cards li p{ color:var(--d-text-2) !important; }
html body .faq-cards details{ background:var(--d-canvas) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; }
html body .faq-cards details :is(p){ color:var(--d-text-2) !important; }

/* tools: cost calculator and compatibility check */
html body .cost-in{ background:var(--d-canvas) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body .cost-out div{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line); border-radius:6px; font-family:var(--d-mono); }
html body .quiz-opts label{ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body .quiz-opts label:has(input:checked){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; color:var(--d-text) !important; }

/* tables */
html body .md-table th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }
html body .md-table tr, html body .md-table td{ background:transparent !important; }

/* advertise page */
html body .advertise-seal{ background:var(--d-hover) !important; background-image:none !important; color:var(--d-accent) !important; }
html body .advertise-card{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; }
html body .advertise-card p, html body .advertise-panel .advertise-lead{ color:var(--d-text-2) !important; }
html body .advertise-contact{ background:var(--d-accent-tint) !important; border:1px solid var(--d-accent) !important; border-radius:8px !important; color:var(--d-text) !important; }
html body .advertise-contact a{ color:var(--d-text) !important; font-family:var(--d-body) !important; }

/* chat (PetBot) */
html body .chat-hdr{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line) !important; color:var(--d-text) !important; }
html body .chat-hdr :is(h2, h3, strong, span, p){ color:var(--d-text) !important; }
html body .chat-dot{ background:var(--d-green) !important; box-shadow:none !important; }
html body .chat-note{ background:var(--d-hover) !important; color:var(--d-text-2) !important; border-color:var(--d-line) !important; }
html body .chat-scroll{ background:var(--d-canvas) !important; }
html body .msg.user{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:6px !important; }
html body .msg.bot{ background:var(--d-panel) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:6px !important; box-shadow:none !important; }
html body .msg.bot::before{ background:var(--d-accent) !important; }
html body .composer-wrap{ background:var(--d-panel) !important; border-top:1px solid var(--d-line) !important; }
html body .chat-chips button{ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:999px !important; }
html body .chat-chips button:hover{ background:var(--d-hover) !important; }
html body .typing i{ background:var(--d-text-2) !important; }

/* loading placeholders */
html body .skel-l{ background:var(--d-hover) !important; background-image:none !important; animation:none; }

/* footer band */
html body :is(.footer, .app-footer, footer){ background:var(--d-panel) !important; }

/* headings and titles that used the family navy as text colour */
html body :is(.country-gate-title, .crawl-links h2, .glance-hd, #glanceTitle, details > summary, .feature-card .glyph, .cat-card h3, .content-panel h2){ color:var(--d-text) !important; }
html body .country-gate-title, html body .crawl-links h2{ font-family:var(--d-display); }

/* ==========================================================================
   Solar Wise's own parts
   ========================================================================== */
/* text that used the family navy as its colour */
html body :is(.sw-section h2, .sw-head h2, .sw-country-guide a, .sw-calcbar-label b, .sw-calcbar button, .sw-path .b b, .sw-more a, .sw-tools b,
  .sw-chips a, .sw-ref a, .tool-card b, .tool-card em, .tool-title, .tool-form label, .tool-form legend, .tool-more summary, .tool-result .big b,
  .pp-app span, .row2 label){ color:var(--d-text) !important; }
html body :is(.sw-head p, .sw-where-grid p, .sw-calcbar-label small, .sw-calcbar button small, .sw-path .b span, .sw-path .tag, .sw-more, .sw-tools span,
  .sw-tools em, .sw-card p, .sw-offer .sw-offer-note, .sw-offer-tag, .sw-ref p, .tool-card .d, .tool-lede, .tool-note, .tool-form small, .tool-more p,
  .tool-result .big span, .tool-result .big small, .tool-disclaimer, .sw-notice-box time, .pp-head span, label small, span small){ color:var(--d-text-2) !important; }
html body :is(.sw-country-guide, .sw-offer p, .sw-notice-box li){ color:var(--d-text) !important; }
html body :is(.tool-lede a, .tool-note a, .tool-result a, .sw-notice-box a){ color:var(--d-text) !important; text-decoration-color:var(--d-accent) !important; }
html body .tool-back{ color:var(--d-text-2) !important; background:transparent !important; }
html body .tool-back:hover{ color:var(--d-text) !important; }
html body .tool-title{ font-family:var(--d-display) !important; }
html body .tool-result .big b{ font-family:var(--d-mono); }

/* hero band */
html body .sw-hero{ background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important; border-bottom:1px solid var(--d-line); }
html body .sw-hero h1{ color:var(--d-text) !important; }
html body .sw-hero h1 em{ color:var(--d-accent) !important; }
html body :is(.sw-label, .sw-intro, .sw-facts div){ color:var(--d-text-2) !important; }
html body .sw-facts strong{ color:var(--d-text) !important; font-family:var(--d-mono); }
html body .sw-btn-primary{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-color:var(--d-accent) !important; border-radius:6px !important; box-shadow:none !important; }
html body .sw-btn-primary:hover{ background:var(--d-accent-hover) !important; }
html body :is(.sw-btn-ghost, .sw-btn-dark, .sw-btn-calc){ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; box-shadow:none !important; }
html body :is(.sw-btn-ghost, .sw-btn-dark, .sw-btn-calc):hover{ background:var(--d-hover) !important; }

/* sections, calculators bar and tools */
html body :is(.sw-alt, .sw-tools-feature){ background:var(--d-canvas) !important; border-color:var(--d-line) !important; box-shadow:none !important; }
html body .sw-tools-feature::before{ background:var(--d-accent) !important; background-image:none !important; height:1px !important; }
html body .sw-kicker{ color:var(--d-accent) !important; }
html body .sw-calcbar{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important; }
html body .sw-calcbar-label{ background:var(--d-hover) !important; }
html body .sw-calcbar-n{ color:var(--d-accent) !important; font-family:var(--d-mono); }
html body .sw-calcbar button{ background:transparent !important; border-color:var(--d-line) !important; }
html body .sw-calcbar button:is(:hover, :focus-visible){ background:var(--d-hover) !important; }
html body .sw-calcbar button svg{ color:var(--d-accent) !important; }
html body :is(.tool-card, .sw-tools li, .sw-alt .tool-card, .tool-list .tool-card, .sw-tools-feature .tool-card){
  background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; transform:none !important; color:var(--d-text);
}
html body li > button.tool-card.tool-card{ border-radius:6px !important; }
html body :is(.tool-card, .sw-tools li):hover{ background:var(--d-hover) !important; }
html body :is(.tool-card .ic, .sw-tools .ic, .sw-tools-feature .tool-card .ic){ background:var(--d-hover) !important; color:var(--d-accent) !important; border:1px solid var(--d-line); box-shadow:none !important; }
html body .tool-card em::after{ color:var(--d-accent) !important; }
html body :is(.tool-form, .tool-result, .sw-notice-box, .sw-offer){ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body :is(.sw-notice-box, .sw-offer){ border-left:1px solid var(--d-accent) !important; }
html body .tool-warn{ background:var(--d-red-tint) !important; color:var(--d-text) !important; border:1px solid var(--d-red-edge) !important; border-radius:8px !important; }
html body .tool-form :is(input[type=number], input[type=text], select){ background:var(--d-canvas) !important; color:var(--d-text) !important; }
html body .tool-form label > span, html body label > span{ background:transparent !important; }

/* learning path and chips */
html body :is(.sw-path a, .sw-path .soon){ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; color:var(--d-text) !important; box-shadow:none !important; transform:none !important; }
html body .sw-path a:hover{ background:var(--d-hover) !important; }
html body .sw-path .soon{ background:var(--d-canvas) !important; }
html body .sw-path .n{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; font-family:var(--d-mono); }
html body .sw-path li:first-child .n{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-color:var(--d-accent) !important; }
html body .sw-path .soon .n{ background:transparent !important; color:var(--d-text-3) !important; }
html body .sw-path .soon .b b{ color:var(--d-text-2) !important; }
html body .sw-path .tag-new{ background:var(--d-accent-tint) !important; color:var(--d-accent) !important; border:1px solid var(--d-accent-edge) !important; border-radius:4px !important; }
html body .sw-chips a{ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:999px !important; }
html body .sw-chips a:hover{ background:var(--d-hover) !important; }
html body :is(.sw-card, .sw-card-dark){ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; }
html body .sw-card-dark h2{ color:var(--d-text) !important; }
html body .sw-card-dark p{ color:var(--d-text-2) !important; }
html body .sw-nations button.sel{ background:var(--d-accent-tint) !important; color:var(--d-text) !important; border-color:var(--d-accent) !important; }
html body .nav-links .nav-btn[data-nav="tools"]:hover{ background:var(--d-hover) !important; }
html body :is(.dealer-q, #dealerAreaTitle, .tool-form label > span){ color:var(--d-text) !important; }
html body .sw-facts strong{ font-family:var(--d-body) !important; font-weight:600; }
/* hero drawing: no glow behind the sun; the drawing's warm colours become the one amber accent */
html body .sw-art circle[fill="url(#swSunGlow)"]{ display:none; }
html body .sw-art [fill="#E0A21B"], html body .sw-art [fill="#E4572E"]{ fill:var(--d-accent); }
html body .sw-art [stroke="#E0A21B"], html body .sw-art [stroke="#E4572E"]{ stroke:var(--d-accent); }
html body .sw-hero p svg polygon, html body .sw-label svg polygon{ fill:var(--d-accent); }

/* v144 readability fixes (calculator results, segmented choices and result notes): the family navy (--bw-ink) is the
   panel colour on this page, so text that used it vanished; these set Design.md text colours by selector */
html body .rt :is(td, th){ border-bottom:1px solid var(--d-line) !important; color:var(--d-text-2); }
html body .rt td:last-child, html body .rt tr.total td{ color:var(--d-text) !important; font-family:var(--d-mono); }
html body .rt tr.total td:first-child{ font-family:var(--d-body); }
html body .rt5 th{ color:var(--d-text-2) !important; }
html body .rt5 td{ color:var(--d-text) !important; }
html body .rt5 tr.pick td{ background:var(--d-accent-tint) !important; color:var(--d-text) !important; }
html body .seg{ border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body .seg span{ background:transparent !important; color:var(--d-text-2) !important; }
html body .seg label + label span{ border-left:1px solid var(--d-line-input) !important; }
html body .seg span:hover{ background:var(--d-hover) !important; color:var(--d-text) !important; }
html body .seg input:checked + span{ background:var(--d-accent-tint) !important; color:var(--d-text) !important; box-shadow:inset 0 0 0 1px var(--d-accent); }
html body .seg input:focus-visible + span{ outline:2px solid var(--d-accent) !important; outline-offset:-2px; }
html body .okline{ background:var(--d-green-tint) !important; color:var(--d-text) !important; border:1px solid var(--d-green-edge) !important; border-left:1px solid var(--d-green) !important; border-radius:6px !important; }
html body .warnline{ background:var(--d-red-tint) !important; color:var(--d-text) !important; border:1px solid var(--d-red-edge) !important; border-left:1px solid var(--d-red) !important; border-radius:6px !important; }
html body .mbars .bar{ background:var(--d-accent) !important; border-radius:2px 2px 0 0 !important; }
html body .sw-path .tag-new{ background:var(--d-accent-tint) !important; color:var(--d-accent) !important; border-color:var(--d-accent-edge) !important; }

/* v144: no empty band in the chat before the first question: while the conversation is empty the suggested questions
   and the message box sit straight under the introduction; the conversation area appears with the first message */
html body #chatLog.chat-scroll:empty{ flex:0 0 0 !important; min-height:0 !important; height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; }
html body #page-chat.active:has(#chatLog:empty){ height:auto !important; min-height:0 !important; overflow:visible !important; }