/* ==========================================================================
   Be Consumer Wise: Design.md look (v131, 7 November 2026)
   Loaded last on every Be Consumer Wise page (the app, its contact page and
   the guides under /consumer-wise/), after /bw-design.css, which holds the
   shared Design.md tokens and family components. This file handles the
   Consumer Wise components. APPEARANCE ONLY.
   ========================================================================== */

:root{
  /* the app's own tokens, re-pointed so every existing rule follows */
  --ink:var(--d-text); --ink-soft:var(--d-text-2); --paper:var(--d-canvas); --paper-raised:var(--d-panel); --raised:var(--d-panel);
  --surface:var(--d-panel); --white:var(--d-panel);
  --brass:var(--d-accent); --brass-dark:var(--d-accent); --brass-bg:var(--d-accent-tint);
  --slate:var(--d-text-2); --rule:var(--d-line); --rule-strong:var(--d-line-input);
  --flag:var(--d-red); --flag-bg:var(--d-red-tint); --sage:var(--d-green); --sage-bg:var(--d-green-tint);
  --focus:var(--d-accent); --gold:var(--d-accent); --gold-dark:var(--d-accent);
  --serif:var(--d-display); --sans:var(--d-body); --font-serif:var(--d-display); --font-sans:var(--d-body);
  --font-display:var(--d-display); --font:var(--d-body);
  --radius:6px; --shadow-card:none; --shadow-raised:none;
}

/* home-screen choices and questions */
html body .faq-group-title{ color:var(--d-text) !important; border-color:var(--d-line) !important; font-family:var(--d-display); font-weight:600; letter-spacing:0; text-transform:none; font-size:1rem; }
html body .link-back{ color:var(--d-text-2) !important; font-family:var(--d-body); }
html body .link-back:hover{ color:var(--d-text) !important; }
html body .choice-sub{ color:var(--d-text-2) !important; }
html body button.choice-option{ border-radius:6px !important; }
html body .choice-option:hover{ background:var(--d-hover) !important; border-color:var(--d-accent) !important; }
html body .choice-option .opt-label{ color:var(--d-text) !important; }
html body .choice-option .opt-sub{ color:var(--d-text-2) !important; }
html body .country-confirmed{ color:var(--d-green) !important; }
html body .journey-card .locked-note{ color:var(--d-red) !important; }

/* warranty answer panel */
html body .warranty-hero h2{ color:var(--d-text) !important; }
html body :is(.warranty-hero, .next-steps-panel) :is(p, li){ color:var(--d-text-2) !important; }
html body .next-steps-panel h4{ color:var(--d-text) !important; }

/* accordions */
html body .accordion details{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-radius:8px; }
html body .accordion summary{ color:var(--d-text) !important; }
html body .accordion summary::after{ color:var(--d-accent) !important; }
html body .accordion .acc-body, html body .accordion .acc-body :is(p, li){ color:var(--d-text-2) !important; }
html body .accordion .acc-body strong{ color:var(--d-text) !important; }

/* who-to-contact cards: one framed list split by hairlines */
html body .contact-card{ background:var(--d-panel) !important; border:1px solid var(--d-line) !important; border-left:1px solid var(--d-line) !important; border-radius:8px; }
html body .contact-card.primary{ background:var(--d-accent-tint) !important; border-color:var(--d-accent-edge) !important; }
html body .contact-card .cc-name{ color:var(--d-text) !important; font-family:var(--d-display); }
html body .contact-card .cc-number{ color:var(--d-accent) !important; font-family:var(--d-mono); font-weight:600; }
html body .contact-card .cc-desc{ color:var(--d-text-2) !important; }
html body .contact-card a{ color:var(--d-text) !important; }

/* guides */
html body .group-h{ color:var(--d-text) !important; }

/* the three journeys: one framed grid split by hairlines, not floating cards */
html body .journey-grid{ gap:1px; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body .journey-grid > .journey-card{ border:0 !important; border-radius:0 !important; background:var(--d-panel) !important; }
html body .journey-grid > .journey-card:hover{ background:var(--d-hover) !important; }