/* ============================================================
   Calmistry · Module 05 — Regulation Route
   Sibling of Origins (pink), Processing (lavender/periwinkle),
   Coping (teal/emerald), Body (amber/terracotta). Retuned to a calm
   denim/ocean-blue so the "which route settles it first" module reads
   as distinct-but-coherent — a grounding, settling hue. Loaded AFTER
   app.css; overrides shared tokens only, plus the Likert-scale UI, the
   two-sided start/avoid panel, the route-type chips, and the safety
   caveat note this module shares with Body.
   ============================================================ */
:root{
  --bg:#f3f6fc;
  --bg-2:#e8eefb;
  --panel-2:#f3f7fd;
  --ink:#1f2a3d;
  --ink-2:#465268;
  --muted:#8c97ad;
  --line:rgba(45,70,140,.10);
  --line-2:rgba(45,70,140,.16);

  --rose:#4f72c4;          /* primary accent -> denim blue */
  --rose-deep:#33509e;
  --coral:#5aa6d6;         /* secondary -> sky/cyan */
  --lilac:#7d93dc;
  --mint:#9fc3ea;
  --grad:linear-gradient(112deg,#5aa6d6 0%,#4f72c4 52%,#3f63b5 100%);
  --grad-soft:linear-gradient(112deg,#dde8fb,#e2ecfb 52%,#e6eefc);
  --rose-wash:color-mix(in srgb,var(--rose) 12%,transparent);
  --lilac-wash:color-mix(in srgb,var(--lilac) 14%,transparent);

  --shadow:0 24px 60px -30px rgba(45,70,140,.40);
  --shadow-sm:0 12px 34px -20px rgba(45,70,140,.34);
  --shadow-pop:0 30px 80px -34px rgba(45,70,140,.5);
}
/* recolour the background blobs to the denim family */
.blob.b1{background:radial-gradient(circle,#c8d8f6,transparent 70%)}
.blob.b2{background:radial-gradient(circle,#d2e2f7,transparent 70%)}
.blob.b3{background:radial-gradient(circle,#c4d4f2,transparent 70%)}

/* fit badge (the route-fit read) */
.activation{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.04em;color:var(--rose-deep);background:var(--rose-wash);
  border:1px solid var(--line);border-radius:99px;padding:.45em .9em;margin:.2em 0 0}
.activation .dot{width:8px;height:8px;border-radius:50%;background:var(--grad)}

/* route-type chip (orient / breath / move / release / structure / recovery / support / mixed) */
.btype{display:inline-flex;align-items:center;gap:.4em;font-family:var(--ff-mono);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;
  padding:.35em .8em;margin:.6em .4em 0 0;border:1px solid var(--line)}
.btype.orient{color:#2f5db0;background:color-mix(in srgb,#4f72c4 14%,transparent)}
.btype.breath{color:#2f7fb0;background:color-mix(in srgb,#5aa6d6 16%,transparent)}
.btype.move{color:#356a9e;background:color-mix(in srgb,#4f93c4 16%,transparent)}
.btype.release{color:#4a5fb0;background:color-mix(in srgb,#7d93dc 16%,transparent)}
.btype.structure{color:#3a4f93;background:color-mix(in srgb,#5366b8 16%,transparent)}
.btype.recovery{color:#3d6f8a;background:color-mix(in srgb,#6fa8c4 16%,transparent)}
.btype.support{color:#5a55a8;background:color-mix(in srgb,#8b7bd0 16%,transparent)}
.btype.mixed{color:#6b7488;background:color-mix(in srgb,#8c97ad 16%,transparent)}

/* ---- Likert scale UI (this module's question type) ---------------------- */
.likert-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);
  padding:16px 18px;margin:0 0 12px}
.likert-item .stmt{font-size:1.02rem;color:var(--ink);line-height:1.4;margin:0 0 .85em}
.scale{display:flex;gap:6px;justify-content:space-between}
.scale .opt-dot{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.4em;
  background:none;border:none;cursor:pointer;padding:.3em .1em;font:inherit}
.scale .opt-dot .bub{width:100%;max-width:46px;aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--line-2);background:#fff;transition:transform .12s,border-color .12s,background .12s;
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:.8rem;color:var(--muted)}
.scale .opt-dot .lab{font-family:var(--ff-mono);font-size:.54rem;letter-spacing:.02em;color:var(--muted);
  text-align:center;line-height:1.15;min-height:2.2em}
.scale .opt-dot:hover .bub{border-color:var(--rose);transform:translateY(-2px)}
.scale .opt-dot.sel .bub{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)}
.scale .opt-dot.sel .lab{color:var(--rose-deep)}
@media(max-width:480px){
  .scale .opt-dot .lab{display:none}
  .scale .opt-dot .bub{max-width:54px}
}
.panel-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.6em}
.panel-foot .hint{font-family:var(--ff-mono);font-size:.62rem;color:var(--muted)}

/* the two-sided "start here / avoid first" panel — the useful payload */
.routes{display:grid;gap:12px;margin:1.2em 0 .4em}
@media(min-width:560px){.routes{grid-template-columns:1fr 1fr}}
.route{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);padding:14px 16px}
.route .t{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:.5em;margin-bottom:.5em}
.route.help .t{color:#2f5db0}
.route.avoid .t{color:#3d6f8a}
.route .t .ic{font-size:.95rem}
.route p{font-size:.98rem;color:var(--ink-2);line-height:1.45}

/* measurement footnote + secondary */
.measure{font-family:var(--ff-mono);font-size:.7rem;color:var(--muted);margin:.4em 0 0;display:flex;gap:.5em;flex-wrap:wrap}
.measure b{color:var(--rose-deep);font-weight:500}
.secondary{font-family:var(--ff-mono);font-size:.74rem;color:var(--muted);margin:.5em 0 0}
.secondary b{color:var(--rose-deep);font-weight:500}
.type-note{font-size:.92rem;color:var(--ink-2);line-height:1.45;margin:.7em 0 0;font-style:italic}

/* safety caveat — the referral note every route carries */
.caveat{font-size:.86rem;color:var(--ink-2);line-height:1.45;margin:.9em 0 0;
  background:color-mix(in srgb,var(--coral) 9%,transparent);border:1px solid var(--line);
  border-radius:var(--r-sm,10px);padding:.7em .85em}
.caveat b{display:block;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rose-deep);font-weight:500;margin-bottom:.35em}