/* ==========================================================================
   Mwanga — Wellbeing Check-In
   checkin.css

   Loaded only on check-in.html so the rest of the site carries none of it.

   Design intent: the canvas does the atmosphere, the interface stays out of
   its way. No boxes, no dashboard chrome, no progress percentages. The
   person should feel they are sitting with something, not filling a form.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STAGE
   -------------------------------------------------------------------------- */

.checkin {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #0A1E3C;
}

/* The canvas sits behind everything and is purely decorative — all of the
   information it conveys is also present as text. */
.checkin__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.checkin__ui {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: safe end;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5) var(--space-7);
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

@media (min-width: 62rem) {
  .checkin__ui {
    align-content: safe center;
    justify-items: start;
    max-width: 34rem;
    margin-inline: 0;
    padding-left: var(--space-8);
  }

  .checkin { grid-template-rows: 1fr; }
}

/* A soft veil so text stays readable whatever the scene is doing. */
.checkin__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(6, 18, 38, 0.86) 0%,
    rgba(6, 18, 38, 0.55) 35%,
    rgba(6, 18, 38, 0.10) 70%,
    rgba(6, 18, 38, 0) 100%
  );
}

@media (min-width: 62rem) {
  .checkin__veil {
    background: linear-gradient(
      to right,
      rgba(6, 18, 38, 0.86) 0%,
      rgba(6, 18, 38, 0.62) 40%,
      rgba(6, 18, 38, 0.12) 75%,
      rgba(6, 18, 38, 0) 100%
    );
  }
}


/* --------------------------------------------------------------------------
   2. STEP CONTENT
   -------------------------------------------------------------------------- */

.checkin__step {
  display: grid;
  gap: var(--space-4);
  animation: checkin-enter 420ms ease both;
}

@keyframes checkin-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.checkin__eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 192, 0, 0.9);
  margin: 0;
}

.checkin__question {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
}

@media (min-width: 48rem) {
  .checkin__question { font-size: var(--size-2xl); }
}

.checkin__hint {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--size-sm);
  margin: 0;
  max-width: 30rem;
}


/* --------------------------------------------------------------------------
   3. THE DIAL
   A range input, restyled. It stays a real <input type="range"> so keyboard,
   screen reader and touch behaviour all come free and correct.
   -------------------------------------------------------------------------- */

.dial { display: grid; gap: var(--space-3); }

.dial__readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.dial__word {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  color: #FFFFFF;
  transition: opacity 200ms ease;
}

.dial__word.is-changing { opacity: 0; }

.dial__value {
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

.dial__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: grab;
  margin: 0;
}

.dial__input:active { cursor: grabbing; }

/* Track — the fill is painted by a CSS variable the script updates, so the
   colour travels with the value. */
.dial__input::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      var(--dial-colour, #F0C000) 0%,
      var(--dial-colour, #F0C000) var(--dial-fill, 50%),
      rgba(255, 255, 255, 0.16) var(--dial-fill, 50%),
      rgba(255, 255, 255, 0.16) 100%);
}

.dial__input::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      var(--dial-colour, #F0C000) 0%,
      var(--dial-colour, #F0C000) var(--dial-fill, 50%),
      rgba(255, 255, 255, 0.16) var(--dial-fill, 50%),
      rgba(255, 255, 255, 0.16) 100%);
}

/* Thumb */
.dial__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--dial-colour, #F0C000);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 140ms ease;
}

.dial__input::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--dial-colour, #F0C000);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 140ms ease;
}

.dial__input:active::-webkit-slider-thumb { transform: scale(1.12); }
.dial__input:active::-moz-range-thumb { transform: scale(1.12); }

.dial__input:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 6px;
  border-radius: 999px;
}

.dial__ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-xs);
  color: rgba(255, 255, 255, 0.55);
}


/* --------------------------------------------------------------------------
   4. CHIPS — for the "what's on your mind" step
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease,
              color 160ms ease, transform 160ms ease;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.chip[aria-pressed="true"] {
  background: rgba(240, 192, 0, 0.92);
  border-color: rgba(240, 192, 0, 0.92);
  color: #0A1E3C;
  font-weight: 600;
}

.chip:active { transform: scale(0.97); }


/* --------------------------------------------------------------------------
   5. CONTROLS
   -------------------------------------------------------------------------- */

.checkin__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.checkin__back {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  padding: var(--space-3);
  min-height: 44px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkin__back:hover { color: #FFFFFF; }
.checkin__back[hidden] { display: none !important; }

/* Progress: five marks, no percentage. */
.checkin__marks {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.checkin__mark {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 260ms ease;
}

.checkin__mark.is-done { background: rgba(240, 192, 0, 0.95); }


/* --------------------------------------------------------------------------
   6. RESULT
   -------------------------------------------------------------------------- */

.result { display: grid; gap: var(--space-5); }

.result__lede {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--size-md);
  margin: 0;
  max-width: 32rem;
}

.snapshot {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.snapshot__row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.snapshot__label {
  font-size: var(--size-sm);
  color: rgba(255, 255, 255, 0.75);
}

.snapshot__meter {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.snapshot__bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.snapshot__word {
  font-size: var(--size-sm);
  color: #FFFFFF;
  min-width: 6.5rem;
}

@media (max-width: 30rem) {
  .snapshot__row { grid-template-columns: 5.5rem 1fr; }
  .snapshot__word { grid-column: 2; margin-top: -0.25rem; }
}

.result__note {
  border-left: 3px solid rgba(240, 192, 0, 0.9);
  padding-left: var(--space-4);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--size-sm);
  max-width: 34rem;
}

.result__note p:last-child { margin-bottom: 0; }

/* Next steps — plain links, not cards. */
.nexts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nexts li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

.nexts a,
.nexts button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-4) 0;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: padding-left 200ms ease, color 200ms ease;
}

.nexts a:hover,
.nexts button:hover {
  padding-left: var(--space-3);
  color: #F0C000;
}

.nexts .nexts__sub {
  display: block;
  font-size: var(--size-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}


/* --------------------------------------------------------------------------
   7. BREATHING EXERCISE
   -------------------------------------------------------------------------- */

.breathe {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

.breathe__orb {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
              rgba(255, 255, 255, 0.95),
              rgba(240, 192, 0, 0.55) 45%,
              rgba(11, 111, 180, 0.35) 100%);
  box-shadow: 0 0 60px rgba(240, 192, 0, 0.28);
  transform: scale(0.7);
  transition: transform 4s cubic-bezier(0.4, 0, 0.4, 1);
}

.breathe__orb.is-in  { transform: scale(1); }
.breathe__orb.is-out { transform: scale(0.7); }

.breathe__word {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  color: #FFFFFF;
  margin: 0;
}


/* --------------------------------------------------------------------------
   8. CRISIS LINE — always present, never triggered
   -------------------------------------------------------------------------- */

.checkin__safety {
  position: relative;
  z-index: 3;
  background: rgba(6, 18, 38, 0.92);
  border-top: 1px solid rgba(255, 180, 171, 0.4);
  padding: var(--space-3) var(--space-5);
  text-align: center;
  font-size: var(--size-xs);
  color: rgba(255, 255, 255, 0.85);
}

.checkin__safety a {
  color: #FFB4AB;
  font-weight: 700;
  text-decoration: underline;
}

.checkin__safety a:hover { color: #FFFFFF; }


/* --------------------------------------------------------------------------
   9. REDUCED MOTION
   The scene still renders — it simply stops moving. Nothing is lost, because
   every value is written out in words as well.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .checkin__step { animation: none; }
  .snapshot__bar { transition: none; }
  .breathe__orb { transition: none; }
  .nexts a, .nexts button { transition: none; }
}


/* --------------------------------------------------------------------------
   10. OWN WORD
   A text field beside the presets. Presets get people started; the field is
   there because the thing weighing on someone is rarely on a list.
   -------------------------------------------------------------------------- */

.ownword {
  display: flex;
  gap: var(--space-2);
  max-width: 26rem;
}

.ownword__input {
  flex: 1;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--size-sm);
}

.ownword__input::placeholder { color: rgba(255, 255, 255, 0.45); }

.ownword__input:focus {
  outline: 2px solid #F0C000;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.ownword__add {
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  border: 1px solid rgba(240, 192, 0, 0.9);
  background: transparent;
  color: #F0C000;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  font-weight: 700;
  cursor: pointer;
}

.ownword__add:hover { background: rgba(240, 192, 0, 0.92); color: #0A1E3C; }

.result__note--own { border-left-color: rgba(255, 255, 255, 0.4); }

/* Chips flash when they drop something into a vessel. */
.chip[aria-pressed="true"] { transform: scale(0.95); }