/* Be Crime Wise apps (England & Wales and Scotland): Design.md look (v137, 7 November 2026). Loaded last on /crime-wise-england and /crime-wise-scotland, after /bw-design.css. APPEARANCE ONLY. */

:root{
  --bw-ink:var(--d-panel); --bw-wash:var(--d-panel);
  --navy:var(--d-panel); --navy-light:var(--d-hover); --navy-dark:var(--d-on-accent);
  --accent:var(--d-accent); --gold:var(--d-accent); --gold-dark: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, .nav-logo span){ font-family:var(--d-body) !important; }

/* bars */
html body :is(.topnav, .bnav, .hero, .sol-hero, .contact-hero, .county-hdr, .chat-hdr, .cc-hdr, #pwa-banner){
  background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important; box-shadow:none !important; border-color:var(--d-line) !important;
}
html body .topnav{ border-bottom:1px solid var(--d-line) !important; }
html body .bnav{ border-top:1px solid var(--d-line) !important; }
html body :is(.hero, .sol-hero, .contact-hero){ border-bottom:1px solid var(--d-line) !important; }
html body :is(.hero, .sol-hero, .contact-hero, .county-hdr, .chat-hdr, .cc-hdr) :is(h1, h2, h3){ color:var(--d-text) !important; }
html body :is(.hero, .sol-hero, .contact-hero, .county-hdr, .chat-hdr, .cc-hdr) :is(p, span){ color:var(--d-text-2) !important; }
html body .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; background:transparent !important; box-shadow:inset 0 -2px 0 var(--d-accent) !important; }
html body .bnav-btn{ color:var(--d-text-2) !important; }
html body .bnav-btn.active{ color:var(--d-accent) !important; }
html body :is(.hero h1, .page-hero h2)::after{ background:var(--d-accent) !important; height:1px !important; }

/* buttons */
html body :is(.btn-primary, .sol-cta, .lead-cta button, .calc-calc-btn, .cbtn, .chat-send, .gate-box .btn, .ca-btn.em, .ca-btn.wa){
  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, .sol-cta, .lead-cta button, .calc-calc-btn, .cbtn, .chat-send):hover{ background:var(--d-accent-hover) !important; }
html body :is(.calc-calc-btn, .chat-send):disabled{ background:var(--d-hover) !important; border-color:var(--d-line) !important; color:var(--d-text-3) !important; }
html body :is(.cbtn.sec, .calc-reset-btn, .calc-fault-btn, .calc-pill, .topic-pill, .prompt-chip, .modal-close, .cai-remove){
  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(.cbtn.sec, .calc-reset-btn, .calc-fault-btn, .calc-pill, .topic-pill, .prompt-chip):hover{ background:var(--d-hover) !important; }
html body :is(.calc-pill.active, .calc-pill.active:hover, .topic-pill.active, .prompt-chip:active){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; color:var(--d-text) !important; }
html body .calc-fault-btn.yes{ border-color:var(--d-green-edge) !important; }
html body .calc-fault-btn.no{ border-color:var(--d-red-edge) !important; }
html body .feat-badge{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; border-radius:4px !important; }

/* panels */
html body :is(.feature-card, .chat-topics, .quick-prompts, .chat-input-area, .sol-card, .avail-slot, .dash-card, .dash-stat, .stat-box, .modal-card, .calc-card,
  .bw-listing-slot, .contact-card, .disclaimer, .calc-note, .calc-blocked, .calc-sev-card, .calc-added-row, .contact-info-box, .lead-cta, .cbox, .calc-result){
  background:var(--d-panel) !important; background-image:none !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important; transform:none !important;
}
html body :is(.disclaimer, .calc-note, .contact-info-box){ border-left:1px solid var(--d-accent) !important; }
html body :is(.lead-cta, .cbox, .calc-result){ border-top:1px solid var(--d-accent) !important; }
html body .calc-sev-card.active{ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; }
html body :is(.chat-messages){ background:var(--d-canvas) !important; }
html body :is(.feature-card, .calc-card, .bw-listing-slot, .stat-box, .sol-card, .dash-card, .contact-card, .cbox, .lead-cta, .calc-result) :is(h2, h3, h4, .sn, strong, b){ color:var(--d-text) !important; }
html body :is(.feature-card, .calc-card, .bw-listing-slot, .stat-box, .sol-card, .dash-card, .contact-card, .disclaimer, .calc-note, .cbox, .lead-cta, .calc-result, .contact-info-box) :is(p, .sl, span, li, small){ color:var(--d-text-2) !important; }
html body :is(.stat-box .sn, .dash-stat, .calc-result .big, .calc-result strong){ font-family:var(--d-mono) !important; }
html body .cfl{ color:var(--d-text) !important; }
html body .modal-overlay{ background:rgba(9,13,22,0.88) !important; }

/* framed grids split by hairlines */
html body :is(.features, .stats-strip, .guides-grid){ gap:1px !important; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; }
html body :is(.features > .feature-card, .stats-strip > .stat-box, .guides-grid > a){ border:0 !important; border-radius:0 !important; }
html body .guides-grid > a{ background:var(--d-panel) !important; color:var(--d-text) !important; box-shadow:none !important; }
html body :is(.features > .feature-card, .guides-grid > a):hover{ background:var(--d-hover) !important; }

/* chat */
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 :is(em, a){ color:var(--d-text-2) !important; }
html body .chat-spot{ background:var(--d-accent-tint) !important; }
html body p > a{ color:var(--d-text); }

/* inputs drawn by the app */
html body :is(.chat-textarea, .calc-input, .county-select){ background:var(--d-canvas) !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; }
html body #countyListings > div[style*="gray-100"]{ background:var(--d-panel) !important; color:var(--d-text-2) !important; }
html body :is(.pg-content h2, .pg-content h3, .guides-sec h2, .guides-sec a.guides-all, .adpage h2, .adpage h3, .calc-note strong, .calc-sev-card .st){ color:var(--d-text) !important; }
html body h1 em{ color:var(--d-accent) !important; background:none !important; -webkit-text-fill-color:currentColor; }
html body .cbox button.cbtn, html body a.ca-btn :is(span, .bi){ color:var(--d-on-accent) !important; }
html body .cbox .cbtn[style].cbtn{ background:var(--d-accent) !important; color:var(--d-on-accent) !important; }
html body .cbox a:not(.cbtn){ color:var(--d-text) !important; text-decoration-color:var(--d-accent); }
html body .contact-info-box h4{ color:var(--d-text) !important; }
html body :is(.features, .stats-strip, .guides-grid){ padding:0 !important; }

/* ==========================================================================
   Crime Wise's own parts
   ========================================================================== */
html body :is(.consent-overlay){ background:rgba(9,13,22,0.88) !important; }
html body :is(.consent-box){ background:var(--d-panel) !important; border:1px solid var(--d-line-input) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important; color:var(--d-text) !important; }
html body .bnav .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 .juris-pop{ background:var(--d-panel) !important; border:1px solid var(--d-line-input) !important; border-top:1px solid var(--d-accent) !important; border-radius:8px !important; box-shadow:none !important; }
html body .juris-pop :is(a, span, button){ color:var(--d-text) !important; }
html body :is(.stage-chip, .sheet-item, .tool-link, .hc-actions a.cbtn.sec, .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(.stage-chip, .sheet-item, .tool-link, .intake-btn):hover{ background:var(--d-hover) !important; }
html body :is(.stage-chip.active, .stage-chip.on, .stage-chip[aria-pressed="true"]){ background:var(--d-accent-tint) !important; border-color:var(--d-accent) !important; }
html body .stage-chip > span{ background:var(--d-hover) !important; color:var(--d-text-2) !important; border-radius:4px; }
html body :is(.help-card, .home-faq details, .emg-item, .sit-sum, .tool-card){
  background:var(--d-panel) !important; color:var(--d-text) !important; border:1px solid var(--d-line) !important; border-radius:8px !important; box-shadow:none !important;
}
html body :is(.emg-item, .sit-sum){ border-left:1px solid var(--d-accent) !important; }
html body .emg-item.say-this{ border-left-color:var(--d-green) !important; }
html body :is(.explainer-grid, .tools-grid, .sit-grid){ gap:1px !important; background:var(--d-line); border:1px solid var(--d-line); border-radius:8px; overflow:hidden; padding:0 !important; }
html body :is(.explainer-grid > .exp-card, .tools-grid > .tool-link, .sit-grid > .feature-card){ background:var(--d-panel) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; transform:none !important; }
html body :is(.explainer-grid > .exp-card, .tools-grid > .tool-link, .sit-grid > .feature-card):hover{ background:var(--d-hover) !important; }
html body .exp-card h4{ color:var(--d-text) !important; font-family:var(--d-display) !important; }
html body .exp-card :is(p, .exp-more){ color:var(--d-text-2) !important; }
html body .exp-card .exp-cat{ color:var(--d-accent) !important; }
html body .bw-london{ border-left:1px solid var(--d-accent) !important; background:var(--d-panel) !important; }
html body :is(ul > li, li > p, div > span){ color:inherit; }
html body :is(.tool-card, .help-card, .emg-item, .sit-sum, .tool-wrap, .page) :is(li, li > p, div > span){ color:var(--d-text-2) !important; }
html body :is(.tool-card, .help-card, .emg-item, .sit-sum, .tool-wrap, .page) :is(li > strong, div > strong, h3, h4){ color:var(--d-text) !important; }
html body p.tool-foot a, html body .src-chip{ color:var(--d-text-2) !important; }
html body .home-faq details :is(summary){ color:var(--d-text) !important; }
html body .home-faq details p{ color:var(--d-text-2) !important; }
html body :is(details > summary, .tool-card td, td, .next-chip, .msg-lbl, .loc-btn, .bw-london label, .add-row, .ck-progress, .home-faq h2){ color:var(--d-text) !important; }
html body :is(.next-chip, .loc-btn, .add-row){ background:transparent !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }
html body :is(.next-chip, .loc-btn, .add-row):hover{ background:var(--d-hover) !important; }
html body :is(.btn-sos, .sit-emg){ background:var(--d-red) !important; border:1px solid var(--d-red) !important; color:var(--d-on-accent) !important; box-shadow:none !important; border-radius:6px !important; }
html body :is(.btn-sos, .sit-emg) :is(span, strong), html body .btn-sos{ color:var(--d-on-accent) !important; }
html body .emg-hero{ background:var(--d-red-tint) !important; background-image:none !important; border:1px solid var(--d-red-edge) !important; border-radius:8px !important; color:var(--d-text) !important; }
html body .emg-hero :is(h1, h2, h3, p, strong, span){ color:var(--d-text) !important; }
html body .emg-act-btn{ background:transparent !important; color:var(--d-red) !important; border:1px solid var(--d-red-edge) !important; border-radius:6px !important; }
html body .emg-act-btn:hover{ background:var(--d-red-tint) !important; }
html body .app-dis-bar, html body .app-dis-bar span{ background:var(--d-canvas) !important; color:var(--d-text-2) !important; }
html body .app-dis-bar strong, html body span > strong{ color:var(--d-text) !important; }
html body button.slot-opt.slot-opt{ border-radius:6px !important; }
html body .consent-box h3{ color:var(--d-text) !important; }
html body .modal-actions button.cancel{ background:transparent !important; color:var(--d-text) !important; border:1px solid var(--d-line-input) !important; border-radius:6px !important; }