/* =============================================================================
   Check-ins + energy quizzes — the conversational page family.
   -----------------------------------------------------------------------------
   Shared by CheckIn.svelte (Love / Health / Business / Nutrition) and
   QuizFlow.svelte (dating / fitness / money / founder). Collected from the
   static pages' <style> blocks (web-prototype/*-quiz.html), which each carried
   a copy; one sheet here instead of five scoped copies.

   Everything is scoped under .checkin, the components' root. That matters:
   .score-card is ALSO the area pages' ring card, and must not pick these up.
   The root is display:contents, so .app__main-scroll and .app__footer stay
   direct flex children of .app__main (web.css), while the area palette set on
   the root still inherits down:
     --area-accent  --area-surface  --area-stroke  --area-light
     --area-shade (an "r,g,b" triple)  --area-dark (a hex)
   ============================================================================= */

.checkin {
  display: contents;
  --chat-typing-color:  var(--area-accent);
  --chat-bubble-bg:     var(--area-surface);
  --mc-selected-bg:     var(--area-surface);
  --mc-selected-border: var(--area-stroke);
  --mc-indicator-bg:    var(--area-accent);
  --progress-fill-bg:   var(--area-accent);
}

/* ---------- Hero — sticky, collapses to two rows once answering starts ---------- */
.checkin .score-hero {
  position: sticky; top: 0; z-index: 3; overflow: hidden;
  box-shadow: 0 -24px 0 0 var(--bg-primary);
  border-radius: var(--br-l);
  min-height: 150px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 20px 24px;
  color: #f5f5f5;
  background: var(--area-dark, #1c3155);          /* dark under-image fallback */
  transition: min-height 180ms ease, padding 180ms ease;
}
.checkin .score-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.checkin .score-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(17deg, rgba(var(--area-shade, 28,49,85), 0.82) 14%, rgba(var(--area-shade, 28,49,85), 0) 62%);
}
.checkin .score-hero > :not(.score-hero__img) { position: relative; z-index: 2; }
.checkin .score-hero__topline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.checkin .score-hero__title { margin: 0; font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fz-xl); line-height: 1.2; transition: font-size 180ms ease; }

.checkin .score-hero > .score-hero__chrome {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 16px;
}
/* Energy quizzes name their topic in a chip, top-left. */
.checkin .score-hero__eyebrow {
  margin-right: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--br-full); line-height: 1;
  background: rgba(255, 255, 255, 0.92); color: var(--text-primary);
  font-size: var(--fz-s); font-weight: var(--fw-bold);
}
.checkin .score-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: var(--br-full); background: var(--area-accent); }
.checkin .score-hero__exit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--br-full); line-height: 1;
  background: rgba(255, 255, 255, 0.92); color: var(--text-primary);
  font-size: 15px; text-decoration: none; cursor: pointer; border: 0;
  transition: background 120ms ease;
}
.checkin .score-hero__exit:hover { background: #fff; }

/* Collapsed: two rows. The title shares its row with the close button and the
   progress bar runs the full width beneath, ending flush with the button's
   right edge. The topline is held to the button's 32px height (right side kept
   clear for it) and the chrome shares the hero's padding, so they align. The
   eyebrow chip steps aside — the title already names the topic. */
.checkin .score-hero.is-min { min-height: 88px; padding: 16px 24px 18px; gap: 12px; }
.checkin .score-hero.is-min .score-hero__title { font-size: var(--fz-m); }
.checkin .score-hero.is-min .score-hero__topline { min-height: 32px; align-items: center; padding-right: 44px; }
.checkin .score-hero.is-min > .score-hero__chrome { top: 0; bottom: auto; align-items: flex-start; padding: 16px 24px 0; }
.checkin .score-hero.is-min .score-hero__eyebrow { display: none; }

/* Short screens: the open hero (first question only) gives the question room. */
@media (max-height: 700px) {
  .checkin .score-hero:not(.is-min) { min-height: 116px; padding-bottom: 16px; }
}

/* ---------- Thread — widened past the mobile cap; roomy Q↔A rhythm ---------- */
.checkin .chat--wide { max-width: none; gap: 32px; }
.checkin .chat-msg__qa  { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding-top: 1px; }
.checkin .chat-msg__sub { margin: 0; font-size: var(--fz-sm); line-height: 1.4; color: var(--text-secondary); }
.checkin .chat-msg--question .chat-msg__badge { margin-top: -2px; }
.checkin .chat-msg__q {
  margin: 0;
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--fz-l); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--text-primary);
}
.checkin .chat-msg__text { margin: 0; font-size: var(--fz-m); line-height: 1.5; color: var(--text-primary); }

/* Word-by-word fade-up — each word starts hidden, 6px low, and rises over
   0.35s; the per-word stagger is an inline animation-delay. */
.checkin .word {
  display: inline-block;
  opacity: 0; transform: translateY(6px);
  will-change: opacity, transform;
  animation: checkin-word-in 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes checkin-word-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .checkin .word { animation-duration: 0.01ms; } }

/* ---------- Cues — the caption, over a photo when the question has one ----------
   Only questions with a photo get a tile: Nutrition's foods, and every scored
   Love, Health and Business question. The answers sit in the conversation below
   it, not in a dock. The photo is 240px unless that would put Continue below the
   screen: then CheckIn.svelte (fitCue) shrinks it just enough, down to 120px. */
.checkin .cue-block { animation: checkin-rise 0.4s ease both; }
@keyframes checkin-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.checkin .cue-visual {
  position: relative;
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin-top: 8px;
  border-radius: var(--br-m); overflow: hidden;
  background: var(--area-surface); border: 1px solid var(--area-stroke);   /* shows while the photo loads */
}
.checkin .cue-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Wide screens show the landscape picture at the same 240px height, so the
   question and its answers sit exactly where they did with the square one. */
@media (min-width: 768px) {
  .checkin .cue-visual--wide { aspect-ratio: 16 / 9; max-width: 427px; }
}
.checkin .cue-caption { margin: 8px 0 0; font-size: var(--fz-sm); line-height: 1.5; color: var(--text-secondary); }

/* ---------- In-chat result card ---------- */
.checkin .score-card {
  position: relative; overflow: hidden; border-radius: var(--br-l);
  min-height: 140px; padding: 22px 24px; color: #f5f5f5; background: var(--area-dark, #1c3155);
  display: flex; flex-direction: column; gap: 10px;
  /* It rises with the thread as it scrolls into place, then the number counts
     up (CheckIn.svelte); the band and Share settle in as the count lands. */
  animation: checkin-card-in calc(var(--dur-panel) * 1.5) var(--ease-out) both;
  font-variant-numeric: tabular-nums;   /* the count doesn't jitter */
}
@keyframes checkin-card-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.checkin .score-card__footer { animation: checkin-rise var(--dur-panel) var(--ease-out) 850ms both; }
@media (prefers-reduced-motion: reduce) {
  .checkin .score-card { animation-name: checkin-fade; }
  .checkin .score-card__footer { animation: none; }
}
@keyframes checkin-fade { from { opacity: 0; } }
.checkin .score-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.checkin .score-card::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(155deg, rgba(var(--area-shade, 28,49,85), 0.55) 30%, rgba(var(--area-shade, 28,49,85), 0.88) 100%); }
.checkin .score-card > :not(.score-card__img) { position: relative; z-index: 2; }
.checkin .score-card__label { font-size: var(--fz-sm); font-weight: var(--fw-bold); opacity: 0.92; }
.checkin .score-card__readout { display: flex; align-items: baseline; gap: 6px; }
.checkin .score-card__num { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: 52px; line-height: 1; }
.checkin .score-card__den { font-size: var(--fz-l); opacity: 0.85; }
.checkin .score-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkin .score-card__band { font-size: var(--fz-sm); font-weight: var(--fw-bold);
                             padding: 4px 12px; border-radius: var(--br-full); background: rgba(255,255,255,0.2); }
.checkin .score-card__share {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--br-full); border: 0;
  background: rgba(255, 255, 255, 0.92); color: var(--text-primary);
  font-family: var(--ff-text); font-size: var(--fz-sm); font-weight: var(--fw-bold);
  transition: background 120ms ease;
}
.checkin .score-card__share:hover { background: #fff; }
.checkin .score-card__share:disabled { opacity: 0.6; pointer-events: none; }
.checkin .score-card__share .icon { font-size: 13px; }
/* Nutrition links on to its weekly trend. */
.checkin .score-more {
  align-self: flex-start; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fz-sm); font-weight: var(--fw-bold);
  color: var(--area-accent); text-decoration: none;
}
.checkin .score-more:hover { text-decoration: underline; }
.checkin .score-more .icon { font-size: 12px; }

/* ---------- Answers — in the conversation, under their question ----------
   As in the mobile app's conversational logs: the options (or the slider, or
   the number) follow the question in Ela's text column, so an image and any
   number of options fit and nothing is squeezed by a dock. The options arrive
   one after another; Continue sits with them. 44px option rows (the touch
   minimum), a 46px Continue. */
.checkin .answer-inline { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 14px; }
.checkin .answer-inline .multiple-choice { gap: 6px; }
.checkin .answer-inline .mc__option {
  min-height: 44px; padding-top: 10px; padding-bottom: 10px;
  animation: checkin-answer-in var(--dur-panel) var(--ease-out) both;
  animation-delay: calc(60ms + var(--i, 0) * 40ms);
}
@keyframes checkin-answer-in { from { opacity: 0; transform: translateY(6px); } }
/* A tick list longer than four rows sits two to a row where there's room, so
   Continue stays on screen under the question's picture (see area-scores.md:
   choice questions have at most four answers; the food list can't). */
@media (min-width: 640px) {
  .checkin .answer-inline .mc--two-up { display: grid; grid-template-columns: 1fr 1fr; }
  .checkin .answer-inline .mc--two-up .mc__caption { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .checkin .answer-inline .mc__option { animation: none; } }

.checkin .btn[disabled] { opacity: 0.45; pointer-events: none; }
.checkin .answer-dock__cta { --btn-py: 12px; }
/* Short screens: the radio rings already say "pick one". */
@media (max-height: 700px) { .checkin .answer-inline .mc__caption { display: none; } }

/* Four-stop frequency slider (check-ins). */
.checkin .answer-inline .slider--freq { --fg-brand: var(--area-accent); gap: 12px; padding: 0 22px; }
.checkin .answer-inline .slider--freq .slider__stops { position: relative; width: 100%; height: 26px; }
.checkin .answer-inline .slider--freq .slider__stop {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--ff-text); font-size: var(--fz-sm); line-height: 1.2;
  color: var(--text-tertiary); white-space: nowrap;
  padding: 4px 10px; border-radius: var(--br-full);
  background: transparent; border: 0; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.checkin .answer-inline .slider--freq .slider__stop:nth-child(1) { left: 10px; }
.checkin .answer-inline .slider--freq .slider__stop:nth-child(2) { left: calc(10px + (100% - 20px) / 3); }
.checkin .answer-inline .slider--freq .slider__stop:nth-child(3) { left: calc(10px + (100% - 20px) * 2 / 3); }
.checkin .answer-inline .slider--freq .slider__stop:nth-child(4) { left: calc(100% - 10px); }
.checkin .answer-inline .slider--freq .slider__stop.is-selected {
  color: var(--area-accent);
  background: color-mix(in srgb, var(--area-accent) 16%, var(--bg-active));
  font-weight: var(--fw-bold);
}
/* Phones: four labels can't sit side by side at ≤480px — trim type + gutters. */
@media (max-width: 480px) {
  .checkin .answer-inline .slider--freq { padding: 0 8px; }
  .checkin .answer-inline .slider--freq .slider__stop { font-size: var(--fz-s); padding: 3px 5px; }
}

/* Number questions (area check-ins) — one row: − value + on the DS slider
   readout, the unit small beside the number. 44px buttons, the touch minimum.
   No band caption: under the stepper it read as a limit. */
.checkin .stepper {
  --slider-readout-size: 32px;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
.checkin .stepper .btn--icon {
  --btn-px: 10px; --btn-py: 10px; --btn-icon-size: 22px;
  flex: 0 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.checkin .stepper .slider__readout {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  color: var(--text-primary); border-radius: var(--br-m);
  font-variant-numeric: tabular-nums;
}
.checkin .stepper .slider__readout:focus-visible { outline: 2px solid var(--area-accent); outline-offset: 2px; }
.checkin .stepper .slider__unit {
  margin-left: 0.3em;
  font-family: var(--ff-text); font-size: var(--fz-m); font-weight: var(--fw-regular);
  letter-spacing: 0; color: var(--text-secondary);
}
/* Not set yet: the minimum (0) in the disabled colour, so nothing looks chosen
   before it is. The first tap makes it the person's answer. */
.checkin .stepper .slider__readout.is-unset .slider__value,
.checkin .stepper .slider__readout.is-unset .slider__unit { color: var(--text-disabled); }
/* The live region that speaks the value — off screen, still read. */
.checkin .stepper__live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Energy-quiz slider card (Q3) — the DS drawer shell, under its question.
   Marks sit at each answer; release glides to the nearest one. */
.checkin .q3-card { width: 100%; max-width: var(--main-measure, 680px); --fg-brand: var(--area-accent); }
/* In the thread it's a card like the options around it, not a bottom drawer:
   all four corners rounded, the shadow cast downward. */
.checkin .answer-inline .q3-card { border-radius: var(--br-xl); box-shadow: var(--shadow-2); }
.checkin .q3-card .slider__readout { --slider-readout-size: 40px; min-height: 56px; }
.checkin .q3-track { position: relative; }
.checkin .q3-marks { position: absolute; left: 10px; right: 10px; top: 6px; height: 8px; pointer-events: none; }
.checkin .q3-marks span { position: absolute; top: 0; width: 2px; height: 8px; transform: translateX(-50%);
                          background: var(--bg-active); border-radius: 1px; }
.checkin .q3-labels { position: relative; height: 18px; margin: 8px 10px 0; font-size: var(--fz-sm); color: var(--text-tertiary); }
.checkin .q3-label { position: absolute; white-space: nowrap; transition: color .15s ease; }
.checkin .q3-label.is-active { color: var(--text-primary); font-weight: var(--fw-bold); }
.checkin .q3-label--start { left: 0; }
.checkin .q3-label--end   { right: 0; }

/* ---------- Footer: the composer ----------
   The open question's answer (with Skip), the quiz's free-text answer, and the
   conversation after the score. Its stage eases between heights (morphHeight
   in $lib/thread.js) and keeps the composer bottom-aligned. */
.checkin .app__footer { padding-top: 8px; padding-bottom: 12px; }
.checkin .dock-stage { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.checkin .dock-stage__inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
.checkin .dock-item { width: 100%; display: flex; justify-content: center; }

/* The open question — the composer, with a quiet way past it (it isn't scored). */
.checkin .open-answer {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  width: 100%; max-width: var(--main-measure, 680px);
}

/* The composer wears the area accent (focus ring, caret, send fill). */
.checkin .app__footer .input--composer {
  width: 100%; max-width: var(--main-measure, 680px);
  --fg-brand:           var(--area-accent);
  --stroke-brand:       var(--area-accent);
  --bg-brand-primary:   var(--area-accent);
  --bg-brand-secondary: var(--area-surface);
  --bg-brand-light:     var(--area-light, var(--area-surface));
}

/* Grown on demand so the newest question can scroll up under the hero. */
.checkin .qa-tail { height: 0; flex-shrink: 0; }