/* ============================================================
   The River Within — River Watch · Practice
   Interactive scam-awareness experiences:
     A) "Could You Spot the Scam?"  (.sx-spotter)
     B) "Talk to a Scammer (Safely)" (.sx-sim)
   Hand-written, framework-free. Extends site.css tokens
   (--ink, --river, --glow, --care, --warn-* etc.) which are
   already defined globally. All motion respects
   prefers-reduced-motion. Strict CSP-safe (no inline JS).
   Classes are sx-* prefixed to avoid collisions.
   ============================================================ */

/* ---- Shared scaffolding ---------------------------------- */
.sx{ --sx-pad: clamp(1.2rem,1rem + 2vw,2rem); }
.sx-stage{ max-width:880px; margin-inline:auto; }
.sx-wide{ max-width:1080px; margin-inline:auto; }

/* SIMULATION marker — always visible, never alarming */
.sx-simtag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--moss); background:color-mix(in srgb,var(--moss) 9%,var(--paper));
  border:1px solid color-mix(in srgb,var(--moss) 26%,transparent);
  padding:.34rem .7rem; border-radius:2px;
}
.sx-simtag svg{ width:14px; height:14px; }

/* Launch cards (hub page) */
.sx-launch{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,1rem + 3vw,2.4rem); }
@media (max-width:780px){ .sx-launch{ grid-template-columns:1fr; } }
.sx-launch__card{
  position:relative; display:flex; flex-direction:column; gap:.4rem;
  background:var(--paper); border:1px solid color-mix(in srgb,var(--river) 14%,transparent);
  border-left:3px solid var(--river); border-radius:var(--radius);
  padding:clamp(1.6rem,1rem + 2vw,2.4rem); transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sx-launch__card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -32px rgba(14,30,35,.45); border-left-color:var(--glow); }
.sx-launch__card h3{ font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem); margin:.5rem 0 .2rem; }
.sx-launch__card .sx-launch__kicker{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--moss); }
.sx-launch__card p{ color:var(--slate); }
.sx-launch__card .text-link{ margin-top:auto; padding-top:.6rem; }
.sx-launch__ico{ width:38px; height:38px; color:var(--river); }

/* Generic interactive panel */
.sx-panel{
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--river) 14%,transparent);
  border-radius:var(--radius);
  box-shadow:0 30px 70px -44px rgba(14,30,35,.4);
}

/* No-JS fallback message */
.sx-nojs{ margin:1.5rem 0; }
.js .sx-nojs{ display:none; }
.sx-app[hidden]{ display:none; }

/* ===========================================================
   PART A — "Could You Spot the Scam?"
   =========================================================== */

/* Scenario picker */
.sx-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,.8rem + 2vw,1.6rem); }
@media (max-width:680px){ .sx-pick{ grid-template-columns:1fr; } }
.sx-pick__btn{
  text-align:left; font:inherit; cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--river) 16%,transparent);
  border-left:3px solid var(--river);
  border-radius:var(--radius); padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sx-pick__btn:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -30px rgba(14,30,35,.4); border-left-color:var(--glow); }
.sx-pick__tag{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); }
.sx-pick__btn h3{ font-size:1.22rem; margin:0; }
.sx-pick__btn p{ margin:0; color:var(--slate); font-size:.96rem; }
.sx-pick__meta{ display:flex; align-items:center; gap:.5rem; margin-top:.3rem; font-size:.82rem; color:var(--slate); }
.sx-pick__done{ color:var(--care); font-weight:600; }

/* Active scenario shell */
.sx-scn{ padding:clamp(1.3rem,1rem + 2vw,2rem); }
.sx-scn__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem; justify-content:space-between; margin-bottom:1.2rem; }
.sx-scn__who{ display:flex; align-items:center; gap:.8rem; }
.sx-avatar{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:500; font-size:1.1rem; color:var(--foam);
  background:linear-gradient(150deg,var(--river),var(--ink));
}
.sx-scn__name{ font-weight:600; color:var(--ink); line-height:1.2; }
.sx-scn__chan{ font-size:.8rem; color:var(--slate); }

/* progress dots */
.sx-progress{ display:flex; align-items:center; gap:.4rem; }
.sx-progress__dot{ width:9px; height:9px; border-radius:50%; background:color-mix(in srgb,var(--river) 22%,transparent); transition:background var(--t), transform var(--t); }
.sx-progress__dot[data-on="true"]{ background:var(--river); }
.sx-progress__dot[data-cur="true"]{ background:var(--glow); transform:scale(1.25); }

/* message thread */
.sx-thread{ display:flex; flex-direction:column; gap:.7rem; margin:0 0 1.3rem; padding:0; list-style:none; }
.sx-msg{ max-width:84%; padding:.85rem 1.1rem; border-radius:14px; line-height:1.5; font-size:1.02rem; }
.sx-msg--them{
  align-self:flex-start; background:var(--mist); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--river) 12%,transparent);
  border-bottom-left-radius:4px;
}
.sx-msg--sys{
  align-self:center; max-width:92%; text-align:center; font-size:.9rem;
  color:var(--slate); background:transparent; border:1px dashed color-mix(in srgb,var(--river) 22%,transparent);
}
.sx-msg--you{
  align-self:flex-end; background:var(--river); color:var(--foam);
  border-bottom-right-radius:4px;
}
.sx-msg strong{ color:inherit; }
.js .sx-msg{ animation:sx-rise .42s var(--ease) both; }
@keyframes sx-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* prompt + choices */
.sx-prompt{ font-family:var(--serif); font-size:1.18rem; color:var(--ink); margin:.4rem 0 1rem; }
.sx-prompt:focus-visible{ outline:2px solid var(--moss); outline-offset:4px; }
.sx-choices{ display:grid; gap:.7rem; margin:0 0 1rem; }
.sx-choice{
  text-align:left; font:inherit; cursor:pointer; color:var(--ink);
  background:var(--paper); border:1.5px solid color-mix(in srgb,var(--river) 24%,transparent);
  border-radius:var(--radius); padding:.95rem 1.15rem;
  transition:border-color var(--t), background var(--t), transform var(--t);
  display:flex; gap:.7rem; align-items:flex-start;
}
.sx-choice:hover:not(:disabled){ border-color:var(--river); transform:translateX(2px); }
.sx-choice:disabled{ cursor:default; }
.sx-choice__pick{ flex:none; width:1.5rem; height:1.5rem; border-radius:50%; border:1.5px solid color-mix(in srgb,var(--river) 40%,transparent); display:inline-flex; align-items:center; justify-content:center; margin-top:.1rem; }
.sx-choice__pick svg{ width:14px; height:14px; opacity:0; transition:opacity var(--t); }
.sx-choice[data-state]{ cursor:default; }
.sx-choice[data-state="chosen-good"]{ border-color:var(--care); background:color-mix(in srgb,var(--care) 8%,var(--paper)); }
.sx-choice[data-state="chosen-good"] .sx-choice__pick{ background:var(--care); border-color:var(--care); }
.sx-choice[data-state="chosen-soft"]{ border-color:color-mix(in srgb,var(--glow) 55%,transparent); background:var(--glow-soft); }
.sx-choice[data-state="chosen-soft"] .sx-choice__pick{ background:var(--glow); border-color:var(--glow); }
.sx-choice[data-state] .sx-choice__pick svg{ opacity:1; color:#fff; }
.sx-choice[data-state="muted"]{ opacity:.55; }
.sx-choice__tagline{ display:block; margin-top:.3rem; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sx-choice[data-state="chosen-good"] .sx-choice__tagline{ color:var(--care); }

/* learning moment */
.sx-learn{
  border-radius:var(--radius); padding:1.2rem 1.35rem; margin:.2rem 0 1.2rem;
  background:var(--glow-soft); border:1px solid color-mix(in srgb,var(--glow) 30%,transparent);
}
.sx-learn--good{ background:color-mix(in srgb,var(--care) 9%,var(--paper)); border-color:color-mix(in srgb,var(--care) 30%,transparent); }
.sx-learn__h{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--glow); margin:0 0 .5rem; }
.sx-learn--good .sx-learn__h{ color:var(--care); }
.sx-learn__h svg{ width:18px; height:18px; }
.sx-learn p{ margin:0; color:var(--ink); }
.sx-learn p + p{ margin-top:.6rem; }
.sx-learn__flag{ margin-top:.8rem; font-size:.9rem; color:var(--slate); }
.sx-learn__flag b{ color:var(--ink); }
.js .sx-learn{ animation:sx-rise .42s var(--ease) both; }

.sx-actions{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* scenario summary */
.sx-summary{ padding:clamp(1.4rem,1rem + 2vw,2.2rem); }
.sx-tally{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin:.5rem 0 1.2rem; }
.sx-tally__ring{
  --p:0; flex:none; width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--serif); font-size:1.5rem; color:var(--ink);
  background:
    radial-gradient(closest-side, var(--paper) 78%, transparent 79%),
    conic-gradient(var(--care) calc(var(--p) * 1%), color-mix(in srgb,var(--river) 16%,transparent) 0);
}
.sx-flaglist{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.7rem; }
.sx-flaglist li{ display:flex; gap:.8rem; align-items:flex-start; padding:.8rem 1rem; border:1px solid color-mix(in srgb,var(--river) 12%,transparent); border-left:3px solid var(--glow); border-radius:var(--radius); background:var(--paper); }
.sx-flaglist .sx-flag__ico{ flex:none; width:26px; height:26px; color:var(--glow); margin-top:.1rem; }
.sx-flaglist b{ display:block; color:var(--ink); }
.sx-flaglist span{ color:var(--slate); font-size:.95rem; }

/* ===========================================================
   PART B — "Talk to a Scammer (Safely)"
   =========================================================== */
.sx-sim-grid{ display:grid; grid-template-columns:1.45fr .85fr; gap:clamp(1.2rem,1rem + 2vw,2rem); align-items:start; }
@media (max-width:880px){ .sx-sim-grid{ grid-template-columns:1fr; } }

/* phase rail */
.sx-rail{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.1rem; padding:0; list-style:none; counter-reset:rail; }
.sx-rail li{
  flex:1 1 auto; min-width:96px; position:relative;
  font-size:.74rem; font-weight:600; letter-spacing:.04em; color:var(--slate);
  padding:.5rem .6rem .5rem 1.7rem; border-radius:var(--radius);
  background:var(--mist); border:1px solid transparent; transition:all var(--t);
}
.sx-rail li::before{
  counter-increment:rail; content:counter(rail);
  position:absolute; left:.5rem; top:50%; transform:translateY(-50%);
  width:1.1rem; height:1.1rem; border-radius:50%; font-size:.66rem;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--river) 22%,transparent); color:var(--ink);
}
.sx-rail li[data-on="true"]{ background:color-mix(in srgb,var(--river) 12%,var(--paper)); color:var(--ink); border-color:color-mix(in srgb,var(--river) 28%,transparent); }
.sx-rail li[data-on="true"]::before{ background:var(--river); color:var(--foam); }
.sx-rail li[data-cur="true"]{ background:var(--glow-soft); border-color:color-mix(in srgb,var(--glow) 45%,transparent); color:var(--ink); }
.sx-rail li[data-cur="true"]::before{ background:var(--glow); color:#fff; }

/* chat frame */
.sx-chat{ display:flex; flex-direction:column; min-height:420px; }
.sx-chat__head{
  display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem;
  border-bottom:1px solid color-mix(in srgb,var(--river) 14%,transparent);
  background:color-mix(in srgb,var(--mist) 55%,var(--paper)); border-radius:var(--radius) var(--radius) 0 0;
}
.sx-chat__head .sx-scn__name{ font-size:1rem; }
.sx-chat__log{
  flex:1 1 auto; overflow-y:auto; max-height:46vh; min-height:240px;
  padding:1.1rem; display:flex; flex-direction:column; gap:.65rem; list-style:none; margin:0;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ .sx-chat__log{ scroll-behavior:auto; } }
.sx-typing{ align-self:flex-start; display:inline-flex; gap:.25rem; padding:.8rem 1rem; background:var(--mist); border-radius:14px; border-bottom-left-radius:4px; }
.sx-typing span{ width:7px; height:7px; border-radius:50%; background:color-mix(in srgb,var(--river) 55%,transparent); animation:sx-blink 1.1s infinite ease-in-out both; }
.sx-typing span:nth-child(2){ animation-delay:.18s; }
.sx-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes sx-blink{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .sx-typing span{ animation:none; opacity:.6; } }

/* reply area */
.sx-replies{ padding:.9rem 1.1rem 1.1rem; border-top:1px solid color-mix(in srgb,var(--river) 14%,transparent); display:grid; gap:.6rem; }
.sx-reply{
  text-align:left; font:inherit; cursor:pointer; color:var(--ink);
  background:var(--paper); border:1.5px solid color-mix(in srgb,var(--river) 24%,transparent);
  border-radius:999px; padding:.7rem 1.1rem; transition:border-color var(--t), background var(--t), transform var(--t);
}
.sx-reply:hover:not(:disabled){ border-color:var(--river); background:color-mix(in srgb,var(--river) 6%,var(--paper)); transform:translateY(-1px); }
.sx-reply--grounded{ border-color:color-mix(in srgb,var(--care) 50%,transparent); }
.sx-reply--grounded::before{ content:"◆ "; color:var(--care); }
.sx-typerow{ display:flex; gap:.5rem; margin-top:.2rem; }
.sx-typerow input{
  flex:1; font:inherit; color:var(--ink); background:var(--paper);
  border:1.5px solid color-mix(in srgb,var(--river) 24%,transparent); border-radius:999px; padding:.7rem 1.1rem;
}
.sx-typerow input:focus{ outline:none; border-color:var(--river); box-shadow:0 0 0 3px color-mix(in srgb,var(--river) 16%,transparent); }
.sx-typerow button{ flex:none; }
.sx-typehint{ font-size:.82rem; color:var(--slate); margin:.1rem 0 0; }

.sx-endbar{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:space-between; align-items:center; margin-top:1rem; }

/* red-flag detector */
.sx-detector{ position:sticky; top:90px; }
.sx-detector__head{ display:flex; align-items:center; gap:.6rem; margin:0 0 .9rem; }
.sx-detector__head svg{ width:22px; height:22px; color:var(--glow); }
.sx-detector__head h3{ margin:0; font-size:1.15rem; }
.sx-detector__count{ margin-left:auto; font-family:var(--serif); font-size:1.3rem; color:var(--glow); font-variant-numeric:tabular-nums; }
.sx-flags{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.sx-flags:empty + .sx-detector__empty{ display:block; }
.sx-detector__empty{ display:none; color:var(--slate); font-size:.95rem; }
.sx-flagcard{
  display:flex; gap:.7rem; align-items:flex-start; padding:.75rem .9rem;
  border:1px solid color-mix(in srgb,var(--warn-ink) 22%,transparent);
  border-left:3px solid var(--warn-ink); border-radius:var(--radius);
  background:var(--warn-bg); color:var(--warn-ink);
}
.sx-flagcard svg{ flex:none; width:20px; height:20px; margin-top:.1rem; }
.sx-flagcard b{ display:block; color:var(--warn-ink); font-size:.96rem; }
.sx-flagcard span{ color:color-mix(in srgb,var(--warn-ink) 88%,var(--ink)); font-size:.86rem; }
.js .sx-flagcard{ animation:sx-flagin .5s var(--ease) both; }
@keyframes sx-flagin{ 0%{ opacity:0; transform:translateX(10px); } 60%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 30%,transparent); } 100%{ opacity:1; transform:none; box-shadow:none; } }
@media (prefers-reduced-motion: reduce){ .js .sx-flagcard{ animation:none; } }

/* debrief */
.sx-debrief{ padding:clamp(1.4rem,1rem + 2vw,2.2rem); }
.sx-play{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:0; }
.sx-play li{ position:relative; padding:0 0 1.5rem 2.1rem; }
.sx-play li::before{ content:""; position:absolute; left:.45rem; top:.4rem; width:11px; height:11px; border-radius:50%; background:var(--river); }
.sx-play li::after{ content:""; position:absolute; left:.95rem; top:1.2rem; bottom:-.2rem; width:2px; background:color-mix(in srgb,var(--river) 22%,transparent); }
.sx-play li:last-child{ padding-bottom:0; }
.sx-play li:last-child::after{ display:none; }
.sx-play__phase{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--moss); }
.sx-play__tactic{ display:block; font-weight:600; color:var(--ink); margin:.15rem 0; }
.sx-play__why{ color:var(--slate); font-size:.96rem; }
.sx-play__grounded{ margin-top:.5rem; padding:.65rem .85rem; border-radius:var(--radius); background:color-mix(in srgb,var(--care) 9%,var(--paper)); border:1px solid color-mix(in srgb,var(--care) 26%,transparent); font-size:.94rem; color:var(--ink); }
.sx-play__grounded b{ color:var(--care); }

/* not-your-fault reassurance (re-uses .assure styling family) */
.sx-reassure{
  background:var(--glow-soft); border:1px solid color-mix(in srgb,var(--glow) 30%,transparent);
  border-radius:var(--radius); padding:clamp(1.3rem,1rem + 2vw,2rem); margin-top:1.6rem;
  display:flex; gap:1rem; align-items:flex-start;
}
.sx-reassure svg{ flex:none; width:30px; height:30px; color:var(--glow); margin-top:.1rem; }
.sx-reassure h3{ margin:0 0 .4rem; }
.sx-reassure p{ margin:0; color:var(--slate); max-width:62ch; }
.sx-reassure p + p{ margin-top:.6rem; }
@media (max-width:560px){ .sx-reassure{ flex-direction:column; gap:.7rem; } }

/* visually-hidden live region helper */
.sx-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===========================================================
   Safe Exit ("Quick Leave") — persistent, always visible,
   keyboard-accessible, never croppable. Sits just under the
   sticky header at top-right on every screen size (so it never
   collides with the mobile nav toggle inside the header).
   =========================================================== */
.sx-quickleave{
  position:fixed; z-index:160;
  top:calc(74px + .5rem);
  right:max(.7rem, env(safe-area-inset-right, 0px));
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--sans); font-weight:700; font-size:.85rem; letter-spacing:.02em;
  background:var(--warn-ink); color:#fff;
  border:1.5px solid var(--warn-ink); border-radius:999px;
  padding:.55rem 1.05rem; text-decoration:none;
  box-shadow:0 10px 26px -10px rgba(14,30,35,.6);
  transition:background var(--t), transform var(--t);
}
.sx-quickleave:hover,.sx-quickleave:focus-visible{ background:#5e231a; color:#fff; transform:translateY(-1px); }
.sx-quickleave svg{ width:1em; height:1em; }
@media (max-width:600px){
  .sx-quickleave{ font-size:.9rem; padding:.55rem 1rem; box-shadow:0 12px 26px -8px rgba(14,30,35,.72); }
}
@media print{ .sx-quickleave{ display:none !important; } }

/* Mandatory content gate (before Part B) */
.sx-gate{ padding:clamp(1.6rem,1rem + 3vw,2.6rem); border-left:3px solid var(--glow); }
.sx-gate h2{ margin:.3rem 0 .6rem; }
.sx-gate p{ max-width:64ch; }

/* Content note (start of fear-based Part A scenarios) */
.sx-contentnote{ margin-top:0; }

/* "Educational Simulation — Not Real" watermark inside the Part B chat,
   so a screenshot of the transcript always carries the disclaimer. */
.sx-watermark{
  margin:0; text-align:center;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb,var(--slate) 72%,transparent);
  padding:.45rem .6rem;
  border-top:1px dashed color-mix(in srgb,var(--river) 16%,transparent);
  background:repeating-linear-gradient(45deg,
    transparent, transparent 9px,
    color-mix(in srgb,var(--river) 4%,transparent) 9px,
    color-mix(in srgb,var(--river) 4%,transparent) 18px);
}