/* ============================================================
   Calmistry · Module 03 — Stress Coping
   Sibling of Origins (pink) and Processing (lavender). Retuned to a
   warm teal/emerald so the "what you DO under load" module reads as
   distinct-but-coherent. Loaded AFTER app.css; overrides shared tokens
   only, plus the Likert-scale UI this module introduces.
   ============================================================ */
:root{
  --bg:#f1faf6;
  --bg-2:#e6f6ef;
  --panel-2:#f4fbf8;
  --ink:#1d3a32;
  --ink-2:#456057;
  --muted:#8aa89e;
  --line:rgba(28,90,72,.10);
  --line-2:rgba(28,90,72,.16);

  --rose:#14b88a;          /* primary accent -> emerald/teal */
  --rose-deep:#0d8c68;
  --coral:#37c9b0;         /* secondary -> aqua */
  --lilac:#79d6a8;
  --mint:#9fe6c9;
  --grad:linear-gradient(112deg,#37c9b0 0%,#14b88a 52%,#5fcf86 100%);
  --grad-soft:linear-gradient(112deg,#d6f5ec,#e0f7ec 52%,#e9f9e2);
  --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(15,130,95,.40);
  --shadow-sm:0 12px 34px -20px rgba(15,130,95,.34);
  --shadow-pop:0 30px 80px -34px rgba(15,130,95,.5);
}
/* recolour the background blobs to the cooler-green family */
.blob.b1{background:radial-gradient(circle,#bfeede,transparent 70%)}
.blob.b2{background:radial-gradient(circle,#cdf2dd,transparent 70%)}
.blob.b3{background:radial-gradient(circle,#bfeee6,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 (adaptive / costly / 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.adaptive{color:#0d8c68;background:color-mix(in srgb,#14b88a 12%,transparent)}
.btype.costly{color:#c2683b;background:color-mix(in srgb,#e08a4f 14%,transparent)}
.btype.mixed{color:#7a6bc4;background:color-mix(in srgb,#8b7bf0 12%,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 helps / what backfires" 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:#0d8c68}
.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 + availability */
.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}
.avail{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-2);margin:.7em 0 0;
  background:var(--rose-wash);border:1px solid var(--line);border-radius:var(--r-sm,10px);padding:.6em .8em}
.avail 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}