/* surge.css  ·  Marrow  ·  Surges  ·  v1.0.0
   ---------------------------------------------------------------------------
   The full-bleed runner and the "what works for you" card. Styled against the
   app's own palette custom properties, so it inherits the riverbank earth
   without restating it, and against the --somatic-* tokens where the breath
   art needs to agree with the shared somatic engine.

   Two rules govern the z-index here. The overlay sits at 400: above the app,
   the arrival panel and the milestone bloom, and well below the SOS overlay
   (9000) and its escape hatch (9500), which nothing may ever cover. And because
   the overlay does occlude the header's own Crisis help button, it carries its
   own 988 line in the top bar, pinned above every state.
   --------------------------------------------------------------------------- */

/* the body-scroll lock. Removed on every exit path in close(), including the
   error path, so a crash can never leave the app unscrollable. */
body.surge-open { overflow: hidden !important; }

/* ===================== the overlay ===================== */
.surge-ov {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 74% at 50% 30%, rgba(217,162,75,.07), transparent 62%),
    linear-gradient(180deg, rgba(14,26,21,.99) 0%, var(--bg,#101C17) 46%, rgba(12,23,18,1) 100%);
  color: var(--body);
  font-family: inherit;
  -webkit-user-select: none;
  user-select: none;
  /* The resting state is VISIBLE and interactive. The entrance drives transform
     only, with no fill-mode, so a frozen or never-run animation (backgrounded tab,
     embedded webview, parked rAF) still leaves the crisis line on screen and
     tappable. The app learned this the hard way on its view transitions. */
  opacity: 1;
  animation: surgeRise .42s var(--ease);
}
@keyframes surgeRise { from { transform: translateY(12px) scale(.994); } to { transform: none; } }
/* the closing beat: fades, and stops taking taps immediately */
.surge-ov.out { opacity: 0; pointer-events: none; transition: opacity .26s var(--ease); }

/* the generative art layer, behind everything, never interactive */
.surge-artwrap { position: absolute; inset: 0; pointer-events: none; }
.surge-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.surge-shell {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max, 540px);
  margin: 0 auto;
  padding: 0 22px;
}

/* ---- top bar: the name, and the crisis line that is never covered ---- */
.surge-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 0 12px;
}
.surge-eye {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lantern);
  font-weight: 500;
}
.surge-988 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(192,106,92,.5);
  border-radius: 100px;
  font-size: .74rem;
  letter-spacing: .04em;
  color: #E6BDB4;
  white-space: nowrap;
  text-decoration: none;
  background: rgba(197,110,84,.08);
}
.surge-988:active { transform: scale(.96); }

/* ---- the body: one state at a time ---- */
.surge-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 8px 0 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.surge-body.is-run { justify-content: center; text-align: center; }

/* ---- footer: step out and not helping, present in every state ---- */
.surge-foot {
  flex: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 0 calc(18px + env(safe-area-inset-bottom, 0px));
}
.surge-out, .surge-nope {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 100px;
  font-size: .94rem;
  font-family: inherit;
  border: 1px solid var(--line);
  background: rgba(234,241,237,.04);
  color: var(--body);
  cursor: pointer;
}
.surge-nope { border-color: rgba(197,110,84,.42); color: #E0BAB2; background: transparent; }
.surge-out:active, .surge-nope:active { transform: scale(.98); }

/* ===================== before: the honest brief ===================== */
.surge-head { text-align: left; }
.surge-name {
  font-family: var(--serif, inherit);
  font-weight: 520;
  color: var(--ink);
  font-size: 2.1rem;
  line-height: 1.06;
  letter-spacing: -.024em;
  margin-bottom: 8px;
}
.surge-promise { font-size: 1.06rem; line-height: 1.55; color: var(--ink); max-width: var(--measure, 33rem); }
.surge-meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 10px; }
.surge-mech { font-size: .95rem; line-height: 1.6; color: var(--body); max-width: var(--measure, 33rem); }
.surge-caution {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--moon);
  border-left: 2px solid rgba(159,182,168,.4);
  padding-left: 12px;
}

/* the evidence label. A weak claim must LOOK weaker. Never round one up. */
.surge-sci {
  border: 1px solid var(--line2);
  background: rgba(14,28,25,.5);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 0 0 1px var(--scribe) inset;
}
.surge-strength {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.surge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.surge-sci.is-strong    .surge-dot { background: var(--lantern); box-shadow: 0 0 8px rgba(217,162,75,.55); }
.surge-sci.is-strong    .surge-strength { color: var(--lantern); }
.surge-sci.is-good      .surge-dot { background: var(--moon); }
.surge-sci.is-good      .surge-strength { color: var(--moon); }
.surge-sci.is-promising .surge-dot { background: transparent; border: 1px solid rgba(159,182,168,.6); }
.surge-sci.is-promising .surge-strength { color: var(--muted); }
.surge-sci.is-practice  .surge-dot { background: transparent; border: 1px dotted var(--faint); }
.surge-sci.is-practice  .surge-strength { color: var(--faint); }
.surge-claim { font-size: .92rem; line-height: 1.55; color: var(--body); margin-top: 8px; }
.surge-src { font-size: .8rem; color: var(--faint); margin-top: 7px; }
.surge-more {
  display: inline-block;
  margin-top: 9px;
  font-size: .82rem;
  color: var(--moon);
  border-bottom: 1px solid rgba(159,182,168,.32);
  text-decoration: none;
  padding-bottom: 1px;
}

/* ===================== intensity capture, 0 to 10 ===================== */
.surge-capture { margin-top: 4px; }
.surge-ask { font-size: 1.02rem; color: var(--ink); text-align: center; margin-bottom: 12px; }
.surge-scale {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (min-width: 420px) { .surge-scale { grid-template-columns: repeat(11, 1fr); gap: 6px; } }
.surge-num {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(234,241,237,.04);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: .2s var(--ease);
}
.surge-num:active { transform: scale(.96); border-color: var(--lantern); }
.surge-ends {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--faint);
  letter-spacing: .03em;
  margin-top: 10px;
}
.surge-skip {
  display: block;
  margin: 14px auto 0;
  min-height: 44px;
  padding: 0 16px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .88rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.surge-skip:hover { border-bottom-color: var(--faint); }

/* ===================== the run ===================== */
.surge-track { display: flex; gap: 3px; margin-bottom: 26px; flex: none; }
.surge-seg {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 99px;
  background: var(--scribe);
  overflow: hidden;
  min-width: 4px;
}
.surge-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lantern);
  text-decoration: none;
}
.surge-seg.done .surge-fill { background: rgba(217,162,75,.45); }
.surge-seg.on { box-shadow: 0 0 0 1px rgba(217,162,75,.2); }

.surge-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 210px;
}
.surge-say {
  font-family: var(--serif, inherit);
  font-size: 1.42rem;
  line-height: 1.4;
  color: var(--ink);
  max-width: 22ch;
  text-align: center;
  animation: surgeIn .5s var(--ease);
}
.surge-sub {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 28ch;
  text-align: center;
  animation: surgeIn .6s var(--ease);
}
@keyframes surgeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.surge-ctl { display: flex; gap: 10px; justify-content: center; flex: none; margin-top: 4px; }
.surge-ctlbtn {
  min-height: 48px;
  min-width: 112px;
  padding: 0 20px;
  border-radius: 100px;
  border: 1px solid rgba(159,182,168,.34);
  background: rgba(159,182,168,.07);
  color: var(--ink);
  font-family: inherit;
  font-size: .94rem;
  cursor: pointer;
}
.surge-ctlbtn:active { transform: scale(.98); }

/* ===================== choices, after, done ===================== */
.surge-choices { display: flex; flex-direction: column; gap: 11px; max-width: 340px; width: 100%; margin: 6px auto 0; }
.surge-choice {
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(234,241,237,.04);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 18px;
}
.surge-choice.primary { border-color: rgba(217,162,75,.5); background: rgba(217,162,75,.12); }
.surge-choice:active { transform: scale(.98); }

.surge-afterline {
  font-family: var(--serif, inherit);
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
}
.surge-delta {
  font-family: var(--serif, inherit);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
}
.surge-read {
  border: 1px solid rgba(159,182,168,.24);
  background: var(--surface2);
  border-radius: 14px;
  padding: 15px 17px;
  box-shadow: 0 0 0 1px var(--scribe) inset;
}
.surge-read p { font-size: .95rem; line-height: 1.56; color: var(--body); margin-top: 7px; }
.surge-eyebrow { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--moon); font-weight: 500; }
.surge-note { font-size: .8rem; line-height: 1.5; color: var(--faint); }
.surge-read .surge-note { margin-top: 9px; }

.surge-voice { border-left: 2px solid rgba(217,162,75,.35); padding-left: 14px; }
.surge-voice p { font-size: .96rem; line-height: 1.56; color: var(--body); margin-top: 4px; }
.surge-who { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

/* ---- the never-a-dead-end fallback, used only when the host gave us nowhere to go ---- */
.surge-help { display: flex; flex-direction: column; gap: 10px; max-width: 340px; width: 100%; margin: 4px auto 0; }
.surge-helplink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 100px;
  border: 1px solid rgba(192,106,92,.5);
  background: rgba(197,110,84,.1);
  color: #F0D3CE;
  font-size: 1rem;
  text-decoration: none;
}
.surge-body.is-help .surge-say, .surge-body.is-help .surge-sub { margin: 0 auto; }

/* ===================== "what works for you" card ===================== */
.surge-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 19px 20px;
  margin-bottom: 13px;
  box-shadow: 0 1px 0 var(--scribe) inset, 0 0 0 1px var(--scribe);
}
.surge-card-head { margin-bottom: 12px; }
.surge-card-empty { font-size: .93rem; line-height: 1.56; color: var(--body); margin-bottom: 9px; }
.surge-card-list { display: flex; flex-direction: column; gap: 9px; }
.surge-card-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  min-height: 56px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.surge-card-row:active { transform: scale(.99); }
.surge-card-row[disabled] { cursor: default; }
.surge-card-lead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.surge-card-name { font-size: .98rem; color: var(--ink); }
.surge-card-facts { font-size: .78rem; color: var(--muted); letter-spacing: .01em; }
.surge-card-bar { display: block; height: 3px; border-radius: 99px; background: var(--scribe); overflow: hidden; }
.surge-card-bar i { display: block; height: 100%; background: var(--moon); }
.surge-card-row:first-child .surge-card-bar i { background: var(--lantern); }
.surge-card-when { font-size: .86rem; color: var(--moon); margin-top: 12px; }
.surge-card .surge-note { margin-top: 11px; }

/* ===================== reduced motion ===================== */
/* The pacing stays. A surge is a timed sequence, and the timing is the medicine.
   What goes is every animation: the art paints one still frame per beat instead
   of a loop, and nothing slides or fades. */
@media (prefers-reduced-motion: reduce) {
  .surge-ov { animation: none !important; opacity: 1; }
  .surge-ov.out { transition: none; }
  .surge-say, .surge-sub { animation: none !important; }
  .surge-num, .surge-ctlbtn, .surge-choice, .surge-out, .surge-nope, .surge-988, .surge-card-row { transition: none !important; }
  .surge-num:active, .surge-ctlbtn:active, .surge-choice:active,
  .surge-out:active, .surge-nope:active, .surge-988:active, .surge-card-row:active { transform: none; }
}

/* ===================== small screens and short screens ===================== */
@media (max-height: 640px) {
  .surge-name { font-size: 1.7rem; }
  .surge-say { font-size: 1.24rem; }
  .surge-stage { min-height: 150px; }
  .surge-body { gap: 13px; }
}