/* ==========================================================================
   Be Wise family look (October 2026) - Be Crime Wise (England & Wales) and
   Be Crime Wise (Scotland). Shared by both sister apps.
   Brings the apps into line with the bewiseapps.com home page:
   deep navy + coral from the Waypoint logo, Newsreader headings, Public Sans text.
   APPEARANCE ONLY: colours, fonts, spacing and shapes. No wording or behaviour changes.
   Each app sets its own identifying colour with --bw-accent in <style id="bw-family-app">
   (used only for the line under the top bar, the line on top of the footer
   and the small mark in front of section labels).
   ========================================================================== */

:root{
  --bw-ink:#14213D;           /* deep navy: top bar, hero band, footer */
  --bw-harbour:#1B2A4A;       /* logo navy */
  --bw-coral:#E4572E;         /* accents and focus */
  --bw-coral-strong:#C2461F;  /* filled buttons with white text */
  --bw-coral-hover:#A63B19;
  --bw-coral-soft:#F4A58C;    /* coral that reads on navy */
  --bw-mist:#EEF1F6;          /* page background */
  --bw-rule:#D9DFE8;
  --bw-rule-strong:#C3CCD9;
  --bw-steel:#56637A;
  --bw-good:#2C5E8C;          /* "good / yes" colour: blue, never green */
  --bw-good-bg:#E7EFF8;
  --bw-tint:#F6F8FB;
  --bw-accent:#3D5A99;        /* overridden per app */

  /* Re-point the app's own design tokens at the family palette */
  --navy:#14213D; --navy-light:#1B2A4A; --navy-dark:#0D1629;
  --accent:#2C5E8C;
  --gold:#E4572E; --gold-dark:#B83E1A;
  --red:#B42318; --red-dark:#8A1A12;
  --gray-50:#EEF1F6; --gray-100:#E6EAF1; --gray-200:#D9DFE8;
  --gray-400:#56637A; --gray-600:#3E4A63; --gray-800:#14213D;
  --surface:#FFFFFF;
  --font:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --radius:4px;
  --bw-card-r:8px;
}
/* Dark theme (from the app's own Settings): same family, night colours */
:root[data-theme="dark"]{
  --gray-50:#0E1526; --gray-100:#17213A; --gray-200:#2B3753;
  --gray-400:#9AA6BC; --gray-600:#BCC5D6; --gray-800:#EEF1F6;
  --surface:#162038; --gold-dark:#F4A58C; --accent:#8DB8E2;
  --bw-tint:#1B2742; --bw-rule:#2B3753; --bw-rule-strong:#3A4766;
}

body{ background:var(--gray-50); color:var(--gray-800); }
h1,h2{ font-family:var(--font-serif); font-weight:500; letter-spacing:-0.01em; }
h3,h4{ font-family:var(--font-serif); font-weight:600; letter-spacing:0; }
:focus-visible{ outline:2px solid var(--bw-coral); outline-offset:2px; }

/* ---------- Top bar: navy, Waypoint logo, app colour line ---------- */
.topnav{ background:var(--bw-ink); border-bottom:3px solid var(--bw-accent); }
.nav-logo{ font-family:var(--font-serif); font-weight:600; font-size:1.18rem; letter-spacing:-0.005em; color:#FFFFFF; gap:9px; }
.nav-logo #scaleIcon{
  display:inline-block; width:30px; height:30px; flex-shrink:0;
  background:url("/favicon.svg") center/contain no-repeat;
}
.nav-logo #scaleIcon svg{ display:none; }
.nav-logo .juris{
  font-family:var(--font); font-size:0.7rem; font-weight:600; letter-spacing:0;
  color:#FFFFFF; border:1px solid rgba(255,255,255,0.35); border-radius:4px; padding:2px 7px;
}
.nav-btn{ font-family:var(--font); font-size:0.76rem; font-weight:500; color:rgba(255,255,255,0.78); border-radius:4px; padding:7px 8px; }
.nav-btn:hover{ color:#FFFFFF; background:rgba(255,255,255,0.08); }
.nav-btn.active{ background:transparent; color:#FFFFFF; font-weight:600; box-shadow:inset 0 -2px 0 var(--bw-coral); border-radius:0; }
.nav-btn.sos-link{ color:#FFB4A8; font-weight:700; }   /* Emergency: soft red, readable on navy */
.nav-btn.sos-link.active{ color:#FFFFFF; }
.icon-btn{ border-radius:4px; color:rgba(255,255,255,0.82); }

/* Shared 3-bar menu button and drop-down (bw-nav) */
.bw-burger{ border-radius:4px; border-color:rgba(255,255,255,0.3); color:#FFFFFF; }
.bw-burger:hover,.bw-burger:focus-visible,.bw-burger[aria-expanded="true"]{ background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.6); }
.bw-menu{
  font-family:var(--font); color:var(--bw-ink); border:1px solid var(--bw-rule); border-top:3px solid var(--bw-coral);
  border-radius:0 0 8px 8px; box-shadow:0 16px 36px rgba(10,18,36,0.22);
}
.bw-menu a,.bw-menu button{ color:var(--bw-ink) !important; border-radius:4px; }
.bw-menu a:hover,.bw-menu button:hover,.bw-menu a:focus-visible,.bw-menu button:focus-visible{ background:var(--bw-mist); }
.bw-menu .bw-sep{ background:var(--bw-rule); }
.bw-strip{ background:var(--bw-ink); font-family:var(--font); }
.bw-appsbtn{ font-family:var(--font); }

/* ---------- Bottom bar (phones) ---------- */
.bnav{ background:var(--bw-ink); border-top:1px solid rgba(255,255,255,0.12); }
.bnav-btn{ font-family:var(--font); color:rgba(255,255,255,0.72); }
.bnav-btn.active,.bnav-btn.sos.active{ color:#FFFFFF; font-weight:600; }
.bnav-btn.active .icon{ color:var(--bw-coral-soft); }
.bnav-btn.sos .icon-wrap{ background:var(--red); border-color:var(--bw-ink); box-shadow:0 2px 8px rgba(180,35,24,0.45); }
.bnav-btn.sos.active .icon-wrap{ background:var(--red); color:#FFFFFF; box-shadow:0 0 0 2px #FFFFFF; }
.bnav-btn.sos.active .icon-wrap .icon{ color:#FFFFFF; }

/* ---------- Home: full-width navy band like the home page ---------- */
.hero{
  background:var(--bw-ink); text-align:left;
  padding:48px max(1.25rem, calc((100% - 680px) / 2 + 1.25rem)) 52px;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px; vertical-align:middle;
  background:none; border:0; padding:0; margin:0 14px 18px 0; border-radius:0;
  color:rgba(255,255,255,0.8); font-size:0.78rem; font-weight:600; letter-spacing:0.02em; text-transform:none;
}
.hero-badge::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); box-shadow:0 0 0 1px rgba(255,255,255,0.18); flex-shrink:0; }
.hero .bw-appsbtn.bw-hero-apps{ margin:0 0 18px !important; color:#FFFFFF !important; border-color:rgba(255,255,255,0.32); background:rgba(255,255,255,0.06); }
.hero .bw-appsbtn.bw-hero-apps:hover{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.6); }
.hero h1{
  color:#FFFFFF; font-weight:500; font-size:clamp(2.4rem,7vw,3.6rem); line-height:1.06; letter-spacing:-0.02em;
  margin-bottom:20px; max-width:16ch;
}
.hero h1 em{ color:#FFFFFF; font-style:normal; }
.hero p{ color:rgba(255,255,255,0.8); font-size:1.05rem; line-height:1.6; max-width:34rem; margin:0 0 30px; }
.hero-actions{ justify-content:flex-start; gap:12px; }

/* Buttons */
.btn-primary{
  background:var(--bw-coral-strong); color:#FFFFFF; border:1px solid var(--bw-coral-strong);
  border-radius:4px; font-family:var(--font); font-weight:600; min-height:48px;
}
.btn-primary:hover{ background:var(--bw-coral-hover); border-color:var(--bw-coral-hover); }
.btn-primary:disabled:hover{ background:var(--bw-coral-strong); }
.btn-sos{ background:var(--red); border:1px solid rgba(255,255,255,0.45); border-radius:4px; font-family:var(--font); font-weight:700; min-height:48px; }
.btn-sos:hover{ background:#9A1E14; }
.cbtn{ background:var(--bw-ink); border-radius:4px; font-family:var(--font); font-weight:600; }
.cbtn:hover{ background:var(--bw-harbour); }
.cbtn.sec{ background:var(--surface); color:var(--bw-ink); border:1px solid var(--bw-rule-strong); }
.cbtn.sec:hover{ background:var(--bw-mist); border-color:var(--bw-harbour); }
:root[data-theme="dark"] .cbtn.sec{ color:#FFFFFF; border-color:var(--bw-rule-strong); }
:root[data-theme="dark"] .cbtn.sec:hover{ background:var(--gray-100); }
.cbox .cbtn[style]{ background:var(--bw-coral-strong) !important; color:#FFFFFF !important; }  /* inline gold button on Advertise */
.cbox .cbtn[style]:hover{ background:var(--bw-coral-hover) !important; }
.sol-cta{ background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; font-family:var(--font); }
.loc-btn,.add-row{
  background:var(--surface); color:var(--bw-ink); border:1px solid var(--bw-rule-strong); border-radius:4px; font-family:var(--font);
}
.loc-btn:hover,.add-row:hover{ border-color:var(--bw-harbour); background:var(--bw-tint); }
:root[data-theme="dark"] .loc-btn,:root[data-theme="dark"] .add-row{ color:#FFFFFF; border-color:var(--bw-rule-strong); }
.modal-actions button{ border-radius:4px; font-family:var(--font); font-weight:600; }
.modal-actions .cancel{ background:var(--surface); color:var(--bw-ink); border:1px solid var(--bw-rule-strong); }
:root[data-theme="dark"] .modal-actions .cancel{ color:#FFFFFF; }

/* ---------- Section labels: small app-colour mark in front ---------- */
.section-lbl,.st-lbl2{
  display:flex; align-items:center; gap:10px;
  color:var(--bw-steel); font-size:0.78rem; font-weight:600; letter-spacing:0.02em; text-transform:none;
}
:root[data-theme="dark"] .section-lbl,:root[data-theme="dark"] .st-lbl2{ color:var(--gray-600); }
.section-lbl{ max-width:680px; margin:1.75rem auto 0.6rem; }
.section-lbl::before,.st-lbl2::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--bw-accent); flex-shrink:0; }
.exp-cat{ color:var(--bw-steel); letter-spacing:0.04em; }
:root[data-theme="dark"] .exp-cat{ color:var(--gray-600); }
.ck-progress{ color:var(--bw-ink); }
:root[data-theme="dark"] .ck-progress{ color:#FFFFFF; }

/* ---------- Cards and panels: white, thin border, 8px corners ---------- */
.feature-card,.qt-card,.exp-card,.tool-card,.tool-link,.help-card,.dash-card,.stat-box,.sol-card,.avail-slot,
.bw-listing-slot,.set-row,.reminder-card,.emg-item,.contact-card,.saved-card,.history-card,
.home-faq details,.qa details,.bw-spot-banner,.power-info,.note-box,.slot-opt,.disclaimer{
  border-radius:var(--bw-card-r);
}
.feature-card{ border:1px solid var(--bw-rule); border-top:3px solid var(--bw-ink); box-shadow:none; }
.feature-card:hover{ border-color:var(--bw-rule-strong); border-top-color:var(--bw-coral); transform:none; }
.feature-card h3{ color:var(--bw-ink); font-size:0.95rem; line-height:1.25; }
.feature-icon{ color:var(--bw-harbour); }
:root[data-theme="dark"] .feature-card{ border-color:var(--bw-rule); border-top-color:var(--gray-600); }
:root[data-theme="dark"] .feature-card h3,:root[data-theme="dark"] .feature-icon{ color:#FFFFFF; }
.feature-card p,.qt-card p{ color:var(--bw-steel); }
:root[data-theme="dark"] .feature-card p,:root[data-theme="dark"] .qt-card p{ color:var(--gray-600); }
.qt-card{ border:1px solid var(--bw-rule); }
.qt-card:hover,.tool-link:hover,.exp-card:hover,.history-card:hover{ border-color:var(--bw-harbour); }
.qt-card .icon{ color:var(--bw-coral-strong); }
.qt-card h4{ font-size:0.86rem; }
.quick-tools{ padding-bottom:4px; }

.guides-sec h2,.home-faq h2{ font-size:1.5rem; font-weight:500; color:var(--bw-ink); }
:root[data-theme="dark"] .guides-sec h2,:root[data-theme="dark"] .home-faq h2{ color:#FFFFFF; }
.guides-grid a{ border:1px solid var(--bw-rule); border-left:3px solid var(--bw-harbour); border-radius:0 6px 6px 0; color:var(--bw-ink); }
.guides-grid a:hover{ border-color:var(--bw-rule-strong); border-left-color:var(--bw-coral); }
:root[data-theme="dark"] .guides-grid a{ color:#FFFFFF; border-left-color:var(--gray-600); }
.guides-all{ color:var(--bw-good); }
.home-faq details,.qa details{ border:1px solid var(--bw-rule); }
.home-faq summary,.qa summary{ color:var(--bw-ink); }
:root[data-theme="dark"] .home-faq summary,:root[data-theme="dark"] .qa summary{ color:#FFFFFF; }
.home-faq summary::after,.qa summary::after{ color:var(--bw-coral-strong); }
.home-faq details a{ color:var(--bw-good); }

.bw-spot-banner{ background:var(--surface); border:1px dashed var(--bw-rule-strong); color:var(--bw-steel); }
.bw-spot-banner a,.chat-spot a,.note-box a,.pg-content a,.src-note a,.tool-foot a,.exp-all a,.exp-more{ color:var(--accent); }

/* Disclaimer: no cream/amber - quiet white panel with navy edge */
.disclaimer{
  background:var(--surface); border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour);
  border-radius:0 8px 8px 0; color:var(--gray-600); max-width:640px;
}
#homeDisclaimer{ margin:0.75rem auto 1.25rem; width:calc(100% - 2.5rem); }
:root[data-theme="dark"] .disclaimer{ background:var(--surface); color:var(--gray-600); border-color:var(--bw-rule); border-left-color:var(--gray-600); }
.disclaimer strong{ color:var(--gray-800); }

/* Inner page heading band (each tool / screen) */
.sol-hero{
  background:var(--bw-ink); text-align:left;
  padding:34px max(1.25rem, calc((100% - 640px) / 2 + 1.25rem)) 36px;
}
.sol-hero h2{ justify-content:flex-start; font-weight:500; font-size:clamp(1.6rem,4.6vw,2.15rem); line-height:1.12; letter-spacing:-0.015em; margin-bottom:8px; }
.sol-hero p{ color:rgba(255,255,255,0.8); font-size:0.95rem; line-height:1.55; }
.sol-hero h2 .icon{ color:var(--bw-coral-soft); }

/* Tools */
.tool-card{ border:1px solid var(--bw-rule); border-top:3px solid var(--bw-ink); box-shadow:none; }
:root[data-theme="dark"] .tool-card{ border-top-color:var(--gray-600); }
.tool-card h3{ font-size:1.2rem; font-weight:600; color:var(--bw-ink); }
.tool-link{ border:1px solid var(--bw-rule); border-left:3px solid var(--bw-harbour); }
:root[data-theme="dark"] .tool-link{ border-left-color:var(--gray-600); }
.tool-link .icon{ color:var(--bw-coral-strong); }
:root[data-theme="dark"] .tool-link .icon{ color:var(--bw-coral-soft); }
.tool-link strong{ font-size:1rem; }
.stat-box{ border:1px solid var(--bw-rule); border-top:3px solid var(--bw-ink); }
.stat-box .sn,.dash-stat .dn{ font-weight:600; }
.dash-stat{ border-radius:6px; }
.steps-list li::before{ background:var(--bw-ink); }
:root[data-theme="dark"] .steps-list li::before{ background:var(--gray-200); }
.stage-chip,.next-chip,.pill-opt,.topic-pill,.prompt-chip,.intake-btn,.src-chip,.msg-links a,.msg-links button{ border-radius:4px; font-family:var(--font); }
.stage-chip{ border-color:var(--bw-rule-strong); }
.stage-chip.active,.pill-opt.active,.topic-pill.active,.seg button.active{ background:var(--bw-ink); border-color:var(--bw-ink); color:#FFFFFF; }
.stage-chip.active span{ background:var(--bw-coral-strong); color:#FFFFFF; }
.pill-opt{ background:var(--surface); border:1px solid var(--bw-rule-strong); color:var(--gray-800); }
.pill-opt:hover{ border-color:var(--bw-harbour); }
.next-chip{ background:var(--surface); border-color:var(--bw-rule-strong); color:var(--bw-ink); }
:root[data-theme="dark"] .next-chip{ color:#FFFFFF; }
:root[data-theme="dark"] .stage-chip.active,:root[data-theme="dark"] .pill-opt.active,:root[data-theme="dark"] .topic-pill.active,:root[data-theme="dark"] .seg button.active{ background:#2C3E66; border-color:#5A6F9C; }
.chk input,.ck-item input,.gate-check input{ accent-color:var(--bw-coral-strong); }
.slot-opt{ background:var(--surface); border:1px solid var(--bw-rule-strong); }
.slot-opt.active{ border-color:var(--bw-harbour); background:var(--bw-tint); box-shadow:inset 4px 0 0 var(--bw-coral); }

/* Result panel (checkers and calculators) */
.res{ background:var(--bw-ink); border-radius:var(--bw-card-r); }
.res .res-lbl{ color:rgba(255,255,255,0.78); }
.res .res-big{ color:#FFFFFF; font-weight:600; }
.res a{ color:var(--bw-coral-soft); }
.meter{ background:rgba(255,255,255,0.18); }
.meter i{ background:var(--bw-coral-soft); }
.meter.warn i{ background:#FF8A7A; }

/* Yes / no tags: blue for yes (no green), coral tint for no (no cream) */
.tag-yes{ background:var(--bw-good-bg); color:var(--bw-good); border-color:#BCD2E8; border-radius:4px; }
.tag-no{ background:#FCF1EC; color:#A63B19; border-color:#F2C9B8; border-radius:4px; }
.ver-badge{ background:var(--bw-good-bg); color:var(--bw-good); border-radius:4px; }
.feat-badge{ background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; }
.emg-badge{ border-radius:4px; }
.wiz-err{ color:#B42318; }

/* Form fields: white, 6px corners, grey border, coral focus ring */
.county-select,.tf select,.tf input[type=date],.tf input[type=number],.tf input[type=text],.tf input[type=tel],.tf input[type=url],.tf textarea,.field input{
  background-color:var(--surface); border:1px solid var(--bw-rule-strong); border-radius:6px; font-family:var(--font); color:var(--gray-800);
}
.county-select:focus,.tf select:focus,.tf input:focus,.tf textarea:focus,.field input:focus{
  outline:none; border-color:var(--bw-harbour); box-shadow:0 0 0 3px rgba(228,87,46,0.28);
}
.county-sel-wrap label,.field label{ color:var(--bw-steel); }
.county-sel-wrap label[for$="London"]{ color:var(--bw-ink); }
:root[data-theme="dark"] .county-sel-wrap label,:root[data-theme="dark"] .field label{ color:var(--gray-600); }
:root[data-theme="dark"] .county-sel-wrap label[for$="London"]{ color:#FFFFFF; }
.bw-london{ padding:12px 14px; background:var(--surface); border:1px solid var(--bw-rule); border-left:3px solid var(--bw-coral); border-radius:0 8px 8px 0; }
.tf>label,.tf .tf-lbl{ color:var(--gray-800); }

/* Find a Solicitor */
.county-hdr{ background:var(--bw-ink); border-radius:var(--bw-card-r); }
.county-hdr h3{ font-size:1.15rem; font-weight:600; }
.county-hdr .icon{ color:var(--bw-coral-soft); }
.sol-card{ border:1px solid var(--bw-rule); }
.sol-card.featured{ border:2px solid var(--bw-coral-strong); }
.avail-slot{ background:var(--surface); border:1px dashed var(--bw-rule-strong); }
.note-box{ background:var(--surface); border:1px solid var(--bw-rule); color:var(--gray-600); }
.sol-name{ font-family:var(--font-serif); font-size:1.05rem; font-weight:600; }

/* About / Advertise / Settings */
.pg-content h2,.adpage h2{ font-size:1.9rem; font-weight:500; line-height:1.12; color:var(--bw-ink); }
.pg-content h3{ font-size:1.1rem; color:var(--bw-ink); }
:root[data-theme="dark"] .pg-content h2,:root[data-theme="dark"] .adpage h2{ color:#FFFFFF; }
:root[data-theme="dark"] .pg-content h3{ color:#FFFFFF; }
.pg-content h2 .icon{ color:var(--bw-coral-strong); }
.bw-listing-slot{ border:1px solid var(--bw-rule); }
.bw-listing-slot .price{ color:var(--bw-coral-strong); }
:root[data-theme="dark"] .bw-listing-slot .price{ color:var(--bw-coral-soft); }
.cbox{ background:var(--bw-ink); border-radius:var(--bw-card-r); }
.cbox a{ color:var(--bw-coral-soft); }
.set-row{ border:1px solid var(--bw-rule); }
.set-row .st-lbl .icon,.reminder-card .rc-icon,.history-card .hc-icon,.more-sheet .sheet-item .icon,.intake-btn .icon{ color:var(--bw-coral-strong); }
.seg{ background:var(--gray-100); border-radius:6px; }
.seg button{ border-radius:4px; font-family:var(--font); }
.more-sheet .sheet-item{ background:var(--surface); border-color:var(--bw-rule); border-radius:6px; color:var(--bw-ink); }
:root[data-theme="dark"] .more-sheet .sheet-item{ color:#FFFFFF; }
.history-clear{ color:var(--accent); }

/* Contact screen */
.contact-hero{ background:var(--bw-ink); }
.contact-logo-circle{ border-color:rgba(255,255,255,0.3); color:var(--bw-coral-soft); }
.contact-hero h2{ font-weight:500; font-size:1.9rem; }
.contact-hero h2 span,.cfl span{ color:inherit; }
.cfl{ font-family:var(--font-serif); font-weight:600; }
.cfl .icon{ color:var(--bw-coral-strong); }
.contact-card{ border-color:var(--bw-rule); box-shadow:none; }
.cc-hdr{ background:var(--bw-ink); }
.ca-btn{ border-radius:4px; }
.ca-btn.em{ background:var(--bw-coral-strong); }
.ca-btn.wa{ background:var(--bw-ink); }
.contact-info-box{ background:var(--surface); border:1px solid var(--bw-rule); border-left:4px solid var(--bw-harbour); border-radius:0 8px 8px 0; }
.contact-info-box h4,.contact-info-box p{ color:var(--gray-600); }
.contact-info-box h4{ color:var(--gray-800); }
:root[data-theme="dark"] .contact-info-box{ background:var(--surface); border-color:var(--bw-rule); }
:root[data-theme="dark"] .contact-info-box h4{ color:#FFFFFF; }
:root[data-theme="dark"] .contact-info-box p{ color:var(--gray-600); }

/* ---------- Chat ---------- */
.chat-hdr{ background:var(--bw-ink); font-family:var(--font); }
.chat-dot{ background:var(--bw-coral-soft); }     /* was green */
.badge-count{ background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; }
.intake-btn{ background:var(--surface); border-color:var(--bw-rule-strong); color:var(--bw-ink); }
.intake-btn:hover{ border-color:var(--bw-harbour); }
.intake-btn:active{ background:var(--bw-ink); color:#FFFFFF; }
:root[data-theme="dark"] .intake-btn{ color:#FFFFFF; }
.topics-label,.prompts-label,.sources-row span.lbl{ color:var(--bw-steel); }
:root[data-theme="dark"] .topics-label,:root[data-theme="dark"] .prompts-label,:root[data-theme="dark"] .sources-row span.lbl{ color:var(--gray-600); }
.topic-pill{ background:var(--surface); border-color:var(--bw-rule-strong); color:var(--gray-600); }
.prompt-chip{ border-color:var(--bw-rule-strong); }
.prompt-chip:active{ background:var(--bw-ink); }
.msg{ border-radius:10px; }
.msg.user{ background:var(--bw-ink); color:#FFFFFF; border-radius:10px 10px 2px 10px; }
.msg.bot{ background:var(--bw-tint); border:1px solid var(--bw-rule); border-radius:10px 10px 10px 2px; }
.msg-lbl{ color:var(--bw-ink); }
.msg-act-btn.saved{ color:var(--bw-coral-strong); }
.chat-input-area{ border-top-color:var(--bw-rule); }
/* The client asked for the chat box to always have a strong dark outline: kept, in deep navy */
.chat-textarea{ border:2px solid var(--bw-ink); border-radius:6px; background:#FFFFFF; color:var(--bw-ink); font-family:var(--font); }
.chat-textarea:focus{ border-color:var(--bw-ink); box-shadow:0 0 0 3px rgba(228,87,46,0.35); }
.chat-send{ background:var(--bw-coral-strong); border-radius:4px; }
.chat-send:hover{ background:var(--bw-coral-hover); }
.chat-send:active{ background:var(--bw-coral-hover); }
.chat-send:disabled{ background:var(--bw-rule-strong); }
.bw-md-table th,.bw-md-table td{ border-color:var(--bw-rule-strong); }

/* ---------- Emergency Mode: stays high-contrast and clearly urgent (red is the safety signal) ---------- */
.emg-hero{ background:#A11D13; text-align:left; padding:34px max(1.25rem, calc((100% - 640px) / 2 + 1.25rem)) 36px; border-bottom:3px solid #6E140D; }
.emg-hero h1{ font-weight:600; font-size:clamp(1.9rem,6vw,2.5rem); line-height:1.08; letter-spacing:-0.015em; margin-bottom:10px; }
.emg-hero p{ color:#FFFFFF; margin:0; font-size:0.95rem; }
.emg-actions{ max-width:640px; }
.emg-act-btn{ background:#FFFFFF; color:#8A1A12; border:2px solid #B42318; border-radius:6px; font-family:var(--font); min-height:52px; font-size:0.95rem; }
.emg-act-btn:hover{ background:#FDF0EE; }
.emg-item{ border:1px solid var(--bw-rule); border-left:4px solid var(--red); }
.emg-item h4{ font-size:1rem; }
.emg-item h4 .icon{ color:var(--red); }
.say-this{ border-left-color:var(--bw-ink) !important; background:#FFFFFF; }
:root[data-theme="dark"] .say-this{ background:var(--surface); border-left-color:#FFFFFF !important; }
.say-this li{ color:var(--bw-ink); font-size:0.92rem; }
:root[data-theme="dark"] .say-this li{ color:#FFFFFF; }
.custody-table td{ border-bottom-color:var(--bw-rule); }

/* ---------- Panels, modals, Before you start ---------- */
.overlay{ background:rgba(13,22,41,0.6); }
.slide-panel{ box-shadow:none; }
.slide-panel.show{ box-shadow:-8px 0 30px rgba(10,18,36,0.25); }
.sp-hdr{ background:var(--bw-ink); }
.sp-hdr h3{ font-weight:600; font-size:1.1rem; }
.consent-overlay{ background:rgba(13,22,41,0.82); }
.consent-box{ border-top:4px solid var(--bw-coral); border-radius:8px; box-shadow:0 18px 44px rgba(10,18,36,0.28); }
.consent-box .icon{ color:var(--bw-coral-strong); }
.consent-box h3{ font-size:1.5rem; font-weight:500; color:var(--bw-ink); }
:root[data-theme="dark"] .consent-box h3{ color:#FFFFFF; }
.gate-check{ color:var(--gray-800); }
.modal-overlay{ background:rgba(13,22,41,0.72); }
.modal-box{ border-top:4px solid var(--bw-coral); border-radius:8px 8px 0 0; }
@media(min-width:601px){ .modal-box{ border-radius:8px; } }

/* Install banner */
#pwa-banner{ background:var(--bw-ink); }
.pwa-icon{ color:var(--bw-coral-soft); }
.pwa-install-btn{ background:var(--bw-coral-strong); color:#FFFFFF; border-radius:4px; font-family:var(--font); }

/* ---------- Footers: navy with app-colour line on top ---------- */
footer{ background:var(--bw-ink); color:rgba(255,255,255,0.72); font-family:var(--font); border-top:3px solid var(--bw-accent); }
footer a{ color:#FFFFFF; text-decoration-color:var(--bw-coral); text-underline-offset:3px; }
footer.bw-footer{ padding:1.4rem 1.25rem; line-height:1.7; }
footer.bw-footer a[style]{ color:#FFFFFF !important; text-decoration:underline; text-decoration-color:var(--bw-coral); }  /* inline gold link */
/* The small footer inside the About screen: quieter, sits on the page background */
.page footer{ background:transparent; color:var(--bw-steel); border-top:1px solid var(--bw-rule); max-width:620px; margin:0.5rem auto 1rem; }
:root[data-theme="dark"] .page footer{ color:var(--gray-600); }
.bw-bottom{ color:var(--gray-800); font-family:var(--font); }
.bw-bottom button{ font-family:var(--font); }

/* Phones */
@media(max-width:600px){
  .hero{ padding-top:36px; padding-bottom:40px; }
  .hero p{ font-size:1rem; }
  .hero-actions .btn-primary,.hero-actions .btn-sos{ flex:1 1 100%; justify-content:center; }
  .nav-logo{ font-size:1.08rem; }
  .sol-hero{ padding-top:26px; padding-bottom:28px; }
}
@media(max-width:360px){ .nav-logo #scaleIcon{ width:26px; height:26px; } }