/* ==========================================================================
   Be Wellness Wise app: Design.md look (v135, 7 November 2026)
   Loaded last on the app page (/health-wise), after /bw-design.css, which
   holds the shared Design.md tokens and family components. The Health Library
   and the contact page load /health-library/wellness-wise-guides-design.css.
   APPEARANCE ONLY. The Design.md dark look is used whichever of the app's own
   Light / Dark display settings is chosen.
   ========================================================================== */

:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --bw-ink:var(--d-panel);
  --navy:var(--d-text); --navy-light:var(--d-hover); --navy-dark:var(--d-canvas);
  --accent:var(--d-accent); --gold:var(--d-accent); --red:var(--d-red); --red-dark:var(--d-red);
  --white:var(--d-panel); --surface:var(--d-panel);
  --gray-50:var(--d-canvas); --gray-100:var(--d-hover); --gray-200:var(--d-line-input); --gray-400:var(--d-text-2);
  --gray-600:var(--d-text-2); --gray-800:var(--d-text);
  --font:var(--d-body); --font-serif:var(--d-display); --radius:6px;
}
html body{ background:var(--d-canvas) !important; color:var(--d-text) !important; }
html body :is(button, input, select, textarea){ font-family:var(--d-body) !important; color-scheme:dark; }

/* top bar, bottom phone bar, footer */
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 .brand-seal{ background:var(--d-hover) !important; background-image:none !important; box-shadow:none !important; }
html body :is(.nav-btn){ color:var(--d-text-2) !important; background:transparent !important; border-radius:6px !important; }
html body .nav-btn:hover{ background:var(--d-hover) !important; color:var(--d-text) !important; }
html body .nav-btn.active{ color:var(--d-text) !important; box-shadow:inset 0 -2px 0 var(--d-accent) !important; }
html body .nav-btn.sos-link, html body .sos-link{ color:var(--d-red) !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; }
html body .bnav-btn.active{ color:var(--d-accent) !important; }
html body .icon-wrap{ background:var(--d-red) !important; color:var(--d-on-accent) !important; border:1px solid var(--d-red) !important; box-shadow:none !important; }
html body .bnav-btn.sos.active .icon-wrap{ background:var(--d-red-tint) !important; color:var(--d-red) !important; }
html body footer.bw-footer{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }
html body #pwa-banner{ background:var(--d-panel) !important; border-top:1px solid var(--d-line) !important; color:var(--d-text) !important; }

/* hero and page headings */
html body .hero{ background:var(--d-panel) !important; background-image:none !important; border-bottom:1px solid var(--d-line); }
html body .hero :is(h1, h2){ color:var(--d-text) !important; }
html body .hero p{ color:var(--d-text-2) !important; }
html body :is(.hero h1, .page-hero h2, .static-page h2)::after{ background:var(--d-accent) !important; opacity:1 !important; height:1px !important; }
html body .page-hero h2{ color:var(--d-text) !important; }
html body :is(.page-hero p, .static-page p){ color:var(--d-text-2) !important; }
html body .section-lbl{ color:var(--d-text-2) !important; font-family:var(--d-body) !important; }

/* buttons */
html body :is(.btn-primary, .send-btn, .profile-prompt-btn, .cbtn, .contact-btn, :root[data-theme="dark"] .btn-primary){
  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-weight:600;
}
html body :is(.btn-primary, .send-btn, .profile-prompt-btn, .cbtn, .contact-btn):hover{ background:var(--d-accent-hover) !important; }
html body .btn-sos{ 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; transform:none !important; }
html body .cbtn.sec{ background:transparent !important; color:var(--d-text) !important; border-color:var(--d-line-input) !important; }
html body :is(.cat-btn, .seg button, .topic-pill, .intake-btn){
  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(.cat-btn, .seg button, .topic-pill, .intake-btn):hover{ background:var(--d-hover) !important; }
html body :is(.cat-btn.active, .seg button.active, .topic-pill.active){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; color:var(--d-text) !important; }
html body .msg-act-btn{ color:var(--d-text-2) !important; }
html body .msg-act-btn.saved{ color:var(--d-accent) !important; }

/* panels and cards */
html body :is(.country-gate, .intake, .profile-prompt-box, .profile-card, .lib-chat-box, .sol-card, .avail-slot, .consent-card, .more-panel, .chat-scroll, .composer-wrap, .topic-pills){
  background:var(--d-panel) !important; background-image:none !important; border-color:var(--d-line) !important; box-shadow:none !important; color:var(--d-text);
}
html body :is(.country-gate, .profile-prompt-box){ border:1px solid var(--d-line) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; }
html body .country-gate-title{ color:var(--d-text) !important; font-family:var(--d-display) !important; }
html body .country-gate p{ color:var(--d-text-2) !important; }
html body .chat-scroll, html body .topic-pills{ background:var(--d-canvas) !important; }
html body .sol-card.featured{ border:1px solid var(--d-accent) !important; }
html body .consent-overlay{ background:rgba(9,13,22,0.88) !important; }
html body .consent-card{ border:1px solid var(--d-line-input) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; }

/* home features, quick tools and the library list: framed grids split by hairlines */
html body :is(.features, .quick-tools){ gap:1px !important; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body :is(.features > .feature-card, .quick-tools > .qt-card){ background:var(--d-panel) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; }
html body :is(.features > .feature-card, .quick-tools > .qt-card):hover{ background:var(--d-hover) !important; }
html body :is(.feature-card h3, .qt-card h4){ color:var(--d-text) !important; font-family:var(--d-display) !important; font-weight:600; }
html body :is(.feature-card p, .qt-card p){ color:var(--d-text-2) !important; }
html body :is(.feature-icon, .qt-card .icon){ color:var(--d-accent) !important; }
html body .library-list{ gap:0 !important; border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body .library-list > .lib-card{ background:var(--d-panel) !important; border:0 !important; border-bottom:1px solid var(--d-line) !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; }
html body .library-list > .lib-card:last-child{ border-bottom:0 !important; }
html body .library-list > .lib-card:hover{ background:var(--d-hover) !important; }
html body .lib-card h4{ color:var(--d-text) !important; font-family:var(--d-display) !important; }
html body .lib-card p{ color:var(--d-text-2) !important; }
html body .sheet-item{ background:transparent !important; color:var(--d-text) !important; border-color:var(--d-line) !important; }
html body .sheet-item:hover{ background:var(--d-hover) !important; }

/* notes and warnings */
html body .disclaimer, html body :root[data-theme="dark"] .disclaimer{ background:var(--d-accent-tint) !important; color:var(--d-text) !important; border:1px solid var(--d-accent-edge) !important; border-left:1px solid var(--d-accent) !important; border-radius:8px !important; }
html body .chat-disclaimer{ background:var(--d-accent-tint) !important; color:var(--d-text) !important; border-color:var(--d-accent-edge) !important; }
html body .msg.escalation{ background:var(--d-red-tint) !important; color:var(--d-text) !important; border:1px solid var(--d-red-edge) !important; }
html body .feat-badge{ background:var(--d-accent-tint) !important; color:var(--d-accent) !important; border-radius:4px !important; }
html body .ver-badge{ background:var(--d-green-tint) !important; color:var(--d-green) !important; border-radius:4px !important; }
html body .emg-badge{ background:var(--d-red-tint) !important; color:var(--d-red) !important; border-radius:4px !important; }
html body :is(.msg-section-hdr, .tier-tag, .profile-card-name){ color:var(--d-accent) !important; }

/* chat */
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-dot{ background:var(--d-green) !important; box-shadow:none !important; }
html body .msg.user{ background:var(--d-hover) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; }
html body .msg.bot, html body :root:not([data-theme="dark"]) .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; box-shadow:none !important; }
html body .msg-table th{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }
html body :is(.inline-link, .msg-txt a, .faq-answer a, .static-page a){ color:var(--d-text) !important; text-decoration-color:var(--d-accent) !important; }
html body .src-chip{ color:var(--d-text-2) !important; background:transparent !important; border-color:var(--d-line-input) !important; }

/* settings, forms and FAQ */
html body .settings-row-lbl{ color:var(--d-text) !important; }
html body .settings-row-sub, html body .form-field label{ color:var(--d-text-2) !important; }
html body .faq-group-title{ font-family:var(--d-display) !important; color:var(--d-text) !important; text-transform:none; letter-spacing:0; font-size:1rem; font-weight:600; }
html body .faq-answer p, html body .acc-body p{ color:var(--d-text-2) !important; }

html body h1 em, html body .hero h1 em{ color:var(--d-accent) !important; -webkit-text-fill-color:currentColor; opacity:1 !important; }
html body .hero-badge{ background:var(--d-red-tint) !important; border:1px solid var(--d-red-edge) !important; color:var(--d-red) !important; border-radius:4px !important; }
html body .more-panel{ border-top:1px solid var(--d-accent) !important; }
html body a.bw-fam{ color:var(--d-text) !important; }
html body :is(.hero, .page) p strong{ color:var(--d-text) !important; }
html body .btn-sos{ color:var(--d-canvas) !important; }
:root[data-theme] body a.bw-fam, :root[data-theme] body footer a{ color:var(--d-text) !important; }
:root[data-theme] body :is(.hero, .page, footer, .footer-disclaimer, .bw-footer) :is(p strong, strong){ color:var(--d-text) !important; }
:root[data-theme] body .static-page a.bw-fam.bw-fam{ color:var(--d-text) !important; }
:root[data-theme] body .consent-card p strong{ color:var(--d-text) !important; }