/* results-redesign.css — Phase B visual pass (CD handoff 2026-07-18, wired same day).
 * Source of truth: Design updates/design_handoff_results_redesign/ (spec + preview).
 * Load order: figtree.css -> client.css -> THIS FILE (later rules win on shared classes
 * like .danger-banner/.match/.helpline, which is the intended takeover). */
/* ═══════════════════════════════════════════════════════════════════════════
   CrisisFlare · "Support near you" (search results) — Phase B redesign
   results.css — complete, drop-in stylesheet for this one page.
   ─────────────────────────────────────────────────────────────────────────────
   PRINCIPLES
   • Order the heart needs: acknowledgment → understanding → help → mechanisms.
   • Colour = state, never decoration. Every status carries icon + text.
   • One primary action per card: Call. Nothing static may look interactive.
   • RTL-ready: logical properties only (inline-start/end), no left/right.
   • WCAG 2.1 AA: contrast, ≥44px targets, visible focus, no colour-only meaning.

   HOW IT LOADS
   Depends on figtree.css (for --font-display) loaded first. The :root block
   below MIRRORS the page's existing brand tokens so this file also works
   stand-alone (e.g. in preview.html); if the base stylesheet already defines
   them, this block is a harmless no-op you can delete.

   NAMING
   Reuses stable production classes (.match .m-name .pill .need-chip .helpline
   .danger-banner .band .covstrip .btn*). New elements use the rp- prefix.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · TOKENS (mirror of the page base — safe to drop if already loaded) ── */
:root{
  /* Phase B redesign tokens — ONLY names the base stylesheet does not define.
     Everything else (--ink*, --line*, --green*, --bg*, --surface*, --r-*, --sh-*)
     comes from client.css so the two systems can never drift apart. */
  --navy-800:#16294C; --navy-900:#0F1E3A;
  --navy-050:#E8EDF6; --navy-100:#D6DEEC; --navy-line:#C5D0E2;
  --orange:#EE7A1E; --orange-ink:#A8470C;
  --amber-surface:#FBEEDA; --amber-line:#E7C77E; --amber-ink:#6E5312; --amber-disc:#F4A63A;
  --focus:#2A4A86;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans","Noto Sans Arabic",sans-serif;
}

/* ── 1 · PAGE SCAFFOLD ── */
.rp-results{max-width:1000px;margin-inline:auto;padding:var(--s6) var(--s4) var(--s12);font-family:var(--font-body);color:var(--ink)}
.rp-results *,.rp-results *::before,.rp-results *::after{box-sizing:border-box}  /* full-width buttons/chips must not overflow the card */
.rp-results :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:5px}
.rp-h1{font-family:var(--font-display,inherit);font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:var(--navy-900);text-wrap:balance}
.rp-lede{font-size:16px;line-height:1.55;color:var(--ink-2);margin-top:var(--s2);max-width:60ch;text-wrap:pretty}
.rp-section{margin-top:var(--s8)}
.rp-eyebrow{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3)}

/* ── 2 · CRISIS BANNER (.danger-banner) — acknowledgment, first & weighty ──
   Sacred copy; style only. Warm amber, generous, calm — not an alarm.        */
.danger-banner{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s4);
  background:var(--amber-surface);border:1.5px solid var(--amber-line);border-radius:var(--r-card);
  padding:var(--s6);box-shadow:var(--sh-1);margin-bottom:var(--s6)}
.danger-banner .db-disc{inline-size:44px;block-size:44px;border-radius:50%;background:var(--amber-disc);
  color:var(--navy-900);display:grid;place-items:center;box-shadow:0 1px 2px rgba(110,83,18,.28)}
.danger-banner .db-disc svg{inline-size:22px;block-size:22px}
.danger-banner .db-copy{align-self:center;min-inline-size:0}
.danger-banner .db-title{font-family:var(--font-display,inherit);font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--navy-900);line-height:1.25;text-wrap:balance}
.danger-banner .db-body{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:var(--s1);text-wrap:pretty}
.danger-banner .db-lines{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s2)}
/* helpline call-buttons — interactive, so pill-shaped is correct here */
.danger-banner .db-line{display:inline-flex;align-items:center;gap:var(--s2);min-block-size:44px;
  padding-block:0;padding-inline:14px;border-radius:var(--r-pill);background:var(--surface);
  border:1.5px solid var(--amber-line);color:var(--navy-800);font-weight:750;font-size:14px;
  text-decoration:none;box-shadow:0 1px 1px rgba(110,83,18,.12)}
.danger-banner .db-line:hover{background:#fff;border-color:var(--amber-disc)}
.danger-banner .db-line svg{inline-size:16px;block-size:16px;color:var(--navy);flex:none}
.danger-banner .db-line b{font-variant-numeric:tabular-nums;font-weight:800}
@media (max-width:560px){.danger-banner{grid-template-columns:1fr;padding:var(--s4)}
  .danger-banner .db-disc{inline-size:40px;block-size:40px}.danger-banner .db-line{inline-size:100%;justify-content:flex-start}}

/* ── 3 · "YOUR SEARCH" SUMMARY (understanding) ── */
.rp-search{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4) var(--s4) var(--s6);box-shadow:var(--sh-1)}
.rp-search .rs-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.rp-search .rs-group:first-of-type{margin-top:0}
.rp-search .rs-label{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
/* .need-chip — STATIC facts (not interactive): flat, captiony, no pill hover/border chrome */
.rp-search .need-chip{display:inline-flex;align-items:center;gap:7px;background:var(--navy-050);
  border:1px solid var(--navy-line);color:var(--navy-800);font-weight:750;font-size:13.5px;
  padding-block:6px;padding-inline:12px;border-radius:var(--r-sm)}
.rp-search .need-chip svg{inline-size:15px;block-size:15px;color:var(--navy);flex:none}
.rp-count{font-size:15px;font-weight:700;color:var(--ink-2);margin-top:var(--s4);line-height:1.5}
.rp-note{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-3);margin-top:var(--s2);line-height:1.5}
.rp-note svg{inline-size:15px;block-size:15px;flex:none;color:var(--navy);margin-top:3px}
.rp-note em{font-style:normal;color:var(--ink-2);font-weight:600}

/* ── 4 · PER-NEED TABS — calm, keyboard-driven, not app-chrome ──
   Read as an axis of captions with an underline for the active one; the ONLY
   filled/pill things on the page stay the true actions. Active state = weight
   + underline bar + aria-selected (never colour alone).                        */
.rp-tabs{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);border-block-end:1px solid var(--line);margin-bottom:var(--s4)}
.rp-tab{appearance:none;background:transparent;border:0;cursor:pointer;position:relative;
  display:inline-flex;align-items:center;gap:7px;min-block-size:44px;padding-inline:2px;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em;
  border-block-end:3px solid transparent;margin-block-end:-1px;transition:color .12s ease}
.rp-tab:hover{color:var(--navy-800)}
.rp-tab .rp-tab-count{font-size:12.5px;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums;
  background:var(--bg-sunk);border-radius:var(--r-pill);padding-block:1px;padding-inline:7px;min-inline-size:20px;text-align:center}
.rp-tab[aria-selected="true"]{color:var(--navy-900);font-weight:800;border-block-end-color:var(--navy-800)}
.rp-tab[aria-selected="true"] .rp-tab-count{background:var(--navy-800);color:#fff}
.rp-tab:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ── 5 · RESULTS GRID + CARD (.match) — scan path: name → trust → what → call ── */
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s4);align-items:stretch}
.match{display:flex;flex-direction:column;block-size:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--sh-1);padding:var(--s4)}
.match[hidden]{display:none}
.match-top{display:flex;align-items:flex-start;gap:var(--s3)}
.match-id{flex:1;min-inline-size:0}
.m-name{font-family:var(--font-display,inherit);font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.22;color:var(--navy-900);overflow-wrap:anywhere}
.m-where{font-size:14px;color:var(--ink-3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-where svg{inline-size:15px;block-size:15px;flex:none;color:var(--ink-3)}

/* match band — reused; single trust/relevance signal, top-inline-end */
.match-top .band{flex:none}
/* share affordance — top-right corner of every card (2026-07-23) */
.match-top .mt-actions{display:flex;align-items:flex-start;gap:var(--s2,.4rem);flex:none;margin-inline-start:auto}
.card-share{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line,#e3ddd0);background:transparent;color:var(--ink-soft,#5b6580);cursor:pointer;flex:none;padding:0}
.card-share svg{width:16px;height:16px}
.card-share:hover{background:var(--surface-2,#f6f4ef);color:var(--ink,#16294c)}
.card-share:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.band{display:inline-flex;align-items:center;gap:7px;padding-block:6px;padding-inline:12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:800;white-space:nowrap;letter-spacing:.01em;border:1px solid transparent}
.band svg{inline-size:14px;block-size:14px}
.band-strong{background:var(--green-050);color:var(--green);border-color:var(--green-100)}
.band-good{background:var(--navy-050);color:var(--navy-800);border-color:var(--navy-line)}
.band-possible{background:var(--bg-sunk);color:var(--ink-2);border-color:var(--line-2)}
.meter{display:inline-flex;align-items:flex-end;gap:2px;block-size:12px}
.meter i{inline-size:3px;border-radius:1px;background:currentColor;opacity:.26}
.meter i:nth-child(1){block-size:5px}.meter i:nth-child(2){block-size:8px}.meter i:nth-child(3){block-size:11px}
.band-strong .meter i{opacity:1}
.band-good .meter i:nth-child(-n+2){opacity:1}
.band-possible .meter i:nth-child(1){opacity:1}

/* trust line — replaces the stack of trust pills. Quiet, inline, honest.
   .is-verified: green tick + freshness · .is-reg: charity, muted (no false green) */
.rp-trust{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s3);font-size:13.5px;font-weight:750}
.rp-trust svg{inline-size:16px;block-size:16px;flex:none}
.rp-trust.is-verified{color:var(--green)}
.rp-trust.is-reg{color:var(--ink-3)}
.rp-trust .rp-fresh{color:var(--ink-3);font-weight:600}

/* DV / location-privacy panel — high in the card, weighty, safe. Filled panel,
   full border (NOT a left-accent bar). Location must never be inferable. */
.rp-privacy{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s3);
  background:var(--navy-050);border:1px solid var(--navy-line);border-radius:var(--r-md);padding:12px 14px}
.rp-privacy .rp-shield{inline-size:30px;block-size:30px;flex:none;border-radius:8px;background:var(--navy-800);color:#fff;display:grid;place-items:center}
.rp-privacy .rp-shield svg{inline-size:17px;block-size:17px}
.rp-privacy p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.rp-privacy p strong{color:var(--navy-800);font-weight:800}

/* coverage strip — compact ✓/✗ per asked need (reused) */
.covstrip{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s3)}
.cs-item{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:750;padding-block:5px;padding-inline:10px 12px;border-radius:var(--r-pill)}
.cs-item .cs-badge{inline-size:18px;block-size:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cs-item .cs-badge svg{inline-size:12px;block-size:12px}
.cs-item.yes{background:var(--green-050);color:var(--green)}
.cs-item.yes .cs-badge{background:var(--green-100)}
.cs-item.no{background:var(--bg-sunk);color:var(--ink-3)}
.cs-item.no .cs-badge{background:#E3DCCD}

/* description + tags — "what they do" */
.m-desc{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:var(--s3)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:var(--s3)}
.tag{font-size:12.5px;font-weight:700;color:var(--ink-2);background:var(--bg-sunk);padding-block:5px;padding-inline:11px;border-radius:var(--r-pill);white-space:nowrap}

/* ── 6 · ACTIONS — Call is unmistakably primary on every card ── */
.stack{display:flex;flex-direction:column;gap:var(--s2);margin-top:auto;padding-top:var(--s4)}
/* NOTE (2026-07-19 fix): this base rule must NOT set `color`. It is an UNSCOPED global that
 * loads AFTER client.css, and `.btn` has the same specificity (0,1,0) as `.btn-teal` /
 * `.btn-primary` — so a colour here silently WINS on later cascade and repainted every
 * homepage button's label dark ink over its navy/orange background, making the text
 * invisible. Each variant owns its own colour (.btn-teal #fff, .btn-primary #fff,
 * .btn-call #fff, .btn-ghost navy-800); the results-page default is scoped below. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid transparent;
  border-radius:var(--r-md);font-family:inherit;font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.2;
  padding-inline:18px;min-block-size:48px;text-decoration:none;text-align:center;
  transition:background .15s ease,transform .08s ease}
/* Deliberately NO base `color` for .btn anywhere — not even scoped.
 * A first attempt at this fix scoped the old colour to `.rp-results .btn`, but that selector is
 * specificity (0,2,0) and so BEAT `.btn-teal` (0,1,0) — which paints the results page's primary
 * "Call · <number>" buttons. The result was dark ink on the navy call button: the very bug being
 * fixed, just moved from the homepage to the results page. Every variant sets its own colour
 * (.btn-teal #fff, .btn-primary #fff, .btn-call #fff, .btn-ghost navy-800, .btn-quiet ink-2),
 * so a base colour has no job here and can only override the variants that follow it. */
.btn:active{transform:translateY(1px)}
.btn-block{display:flex;inline-size:100%}
.btn svg{inline-size:18px;block-size:18px;flex:none}
/* THE primary action — raised, tactile navy */
.btn-call{background:linear-gradient(180deg,#22386A,#16294C);color:#fff;min-block-size:52px;font-size:16px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 0 #0F1E3A,0 4px 10px rgba(15,30,58,.32);transition:background .15s ease,transform .08s ease,box-shadow .08s ease}
.btn-call:hover{background:linear-gradient(180deg,#284075,#1A2F58)}
.btn-call:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 #0F1E3A,0 2px 5px rgba(15,30,58,.3)}
.btn-call .b-num{font-variant-numeric:tabular-nums}
/* ghost — subtler raised edge so it reads as a real, pressable key */
.btn-ghost{background:linear-gradient(180deg,#FFFFFF,#F4ECDD);color:var(--navy-800);border-color:var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 #E4D8C2,0 3px 7px rgba(15,30,58,.12);transition:background .15s ease,transform .08s ease,box-shadow .08s ease}
.btn-ghost:hover{background:linear-gradient(180deg,#FFFFFF,#EFE6D4);border-color:var(--navy)}
.btn-ghost:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 #E4D8C2,0 1px 4px rgba(15,30,58,.12)}

/* calm "flare unavailable" — NO button chrome. A quiet caption, not a broken CTA. */
.rp-flarenote{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--ink-3);font-weight:600;padding-block:2px}
.rp-flarenote svg{inline-size:14px;block-size:14px;flex:none;color:var(--ink-3);margin-top:2px}

/* ── 7 · TRUSTED LINES STRIP (.helpline) — help fallback ── */
.rp-lines{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);box-shadow:var(--sh-1)}
.rp-lines h2{font-family:var(--font-display,inherit);font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--navy-900)}
/* Colours for the trusted-lines strip are scoped to .rp-lines (a LIGHT surface). Unscoped, they
 * leaked onto the homepage .helplines-panel, which is NAVY with light text by design — giving
 * fg #0f1e3a on bg #263859, contrast 1.41:1, and axe flagged 10 SERIOUS violations: the crisis
 * helpline names were effectively invisible on the homepage. Layout above stays global; only
 * colour is confined here, so the homepage keeps inheriting its light-on-navy palette. */
.rp-lines .helpline{color:var(--ink)}
.rp-lines .helpline .hl-name{color:var(--navy-900)}
.rp-lines .helpline .hl-desc{color:var(--ink-3)}
.rp-lines-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s4);margin-top:var(--s3)}
.helpline{display:flex;align-items:center;gap:var(--s3);min-block-size:56px;padding-block:var(--s2);border-block-start:1px solid var(--line);text-decoration:none}
.helpline .hl-txt{flex:1;min-inline-size:0}
.helpline .hl-name{font-weight:800;font-size:15px}
.helpline .hl-desc{font-size:13px;margin-top:1px}
.helpline .hl-call{display:inline-flex;align-items:center;gap:7px;flex:none;min-block-size:40px;padding-inline:14px;
  border-radius:var(--r-pill);background:var(--navy-050);border:1px solid var(--navy-line);color:var(--navy-800);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.helpline .hl-call svg{inline-size:15px;block-size:15px;color:var(--navy)}
.helpline:hover .hl-call{background:var(--navy-100)}
@media (max-width:560px){.rp-lines-grid{grid-template-columns:1fr}
  .helpline:nth-child(-n+2){border-block-start:0}
  .helpline:first-child{border-block-start:1px solid var(--line)}}

/* ── 8 · FLARE PROMO (mechanism) + quiet browse-all ── */
.rp-flarepromo{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;background:linear-gradient(180deg,#FEF3E6,#FDE8CF);
  border:1px solid #F4CE9C;border-radius:var(--r-card);padding:var(--s6)}
.rp-flarepromo .fp-disc{inline-size:46px;block-size:46px;flex:none;border-radius:50%;background:var(--orange);color:var(--navy-900);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(238,122,30,.3)}
.rp-flarepromo .fp-disc svg{inline-size:24px;block-size:24px}
.rp-flarepromo .fp-txt{flex:1;min-inline-size:200px}
.rp-flarepromo .fp-title{font-family:var(--font-display,inherit);font-size:17px;font-weight:800;color:var(--navy-900);letter-spacing:-.01em}
.rp-flarepromo .fp-body{font-size:14px;color:var(--ink-2);margin-top:3px;line-height:1.5}
/* the flare accent CTA — the one place orange leads */
.btn-flare{background:var(--orange);color:var(--navy-900);border-color:#D9670F;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(168,71,12,.2),0 3px 10px rgba(238,122,30,.24)}
.btn-flare:hover{background:#F0882A}
.rp-browse{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;margin-top:var(--s6);
  font-size:14.5px;font-weight:750;color:var(--navy-800);text-decoration:none}
.rp-browse:hover{text-decoration:underline;text-underline-offset:3px}
.rp-browse svg{inline-size:15px;block-size:15px;color:var(--navy)}

/* ── 9 · FOOTER SAFETY NOTE ── */
.rp-foot{display:flex;gap:8px;align-items:flex-start;margin-top:var(--s8);padding-top:var(--s4);border-block-start:1px solid var(--line)}
.rp-foot svg{inline-size:15px;block-size:15px;flex:none;color:var(--ink-3);margin-top:2px}
.rp-foot p{font-size:13px;line-height:1.55;color:var(--ink-3)}
.rp-foot strong{color:var(--ink-2);font-weight:800}

/* ── 10 · MOTION / CONTRAST ── */
@media (prefers-reduced-motion:reduce){.rp-results *{transition:none!important;animation:none!important}}
@media (prefers-contrast:more){.match,.rp-search,.rp-lines{border-color:var(--line-2)}.rp-tab[aria-selected="true"]{border-block-end-width:4px}}