/* Hushly.css
   The Carbon build's page-scoped layer. Component_Carbon.css is the system; this file only lays the
   screens out and fills the few gaps the stylesheet has no component for (a phone tab bar, a sheet that
   rises from the bottom, Pip, the listening orb, the breathing circle, a night timeline).
   House rules, all of them from the Carbon skill:
   - every colour, gap, padding and radius is a var(--Token); no raw hex anywhere in this file
   - type is never set here: every text element carries a .t-* class in the markup
   - no Space_5, no font-size, no line-height, no font-weight above 600
   - a .c-* default is overridden only under a compound selector (.hu-x .c-y), never by editing .c-*
   Widths have no tokens in the system, so the two named below are judgement calls, flagged as such.
   Classes here start with hu- so they can never collide with a .c-* class. */

:root {
  /* The phone column. No width token exists (see PageLayout); 30rem is the original build's 430px
     shell rounded to the 4px grid and kept as one named value. */
  --hu-column: 30rem;
  /* The tab bar's height, so a tabbed screen can leave room for it. Space_18 is 72, the c-navTop height. */
  --hu-tabbar: var(--Spacing-Space_18);
  --hu-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hu-safe-top: env(safe-area-inset-top, 0px);
  color-scheme: light;
}
:root[data-mode="dark"] { color-scheme: dark; }

/* ---------- Page and shell ---------- */

html, body { margin: 0; }
body {
  background: var(--Surface-Background-Surface);
  color: var(--Text-OnSurface);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }
img, svg { max-inline-size: 100%; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

.hu-shell {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--hu-column);
  min-block-size: 100dvh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--Surface-Background-Surface);
}
@media (min-width: 480px) {
  .hu-shell { border-inline: 1px solid var(--Outline-Softer); }
}

/* The real input inside a Carbon control: invisible, still focusable and still the source of truth
   (CarbonSync.js paints the Carbon state from it). */
.hu-native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.hu-visuallyHidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hu-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* A keyboard focus ring for a control whose real input is hidden. Primary on a focus line is correct. */
:is(.c-choice, .c-toggle, .c-segmented__seg, .c-quickSelect__chip):has(.hu-native:focus-visible) {
  outline: 2px solid var(--Primary-Primary);
  outline-offset: var(--space-offgrid-2);
}
:focus-visible { outline-color: var(--Primary-Primary); }
:focus:not(:focus-visible) { outline: none; }
/* Headings the app focuses on a screen change (tabindex=-1) move the screen reader, not a visible ring. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Which screen shows ----------
   The app sets data-router="Js" on :root and toggles .IsActive on one screen. The static prototype
   (?Prototype) shows the :target screen instead, and Welcome when nothing is targeted. */

.hu-main { flex: 1 1 auto; display: flex; flex-direction: column; }
.hu-screen {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 100dvh;
  background: var(--Surface-Background-Surface);
}
.hu-screen:target,
.hu-screen:has(:target),
.hu-screen.IsActive { display: flex; }
:root:not([data-router="Js"]):not(:has(.hu-screen:target, .hu-screen :target)) #Welcome { display: flex; }
:root[data-router="Js"] .hu-screen:not(.IsActive) { display: none; }
.hu-screen[data-tabs] { padding-block-end: calc(var(--hu-tabbar) + var(--hu-safe-bottom)); }
.hu-form { display: flex; flex: 1 1 auto; flex-direction: column; }

/* ---------- Top bar: c-navTop, sticky, back or brand on the left, Help now on the right ---------- */

.hu-topbar.c-navTop {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  padding-block-start: calc(var(--Spacing-Space_4) + var(--hu-safe-top));
}
.hu-topbar .c-navTop__brand { gap: var(--Spacing-Space_2); }
.hu-topbar .c-navTop__actions { gap: var(--Spacing-Space_2); }

/* ---------- Body, head and foot ----------
   The page gutter is Space_6 on the sides and Space_8 on top, as every Carbon page has (PageLayout).
   Sections inside the body sit Space_6 apart. */

.hu-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Space_6);
  padding: var(--Spacing-Space_8) var(--Spacing-Space_6) var(--Spacing-Space_6);
}
.hu-head { display: flex; flex-direction: column; gap: var(--Spacing-Space_2); }
.hu-head.hu-center { align-items: center; }

/* The action area: Carbon's sticky footer, with the buttons stacked full width for a thumb. */
.hu-foot.c-footer {
  flex-direction: column;
  align-items: stretch;
  gap: var(--Spacing-Space_3);
  padding: var(--Spacing-Space_4) var(--Spacing-Space_6) calc(var(--Spacing-Space_4) + var(--hu-safe-bottom));
}
.hu-foot > .c-btn,
.hu-foot > form > .c-btn,
.hu-foot .hu-full { inline-size: 100%; }
.hu-foot > .c-link,
.hu-foot > .hu-row { align-self: center; }
.hu-screen[data-tabs] .hu-foot.c-footer { inset-block-end: calc(var(--hu-tabbar) + var(--hu-safe-bottom)); }

/* ---------- Groups, stacks and rows ---------- */

.hu-group { display: flex; flex-direction: column; gap: var(--Spacing-Space_3); }
.hu-group > .hu-head { gap: var(--Spacing-Space_1); }
.hu-stack { display: flex; flex-direction: column; gap: var(--Spacing-Space_2); }
.hu-stack--4 { gap: var(--Spacing-Space_4); }
.hu-stack--6 { gap: var(--Spacing-Space_6); }
.hu-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--Spacing-Space_2); }
.hu-row--4 { gap: var(--Spacing-Space_4); }
.hu-row--between { justify-content: space-between; flex-wrap: nowrap; }
.hu-grow { flex: 1 1 auto; min-inline-size: 0; }
.hu-center { text-align: center; }
.hu-variant { color: var(--Text-OnSurfaceVariant); }
.hu-dim { color: var(--Text-OnSurfaceDim); }
.hu-alertText { color: var(--Status-Alert-Base); }
.hu-full { inline-size: 100%; }
.hu-bullets { display: flex; flex-direction: column; gap: var(--Spacing-Space_1); padding-inline-start: var(--Spacing-Space_6); color: var(--Text-OnSurfaceVariant); list-style: disc; }
ol.hu-bullets { list-style: decimal; }
.hu-bullets > li { display: list-item; }
.hu-statRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--Spacing-Space_4); }

/* ---------- Cards: c-card, plus two quieter surfaces ---------- */

.hu-body .c-card { padding: var(--Spacing-Space_6); gap: var(--Spacing-Space_4); }
.c-card.hu-card--soft { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
.c-card.hu-card--sunk { background: var(--Surface-SurfaceContainer-SurfaceContainerHigh); border-color: transparent; }
.c-card.hu-card--link { text-decoration: none; color: inherit; }
.hu-body .c-banner { align-items: flex-start; }
.hu-banner__text { display: flex; flex-direction: column; min-inline-size: 0; }

/* ---------- Chips: c-quickSelect, with a tick so a chosen chip never relies on colour alone ---------- */

.hu-chipTick { display: none; }
.c-quickSelect__chip[data-state="Selected"] .hu-chipTick { display: inline-flex; --iconContainer-color: var(--Status-Positive-Bold); }
.c-quickSelect__chip { position: relative; }
.hu-chipWrap { display: inline-flex; align-items: center; gap: var(--Spacing-Space_1); }
.hu-chipWrap .ChipPicture { display: block; }

/* ---------- Native details, drawn like Carbon's accordion ---------- */

.hu-details { border-block-end: 1px solid var(--Outline-Soft); }
.hu-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-Space_4);
  padding-block: var(--Spacing-Space_4);
  cursor: pointer;
  list-style: none;
  color: var(--Text-OnSurface);
}
.hu-details__summary::-webkit-details-marker { display: none; }
.hu-details[open] > .hu-details__summary .c-iconContainer { transform: rotate(180deg); }
.hu-details__body { display: flex; flex-direction: column; gap: var(--Spacing-Space_3); padding-block-end: var(--Spacing-Space_4); color: var(--Text-OnSurfaceVariant); }

/* ---------- Tab bar: c-tabs pinned to the foot of the column, icon over label ---------- */

.hu-tabbar {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 20;
  max-inline-size: var(--hu-column);
  margin-inline: auto;
  padding-block-end: var(--hu-safe-bottom);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest);
  border-block-start: 1px solid var(--Outline-Soft);
}
:root[data-router="Js"]:has(.hu-screen[data-tabs].IsActive) .hu-tabbar,
:root:not([data-router="Js"]):has(.hu-screen[data-tabs]:target) .hu-tabbar { display: block; }
.hu-tabbar .c-tabs.hu-tabs { border-block-end: 0; padding: var(--Spacing-Space_2); gap: var(--Spacing-Space_2); }
.hu-tabs .c-tabs__tab {
  position: relative;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--Spacing-Space_1);
  text-decoration: none;
}
.hu-tabs .c-tabs__tab .c-badge { position: absolute; inset-block-start: 0; inset-inline-start: 55%; }

/* ---------- Sheets: a popover holding a c-modal, rising from the bottom on a phone ---------- */

.hu-sheet {
  inset: auto 0 0 0;
  margin: 0 auto;
  inline-size: 100%;
  max-inline-size: var(--hu-column);
  max-block-size: 92dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.hu-sheet::backdrop { background: var(--Surface-Overlay-OverlayBase); }
.hu-sheet > .c-modal {
  inline-size: 100%;
  max-block-size: 92dvh;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  padding-block-end: calc(var(--Spacing-Space_6) + var(--hu-safe-bottom));
  gap: var(--Spacing-Space_4);
}
.hu-sheet .c-modal__body { display: flex; flex-direction: column; gap: var(--Spacing-Space_4); }
.hu-sheet .c-modal__foot { flex-direction: column; align-items: stretch; gap: var(--Spacing-Space_3); margin-block-start: 0; }
.hu-sheet .c-modal__foot > .c-btn { inline-size: 100%; }
@media (min-width: 480px) {
  .hu-sheet { inset: 0; margin: auto; block-size: fit-content; }
  .hu-sheet > .c-modal { border-radius: var(--Spacing-Space_6); }
}

/* ---------- Safety screens and the Help now list ---------- */

.hu-screen--safety .hu-head .t-heading-m-bolder { color: var(--Status-Alert-Base); }
.hu-helpLines { display: flex; flex-direction: column; gap: var(--Spacing-Space_2); }
.hu-helpLine { text-decoration: none; color: inherit; }
.hu-helpLine.IsEmergency { --iconContainer-color: var(--Status-Alert-Base); color: var(--Status-Alert-Base); }
.hu-helpNumber { color: var(--Text-OnSurface); font-variant-numeric: tabular-nums; }
.hu-helpLine.IsEmergency .hu-helpNumber { color: var(--Status-Alert-Base); }

/* ---------- Pip, the owl, and the baby art ----------
   Illustrations, not icons: Pip keeps its SVG and its own colours, and the baby art keeps the colours
   the parent chose for their baby's look (BabyArt.js). Pip is Hushly's own art, so it takes no Carbon
   colour: the sprite falls back to Hushly's palette, the same in light and dark. */

.hu-pip { flex: none; inline-size: var(--Spacing-Space_24); block-size: auto; aspect-ratio: 120 / 140; }
.hu-pip--mark { inline-size: var(--Spacing-Space_6); }
.hu-pip--small { inline-size: var(--Spacing-Space_8); }
.hu-pip--medium { inline-size: var(--Spacing-Space_24); }
.hu-pip--large { inline-size: var(--Spacing-Space_36); }
.hu-pipHold { position: relative; inline-size: var(--Spacing-Space_36); aspect-ratio: 120 / 140; flex: none; align-self: center; }
.hu-pipHold > .hu-pip { inline-size: 100%; block-size: 100%; }
.hu-pipHold > .c-iconContainer {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 72.9%;
  transform: translate(-50%, -50%);
  --iconContainer-color: var(--Primary-Primary);
}
.hu-hero { display: flex; flex-direction: column; align-items: center; gap: var(--Spacing-Space_4); text-align: center; }
.hu-baby { display: inline-block; flex: none; border-radius: var(--radius-pill); overflow: hidden; background: var(--Surface-SurfaceContainer-SurfaceContainerHigh); }
.hu-baby svg { display: block; inline-size: 100%; block-size: 100%; }
.hu-scene { display: block; align-self: center; border-radius: var(--Card-RoundedCorner); overflow: hidden; }

/* ---------- The listening orb ----------
   Tap to listen, then a ring fills over the listening seconds while ripples move out. The orb is a
   gradient of the Primary family; sizes are spacing steps (Space_36 is 144). */

.hu-orbZone { display: flex; flex-direction: column; align-items: center; gap: var(--Spacing-Space_6); padding-block: var(--Spacing-Space_4); }
.hu-orbStage {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: calc(var(--Spacing-Space_36) + var(--Spacing-Space_16));
  block-size: calc(var(--Spacing-Space_36) + var(--Spacing-Space_16));
}
.hu-orb {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--Spacing-Space_36);
  block-size: var(--Spacing-Space_36);
  border-radius: var(--radius-pill);
  color: var(--Text-OnPrimary);
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  --iconContainer-color: var(--Text-OnPrimary);
}
.hu-orb.IsStatic { cursor: default; }
.hu-orbHalo {
  position: absolute;
  inset: calc(-1 * var(--Spacing-Space_6));
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--Status-Positive-Translucent);
}
.hu-orbCore {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--Spacing-Space_1);
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--radius-pill);
  background: var(--Primary_Gradient);
  box-shadow: var(--Shadow-Level_Two);
  text-align: center;
}
.hu-orbTimer { font-variant-numeric: tabular-nums; }
.hu-ripple {
  position: absolute;
  inline-size: var(--Spacing-Space_36);
  block-size: var(--Spacing-Space_36);
  border-radius: var(--radius-pill);
  border: 2px solid var(--Primary-Primary);
  opacity: 0;
  pointer-events: none;
}
.hu-ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); pointer-events: none; }
.hu-ringTrack { fill: none; stroke: var(--Status-Neutral-Softer); stroke-width: 4px; vector-effect: non-scaling-stroke; }
.hu-ringFill {
  fill: none;
  stroke: var(--Primary-Primary);
  stroke-width: 4px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--Progress, 0));
}
.hu-orbDots { position: absolute; inset: 0; pointer-events: none; }
.hu-orbDot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--Spacing-Space_2);
  block-size: var(--Spacing-Space_2);
  margin: calc(-1 * var(--Spacing-Space_1));
  border-radius: var(--radius-pill);
  background: var(--Primary-Primary);
}
.hu-orbDot:nth-child(1) { transform: rotate(0deg) translateY(calc(-1 * var(--Spacing-Space_22))); }
.hu-orbDot:nth-child(2) { transform: rotate(72deg) translateY(calc(-1 * var(--Spacing-Space_22))); }
.hu-orbDot:nth-child(3) { transform: rotate(144deg) translateY(calc(-1 * var(--Spacing-Space_22))); }
.hu-orbDot:nth-child(4) { transform: rotate(216deg) translateY(calc(-1 * var(--Spacing-Space_22))); }
.hu-orbDot:nth-child(5) { transform: rotate(288deg) translateY(calc(-1 * var(--Spacing-Space_22))); }
.hu-wave { inline-size: 100%; block-size: var(--Spacing-Space_12); fill: none; stroke: var(--Primary-Primary); stroke-width: 2; stroke-linecap: round; }

/* ---------- Breathe with Pip: the circle grows on the in-breath and shrinks on the out-breath ---------- */

.hu-breathe { position: relative; display: grid; place-items: center; align-self: center; inline-size: calc(var(--Spacing-Space_36) + var(--Spacing-Space_16)); aspect-ratio: 1; }
.hu-breathe > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.hu-breatheOrb {
  display: grid;
  place-items: center;
  inline-size: 70%;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--Primary-PrimaryContainer);
  color: var(--Status-Positive-Boldest);
  text-align: center;
}

/* ---------- Pip's speech, and what the parent said ---------- */

.hu-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-Space_1);
  max-inline-size: 88%;
  padding: var(--Spacing-Space_3) var(--Spacing-Space_4);
  border-radius: var(--Card-RoundedCorner);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest);
  border: 1px solid var(--Outline-Softer);
  color: var(--Text-OnSurface);
}
.hu-bubble--pip { align-self: flex-start; border-end-start-radius: var(--radius-control); }
.hu-bubble--you { align-self: flex-end; background: var(--Primary-PrimaryContainer); border-color: transparent; border-end-end-radius: var(--radius-control); }

/* ---------- The night timeline: time, a dot, then what happened ---------- */

.hu-timeline { display: flex; flex-direction: column; }
.hu-timelineItem {
  position: relative;
  display: grid;
  grid-template-columns: var(--Spacing-Space_14) var(--Spacing-Space_10) 1fr auto;
  gap: var(--Spacing-Space_2);
  align-items: start;
  padding-block: var(--Spacing-Space_3);
}
.hu-timelineItem::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--Spacing-Space_14) + var(--Spacing-Space_2) + var(--Spacing-Space_10) / 2 - 1px); /* the dot column's centre: an alignment value, not spacing */
  inset-block: 0;
  inline-size: 2px;
  background: var(--Status-Neutral-Softer);
}
.hu-timelineItem:first-child::before { inset-block-start: var(--Spacing-Space_6); }
.hu-timelineItem:last-child::before { inset-block-end: calc(100% - var(--Spacing-Space_6)); }
.hu-timelineTime { padding-block-start: var(--Spacing-Space_2); white-space: nowrap; color: var(--Text-OnSurfaceVariant); font-variant-numeric: tabular-nums; }
.hu-timelineDot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--Spacing-Space_10);
  block-size: var(--Spacing-Space_10);
  border-radius: var(--radius-pill);
  background: var(--Status-Neutral-Softest);
  box-shadow: 0 0 0 var(--Spacing-Space_1) var(--Surface-Background-Surface);
  --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.hu-timelineItem[data-kind="Cry"] .hu-timelineDot { background: var(--Primary-PrimaryContainer); --iconContainer-color: var(--Status-Positive-Boldest); }
.hu-timelineBody { display: flex; flex-direction: column; gap: var(--Spacing-Space_0); min-inline-size: 0; padding-block-start: var(--Spacing-Space_1); }
.hu-timelineTitle { color: var(--Text-OnSurface); text-decoration: none; }
.hu-timelineTitle[href]::after { content: ""; position: absolute; inset: 0; }

/* ---------- How sure: three short bars ---------- */

.hu-meter { display: inline-flex; gap: var(--Spacing-Space_1); max-inline-size: 100%; }
.hu-meterSeg { flex: 0 1 var(--Spacing-Space_6); min-inline-size: var(--Spacing-Space_2); block-size: var(--space-offgrid-6); border-radius: var(--radius-pill); background: var(--Status-Neutral-Softer); }
.hu-meterSeg[data-filled], .hu-meterSeg.IsFilled,
[data-confidence="StrongClue"] .hu-meterSeg,
[data-confidence="Possible"] .hu-meterSeg:nth-child(-n+2),
[data-confidence="HardToTell"] .hu-meterSeg:nth-child(1) { background: var(--Primary-Primary); }
.hu-confidence { display: inline-flex; align-items: center; gap: var(--Spacing-Space_3); }

/* ---------- The look picker: skin, hair and outfit tiles for the baby's picture ---------- */

.hu-look { display: flex; flex-direction: column; gap: var(--Spacing-Space_4); }
.hu-lookGroup { display: flex; flex-direction: column; gap: var(--Spacing-Space_2); }
.hu-lookChoices { display: flex; flex-wrap: wrap; gap: var(--Spacing-Space_2); }
.hu-lookChoice { position: relative; }
.hu-lookLabel {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--Spacing-Space_12);
  block-size: var(--Spacing-Space_12);
  border-radius: var(--radius-pill);
  border: 2px solid var(--Outline-Softer);
  cursor: pointer;
  overflow: hidden;
}
.hu-lookChoice:has(.hu-native:checked) .hu-lookLabel { border-color: var(--Primary-Primary); }
.hu-lookChoice:has(.hu-native:focus-visible) .hu-lookLabel { outline: 2px solid var(--Primary-Primary); outline-offset: var(--space-offgrid-2); }
.hu-lookFace { position: absolute; inset: 0; border-radius: var(--radius-pill); }
.hu-lookTick { position: absolute; display: none; --iconContainer-color: var(--Text-OnPrimary); background: var(--Primary-Primary); border-radius: var(--radius-pill); }
.hu-lookChoice:has(.hu-native:checked) .hu-lookTick { display: inline-flex; }
.hu-lookPreview { display: flex; justify-content: center; }

/* ---------- Offline line ---------- */

.hu-offline { margin: var(--Spacing-Space_2) var(--Spacing-Space_6) 0; }

/* ---------- Motion ----------
   Only the motion that does a job is kept: the orb breathes until tapped, the ring shows how long Pip
   has listened, the breathing circle paces the parent's breath, and Pip blinks. Screens no longer
   slide in. Settings > Motion (data-motion on :root) turns it down or off, and so does the phone's
   reduce motion setting while nothing is chosen. Red flags and safety screens never move. */

@property --Level { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --Progress { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --hu-motion: 1;
  --hu-ripple: 1;
  --hu-ease: cubic-bezier(0.45, 0, 0.25, 1);
}
:root[data-motion="Gentle"] { --hu-motion: 0.5; --hu-ripple: 0; }
:root[data-motion="Off"] { --hu-motion: 0; --hu-ripple: 0; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) { --hu-motion: 0; --hu-ripple: 0; }
}

@keyframes hu-orbBreath { 0%, 100% { transform: scale(1); } 40% { transform: scale(calc(1 + 0.05 * var(--hu-motion))); } }
@keyframes hu-haloBreath { 0%, 100% { opacity: 0.35; } 40% { opacity: 0.6; } }
@keyframes hu-rippleOut {
  from { transform: scale(1); opacity: calc(0.45 * var(--hu-ripple)); }
  to { transform: scale(calc(1 + 0.9 * var(--hu-motion))); opacity: 0; }
}
@keyframes hu-levelDemo { 0% { --Level: 0.15; } 18% { --Level: 0.7; } 30% { --Level: 0.35; } 52% { --Level: 0.85; } 64% { --Level: 0.3; } 82% { --Level: 0.6; } 100% { --Level: 0.15; } }
@keyframes hu-listenRing { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hu-thinkShrink { from { transform: scale(1); } to { transform: scale(calc(1 - 0.15 * var(--hu-motion))); } }
@keyframes hu-orbit { from { transform: rotate(0deg); } to { transform: rotate(calc(360deg * var(--hu-motion))); } }
@keyframes hu-blink { 0%, 92%, 100% { opacity: 0; } 94%, 96% { opacity: calc(1 * var(--hu-motion)); } }
@keyframes hu-breatheOrb {
  0% { transform: scale(calc(1 - 0.24 * var(--hu-motion))); animation-timing-function: var(--hu-ease); }
  40% { transform: scale(1); animation-timing-function: var(--hu-ease); }
  100% { transform: scale(calc(1 - 0.24 * var(--hu-motion))); }
}
@keyframes hu-breatheArc { 0% { stroke-dashoffset: 1; } 40% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes hu-cueIn { 0%, 38% { opacity: 1; } 42%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hu-cueOut { 0%, 38% { opacity: 0; } 42%, 98% { opacity: 1; } 100% { opacity: 0; } }

.PipLid { opacity: 0; animation: hu-blink 6s infinite; }

.hu-orb[data-state="Idle"] .hu-orbCore { animation: hu-orbBreath 5s var(--hu-ease) 6; }
.hu-orb[data-state="Idle"] .hu-orbHalo { animation: hu-haloBreath 5s var(--hu-ease) 6; }
.hu-orb[data-state="Listening"] .hu-orbCore { transform: scale(calc(1 + 0.15 * var(--Level) * var(--hu-motion))); transition: transform 100ms linear; }
.hu-orb[data-state="Listening"] .hu-orbHalo { opacity: calc(0.35 + 0.4 * var(--Level)); }
.hu-orb[data-state="Listening"]:not([data-driven]) { animation: hu-levelDemo 3.6s ease-in-out infinite; }
.hu-orb[data-state="Thinking"] .hu-orbCore { animation: hu-thinkShrink 600ms var(--hu-ease) both; }
.hu-orb[data-state="Thinking"] .hu-orbDots { animation: hu-orbit 6s linear infinite; }
.hu-ripple { animation: hu-rippleOut 1.6s linear infinite; }
.hu-ripple:nth-of-type(2) { animation-delay: 0.5s; }
.hu-ripple:nth-of-type(3) { animation-delay: 1s; }
.hu-orbStage .hu-ring:not([data-driven]) .hu-ringFill { animation: hu-listenRing 15s linear forwards; }

.hu-breatheOrb { animation: hu-breatheOrb 10s linear infinite; }
.hu-breathe .hu-ringFill { stroke-dashoffset: 1; animation: hu-breatheArc 10s linear infinite; }
.hu-breatheCue > span { display: inline; grid-area: 1 / 1; }
.hu-breatheCue { display: grid; }
.hu-breatheCue .CueIn { animation: hu-cueIn 10s linear infinite; }
.hu-breatheCue .CueOut { animation: hu-cueOut 10s linear infinite; }
#Breathe:has(#BreathePause:checked) .hu-breathe *,
#Breathe[data-paused="true"] .hu-breathe * { animation-play-state: paused; }

/* Nothing on a safety screen or in a red-flag block ever moves. */
.hu-screen--safety *, .c-banner[data-status="alert"], .c-banner[data-status="alert"] * { animation: none !important; transition: none !important; }

/* ---------- Small fixes for Carbon parts used on a phone ----------
   Scoped under .hu-shell so no shared .c-* rule changes. */

.hu-selfStart { align-self: flex-start; }
.hu-selfCenter { align-self: center; }
.hu-toggleText { display: flex; flex-direction: column; gap: var(--Spacing-Space_1); flex: 1 1 0; min-inline-size: 0; }
.hu-toggleRow { display: flex; align-items: flex-start; inline-size: 100%; }
.hu-shell .c-toggle__track { flex: none; }
.hu-shell .c-toggle { align-items: flex-start; }
.hu-shell a.c-btn,
.hu-sheet a.c-btn,
.hu-shell a.c-listItem,
.hu-sheet a.c-listItem,
.hu-shell a.c-tabs__tab { text-decoration: none; }
.hu-shell button.c-link,
.hu-sheet button.c-link { background: none; border: 0; padding: 0; cursor: pointer; }
.hu-shell .c-btn { white-space: normal; text-align: center; }
.NoteHint { scroll-margin-block-end: var(--Spacing-Space_28); }

/* ---------- Cue pictures in the body cue chips ("Show pictures") ----------
   A chip with a picture becomes a small tile: the picture over the label, the tick in the corner. */

.c-quickSelect[data-pictures="true"],
.c-quickSelect:has(.HasPicture) { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--Spacing-Space_28), 1fr)); }
.hu-chipWrap.HasPicture { position: relative; display: flex; }
.hu-chipWrap.HasPicture .c-quickSelect__chip { flex-direction: column; justify-content: flex-start; inline-size: 100%; padding: var(--Spacing-Space_2); text-align: center; }
.hu-chipPicture, .hu-chipPicture > * { display: block; }
.hu-chipWrap.HasPicture .hu-chipTick { position: absolute; inset-block-start: var(--Spacing-Space_2); inset-inline-start: var(--Spacing-Space_2); }
.hu-chipWrap.HasPicture .ChipInfo { position: absolute; inset-block-start: 0; inset-inline-end: 0; }

/* ---------- Rows that are links or buttons ----------
   A list row whose title is a link is tappable across the whole row, as in the original build. */

.hu-shell .c-listItem,
.hu-sheet .c-listItem { position: relative; }
.hu-shell a.c-listItem__title[href]::after,
.hu-sheet a.c-listItem__title[href]::after { content: ""; position: absolute; inset: 0; }
.hu-shell a.c-listItem__title,
.hu-sheet a.c-listItem__title { color: inherit; text-decoration: none; }
:where(.hu-shell, .hu-sheet) button.c-listItem { inline-size: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: start; }
.hu-group > legend { margin-block-end: var(--Spacing-Space_3); }
.hu-shell .c-segmented,
.hu-sheet .c-segmented { display: flex; flex-wrap: wrap; max-inline-size: 100%; }
.hu-shell .c-segmented__seg,
.hu-sheet .c-segmented__seg { flex: 1 1 auto; text-align: center; cursor: pointer; }

/* ---------- Pip asleep on the empty night log ---------- */

.hu-sleepStage { position: relative; display: grid; place-items: center; inline-size: var(--Spacing-Space_36); margin-inline: auto; }
.hu-sleepZ {
  position: absolute;
  inset-block-start: var(--Spacing-Space_2);
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.hu-sleepZ > :nth-child(2) { margin-inline-start: var(--Spacing-Space_3); }
.hu-sleepZ > :nth-child(3) { margin-inline-start: var(--Spacing-Space_6); }
@keyframes hu-sleepZ {
  0% { opacity: 0; transform: translate(0, calc(var(--Spacing-Space_2) * var(--hu-motion))); }
  40% { opacity: 1; transform: translate(0, 0); }
  85% { opacity: 1; transform: translate(calc(var(--Spacing-Space_1) * var(--hu-motion)), calc(var(--Spacing-Space_3) * -1 * var(--hu-motion))); }
  100% { opacity: 0; transform: translate(calc(var(--Spacing-Space_2) * var(--hu-motion)), calc(var(--Spacing-Space_4) * -1 * var(--hu-motion))); }
}
.hu-sleepZ > * { animation: hu-sleepZ 4s ease-in-out 3; }
.hu-sleepZ > :nth-child(2) { animation-delay: 0.6s; }
.hu-sleepZ > :nth-child(3) { animation-delay: 1.2s; }
:root[data-motion="Off"] .hu-sleepZ > * { animation: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion]) .hu-sleepZ > * { animation: none; } }

/* ---------- What to tell them (the doctor or nurse) ---------- */

.hu-tell { display: flex; flex-direction: column; gap: var(--Spacing-Space_3); margin: 0; }
.hu-tellItem { display: flex; flex-direction: column; gap: var(--space-offgrid-2); }
.hu-tellValue { margin: 0; }

/* ---------- Take a break: intro, then a ten-minute clock, then done ----------
   The three states are :target driven, as in the original build (the ids BreakTimer and BreakDone). */

.hu-break { display: flex; flex: 1 1 auto; flex-direction: column; }
.hu-break--timer, .hu-break--done { display: none; }
#TakeABreak:has(#BreakTimer:target) .hu-break--intro,
#TakeABreak:has(#BreakDone:target) .hu-break--intro { display: none; }
#TakeABreak:has(#BreakTimer:target) .hu-break--timer,
#TakeABreak:has(#BreakDone:target) .hu-break--done { display: flex; }
.hu-break--timer .hu-body, .hu-break--done .hu-body { justify-content: center; }
.hu-breakClock { text-align: center; font-variant-numeric: tabular-nums; }
.hu-breakIcon {
  display: grid;
  place-items: center;
  align-self: flex-start;
  inline-size: var(--Spacing-Space_18);
  block-size: var(--Spacing-Space_18);
  border-radius: var(--radius-pill);
  background: var(--Primary-PrimaryContainer);
}

/* ---------- Soothe: pick a sound, see it playing, stop it ---------- */

.hu-sound { cursor: pointer; }
.hu-sound:has(.SoundInput:checked) { background: var(--Status-Positive-Translucent); border-color: var(--Primary-Primary); }
.hu-sound:has(.SoundInput:focus-visible) { outline: 2px solid var(--Primary-Primary); outline-offset: var(--space-offgrid-2); }
.hu-sound .hu-pauseIcon { display: none; }
.hu-sound:has(.SoundInput:checked) .hu-playIcon { display: none; }
.hu-sound:has(.SoundInput:checked) .hu-pauseIcon { display: inline-grid; }
#Soothe:not(:has(.SoundInput:not([value="None"]):checked)) .hu-ifPlaying { display: none; }

/* ---------- Breathe: the Pause button reads Resume while paused ---------- */

.hu-ifPaused { display: none; }
#Breathe:has(#BreathePause:checked) .hu-ifRunning,
#Breathe[data-paused="true"] .hu-ifRunning { display: none; }
#Breathe:has(#BreathePause:checked) .hu-ifPaused,
#Breathe[data-paused="true"] .hu-ifPaused { display: inline; }
.c-btn:has(.hu-native:focus-visible) { outline: 2px solid var(--Primary-Primary); outline-offset: var(--space-offgrid-2); }

/* ---------- Bits of text and a button inside a banner ---------- */

.hu-banner__text > .c-btn { margin-block-start: var(--Spacing-Space_3); align-self: flex-start; }
[data-bind="PastCryLearned"] { white-space: pre-line; }

/* ---------- Result and empty screens ---------- */

.hu-fingerprint { inline-size: var(--Spacing-Space_24); block-size: var(--Spacing-Space_6); flex: none; fill: none; stroke: var(--Primary-Primary); stroke-width: 2; stroke-linecap: round; }
.hu-body--center { justify-content: center; }
.hu-body > .hu-orbZone { margin-block: auto; }

/* A red-flag sign the parent ticks reads in the alert family, never the green of an ordinary chip. */
.hu-chipWrap.IsWarn .c-quickSelect__chip[data-state="Selected"] { border-color: var(--Status-Alert-Base); color: var(--Status-Alert-Bold); }
.hu-chipWrap.IsWarn .c-quickSelect__chip[data-state="Selected"] .hu-chipTick { --iconContainer-color: var(--Status-Alert-Base); }

/* ---------- Anything worrying? A native <details> using the accordion's header, content and chevron ---------- */

.hu-warning > summary { list-style: none; }
.hu-warning > summary::-webkit-details-marker { display: none; }
.hu-warning > summary:focus-visible { outline: 2px solid var(--Primary-Primary); outline-offset: -2px; }
/* The chevron turns with the open state of the <details>, with no animation. */
.hu-warning .c-accordion__chevron { transition: none; }
.hu-warning[open] .c-accordion__chevron { transform: rotate(180deg); }
.hu-warning > .c-accordion__content { padding-inline-end: var(--Spacing-Space_4); }

/* [hidden] must win over a button's own display rule (the Quick check's two red buttons stay out until a sign routes). */
.c-btn[hidden], .c-link[hidden], .c-iconBtn[hidden], .QuickEmergency[hidden], .QuickUrgent[hidden] { display: none !important; }