/* ============================================================
   //cmrabdu suite — INSTRUMENTS · components.css (rev 01)
   Shared component library. Vanilla CSS, no build step.
   Every class is prefixed `.in-` (instruments). All values come
   from tokens.css — no hard-coded hex that exists as a token.

   Load order in an app:
     <link rel="stylesheet" href="…/design/fonts.css">
     <link rel="stylesheet" href="…/design/tokens.css">
     <link rel="stylesheet" href="…/design/components.css">

   Light mode is the source of truth. The dark override lives in
   tokens.css; components read tokens so they follow it for free.
   ============================================================ */

/* ---------------------------------------------------------------
   0. Typographic helpers / silkscreen
--------------------------------------------------------------- */
.in-silk,
.in-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
.in-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.in-mono { font-family: var(--font-mono); }
.in-live { color: var(--live); }

.in-h1 { font-size: 32px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; margin: 0; }
.in-h2 { font-size: 24px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; margin: 0; }
.in-lg { font-size: 20px; font-weight: 600; line-height: 1.25; }
.in-body { font-size: 16px; line-height: 1.5; }
.in-sm { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* the `//` wordmark accent */
.in-slash { color: var(--live); font-family: var(--font-mono); font-weight: 600; }

/* ---------------------------------------------------------------
   1. Buttons & keys
   Anatomy: height 52 (primary mobile 58–64), --r-2, label 15–18/700.
   Motion: transform + box-shadow on --d-1 --ease-spring.
--------------------------------------------------------------- */
.in-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 52px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--panel);
  color: var(--ink);
  transition: transform var(--d-1) var(--ease-spring),
              box-shadow var(--d-1) var(--ease-out),
              background var(--d-2) var(--ease-out);
}
.in-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--live-wash);
}

/* Primary (live) — depth face + soft cast */
.in-btn--primary {
  background: var(--live);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 0 var(--live-press), 0 6px 14px rgba(30,72,255,.28);
}
.in-btn--primary:hover { background: var(--live); }
.in-btn--primary:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--live-press), inset 0 2px 5px rgba(0,0,0,.3);
}
.in-btn--primary:focus-visible {
  box-shadow: 0 0 0 3px var(--live-wash), 0 3px 0 var(--live-press);
}
/* primary at hero size (mobile CTA) */
.in-btn--lg { height: 58px; font-size: 17px; padding: 0 var(--sp-6); }
.in-btn--block { display: flex; width: 100%; }

/* Secondary — a physical machine key */
.in-btn--secondary,
.in-key {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--hairline-2);
  font-weight: 600;
  font-size: 15px;
  box-shadow: var(--key-raise);
}
.in-btn--secondary:hover,
.in-key:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
.in-btn--secondary:active,
.in-key:active { transform: translateY(2px); box-shadow: var(--key-press); }

/* Ghost */
.in-btn--ghost {
  background: transparent;
  color: var(--live);
  box-shadow: none;
}
.in-btn--ghost:hover { background: var(--live-wash); }

/* Danger (destructive) */
.in-btn--danger {
  background: transparent;
  color: var(--sig-red);
  border: 1px solid var(--sig-red);
  font-weight: 600;
  box-shadow: none;
}
.in-btn--danger:hover { background: var(--sig-red-wash); }

/* Disabled (any variant) */
.in-btn:disabled,
.in-btn[disabled] {
  background: var(--recess);
  color: var(--ink-3);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Loading spinner (label kept) */
.in-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: in-spin .7s linear infinite;
  flex: none;
}
.in-spinner--ink { border-color: rgba(19,19,22,.2); border-top-color: var(--ink); }

/* Icon-only square key (52×52) */
.in-keysq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-2);
  background: var(--panel);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
  box-shadow: var(--key-raise);
  transition: transform var(--d-1) var(--ease-spring), box-shadow var(--d-1);
}
.in-keysq:active { transform: translateY(2px); box-shadow: var(--key-press); }
.in-keysq:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash); }

/* glyph <svg> sizing helper */
.in-glyph { display: inline-block; width: 22px; height: 22px; fill: none; stroke: currentColor; vertical-align: middle; }
.in-glyph--fill { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------
   2. Toggle switch  (role="switch")
--------------------------------------------------------------- */
.in-switch {
  position: relative;
  width: 52px; height: 30px;
  border: none; padding: 0;
  border-radius: var(--r-pill);
  background: var(--hairline-2);
  cursor: pointer;
  transition: background var(--d-2) var(--ease-out);
}
.in-switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--e-1);
  transition: left var(--d-2) var(--ease-spring);
}
.in-switch[aria-checked="true"] { background: var(--live); }
.in-switch[aria-checked="true"]::after { left: 25px; }
.in-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash); }

/* ---------------------------------------------------------------
   3. Steppers +/−  (56×56 keys flanking a mono value)
--------------------------------------------------------------- */
.in-stepper { display: inline-flex; align-items: center; gap: var(--sp-3); }
.in-stepper__key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-2);
  background: var(--panel);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--key-raise);
  transition: transform var(--d-1) var(--ease-spring), box-shadow var(--d-1);
}
.in-stepper__key:active { transform: translateY(2px); box-shadow: var(--key-press); }
.in-stepper__key:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash); }
.in-stepper__val {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 600;
  min-width: 86px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.in-stepper__val--reps { min-width: 56px; }

/* ---------------------------------------------------------------
   4. Check key (habits) — 48×48, sinks then pops, ✓ draws
--------------------------------------------------------------- */
.in-check {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-2);
  background: var(--panel);
  color: transparent;
  cursor: pointer;
  box-shadow: var(--key-raise);
  transition: transform var(--d-1) var(--ease-spring), box-shadow var(--d-1),
              background var(--d-2) var(--ease-out), border-color var(--d-2);
}
.in-check:active { transform: translateY(2px); box-shadow: var(--key-press); }
.in-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash); }
.in-check__mark {
  width: 24px; height: 24px;
  stroke: #fff; stroke-width: 2.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  transition: stroke-dashoffset var(--d-3) var(--ease-spring);
}
.in-check[aria-checked="true"],
.in-check.is-checked {
  background: var(--live);
  border-color: var(--live);
  box-shadow: var(--key-raise);
}
.in-check[aria-checked="true"] .in-check__mark,
.in-check.is-checked .in-check__mark { stroke-dashoffset: 0; }
/* checked row dims its title */
.in-check[aria-checked="true"] ~ .in-row__title,
.is-done .in-row__title { color: var(--ink-3); }

/* ---------------------------------------------------------------
   5. REC key (nutri / books) — round key in a recessed well
   States: ready(live) · recording(red + level bars + ring) ·
           thinking(ink + spinner) · result(green ✓)
--------------------------------------------------------------- */
.in-recwell {
  position: relative;
  width: 132px; height: 132px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.in-recwell::before {           /* the sunken well */
  content: "";
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--recess);
  box-shadow: inset 0 2px 6px rgba(19,19,22,.12);
}
.in-rec {
  position: relative;
  width: 92px; height: 92px;
  border: none;
  border-radius: 50%;
  background: var(--live);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 rgba(19,19,22,.16), 0 10px 18px rgba(19,19,22,.18);
  transition: transform var(--d-2) var(--ease-spring), background var(--d-3) var(--ease-out);
}
.in-rec:active { transform: translateY(4px); box-shadow: inset 0 3px 8px rgba(0,0,0,.28); }
.in-rec:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--live-wash), 0 4px 0 rgba(19,19,22,.16); }
.in-rec__label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 1px; }

/* expanding level ring (single ring, no decorative halos) */
.in-rec__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sig-red);
  opacity: 0;
  pointer-events: none;
}
/* audio-level bars (contained inside the key) */
.in-rec__bars { display: none; align-items: flex-end; gap: 3px; height: 26px; }
.in-rec__bars > span {
  width: 4px; height: 100%;
  background: #fff; border-radius: 2px;
  transform-origin: bottom;
  transform: scaleY(.28);
}
/* thinking spinner */
.in-rec__spin {
  display: none;
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: in-spin .7s linear infinite;
}
.in-rec__check { display: none; width: 30px; height: 30px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- state: ready --- */
.in-rec[data-state="ready"] { background: var(--live); }
.in-rec[data-state="ready"] .in-rec__label { display: inline; }

/* --- state: recording --- */
.in-rec[data-state="recording"] { background: var(--sig-red); }
.in-rec[data-state="recording"] .in-rec__label { display: none; }
.in-rec[data-state="recording"] .in-rec__bars { display: flex; }
.in-rec[data-state="recording"] .in-rec__bars > span { animation: in-lvl .6s var(--ease-inout) infinite; }
.in-rec[data-state="recording"] .in-rec__bars > span:nth-child(2) { animation-delay: .15s; }
.in-rec[data-state="recording"] .in-rec__bars > span:nth-child(3) { animation-delay: .3s; }
.in-rec[data-state="recording"] .in-rec__ring { animation: in-recRing 1.6s var(--ease-out) infinite; }

/* --- state: thinking --- */
.in-rec[data-state="thinking"] { background: var(--ink); }
.in-rec[data-state="thinking"] .in-rec__label { display: none; }
.in-rec[data-state="thinking"] .in-rec__spin { display: block; }

/* --- state: result --- */
.in-rec[data-state="result"] { background: var(--sig-green); }
.in-rec[data-state="result"] .in-rec__label { display: none; }
.in-rec[data-state="result"] .in-rec__check { display: block; stroke-dasharray: 40; stroke-dashoffset: 0; animation: in-drawCheck var(--d-3) var(--ease-spring); }

/* ---------------------------------------------------------------
   6. Inputs & forms
--------------------------------------------------------------- */
.in-field {
  width: 100%;
  height: 52px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-2);
  background: var(--recess);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  box-shadow: inset 0 1px 3px rgba(19,19,22,.06);
  transition: border-color var(--d-2), box-shadow var(--d-2), background var(--d-2);
}
.in-field::placeholder { color: var(--ink-3); }
.in-field:focus {
  outline: none;
  border-color: var(--live);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--live-wash);
}
.in-field.is-error,
.in-field[aria-invalid="true"] {
  border-color: var(--sig-red);
  background: var(--sig-red-wash);
  box-shadow: none;
}
.in-field:disabled {
  border-style: dashed;
  background: var(--recess);
  color: var(--ink-3);
  box-shadow: none;
  cursor: not-allowed;
}
textarea.in-field { height: auto; min-height: 96px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: 1.5; }
.in-field-label { display: block; margin-bottom: var(--sp-2); }
.in-field-help { font-size: 12px; color: var(--ink-2); display: block; margin-top: 6px; }
.in-field-help--error { color: var(--sig-red); }

/* Segmented control */
.in-segment {
  display: inline-flex;
  background: var(--recess);
  border-radius: var(--r-2);
  padding: 4px;
  gap: 4px;
}
.in-segment__opt {
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background var(--d-2), color var(--d-2), box-shadow var(--d-2);
}
.in-segment__opt[aria-selected="true"],
.in-segment__opt.is-active {
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--e-1);
}

/* Checkbox (square, --r-1) */
.in-checkbox {
  width: 28px; height: 28px;
  border-radius: var(--r-1);
  border: 2px solid var(--hairline-2);
  background: var(--recess);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: transparent;
  transition: background var(--d-2), border-color var(--d-2);
}
.in-checkbox svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.in-checkbox[aria-checked="true"],
.in-checkbox.is-checked { background: var(--live); border-color: var(--live); color: #fff; }

/* Radio */
.in-radio {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--hairline-2);
  background: var(--recess);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--d-2);
}
.in-radio::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: transparent; transition: background var(--d-2); }
.in-radio[aria-checked="true"],
.in-radio.is-checked { border-color: var(--live); background: var(--panel); }
.in-radio[aria-checked="true"]::after,
.in-radio.is-checked::after { background: var(--live); }

/* Slider (presentational track) */
.in-slider { height: 44px; display: flex; align-items: center; }
.in-slider__track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--recess); position: relative; }
.in-slider__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--live); }
.in-slider__thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--hairline-2);
  box-shadow: var(--e-2);
}

/* ---------------------------------------------------------------
   7. Chips / badges / silkscreen markings
--------------------------------------------------------------- */
/* selection chip */
.in-chip {
  height: 38px;
  display: inline-flex; align-items: center;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background var(--d-2), color var(--d-2), border-color var(--d-2);
}
.in-chip[aria-pressed="true"],
.in-chip.is-active {
  background: var(--live);
  border-color: var(--live);
  color: #fff;
  font-weight: 700;
}

/* voyant (status light): outline pill + one 8px square mark */
.in-voyant {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px var(--sp-3);
  border-radius: var(--r-1);
  border: 1px solid var(--hairline-2);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.in-voyant__mark { width: 8px; height: 8px; border-radius: 2px; background: var(--ink-3); flex: none; }
.in-voyant--green  .in-voyant__mark { background: var(--sig-green); }
.in-voyant--amber  .in-voyant__mark { background: var(--sig-amber); }
.in-voyant--red    .in-voyant__mark { background: var(--sig-red); }
.in-voyant--violet .in-voyant__mark { background: var(--sig-violet); }
.in-voyant--live   .in-voyant__mark { background: var(--live); }

/* counter badge */
.in-badge {
  min-width: 26px; height: 26px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--live); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.in-badge--quiet { background: var(--recess); color: var(--ink-2); }
.in-badge--delta { gap: 5px; padding: 5px var(--sp-3); background: var(--recess); color: var(--ink); }
.in-badge--delta .in-up { color: var(--sig-green); }
.in-badge--delta .in-down { color: var(--sig-red); }

/* silkscreen square mark used to tag a card/section */
.in-mark {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-3);
}
.in-mark--live { color: var(--live); }
.in-mark--violet { color: var(--sig-violet); }
.in-mark--red { color: var(--sig-red); }
.in-mark--green { color: var(--sig-green); }
.in-mark--amber { color: var(--sig-amber); }

/* ---------------------------------------------------------------
   8. Cards, panels, recess wells & indexed lists
--------------------------------------------------------------- */
.in-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  background: var(--panel);
  box-shadow: var(--e-1);
}
.in-card--pad { padding: var(--sp-5); }
.in-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-3); }
.in-recess { background: var(--recess); border-radius: var(--r-2); box-shadow: inset 0 1px 3px rgba(19,19,22,.06); }

/* interactive card (lifts on hover, sinks a touch on press) */
.in-card--tap {
  box-shadow: var(--key-raise);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: transform var(--d-2) var(--ease-spring), box-shadow var(--d-2);
}
.in-card--tap:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
.in-card--tap:active { transform: translateY(1px); box-shadow: var(--key-press); }

/* active card (live-washed) */
.in-card--active { border-color: var(--live); background: var(--live-wash); border-radius: var(--r-3); }

/* empty card (dashed + // glyph) */
.in-card--empty {
  border: 1px dashed var(--hairline-2);
  border-radius: var(--r-3);
  background: var(--recess);
  color: var(--ink-2);
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
}
.in-card--empty .in-slash { font-size: 22px; font-weight: 700; }

/* indexed list */
.in-list { border: 1px solid var(--hairline); border-radius: var(--r-3); overflow: hidden; }
.in-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--d-1);
}
.in-list .in-row:last-child { border-bottom: none; }
.in-row:hover { background: var(--recess); }
.in-row__idx {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--ink-3); width: 22px; flex: none;
  font-variant-numeric: tabular-nums;
}
.in-row__body { flex: 1; min-width: 0; }
.in-row__title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-row__meta { margin-top: 2px; }
.in-row__value {
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.in-row__value--pos { color: var(--sig-green); }

/* ---------------------------------------------------------------
   9. Navigation — shared bottom nav + desktop sidebar
--------------------------------------------------------------- */
.in-bottomnav {
  display: flex; justify-content: space-around; align-items: center;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  background: var(--panel);
  border-top: 1px solid var(--hairline-2);
}
.in-bottomnav--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
.in-navitem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 48px; min-height: 48px; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-3);
  text-decoration: none;
}
.in-navitem .in-glyph { width: 24px; height: 24px; }
.in-navitem__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: inherit; }
.in-navitem[aria-current="page"],
.in-navitem.is-active { color: var(--live); }

/* desktop sidebar (216px) */
.in-sidebar {
  width: 216px; flex: none;
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-4);
  background: var(--panel);
  border-right: 1px solid var(--hairline);
  min-height: 100vh;
}
.in-sidebar__wordmark { font-family: var(--font-mono); font-weight: 600; font-size: 20px; letter-spacing: -1px; margin-bottom: var(--sp-5); }
.in-sideitem {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--d-2), color var(--d-2);
}
.in-sideitem .in-glyph { width: 20px; height: 20px; }
.in-sideitem:hover { background: var(--recess); }
.in-sideitem[aria-current="page"],
.in-sideitem.is-active { background: var(--live-wash); color: var(--live); }
.in-sidebar__metric { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }

/* ---------------------------------------------------------------
   10. Status bar & app header
--------------------------------------------------------------- */
.in-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 44px; padding: var(--safe-top) var(--sp-5) 0;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.in-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-4);
}
.in-header__mark { margin-bottom: var(--sp-2); }
.in-header__title { font-size: 28px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; }

/* ---------------------------------------------------------------
   11. Floating surfaces — scrim, bottom sheet, toast, modal
--------------------------------------------------------------- */
.in-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(19,19,22,.36);
  opacity: 0;
  transition: opacity var(--d-3) var(--ease-out);
}
.in-scrim.is-open { opacity: 1; }

/* bottom sheet */
.in-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--panel);
  border-radius: var(--r-4) var(--r-4) 0 0;
  box-shadow: var(--e-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform var(--d-3) var(--ease-spring);
}
.in-sheet.is-open { transform: translateY(0); }
/* Panel skirt: the spring settles with a small upward overshoot; this
   paints the panel colour just below the sheet so that overshoot never
   flashes a gap under a bottom-anchored sheet. It sits below the fold,
   so it is invisible at rest and never adds scroll. */
.in-sheet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 96px;
  background: var(--panel);
  pointer-events: none;
}
.in-sheet__grabber { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--hairline-2); margin: 0 auto var(--sp-4); }
.in-sheet__title { font-size: 18px; font-weight: 700; margin-bottom: var(--sp-3); }

/* toast */
.in-toaststack { position: fixed; left: 0; right: 0; bottom: calc(var(--sp-5) + var(--safe-bottom)); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none; padding: 0 var(--sp-4); }
.in-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 440px; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2);
  pointer-events: auto;
  animation: in-toastIn var(--d-3) var(--ease-spring);
}
.in-toast--ink { background: var(--ink); color: var(--ink-inv); box-shadow: var(--e-3); }
.in-toast--panel { background: var(--panel); border: 1px solid var(--hairline-2); box-shadow: var(--e-2); }
.in-toast.is-leaving { animation: in-toastOut var(--d-3) var(--ease-out) forwards; }
.in-toast__icon { width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.in-toast__icon--green { background: var(--sig-green); color: #fff; }
.in-toast__mark { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.in-toast__mark--red { background: var(--sig-red); }
.in-toast__msg { font-size: 14px; flex: 1; }
.in-toast__action { border: none; background: transparent; color: var(--live); font-family: var(--font-ui); font-weight: 700; font-size: 14px; cursor: pointer; }

/* modal */
.in-modal-layer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.in-modal {
  width: 100%; max-width: 400px;
  background: var(--panel);
  border-radius: var(--r-4);
  box-shadow: var(--e-3);
  padding: var(--sp-5);
  transform: scale(.94); opacity: 0;
  transition: transform var(--d-3) var(--ease-spring), opacity var(--d-3) var(--ease-out);
}
.in-modal.is-open { transform: scale(1); opacity: 1; }
.in-modal__title { font-size: 20px; font-weight: 700; margin: var(--sp-2) 0; }
.in-modal__text { font-size: 14px; color: var(--ink-2); margin: 0 0 var(--sp-4); }
.in-modal__actions { display: flex; gap: var(--sp-3); }
.in-modal__actions .in-btn { flex: 1; height: 48px; }

/* ---------------------------------------------------------------
   12. Numeric display — odometer (XL hero + SM inline)
   Each digit: a 1em window over a 0–9 mono column; the column
   translateY's on --d-4 --ease-spring.
--------------------------------------------------------------- */
.in-odo {
  display: inline-flex; align-items: flex-end;
  font-family: var(--font-mono); font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.in-odo__digit { display: inline-block; height: 1em; width: .62em; overflow: hidden; }
.in-odo__col { display: flex; flex-direction: column; transition: transform var(--d-4) var(--ease-spring); }
.in-odo__col > span { height: 1em; text-align: center; }
.in-odo__dot { width: .34em; display: inline-block; text-align: center; }
.in-odo__unit { color: var(--ink-3); }
/* XL hero (on ink screen) */
.in-odo--xl { font-size: 88px; letter-spacing: -4px; color: #fff; }
.in-odo--xl .in-odo__unit { font-size: 26px; margin: 0 0 12px 8px; }
/* SM inline */
.in-odo--sm { font-size: 34px; letter-spacing: -1px; }
.in-odo--sm .in-odo__unit { font-size: 13px; margin: 0 0 5px 5px; }
/* ink readout panel wrapper */
.in-screen { background: var(--ink); border-radius: var(--r-3); padding: var(--sp-5); color: #fff; }
.in-screen .in-lbl { color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------
   13. Ring, bars, stat tiles, heatmap
--------------------------------------------------------------- */
/* progress ring */
.in-ring { position: relative; display: inline-block; }
.in-ring svg { transform: rotate(-90deg); display: block; }
.in-ring__track { fill: none; stroke: var(--recess); }
.in-ring__fill { fill: none; stroke: var(--live); stroke-linecap: round; transition: stroke-dashoffset var(--d-4) var(--ease-spring); }
.in-ring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }

/* bar / gauge */
.in-bar__head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.in-bar__label { font-size: 12px; font-weight: 600; }
.in-bar__val { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.in-bar__track { height: 8px; border-radius: var(--r-pill); background: var(--recess); overflow: hidden; }
.in-bar__fill { height: 100%; border-radius: var(--r-pill); background: var(--live); transform-origin: left; animation: in-barGrow var(--d-4) var(--ease-out); }
/* channel colours */
.in-bar--cal  .in-bar__fill, .in-bar--cal  .in-bar__label { background-color: var(--sig-amber); }
.in-bar--cal  .in-bar__label { background: none; color: var(--sig-amber); }
.in-bar--protein .in-bar__fill { background: var(--live); }     .in-bar--protein .in-bar__label { color: var(--live); }
.in-bar--carb .in-bar__fill { background: var(--sig-green); }   .in-bar--carb .in-bar__label { color: var(--sig-green); }
.in-bar--fat  .in-bar__fill { background: var(--sig-violet); }  .in-bar--fat  .in-bar__label { color: var(--ink-2); }

/* stat tile */
.in-tile {
  border: 1px solid var(--hairline); border-radius: var(--r-3);
  background: var(--panel); box-shadow: var(--e-1);
  padding: var(--sp-4);
}
.in-tile__label { margin-bottom: var(--sp-3); }
.in-tile__value { font-family: var(--font-mono); font-size: 34px; font-weight: 600; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.in-tile__value--live { color: var(--live); }
.in-tile__unit { font-size: 14px; color: var(--ink-3); }
.in-tile__sub { margin-top: var(--sp-2); font-size: 13px; color: var(--ink-2); }

/* heatmap (53×7, blue ramp, contained scroll) */
.in-heat { overflow-x: auto; }
.in-heat__grid { display: flex; gap: 3px; min-width: max-content; }
.in-heat__week { display: flex; flex-direction: column; gap: 3px; }
.in-heat__cell { width: 11px; height: 11px; border-radius: 2px; background: var(--heat-0); }
.in-heat__cell[data-level="1"] { background: var(--heat-1); }
.in-heat__cell[data-level="2"] { background: var(--heat-2); }
.in-heat__cell[data-level="3"] { background: var(--heat-3); }
.in-heat__cell[data-level="4"] { background: var(--heat-4); }
.in-heat__legend { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: var(--sp-3); }
.in-heat__legend .in-heat__cell { flex: none; }

/* consistency mini-bars (per-habit 30-day) */
.in-minibars { display: flex; gap: 2px; align-items: flex-end; height: 32px; }
.in-minibars > span { width: 4px; border-radius: 2px; background: var(--heat-4); }

/* ---------------------------------------------------------------
   14. Loading, empty, error
--------------------------------------------------------------- */
.in-skel {
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--recess) 25%, var(--recess-2) 37%, var(--recess) 63%);
  background-size: 720px 100%;
  animation: in-shimmer 1.4s linear infinite;
}
.in-skel--block { border-radius: var(--r-2); }
.in-loading-slash { display: inline-flex; align-items: center; gap: var(--sp-3); }
.in-loading-slash > span:first-child,
.in-loading-slash > span:nth-child(2) {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--live);
  animation: in-slkPulse 1.1s var(--ease-inout) infinite;
}
.in-loading-slash > span:nth-child(2) { animation-delay: .2s; }

/* empty state */
.in-empty { text-align: center; padding: var(--sp-6) var(--sp-5); }
.in-empty__glyph { font-family: var(--font-mono); font-size: 52px; font-weight: 700; color: var(--live-line); transform: skewX(-12deg); line-height: 1; }
.in-empty__title { font-size: 18px; font-weight: 700; margin-top: var(--sp-3); }
.in-empty__text { font-size: 14px; color: var(--ink-2); margin: var(--sp-2) 0 var(--sp-4); }

/* error banner (offline / sync) */
.in-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--sig-red);
  background: var(--sig-red-wash);
  border-radius: var(--r-2);
  font-size: 14px; color: var(--ink);
}
.in-banner__mark { width: 8px; height: 8px; border-radius: 2px; background: var(--sig-red); flex: none; }
.in-banner__action { margin-left: auto; border: none; background: transparent; color: var(--live); font-weight: 700; font-size: 14px; cursor: pointer; }

/* ---------------------------------------------------------------
   15. Page transition
   pageTransition() in components.js drives the cross-slide + fade
   entirely via inline styles (position:absolute in a shared stage,
   transform + opacity on --d-3 --ease-out). It needs no marker
   class, but `.in-page` stays as an opt-in baseline so a page that
   carries the class still animates transform/opacity smoothly, and
   the legacy directional modifiers degrade gracefully.
--------------------------------------------------------------- */
.in-page { transition: transform var(--d-3) var(--ease-out), opacity var(--d-3) var(--ease-out); }
.in-page--out-left  { transform: translateX(-30px); opacity: 0; }
.in-page--out-right { transform: translateX(30px);  opacity: 0; }
.in-page--in-left   { transform: translateX(-30px); opacity: 0; }
.in-page--in-right  { transform: translateX(30px);  opacity: 0; }

/* ---------------------------------------------------------------
   16. Celebration overlay (built + driven by components.js)
--------------------------------------------------------------- */
.in-cel { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.in-cel__flash { position: absolute; inset: 0; background: var(--live); opacity: 0; animation: in-celFlash 1.5s var(--ease-out) forwards; }
.in-cel__flood { position: absolute; inset: 0; background: var(--live); opacity: .96; }
.in-cel__mark { position: absolute; font-family: var(--font-mono); font-weight: 700; transform: rotate(-14deg); opacity: 0; animation: in-celMark var(--d-cel, 1200ms) var(--ease-out) var(--delay-cel, 0ms) forwards; }
.in-cel__center { position: relative; text-align: center; transform: rotate(-14deg); animation: in-celBig .8s var(--ease-spring) forwards; }
.in-cel__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; }
.in-cel__num { font-family: var(--font-mono); font-weight: 700; letter-spacing: -4px; line-height: 1; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   17. Keyframes  (mirror the prototype exactly)
--------------------------------------------------------------- */
@keyframes in-spin { to { transform: rotate(360deg); } }
@keyframes in-lvl { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
@keyframes in-recRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes in-shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
@keyframes in-slkPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes in-barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes in-drawCheck { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes in-toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes in-toastOut { to { transform: translateY(20px); opacity: 0; } }
@keyframes in-celFlash { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }
@keyframes in-celMark { 0% { transform: translateY(0) rotate(-14deg) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-90px) rotate(-14deg) scale(1); opacity: 0; } }
@keyframes in-celBig { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 50% { transform: scale(1.1) rotate(-14deg); opacity: 1; } 100% { transform: scale(1) rotate(-14deg); opacity: 1; } }
@keyframes in-popCheck { 0% { transform: scale(.7); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------
   18. Reduced motion (tokens.css already collapses durations;
       we also freeze looping animations to their rest frame)
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .in-rec__bars > span,
  .in-rec__ring,
  .in-skel,
  .in-loading-slash > span,
  .in-spinner,
  .in-rec__spin { animation: none !important; }
  .in-cel__mark, .in-cel__flash, .in-cel__center { animation-duration: .001ms !important; }
}