/* ============================================================
   Calmistry · Module 04 — Body Expression
   Sibling of Origins (pink), Processing (lavender), Coping (teal).
   Retuned to a warm amber/terracotta so the "where stress lands in
   the BODY" module reads as distinct-but-coherent. Loaded AFTER
   app.css; overrides shared tokens only, plus the Likert-scale UI and
   the medical-caveat note this module introduces.
   ============================================================ */
:root{
  --bg:#fdf6f0;
  --bg-2:#f9ece1;
  --panel-2:#fdf4ec;
  --ink:#3a271d;
  --ink-2:#6a5043;
  --muted:#b08f7c;
  --line:rgba(150,80,45,.10);
  --line-2:rgba(150,80,45,.16);

  --rose:#e07a5f;          /* primary accent -> terracotta */
  --rose-deep:#c2552f;
  --coral:#f2a45e;         /* secondary -> amber */
  --lilac:#e8a07a;
  --mint:#f3c79a;
  --grad:linear-gradient(112deg,#f2a45e 0%,#e07a5f 52%,#e8736b 100%);
  --grad-soft:linear-gradient(112deg,#fbe6d3,#f9ddc8 52%,#f7d2c4);
  --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(170,80,45,.40);
  --shadow-sm:0 12px 34px -20px rgba(170,80,45,.34);
  --shadow-pop:0 30px 80px -34px rgba(170,80,45,.5);
}
/* recolour the background blobs to the warm-amber family */
.blob.b1{background:radial-gradient(circle,#fbddc2,transparent 70%)}
.blob.b2{background:radial-gradient(circle,#fbe0c8,transparent 70%)}
.blob.b3{background:radial-gradient(circle,#f8d2c2,transparent 70%)}

/* activation badge (the fortnight 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)}

/* block-type chip (guarding / activation / depletion / 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.guarding{color:#b5562d;background:color-mix(in srgb,#e07a5f 13%,transparent)}
.btype.activation{color:#c2683b;background:color-mix(in srgb,#f2a45e 16%,transparent)}
.btype.depletion{color:#7a6657;background:color-mix(in srgb,#b08f7c 16%,transparent)}
.btype.mixed{color:#9a7b54;background:color-mix(in srgb,#d8b483 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 "what settles / what worsens" 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:#b5562d}
.route.avoid .t{color:#c2683b}
.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}

/* medical caveat — the safety note every body block 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}

/* ---- report-page tweaks (the evidence "report" build) ------------------- */
/* medical caveat, surfaced — louder than the quiz fine print, never buried */
.caveat.caveat-report{font-size:.95rem;line-height:1.55;margin:1.3em 0 .2em;padding:1em 1.15em 1em 1.2em;
  background:color-mix(in srgb,var(--coral) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rose-deep) 28%,transparent);
  border-left:3px solid var(--rose-deep);border-radius:var(--r-md,14px)}
.caveat.caveat-report b{display:flex;align-items:center;font-size:.66rem;color:var(--rose-deep);margin-bottom:.5em}
.caveat.caveat-report i{font-style:italic}
/* somatic measurement meters stack */
.meters{display:flex;flex-direction:column;gap:9px;margin:.4em 0 .2em}
.meter.relief{opacity:.92}
.meter.relief .mt{background:color-mix(in srgb,var(--coral) 16%,#fff)}
