/* =====================================================================
   Today's check-in (Dashboard).

   Design intent: a couple of quick questions, not a form - no numbered
   rail, no per-step marker, no connector line. A question's own control
   (a highlighted mood icon, a ticked box, filled-in text) is what shows it
   was answered; a thin progress line at the top says how far along the
   user is without adding chrome to every question.
   ================================================================== */
.checkin-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.checkin-head-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
}

.checkin-head__date {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.checkin-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-hover);
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.checkin-note svg {
  flex-shrink: 0;
}

.checkin-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.checkin-progress__label {
  flex-shrink: 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.mini-bar {
  flex: 1 1 auto;
  min-width: 48px;
  max-width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--color-surface-hover);
  overflow: hidden;
}

.checkin-step__meta .mini-bar {
  flex: 0 0 auto;
  width: 48px;
}

.mini-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width var(--dur-base) var(--ease-decel);
}

.checkin-steps {
  display: flex;
  flex-direction: column;
}

/* A plain divider between questions - the only structure kept once the
   rail/marker/connector were removed. */
.checkin-step {
  padding: var(--space-5) 0;
}

.checkin-step:first-child {
  padding-top: 0;
}

.checkin-step:last-child {
  padding-bottom: 0;
}

.checkin-step + .checkin-step {
  border-top: 1px solid var(--color-border);
}

.checkin-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.checkin-step__q {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.checkin-step__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-tertiary);
}

.checkin-step__opt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary);
}

.checkin-step textarea.input {
  resize: vertical;
}

/* ---- Mood scale ----
   Equal-width tiles in a fixed row: an ordered scale has to look like an
   axis, which pills wrapping onto a second line actively hide. Deliberately
   no card chrome (no border/background) - just the glyph and its label, so
   the row reads as five quick taps rather than five little cards; the
   selected state is carried by colour and a small lift alone. */
.chip-picker--scale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  width: 100%;
}

.scale-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) 2px;
  border: 0;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-standard);
}

.scale-item:hover {
  color: var(--color-text-secondary);
}

.scale-item:active {
  transform: scale(0.94);
}

.scale-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scale-item__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.scale-item.is-active {
  color: var(--color-accent);
  transform: scale(1.06);
}

/* 11px on a phone: five mood labels ("Excellent") have to share one row
   at 375px. The one sub-caption size kept on purpose, with bottom-nav
   labels (10px, the platform tab-bar convention) and the calendar's
   in-cell figures, where the cell width is the constraint. */
@media (max-width: 560px) {
  .scale-item__label {
    font-size: 11px;
  }
}