/* ==========================================================================
   Be Pet Wise guide pages: Design.md look (v133, 7 November 2026)
   Loaded last on the Pet Wise guide pages (/pet-wise/...) and the contact page,
   after /bw-design.css. APPEARANCE ONLY. The app page loads
   /pet-wise/pet-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; }