/* Hushly Calm: components. Static looks only; every animation lives in Motion.css. */

/* ---------- Top bar ---------- */

.TopBar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space8);
  min-height: calc(var(--TopBarHeight) + var(--SafeTop));
  padding: var(--SafeTop) var(--Gutter) 0;
  background: color-mix(in srgb, var(--ColorBg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.TopBarStart,
.TopBarEnd {
  display: flex;
  align-items: center;
  gap: var(--Space4);
  min-width: 0;
}

/* The Sign in link beside Help now on the signed-out screens stays on one line, so the bar keeps its height on a phone. */
.TopBarEnd .TextLink {
  white-space: nowrap;
}

.Brand {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: var(--TapMin);
  color: var(--ColorText);
  font-family: var(--FontDisplay);
  font-weight: var(--WeightDisplay);
  font-size: 22px;
  line-height: 1;
  font-variation-settings: "SOFT" 100;
  text-decoration: none;
}

.Brand .BrandMark {
  width: 30px;
  height: 35px;
}

.IconButton {
  display: inline-grid;
  place-items: center;
  width: var(--TapMin);
  height: var(--TapMin);
  border-radius: var(--RadiusPill);
  color: var(--ColorText);
  text-decoration: none;
  background: transparent;
}

.IconButton:hover {
  background: var(--ColorPrimarySoft);
}

.HelpButton {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: var(--TapMin);
  padding: 0 var(--Space16) 0 var(--Space12);
  border-radius: var(--RadiusPill);
  border: 1.5px solid var(--ColorBorder);
  background: var(--ColorSurface);
  color: var(--ColorText);
  font-size: var(--TextBodySize);
  font-weight: var(--WeightBold);
  line-height: 1;
  white-space: nowrap;
}

.HelpButton .Icon {
  color: var(--ColorPrimaryText);
}

/* ---------- Screen skeleton ---------- */

.ScreenBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--CardGap);
  padding: var(--Space8) var(--Gutter) var(--Space32);
}

.ScreenFoot {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
  padding: var(--Space24) var(--Gutter) calc(var(--Space16) + var(--SafeBottom));
  background: linear-gradient(to top, var(--ColorBg) 70%, transparent);
}

.ScreenHead {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
}

.Eyebrow {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
  letter-spacing: 0.04em;
}

.StepDots {
  display: flex;
  gap: var(--Space8);
  align-items: center;
}

.StepDot {
  width: 24px;
  height: 8px;
  border-radius: var(--RadiusPill);
  background: color-mix(in srgb, var(--ColorText) 16%, transparent);
}

.StepDot.IsActive {
  background: var(--ColorPrimary);
}

/* ---------- Buttons ---------- */

.Button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--Space8);
  width: 100%;
  min-height: var(--ButtonHeight);
  padding: 0 var(--Space24);
  border: 0;
  border-radius: var(--RadiusButton);
  background: var(--ColorPrimary);
  color: var(--ColorOnPrimary);
  font-size: var(--TextBodyLgSize);
  font-weight: var(--WeightBold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.Button:active {
  background: var(--ColorPrimaryPressed);
}

.ButtonSoft {
  background: var(--ColorPrimarySoft);
  color: var(--ColorText);
}

.ButtonSoft:active {
  background: color-mix(in srgb, var(--ColorPrimary) 24%, var(--ColorSurface));
}

.ButtonQuiet {
  background: transparent;
  color: var(--ColorText);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
}

.ButtonQuiet:active {
  background: var(--ColorPrimarySoft);
}

.ButtonDanger {
  background: var(--ColorDanger);
  color: var(--ColorOnDanger);
}

.ButtonDanger:active {
  background: color-mix(in srgb, var(--ColorDanger) 82%, var(--ColorText));
}

.ButtonDangerQuiet {
  background: transparent;
  color: var(--ColorDanger);
  box-shadow: inset 0 0 0 1.5px var(--ColorDanger);
}

.ButtonSmall {
  min-height: var(--TapMin);
  font-size: var(--TextBodySize);
  padding: 0 var(--Space16);
}

.ButtonAuto {
  width: auto;
}

.ButtonRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--Space12);
}

.Button[aria-disabled="true"],
.Button:disabled,
.IsDisabled {
  opacity: 0.45;
  pointer-events: none;
}

/* A quiet text link that still has a 48px tap target */
.TextLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--TapMin);
  padding: 0 var(--Space12);
  border-radius: var(--RadiusButton);
  color: var(--ColorTextSecondary);
  font-size: var(--TextBodySize);
  font-weight: var(--WeightMedium);
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  background: none;
  border: 0;
  cursor: pointer;
}

.TextLinkSmall {
  font-size: var(--TextCaptionSize);
}

/* ---------- Cards, pills, lists ---------- */

.Card {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
  padding: var(--CardPad);
  border-radius: var(--RadiusCard);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
}

.CardSunk {
  background: var(--ColorSurfaceSunk);
  box-shadow: none;
}

.CardSoft {
  --ColorTextSecondary: color-mix(in srgb, var(--ColorText) 80%, var(--ColorPrimarySoft));
  background: var(--ColorPrimarySoft);
  box-shadow: none;
}

.CardDanger {
  background: var(--ColorDangerSoft);
  box-shadow: inset 0 0 0 1.5px var(--ColorDanger);
}

.CardHead {
  display: flex;
  align-items: center;
  gap: var(--Space12);
}

.CardTitle {
  font-size: var(--TextHeadingSize);
  line-height: var(--TextHeadingLine);
  font-weight: var(--WeightBold);
}

.Pill {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 32px;
  padding: var(--Space4) var(--Space12);
  border-radius: var(--RadiusPill);
  background: var(--ColorPrimarySoft);
  color: var(--ColorText);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
}

.Divider {
  height: 1px;
  border: 0;
  background: var(--ColorBorder);
  margin: 0;
}

.Row {
  display: flex;
  align-items: center;
  gap: var(--Space12);
  min-height: var(--TapMin);
}

.RowGrow {
  flex: 1 1 auto;
  min-width: 0;
}

.RowTitle {
  font-weight: var(--WeightBold);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.RowSub {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.NeedBadge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--NeedColor, var(--NeedNotSure));
  color: var(--ColorOnNeed);
}

.NeedBadgeLarge {
  width: 56px;
  height: 56px;
}

/* ---------- Need colour hooks: data-need on a card, screen or row picks the colour ---------- */

[data-need="Hungry"] { --NeedColor: var(--NeedHungry); }
[data-need="Tired"] { --NeedColor: var(--NeedTired); }
[data-need="WindOrTummy"] { --NeedColor: var(--NeedWindOrTummy); }
[data-need="NeedsABurp"] { --NeedColor: var(--NeedNeedsABurp); }
[data-need="NappyChange"] { --NeedColor: var(--NeedNappyChange); }
[data-need="TooHotOrCold"] { --NeedColor: var(--NeedTooHotOrCold); }
[data-need="ClothesOrPosition"] { --NeedColor: var(--NeedClothesOrPosition); }
[data-need="WantsCloseness"] { --NeedColor: var(--NeedWantsCloseness); }
[data-need="Overstimulated"] { --NeedColor: var(--NeedOverstimulated); }
[data-need="Frustrated"] { --NeedColor: var(--NeedFrustrated); }
[data-need="Startled"] { --NeedColor: var(--NeedStartled); }
[data-need="Teething"] { --NeedColor: var(--NeedTeething); }
[data-need="MissingYou"] { --NeedColor: var(--NeedMissingYou); }
[data-need="SoreAfterJabs"] { --NeedColor: var(--NeedSoreAfterJabs); }
[data-need="NotSure"] { --NeedColor: var(--NeedNotSure); }
[data-need="CheckBaby"] { --NeedColor: var(--NeedCheckBaby); }

/* ---------- Chips ---------- */

.ChipRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space8);
}

.Chip {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.ChipInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ChipLabel {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: var(--TapMin);
  padding: var(--Space8) var(--Space12);
  border-radius: var(--RadiusChip);
  border: 1.5px solid var(--ColorBorder);
  background: var(--ColorSurface);
  color: var(--ColorText);
  font-size: var(--TextBodySize);
  line-height: 20px;
  font-weight: var(--WeightMedium);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.ChipCheck {
  display: none;
  color: var(--ColorPrimaryText);
}

.ChipInput:checked + .ChipLabel {
  background: var(--ColorPrimarySoft);
  border-color: var(--ColorPrimary);
  font-weight: var(--WeightBold);
}

.ChipInput:checked + .ChipLabel .ChipCheck {
  display: block;
}

.ChipInput:focus-visible + .ChipLabel {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 3px;
}

.Chip.IsWarn .ChipInput:checked + .ChipLabel {
  background: var(--ColorDangerSoft);
  border-color: var(--ColorDanger);
}

.Chip.IsWarn .ChipCheck {
  color: var(--ColorDanger);
}

.ChipIcon {
  color: var(--ColorPrimaryText);
}

/* Static chip: shows a fact, such as a reason on the result */
.ChipRow.IsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.IsGrid .Chip {
  display: flex;
}

.IsGrid .ChipLabel {
  width: 100%;
  padding: var(--Space8) var(--Space12);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.ChipStatic {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 40px;
  padding: var(--Space8) var(--Space12);
  border-radius: var(--RadiusChip);
  background: color-mix(in srgb, var(--NeedColor, var(--ColorPrimary)) 22%, var(--ColorSurface));
  color: var(--ColorText);
  font-size: var(--TextBodySize);
  line-height: 20px;
  font-weight: var(--WeightMedium);
}

.ChipStatic .Icon {
  color: var(--ColorText);
}

/* ---------- Groups, fields ---------- */

.Group {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
  min-width: 0;
}

.GroupTitle {
  display: block;
  font-size: var(--TextHeadingSize);
  line-height: var(--TextHeadingLine);
  font-weight: var(--WeightBold);
}

.GroupSub {
  color: var(--ColorTextSecondary);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.Form {
  display: flex;
  flex-direction: column;
  gap: var(--Space24);
}

.Field {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
}

.FieldLabel {
  font-weight: var(--WeightBold);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.FieldOptional {
  color: var(--ColorTextSecondary);
  font-weight: var(--WeightMedium);
}

.FieldHint {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.FieldInput {
  width: 100%;
  min-height: var(--ButtonHeight);
  padding: 0 var(--Space16);
  border: 1.5px solid var(--ColorBorder);
  border-radius: var(--RadiusInput);
  background: var(--ColorField);
  color: var(--ColorText);
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
  font-weight: var(--WeightMedium);
  appearance: none;
  -webkit-appearance: none;
}

.FieldInput::placeholder {
  color: var(--ColorTextTertiary);
  opacity: 1;
}

/* Night, and Auto while the phone is dark: the tertiary text colour is 4.11:1 on the raised field, under
   4.5:1 on a safety screen (the Quick check temperature hint), so placeholders use the secondary colour (DM-07). */
:root[data-theme="Night"] .FieldInput::placeholder,
:root:not([data-theme]):has(input[name="Theme"][value="Night"]:checked) .FieldInput::placeholder {
  color: var(--ColorTextSecondary);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="Auto"] .FieldInput::placeholder,
  :root:not([data-theme]):has(input[name="Theme"][value="Auto"]:checked) .FieldInput::placeholder,
  :root:not([data-theme]):not(:has(input[name="Theme"]:checked)) .FieldInput::placeholder {
    color: var(--ColorTextSecondary);
  }
}

.FieldInput:focus {
  border-color: var(--ColorPrimary);
}

.FieldInput::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
}

/* Ember has no white anywhere, so the native date icon is tinted red */
:root[data-theme="Ember"] .FieldInput::-webkit-calendar-picker-indicator,
:root:not([data-theme]):has(input[name="Theme"][value="Ember"]:checked) .FieldInput::-webkit-calendar-picker-indicator {
  filter: invert(42%) sepia(60%) saturate(900%) hue-rotate(335deg);
}

textarea.FieldInput {
  padding-block: var(--Space12);
  min-height: 96px;
  resize: vertical;
}

.SelectWrap {
  position: relative;
}

.SelectWrap .FieldInput {
  padding-right: var(--Space48);
}

.SelectWrap .Icon {
  position: absolute;
  right: var(--Space16);
  top: 50%;
  margin-top: -12px;
  pointer-events: none;
  color: var(--ColorTextSecondary);
}

.FormMessage {
  min-height: 0;
  color: var(--ColorDanger);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
}

.FormMessage:empty {
  display: none;
}

/* Switch row */
.SwitchRow {
  display: flex;
  align-items: center;
  gap: var(--Space16);
  min-height: var(--ButtonHeight);
  padding: var(--Space12) var(--Space16);
  border-radius: var(--RadiusCard);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
  cursor: pointer;
}

.SwitchText {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--Space4);
  min-width: 0;
}

.SwitchTitle {
  font-weight: var(--WeightBold);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.SwitchHint {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.Switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 56px;
  height: 32px;
  border-radius: var(--RadiusPill);
  background: var(--ColorBorder);
  cursor: pointer;
}

.Switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ColorSurface);
  box-shadow: 0 0 0 1.5px var(--ColorTextTertiary);
}

.Switch:checked {
  background: var(--ColorPrimary);
}

.Switch:checked::before {
  left: 28px;
  background: var(--ColorOnPrimary);
  box-shadow: none;
}

/* Segmented control: theme, motion, timers, breathing length */
.Segmented {
  display: flex;
  gap: var(--Space4);
  padding: var(--Space4);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurfaceSunk);
  box-shadow: inset 0 0 0 1px var(--ColorBorder);
}

.SegmentedItem {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.SegmentedInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.SegmentedLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--TapMin);
  padding: 0 var(--Space8);
  border-radius: calc(var(--RadiusButton) - var(--Space4));
  color: var(--ColorTextSecondary);
  font-size: var(--TextBodySize);
  font-weight: var(--WeightBold);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.SegmentedInput:checked + .SegmentedLabel {
  background: var(--ColorSurface);
  color: var(--ColorText);
  box-shadow: var(--ShadowCard), inset 0 0 0 1.5px var(--ColorPrimary);
}

.SegmentedInput:focus-visible + .SegmentedLabel {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 2px;
}

/* ---------- Pip ---------- */

.Pip {
  width: 120px;
  height: 140px;
  flex: none;
}

.PipSmall {
  width: 36px;
  height: 42px;
}

.PipMedium {
  width: 84px;
  height: 98px;
}

.PipLarge {
  width: 160px;
  height: 187px;
}

.PipHold {
  position: relative;
  width: 148px;
  aspect-ratio: 120 / 140;
  flex: none;
}

.PipHold .Pip {
  width: 100%;
  height: 100%;
}

.PipHold .NeedIcon {
  position: absolute;
  left: 50%;
  top: 72.9%;
  width: 21%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--ColorOnNeed);
}

/* ---------- Orb, rings ---------- */

.OrbStage {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--OrbSize) + 72px);
  height: calc(var(--OrbSize) + 72px);
}

.Orb {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--OrbSize);
  height: var(--OrbSize);
  border-radius: 50%;
  color: var(--ColorOnPrimary);
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.Orb.IsStatic {
  cursor: default;
}

.OrbHalo {
  position: absolute;
  inset: -36px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ColorPrimary) 55%, transparent), transparent);
  opacity: 0.5;
}

.OrbCore {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--Space4);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--ColorPrimary) 66%, var(--ColorOrbHighlight)) 0, var(--ColorPrimary) 52%, var(--ColorPrimaryPressed) 100%);
  box-shadow: var(--ShadowOrb);
  text-align: center;
}

.OrbIcon {
  width: 36px;
  height: 36px;
}

.OrbLabel {
  font-size: var(--TextBodySize);
  line-height: 1.2;
  font-weight: var(--WeightBold);
}

.OrbTimer {
  font-family: var(--FontDisplay);
  font-weight: var(--WeightDisplay);
  font-variation-settings: "SOFT" 100;
  font-size: var(--TextDisplaySize);
  line-height: var(--TextDisplayLine);
  font-variant-numeric: tabular-nums;
}

.Ripple {
  position: absolute;
  width: var(--OrbSize);
  height: var(--OrbSize);
  border-radius: 50%;
  border: 2px solid var(--ColorPrimary);
  opacity: 0;
  pointer-events: none;
}

.ProgressRing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.ProgressTrack,
.ProgressFill {
  fill: none;
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.ProgressTrack {
  stroke: var(--ColorBorder);
}

.ProgressFill {
  stroke: var(--ColorPrimary);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--Progress, 0));
}

.OrbDots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.OrbDot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--ColorPrimary);
  opacity: 0.8;
}

.OrbDot:nth-child(1) { transform: rotate(0deg) translateY(-108px); }
.OrbDot:nth-child(2) { transform: rotate(72deg) translateY(-108px); }
.OrbDot:nth-child(3) { transform: rotate(144deg) translateY(-108px); }
.OrbDot:nth-child(4) { transform: rotate(216deg) translateY(-108px); }
.OrbDot:nth-child(5) { transform: rotate(288deg) translateY(-108px); }

/* ---------- Result pieces ---------- */

.ConfidenceMeter {
  display: inline-flex;
  gap: var(--Space4);
}

.ConfidenceSeg {
  width: 20px;
  height: 6px;
  border-radius: var(--RadiusPill);
  background: color-mix(in srgb, var(--ColorText) 18%, transparent);
}

[data-confidence="StrongClue"] .ConfidenceSeg,
[data-confidence="Possible"] .ConfidenceSeg:nth-child(-n+2),
[data-confidence="HardToTell"] .ConfidenceSeg:nth-child(1) {
  background: var(--ColorText);
}

.ConfidenceLine {
  display: inline-flex;
  align-items: center;
  gap: var(--Space12);
  min-height: 32px;
  padding: var(--Space4) var(--Space16);
  border-radius: var(--RadiusPill);
  background: var(--ColorSurface);
  font-weight: var(--WeightBold);
  font-size: var(--TextBodySize);
  line-height: 20px;
}

.SimilarLine {
  display: flex;
  align-items: center;
  gap: var(--Space12);
}

.Fingerprint {
  width: 96px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: color-mix(in srgb, var(--NeedColor, var(--ColorPrimary)) 78%, var(--ColorText));
  stroke-width: 2;
  stroke-linecap: round;
}

.NoteCard {
  display: flex;
  flex-direction: row;
  gap: var(--Space12);
  align-items: flex-start;
}

.NoteText {
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
  font-weight: var(--WeightMedium);
}

.NoteLabel {
  font-weight: var(--WeightBold);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  color: var(--ColorTextSecondary);
}

/* Try this now: the first step is the big one, the next two are smaller */
.Steps {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
}

.Step {
  display: flex;
  flex-direction: column;
  gap: var(--Space4);
  border-radius: var(--RadiusCard);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
  transition: background-color var(--DurQuick) var(--EaseSettle);
}

.StepBox {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--Space12);
  align-items: start;
  padding: var(--Space16) var(--Space16) var(--Space12);
  cursor: pointer;
}

.StepCheck {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.StepTick {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ColorBorder);
  color: transparent;
  background: var(--ColorSurface);
}

.StepTick .Icon {
  width: 22px;
  height: 22px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.StepCheck:checked + .StepTick {
  border-color: var(--NeedWantsCloseness);
  background: var(--NeedWantsCloseness);
  color: var(--ColorOnNeed);
}

.StepCheck:checked + .StepTick .Icon {
  stroke-dashoffset: 0;
}

.StepCheck:focus-visible + .StepTick {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 3px;
}

.Step:has(.StepCheck:checked) {
  background: color-mix(in srgb, var(--NeedWantsCloseness) 24%, var(--ColorSurface));
}

.StepText {
  display: flex;
  flex-direction: column;
  gap: var(--Space4);
  min-width: 0;
}

.StepTitle {
  font-weight: var(--WeightBold);
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
}

.StepHow {
  color: var(--ColorTextSecondary);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.StepMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--Space8);
  padding: 0 var(--Space16) var(--Space4) calc(var(--Space16) + 44px + var(--Space12));
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightMedium);
}

.StepSound {
  display: inline-flex;
  align-items: center;
  gap: var(--Space4);
  min-height: var(--TapMin);
  color: var(--ColorPrimaryText);
  font-weight: var(--WeightBold);
}

/* Big first step, smaller followers */
.Steps > .Step:first-child .StepTitle {
  font-family: var(--FontDisplay);
  font-variation-settings: "SOFT" 100;
  font-weight: var(--WeightDisplay);
  font-size: var(--TextTitleSize);
  line-height: var(--TextTitleLine);
}

.Steps > .Step:first-child .StepBox {
  padding-block: var(--Space24) var(--Space16);
}

.Steps > .Step:not(:first-child) .StepBox {
  grid-template-columns: 36px 1fr;
  padding-block: var(--Space12) var(--Space8);
}

.Steps > .Step:not(:first-child) .StepTick {
  width: 36px;
  height: 36px;
}

.Steps > .Step:not(:first-child) .StepTitle {
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.Steps > .Step:not(:first-child) .StepHow {
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.Steps > .Step:not(:first-child) .StepMeta {
  padding-left: calc(var(--Space16) + 36px + var(--Space12));
}

.AltList {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
}

.AltRow {
  display: flex;
  align-items: center;
  gap: var(--Space12);
  min-height: 64px;
  padding: var(--Space8) var(--Space16) var(--Space8) var(--Space12);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
}

.TrackRecord {
  display: flex;
  align-items: center;
  gap: var(--Space8);
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightMedium);
}

.SafetyFooter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Space4);
  padding: var(--Space16) var(--Space8) 0;
  border-top: 1px solid var(--ColorBorder);
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  text-align: center;
}

/* ---------- Night log ---------- */

.Timeline {
  display: flex;
  flex-direction: column;
}

.TimelineItem {
  position: relative;
  display: grid;
  grid-template-columns: 60px 40px 1fr auto;
  gap: var(--Space8);
  align-items: start;
  padding: var(--Space12) 0;
  min-height: var(--TapMin);
}

.TimelineItem::before {
  content: "";
  position: absolute;
  left: calc(60px + var(--Space8) + 19px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ColorBorder);
}

.TimelineItem:first-child::before { top: 24px; }
.TimelineItem:last-child::before { bottom: calc(100% - 24px); }

.TimelineTime {
  padding-top: var(--Space8);
  white-space: nowrap;
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
  font-variant-numeric: tabular-nums;
}

.TimelineDot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--NeedColor, var(--ColorSurfaceRaised));
  color: var(--ColorOnNeed);
  box-shadow: 0 0 0 4px var(--ColorBg);
}

.TimelineItem[data-kind="Care"] .TimelineDot {
  background: var(--ColorPrimarySoft);
  color: var(--ColorPrimaryText);
}

.TimelineBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: var(--Space4);
}

.TimelineTitle[href]::after {
  content: "";
  position: absolute;
  inset: 0;
}

.TimelineTitle {
  font-weight: var(--WeightBold);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
  color: var(--ColorText);
  text-decoration: none;
}

.TimelineDetail {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.TimelineRemove {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--TapMin);
  height: var(--TapMin);
  margin: -6px -8px -6px 0;
  border-radius: var(--RadiusPill);
  color: var(--ColorTextSecondary);
}

.TimelineItem[data-kind="Cry"] .TimelineRemove {
  visibility: hidden;
}

.StatRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--Space8);
}

.Stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--Space12) var(--Space16);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
}

.StatValue {
  font-family: var(--FontDisplay);
  font-variation-settings: "SOFT" 100;
  font-weight: var(--WeightDisplay);
  font-size: var(--TextTitleSize);
  line-height: var(--TextTitleLine);
}

.StatLabel {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.Findings {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
}

.Finding {
  display: flex;
  gap: var(--Space12);
  align-items: flex-start;
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
  font-weight: var(--WeightMedium);
}

.FindingMark {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--ColorPrimary);
}

/* ---------- Soothe and Breathe ---------- */

.SoundList {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
}

.SoundCard {
  position: relative;
  display: block;
}

.SoundInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.SoundLabel {
  display: grid;
  grid-template-columns: 52px 1fr 56px;
  align-items: center;
  gap: var(--Space12);
  min-height: 88px;
  padding: var(--Space16);
  border-radius: var(--RadiusCard);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
  cursor: pointer;
}

.SoundIcon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ColorPrimarySoft);
  color: var(--ColorPrimaryText);
}

.SoundName {
  display: block;
  font-weight: var(--WeightBold);
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
}

.SoundHint {
  display: block;
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.SoundPlay {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ColorPrimary);
  color: var(--ColorOnPrimary);
}

.SoundPlay .IconPauseState {
  display: none;
}

.SoundInput:checked ~ .SoundLabel {
  background: var(--ColorPrimarySoft);
  box-shadow: inset 0 0 0 2px var(--ColorPrimary);
}

.SoundInput:checked ~ .SoundLabel .IconPlayState {
  display: none;
}

.SoundInput:checked ~ .SoundLabel .IconPauseState {
  display: block;
}

.SoundInput:focus-visible ~ .SoundLabel {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 3px;
}

.WaveBox {
  display: none;
  height: 48px;
  overflow: hidden;
  border-radius: var(--RadiusButton);
  background: var(--ColorSurfaceSunk);
  box-shadow: inset 0 0 0 1px var(--ColorBorder);
}

.WaveLine {
  display: block;
  width: 200%;
  height: 100%;
  fill: none;
  stroke: var(--ColorPrimary);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.8;
}

.PlayingNow {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space12);
}

.StopBox {
  display: none;
}

.PipCard {
  --ColorTextSecondary: color-mix(in srgb, var(--ColorText) 80%, var(--ColorPrimarySoft));
  display: flex;
  align-items: center;
  gap: var(--Space16);
  padding: var(--Space16);
  border-radius: var(--RadiusCard);
  background: var(--ColorPrimarySoft);
  color: var(--ColorText);
  text-decoration: none;
}

.PipCardText {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--Space4);
}

.BreatheStage {
  position: relative;
  display: grid;
  place-items: center;
  width: 288px;
  height: 288px;
  margin-inline: auto;
}

.BreatheArc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.BreatheOrb {
  position: relative;
  display: grid;
  place-items: center;
  width: 216px;
  height: 216px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--NeedWantsCloseness) 70%, var(--ColorSurface)) 0, var(--NeedWantsCloseness) 60%, color-mix(in srgb, var(--NeedWantsCloseness) 80%, var(--ColorText)) 100%);
  color: var(--ColorOnNeed);
  text-align: center;
}

.BreatheCue {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 40px;
  font-family: var(--FontDisplay);
  font-variation-settings: "SOFT" 100;
  font-weight: var(--WeightDisplay);
  font-size: var(--TextTitleSize);
  line-height: var(--TextTitleLine);
}

.BreatheCue > span {
  grid-area: 1 / 1;
}

/* ---------- Sheets (Popover API, bottom sheets with radius 32) ---------- */

.Sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: var(--ShellMax);
  height: auto;
  max-height: 92vh;
  max-height: 92dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--RadiusSheet) var(--RadiusSheet) 0 0;
  background: var(--ColorBg);
  color: var(--ColorText);
  box-shadow: var(--ShadowSheet);
  overflow: auto;
  overscroll-behavior: contain;
}

.Sheet::backdrop {
  background: var(--ColorScrim, rgba(31, 58, 55, 0.42));
}

.SheetInner {
  display: flex;
  flex-direction: column;
  gap: var(--Space16);
  padding: var(--Space8) var(--Gutter) calc(var(--Space24) + var(--SafeBottom));
}

.SheetGrab {
  width: 40px;
  height: 5px;
  margin: var(--Space8) auto var(--Space8);
  border-radius: var(--RadiusPill);
  background: var(--ColorBorder);
}

.SheetHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--Space12);
}

.SheetClose {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--TapMin);
  height: var(--TapMin);
  margin: calc(var(--Space8) * -1) calc(var(--Space8) * -1) 0 0;
  border-radius: var(--RadiusPill);
  color: var(--ColorTextSecondary);
}

.NavForm {
  margin: 0;
}

/* Help lines */
.HelpLines {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
}

.HelpLine {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--Space12);
  min-height: var(--ButtonHeight);
  padding: var(--Space8) var(--Space16) var(--Space8) var(--Space12);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
  color: var(--ColorText);
  text-decoration: none;
}

.HelpLineIcon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ColorPrimarySoft);
  color: var(--ColorPrimaryText);
}

.HelpLineLabel {
  display: block;
  font-weight: var(--WeightBold);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.HelpLineNote {
  display: block;
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
}

.HelpLineNumber {
  font-family: var(--FontDisplay);
  font-variation-settings: "SOFT" 100;
  font-weight: var(--WeightDisplay);
  font-size: var(--TextHeadingSize);
  line-height: var(--TextHeadingLine);
  font-variant-numeric: tabular-nums;
}

.HelpLine.IsEmergency {
  background: var(--ColorDanger);
  box-shadow: none;
  color: var(--ColorOnDanger);
}

.HelpLine.IsEmergency .HelpLineIcon {
  background: color-mix(in srgb, var(--ColorOnDanger) 20%, transparent);
  color: var(--ColorOnDanger);
}

.HelpLine.IsEmergency .HelpLineNote {
  color: var(--ColorOnDanger);
}

.Details {
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
}

.DetailsSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space12);
  min-height: var(--ButtonHeight);
  padding: 0 var(--Space16);
  font-weight: var(--WeightBold);
  cursor: pointer;
  list-style: none;
}

.DetailsSummary::-webkit-details-marker {
  display: none;
}

.DetailsBody {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
  padding: 0 var(--Space16) var(--Space16);
  color: var(--ColorTextSecondary);
}

.BulletList {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
}

.BulletList li {
  position: relative;
  padding-left: var(--Space16);
}

.BulletList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ColorTextSecondary);
}

/* Ask Pip */
.Bubble {
  max-width: 88%;
  padding: var(--Space12) var(--Space16);
  border-radius: var(--RadiusCard);
  font-size: var(--TextBodySize);
  line-height: var(--TextBodyLine);
}

.BubbleYou {
  align-self: flex-end;
  background: var(--ColorPrimary);
  color: var(--ColorOnPrimary);
  border-bottom-right-radius: var(--RadiusChip);
}

.BubblePip {
  align-self: flex-start;
  background: var(--ColorSurface);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
  border-bottom-left-radius: var(--RadiusChip);
}

.AskRow {
  display: flex;
  gap: var(--Space8);
  align-items: flex-end;
}

.AskRow .FieldInput {
  flex: 1 1 auto;
}

.AskSend {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ButtonHeight);
  height: var(--ButtonHeight);
  border-radius: var(--RadiusButton);
  background: var(--ColorPrimary);
  color: var(--ColorOnPrimary);
}

/* ---------- Tab bar ---------- */

.TabBar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  display: none;
  width: 100%;
  max-width: var(--ShellMax);
  transform: translateX(-50%);
  padding: var(--Space8) var(--Space16) calc(var(--Space8) + var(--SafeBottom));
  border-radius: var(--RadiusCard) var(--RadiusCard) 0 0;
  background: color-mix(in srgb, var(--ColorSurface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--ColorBorder);
}

.TabList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--Space8);
}

.Tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  border-radius: var(--RadiusButton);
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
  text-decoration: none;
}

.Tab.IsActive,
.Tab[aria-current="page"] {
  background: var(--ColorPrimarySoft);
  color: var(--ColorText);
}

.Tab.IsActive .Icon,
.Tab[aria-current="page"] .Icon {
  color: var(--ColorPrimaryText);
}

/* ---------- Safety screens: static, high contrast, 56px buttons ---------- */

.SafetyHero {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
  padding: var(--Space24) var(--Space16);
  border-radius: var(--RadiusCard);
  background: var(--ColorDanger);
  color: var(--ColorOnDanger);
}

.SafetyHero .Icon {
  width: 40px;
  height: 40px;
}

.SafetyHero .TextDisplay {
  color: var(--ColorOnDanger);
}

.SafetyHero p {
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
  font-weight: var(--WeightMedium);
}

.SafetyCall {
  min-height: 64px;
  font-size: var(--TextHeadingSize);
}

.TellList {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
}

.TellItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.TellLabel {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
}

.TellValue {
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
  font-weight: var(--WeightBold);
}

.CheckRow {
  display: flex;
  align-items: center;
  gap: var(--Space16);
  min-height: var(--ButtonHeight);
  padding: var(--Space12) var(--Space16);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: inset 0 0 0 2px var(--ColorText);
  font-weight: var(--WeightBold);
  font-size: var(--TextBodyLgSize);
  line-height: var(--TextBodyLgLine);
  cursor: pointer;
}

.CheckBox {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--RadiusChip);
  border: 2.5px solid var(--ColorText);
  background: var(--ColorSurface);
  cursor: pointer;
}

.CheckBox:checked {
  background: var(--ColorText);
}

.CheckBox:checked::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 3px;
  width: 8px;
  height: 15px;
  border: solid var(--ColorBg);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.BreakClock {
  font-family: var(--FontDisplay);
  font-variation-settings: "SOFT" 100;
  font-weight: var(--WeightDisplay);
  font-size: 72px;
  line-height: 80px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- Gallery ---------- */

.GalleryList {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
}

.GalleryLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space12);
  min-height: var(--TapMin);
  padding: var(--Space8) var(--Space16);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
  color: var(--ColorText);
  font-weight: var(--WeightMedium);
  text-decoration: none;
  text-align: left;
  width: 100%;
}

.GalleryLink .Icon {
  color: var(--ColorTextSecondary);
}

.GalleryId {
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  font-weight: var(--WeightBold);
}

/* ---------- Loading placeholders ---------- */

.Skeleton {
  min-height: 1em;
  border-radius: var(--RadiusChip);
  background: color-mix(in srgb, var(--ColorText) 10%, transparent);
  color: transparent;
}

/* ---------- Sleeping Pip ---------- */

.SleepStage {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  margin-inline: auto;
}

.SleepZ {
  position: absolute;
  right: -6px;
  top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--ColorTextSecondary);
}

.SleepZ svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.SleepZ svg:nth-child(2) {
  width: 16px;
  height: 16px;
  margin-left: 14px;
}

.SleepZ svg:nth-child(3) {
  width: 12px;
  height: 12px;
  margin-left: 26px;
}

/* ---------- Teaching Pip: answers, history, notes (BuildSpec part two, section 12) ---------- */

/* A small badge on a cry row: Waiting for you, Confirmed or Answered. Text on the primary soft or sunk surface. */
.StatusPill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 24px;
  margin-top: var(--Space4);
  padding: 0 var(--Space8);
  border-radius: var(--RadiusPill);
  background: var(--ColorPrimarySoft);
  color: var(--ColorText);
  font-size: var(--TextLabelSize);
  line-height: var(--TextLabelLine);
  font-weight: var(--WeightBold);
}

.StatusPill::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ColorPrimary);
}

.StatusPill[data-kind="Waiting"] {
  background: var(--ColorSurfaceSunk);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
}

.StatusPill[data-kind="Waiting"]::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ColorTextSecondary);
}

.StatusPill[data-kind="Answered"] {
  background: var(--ColorSurfaceSunk);
}

.StatusPill[data-kind="Answered"]::before {
  background: var(--ColorTextSecondary);
}

/* The count of cries waiting for an answer, on the Night log tab. */
.Tab {
  position: relative;
}

.TabBadge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--Space4);
  border-radius: var(--RadiusPill);
  background: var(--ColorPrimary);
  color: var(--ColorOnPrimary);
  font-size: var(--TextLabelSize);
  line-height: 1;
  font-weight: var(--WeightBold);
  box-shadow: 0 0 0 2px var(--ColorSurface);
}

/* Earlier and later nights on the Night log. */
.DayPager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space12);
}

.AllCriesLink {
  align-self: center;
  gap: var(--Space4);
}

/* The similar-cries line on the result is one tap away from a short list. */
.SimilarButton {
  display: flex;
  align-items: center;
  gap: var(--Space12);
  width: 100%;
  min-height: var(--TapMin);
  padding: var(--Space8) var(--Space12);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurface);
  box-shadow: var(--ShadowCard), var(--RingCard);
  color: var(--ColorText);
  text-align: left;
}

.SimilarButton .TextBody {
  flex: 1 1 auto;
  min-width: 0;
}

.SimilarButton:active {
  background: var(--ColorPrimarySoft);
}

.SimilarChevron,
.RowChevron {
  flex: none;
  color: var(--ColorTextSecondary);
}

/* A row that opens one cry: the whole row is the tap target, the title is the link. */
.HistoryRow,
.SimilarRow {
  position: relative;
}

.HistoryLink,
.SimilarLink {
  color: var(--ColorText);
  text-decoration: none;
}

.HistoryLink[href]::after,
.SimilarLink[href]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--RadiusButton);
}

.HistoryRow:has(.HistoryLink[href]:active),
.SimilarRow:has(.SimilarLink[href]:active) {
  background: var(--ColorPrimarySoft);
}

/* The top of the cry screen: the need badge beside when, the headline and one line. */
.CryHead {
  display: flex;
  align-items: center;
  gap: var(--Space16);
}

/* "That sounds worth checking. Open Help now": a safety surface, never animated (IsSafety). */
.NoteHintText {
  font-weight: var(--WeightBold);
}

.NoteHint {
  scroll-margin-block-end: 112px;
}

.WaitingCard {
  gap: var(--Space12);
}

.WaitingNotNow {
  align-self: center;
}

.CrySections {
  display: flex;
  flex-direction: column;
  gap: var(--CardGap);
}

/* What a saved answer changed is one line per fact. */
[data-bind="FeedbackLearned"],
[data-bind="CryLearned"],
[data-bind="WaitingThanks"] {
  white-space: pre-line;
}

/* ---------- Learn, what Pip knows, past cries, the care When row (stage F3) ---------- */

/* The info button inside a body cue chip: it looks like part of the pill but is its own tap target. */
.Chip.HasInfo .ChipLabel {
  padding-right: 44px;
}

.ChipInfo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 44px;
  border: 0;
  border-radius: 0 var(--RadiusChip) var(--RadiusChip) 0;
  background: transparent;
  color: var(--ColorPrimaryText);
  cursor: pointer;
}

.ChipInfo:focus-visible {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 2px;
}

/* The same button on a static cue chip (a cry's own "What was going on"): room for the tap target on the right. */
.ChipStatic.HasInfo {
  position: relative;
  min-height: var(--TapMin);
  padding-right: 44px;
}

/* "About hungry" on the result hero and each Could also be row. */
.LearnLink {
  gap: var(--Space8);
  padding: 0 var(--Space12);
}

.LearnRowLink {
  justify-content: flex-start;
  gap: var(--Space8);
  min-height: 44px;
  padding: 0;
  font-size: var(--TextCaptionSize);
}

/* A Why chip that opens the earlier cries behind it. */
.ChipStatic.IsTappable {
  padding: 0;
}

.WhyButton {
  display: inline-flex;
  align-items: center;
  gap: var(--Space8);
  min-height: 40px;
  padding: var(--Space8) var(--Space12);
  border: 0;
  border-radius: var(--RadiusChip);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.WhyButton .Icon {
  color: var(--ColorTextSecondary);
}

/* A row that is one link to somewhere else (Settings and the memory screen). */
.LinkRow {
  color: var(--ColorText);
  text-decoration: none;
}

.LinkBadge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ColorPrimarySoft);
  color: var(--ColorPrimaryText);
}

.LinkRow:active {
  background: var(--ColorPrimarySoft);
}

/* The Learn screen and the "Read more" list in the Learn sheet: the whole row is the button. */
.LearnRow {
  padding: 0;
}

.LearnRowButton {
  display: flex;
  align-items: center;
  gap: var(--Space12);
  width: 100%;
  min-height: 64px;
  padding: var(--Space8) var(--Space16);
  border: 0;
  border-radius: var(--RadiusButton);
  background: none;
  color: var(--ColorText);
  text-align: left;
  cursor: pointer;
}

.LearnRowButton:active {
  background: var(--ColorPrimarySoft);
}

.LearnBack {
  align-self: flex-start;
}

.LearnBody {
  gap: var(--Space24);
}

.LearnSteps {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
  padding-left: var(--Space24);
  list-style: decimal;
}

/* What Pip knows: ten small dots, as many filled as confirmed cries (to ten). Counts only. */
.MemoryProgress {
  gap: var(--Space16);
}

.MemoryDots {
  display: flex;
  gap: var(--Space8);
}

.MemoryDot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ColorTextSecondary);
  background: transparent;
}

.MemoryDot[data-filled="true"] {
  border-color: var(--ColorPrimary);
  background: var(--ColorPrimary);
}

.MemoryHelp {
  gap: var(--Space8);
}

.MemoryInfo {
  flex: none;
  color: var(--ColorPrimaryText);
}

.ChipButton {
  border: 1.5px solid var(--ColorBorder);
  font-family: inherit;
}

.ChipButton .Icon {
  color: var(--ColorPrimaryText);
}

/* "I missed recording one" and "See what Pip knows" sit quietly under the lists they belong to. */
.MissedButton,
.MemoryLink {
  align-self: flex-start;
}

.MissedLink,
.MemoryLink {
  gap: var(--Space4);
}

[data-bind="PastCryLearned"] {
  white-space: pre-line;
}

/* ---------- Baby pictures (Docs/Illustrations.md) ----------
   Pictures are SVG inserted by App/Art.js. They colour themselves from the --Baby* tokens (Tokens.css), so Night and
   Ember need no rules here, and each carries its own 70 percent opacity on Night and Ember. Decorative pictures are
   aria-hidden; a cue picture that stands alone has an alt text. */

.BabyArt {
  display: block;
  max-width: 100%;
  height: auto;
}

.BabyAvatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  line-height: 0;
}

.BabyAvatar:empty {
  display: none;
}

/* A heading with the baby beside it (Listen, what Pip knows). The text takes what the picture leaves. */
.HeadWithArt {
  flex-direction: row;
  align-items: center;
  gap: var(--Space12);
}

.HeadText {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
  min-width: 0;
}

/* The Learn sheet's picture: a cue spot or a need scene, centred above the page. */
.LearnArt {
  display: grid;
  place-items: center;
  line-height: 0;
}

/* The look picker: four groups of 48 px choices under a live preview. Used in Settings and on sign up step 2. */
.LookSection {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
}

.LookPreview {
  display: grid;
  place-items: center;
  line-height: 0;
}

.LookPicker {
  display: flex;
  flex-direction: column;
  gap: var(--Space16);
}

.LookGroup {
  display: flex;
  flex-direction: column;
  gap: var(--Space8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.LookLegend {
  padding: 0;
  color: var(--ColorTextSecondary);
  font-size: var(--TextCaptionSize);
  line-height: var(--TextCaptionLine);
  font-weight: var(--WeightBold);
}

.LookChoices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Space12);
}

.LookChoice {
  position: relative;
  flex: none;
}

.LookInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.LookLabel {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--TapMin);
  height: var(--TapMin);
  border-radius: var(--RadiusButton);
  background: var(--ColorSurfaceSunk);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
  cursor: pointer;
}

.LookSwatch,
.LookTile {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  line-height: 0;
}

.LookSwatch {
  background: var(--Swatch, var(--ColorSurface));
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
}

/* The chosen one: a ring, and a tick, so it never rests on colour alone. */
.LookInput:checked + .LookLabel {
  box-shadow: 0 0 0 3px var(--ColorPrimary);
}

.LookInput:focus-visible + .LookLabel {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 4px;
}

.LookTick {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: none;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--ColorPrimary);
  color: var(--ColorOnPrimary);
  stroke-width: 3;
}

.LookInput:checked + .LookLabel .LookTick {
  display: block;
}

/* Sign up step 2 folds the picker under one line, so the step stays short. */
.LookFold {
  border-radius: var(--RadiusCard);
  background: var(--ColorSurface);
  box-shadow: inset 0 0 0 1.5px var(--ColorBorder);
}

.LookSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space8);
  min-height: var(--TapMin);
  padding: var(--Space12) var(--Space16);
  border-radius: var(--RadiusCard);
  color: var(--ColorText);
  font-weight: var(--WeightMedium);
  cursor: pointer;
  list-style: none;
}

.LookSummary::-webkit-details-marker {
  display: none;
}

.LookSummary:focus-visible {
  outline: 3px solid var(--ColorFocus);
  outline-offset: 2px;
}

.LookChevron {
  color: var(--ColorPrimaryText);
}

.LookFold[open] .LookChevron {
  transform: rotate(180deg);
}

.LookFold .LookSection {
  padding: 0 var(--Space16) var(--Space16);
}

.Card .LookSection {
  margin-top: var(--Space8);
}

/* "Show pictures" sits under the cue question, on the left. */
.PicturesToggle {
  align-self: flex-start;
  padding-left: 0;
}

/* Cue chips with a picture become tiles: the picture over the label, two to a row. */
.ChipRow[data-pictures="true"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ChipRow[data-pictures="true"] .Chip.HasPicture {
  display: flex;
}

.Chip.HasPicture .ChipLabel {
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  padding: var(--Space8) var(--Space8) var(--Space8);
  text-align: center;
}

.Chip.HasPicture .ChipPicture {
  display: block;
  line-height: 0;
}

.Chip.HasPicture .ChipCheck {
  position: absolute;
  top: var(--Space8);
  left: var(--Space8);
}

/* The info button keeps its own 44 px target, in the tile's corner (above the label's own padding on the right). */
.Chip.HasPicture.HasInfo .ChipLabel {
  padding-right: var(--Space8);
}

.Chip.HasPicture .ChipInfo {
  top: 0;
  right: 0;
  bottom: auto;
  height: 44px;
  border-radius: 0 var(--RadiusChip) 0 var(--RadiusChip);
}

/* ---------- Anything worrying? A native <details> under the headline on the result screens ---------- */

.WarningSigns {
  border-block-end: 1px solid var(--ColorBorder);
}

.WarningSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space16);
  min-height: var(--ButtonHeight);
  padding: 0 var(--Space16);
  font-weight: var(--WeightBold);
  cursor: pointer;
  list-style: none;
}

.WarningSummary::-webkit-details-marker {
  display: none;
}

.WarningSummary:focus-visible {
  outline: 2px solid var(--ColorFocus, currentColor);
  outline-offset: -2px;
}

/* The chevron points down when closed and up when open, with no animation. */
.WarningChevron {
  transform: rotate(90deg);
  flex: none;
}

.WarningSigns[open] .WarningChevron {
  transform: rotate(-90deg);
}

.WarningBody {
  display: flex;
  flex-direction: column;
  gap: var(--Space12);
  padding: 0 var(--Space16) var(--Space16);
}