/* ==========================================================================
   Be Pet Wise app: Design.md look (v133, 7 November 2026)
   Loaded last on the app page (/pet-wise), after /bw-design.css, which holds
   the shared Design.md tokens and family components. The guide pages load
   /pet-wise/pet-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); }

/* 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; }

/* v154 (9 November 2026): home screen photo (two dogs in a lake) under the opening line, with its copyright credit.
   Fills the hero's text column (680px on desktop, full width less the side margins on a phone); fixed 16:9 shape so
   the page doesn't jump while it loads; hairline border, no shadow (Design.md). */
html body .hero .pw-hero-photo{ position:relative; z-index:1; margin:24px 0 0; max-width:680px; }
html body .hero .pw-hero-photo img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--d-line); border-radius:8px; background:var(--d-hover); }
html body .hero .pw-hero-photo figcaption{ margin-top:8px; font-family:var(--d-body); font-size:12px; line-height:1.4; color:var(--d-text-2) !important; text-align:right; }