/* oivu — per-screen presentation */

/* breathing orb */
.breathe-wrap { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; justify-content: center; }
.orb {
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--accent), var(--accent-strong));
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.55); will-change: transform;
  transition: transform var(--breath-ease);
  box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent);
}
.orb.expand { transform: scale(1); }
.orb-label { color: var(--accent-ink); font-size: var(--fs-lg); font-weight: 600; }
.orb-count { color: var(--accent-ink); opacity: .8; font-size: var(--fs-sm); margin-top: 4px; }
.phase-text { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: 600; min-height: 1.4em; text-align: center; }
.phase-sub { color: var(--text-soft); font-size: var(--fs-sm); text-align: center; min-height: 1.3em; }

/* reduced motion: hide scale, lean on words */
@media (prefers-reduced-motion: reduce) {
  .orb { transition: opacity 0.4s; }
  .orb.expand { transform: scale(0.8); }
}

/* grounding */
.ground-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3); margin-top: var(--sp-2); }
.ground-count { font-size: 44px; font-weight: 600; color: var(--accent); line-height: 1; }
.ground-examples { color: var(--text-faint); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.ground-progress { color: var(--text-faint); font-size: var(--fs-xs); text-align: center; margin-top: var(--sp-2); letter-spacing: 2px; }

/* intensity picker */
.scale { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-2); }
.scale button { justify-content: flex-start; text-align: left; }
.scale .sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }

/* trigger chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); }
.chip { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-soft); font-size: var(--fs-sm); cursor: pointer; }
.chip.sel { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

textarea {
  width: 100%; min-height: 90px; margin-top: var(--sp-2); padding: 12px 14px;
  border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--fs-md); resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* gentle help card (self-harm detection + crisis) */
.help-card { background: color-mix(in srgb, var(--care) 14%, var(--surface)); border: 1.5px solid var(--care); border-radius: var(--r); padding: var(--sp-3); margin-top: var(--sp-3); }
.help-card h2 { color: var(--text); }
.helpline { display: block; margin-top: 10px; }
.helpline small { color: var(--text-faint); font-size: var(--fs-xs); display: block; margin-top: 2px; }

/* crisis screen list */
.crisis-list .btn-help { font-size: var(--fs-lg); min-height: 64px; }
.crisis-list .helpline-note { color: var(--text-faint); font-size: var(--fs-xs); margin: 2px 0 10px; text-align: center; }