/* ── /roi — public ROI estimator ────────────────────────────────────────────
   CANONICAL SOURCE: Remedi_ROI_Page_SOURCE_2026-08-21.html, in the iCloud
   "CLAUDE Workspace/Remedi" folder. That file is ONE self-contained HTML page
   with this CSS inline in a <style> block — it was authored as a published
   artifact, and artifacts cannot link an external stylesheet.

   Flask has no such constraint, so on the way in the CSS was SPLIT OUT into
   this file. That split is load-bearing: tests/test_design_drift.py counts
   hex literals in templates/ and had ZERO headroom (BASELINE 625, actual 625)
   the day this shipped. The ~72 literals below would have taken it to 697 and
   failed the build.

   ⚠️ ON ANY RE-SHIP FROM THE CANONICAL SOURCE: split the CSS out again into
   this file. Do not paste the <style> block back into templates/roi.html —
   the ratchet will fire and nobody will remember why. AND READ THE HEADER OF
   templates/roi.html FIRST: as of 2026-08-24 that file diverges from the iCloud
   source in four CONTENT ways as well. One of them removes a PHI solicitation
   that the pre-deploy gate blocked a ship over — the gate rejected the SOURCE's
   CTA, not the fix. The hex ratchet does NOT see those four; tests/test_roi_page.py
   does, and it is the only thing that does. Do not skip it.

   Palette is the POST-RESKIN brand, verified 2026-08-21 against the live app
   (getComputedStyle on /dashboard) — NOT from theme.css, which is pre-reskin.
   Do not "reconcile" these values with theme.css or with /about (#1a1a2e,
   never reskinned). Split out 2026-08-24; no color, rule, or value changed.
   ────────────────────────────────────────────────────────────────────────── */

  :root{
    --ink:#141426; --ink-2:#3d4a5c; --muted:#6b7a8d; --line:#dfe5ec;
    --bg:#f2f5f8; --surface:#ffffff;
    --navy:#1A365D; --navy-2:#2C5282;
    --accent:#4A90D9; --accent-soft:#e8f1fb;
    --money:#1e8449; --money-bright:#2ecc71;
    --track:#dbe3ec; --field:#ffffff;
    --shadow:0 1px 2px rgba(20,20,38,.05), 0 8px 24px -16px rgba(20,20,38,.25);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#e9eef5; --ink-2:#b9c6d6; --muted:#8698ad; --line:#25344a;
      --bg:#0a111b; --surface:#111c2b;
      --navy:#0f1a2b; --navy-2:#1c3550;
      --accent:#7ab5ec; --accent-soft:#152a44;
      --money:#3ecf8e; --money-bright:#2ecc71;
      --track:#25344a; --field:#0c1622;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --ink:#e9eef5; --ink-2:#b9c6d6; --muted:#8698ad; --line:#25344a;
    --bg:#0a111b; --surface:#111c2b;
    --navy:#0f1a2b; --navy-2:#1c3550;
    --accent:#7ab5ec; --accent-soft:#152a44;
    --money:#3ecf8e; --money-bright:#2ecc71;
    --track:#25344a; --field:#0c1622;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:16px; line-height:1.55;
  }
  .wrap{max-width:720px; margin:0 auto; padding:0 18px 200px;}
  @media(min-width:760px){ .wrap{padding-bottom:64px;} }

  .hero{
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff; border-radius:0 0 22px 22px; margin:0 -18px 26px; padding:34px 26px 32px;
  }
  @media(min-width:760px){ .hero{border-radius:22px; margin:22px 0 26px; padding:44px 40px 40px;} }
  .eyebrow{
    font-family:"Archivo",sans-serif; font-size:11.5px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:#8fb4e8; margin:0 0 14px;
  }
  .hero h1{
    font-family:"Archivo",-apple-system,sans-serif;
    font-size:clamp(26px,6.2vw,38px); font-weight:800; letter-spacing:-.022em;
    line-height:1.14; margin:0 0 16px; text-wrap:balance;
  }
  .hero h1 em{font-style:normal; color:var(--money-bright);}
  .hero p{margin:0; color:#c2d4ea; font-size:16px; max-width:52ch;}
  .hero .src{margin-top:14px; font-size:12.5px; color:#8fb4e8;}

  .card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:22px 20px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  @media(min-width:760px){ .card{padding:26px 28px;} }
  .card > h2{
    font-family:"Archivo",sans-serif; font-size:12px; font-weight:700;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin:0 0 4px;
  }
  .card > .sub{margin:0 0 18px; font-size:14px; color:var(--muted);}

  .chips{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{
    font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
    padding:8px 14px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  }
  .chip:hover{border-color:var(--accent); color:var(--accent);}
  .chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff;}
  .chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  .sliders{display:flex; flex-direction:column; gap:22px;}
  .row .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px;}
  .row .nm{font-size:15px; font-weight:600; display:flex; align-items:center; gap:9px; min-width:0;}
  .dot{width:9px; height:9px; border-radius:50%; flex:none;}
  .row .ct{
    font-family:"Archivo",sans-serif; font-variant-numeric:tabular-nums;
    font-size:23px; font-weight:800; color:var(--accent); min-width:1.6ch; text-align:right;
  }
  input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height:10px;
    border-radius:999px; background:var(--track); outline:none; margin:0;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:30px; height:30px; border-radius:50%;
    background:var(--surface); border:5px solid var(--accent); cursor:grab;
    box-shadow:0 2px 8px rgba(20,20,38,.22);
  }
  input[type=range]::-moz-range-thumb{
    width:30px; height:30px; border-radius:50%; background:var(--surface);
    border:5px solid var(--accent); cursor:grab; box-shadow:0 2px 8px rgba(20,20,38,.22);
  }
  input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;}
  input[type=range]:focus-visible{outline:2px solid var(--accent); outline-offset:5px;}

  .result{
    position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:linear-gradient(160deg,#0d5c37 0%,var(--money) 100%);
    color:#fff; padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 28px -12px rgba(0,0,0,.45);
  }
  .result-in{max-width:720px; margin:0 auto;}
  .result .lbl{
    font-family:"Archivo",sans-serif; font-size:10.5px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:#b9ecd1; margin-bottom:2px;
  }
  .result .big{
    font-family:"Archivo",sans-serif; font-variant-numeric:tabular-nums;
    font-size:clamp(33px,8.6vw,46px); font-weight:800; letter-spacing:-.025em; line-height:1.02;
    transition:opacity .12s ease;
  }
  .result .foot{font-size:13px; color:#cdf1de; margin-top:3px;}
  .result.empty .big{opacity:.45;}
  @media(min-width:760px){
    .result{position:static; border-radius:16px; margin-bottom:16px; padding:26px 28px;}
  }

  table{width:100%; border-collapse:collapse; font-size:14px;}
  th{
    font-family:"Archivo",sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--muted); text-align:right; padding:0 0 8px;
  }
  th:first-child{text-align:left;}
  td{padding:10px 0; border-top:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums;}
  td:first-child{text-align:left; color:var(--ink-2);}
  td:last-child{font-weight:700;}
  td .why{display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:2px;}
  tr.tot td{border-top:2px solid var(--ink); font-weight:800;}
  tr.tot td:first-child{color:var(--ink);}
  .tbl-scroll{overflow-x:auto;}

  .facts{display:flex; flex-direction:column; gap:16px;}
  .fact{display:flex; gap:14px; align-items:flex-start;}
  .fact .n{
    font-family:"Archivo",sans-serif; font-variant-numeric:tabular-nums;
    font-size:20px; font-weight:800; color:var(--accent); flex:none; min-width:4.4ch;
  }
  .fact .t{font-size:14.5px; color:var(--ink-2); line-height:1.5;}
  .fact .t cite{display:block; font-style:normal; font-size:12px; color:var(--muted); margin-top:3px;}

  .pull{
    background:var(--accent-soft); border-left:3px solid var(--accent);
    border-radius:0 10px 10px 0; padding:16px 18px; margin:20px 0 4px;
  }
  .pull p{margin:0; font-size:15px; line-height:1.5;}
  .pull strong{color:var(--ink);}

  details{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  summary{
    cursor:pointer; font-family:"Archivo",sans-serif; font-size:12px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; color:var(--muted); list-style:none;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{content:" +"; color:var(--accent);}
  details[open] summary::after{content:" −";}
  summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .assump{display:grid; grid-template-columns:1fr auto auto; gap:10px 12px; margin-top:18px; align-items:center; font-size:13.5px;}
  .assump .hd{
    font-family:"Archivo",sans-serif; font-size:10px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--muted);
  }
  .assump .hd.r{text-align:right;}
  .assump .k{color:var(--ink-2);}
  .assump input{
    width:82px; padding:6px 9px; border:1px solid var(--line); border-radius:8px;
    font:inherit; font-size:13.5px; text-align:right; background:var(--field); color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .assump input:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

  .srcs{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:12px;}
  .srcs li{font-size:13px; color:var(--ink-2); line-height:1.5;}
  .srcs b{color:var(--ink);}

  .cta{
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff; border-radius:16px; padding:28px 24px; text-align:center;
  }
  .cta h2{
    font-family:"Archivo",sans-serif; font-size:22px; font-weight:800;
    letter-spacing:-.015em; margin:0 0 8px; color:#fff;
  }
  .cta p{margin:0 auto 20px; color:#c2d4ea; font-size:15px; max-width:44ch;}
  .btn{
    display:inline-block; background:var(--money-bright); color:#0a2e1c;
    font-family:"Archivo",sans-serif; font-size:15px; font-weight:700;
    padding:13px 26px; border-radius:11px; text-decoration:none;
  }
  .btn:hover{filter:brightness(1.07);}
  .btn:focus-visible{outline:2px solid #fff; outline-offset:3px;}

  .fine{font-size:12px; color:var(--muted); line-height:1.6; margin:20px 2px 0;}
  @media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

/* ── Provider dot colors ───────────────────────────────────────────────────
   In the canonical source these four hex values live in the inline <script>,
   repeated once per practice-type preset (16 literals). They are declared here
   instead so templates/roi.html carries ZERO hex literals and the design-drift
   ratchet stays untouched — same reason the rest of this file was split out.

   The script now reads `c:"var(--dot-1)"` in place of `c:"#8b6fd4"`. Values are
   byte-identical to the source and the rendered dots are unchanged. All four
   presets use the same four colors in the same order, so four tokens cover all
   sixteen. Deliberately theme-independent: fixed in the source across light and
   dark, and kept that way here. */
:root{
  --dot-1:#8b6fd4;  /* provider 1 — Ortho Surgeons / Family Practice / Interventional Pain / Cardiology */
  --dot-2:#d98324;  /* provider 2 — Neurosurgeons / Internal Medicine / Physical Therapists / Oncology  */
  --dot-3:#17a67f;  /* provider 3 — Interventional Pain / NPs-PAs / Chiropractors / Neurology           */
  --dot-4:#d4587a;  /* provider 4 — Physical Therapists / Behavioral Health / Podiatrists / Urology     */
}