/* Hand-authored primitives that mirror the app's shared components. Every color,
   font size, and gap here reads a variable from generated/tokens.css, so the
   pixel geometry (radii, paddings, touch targets) is the only thing kept by hand.
   Those numbers come straight from the matching component and change rarely:
   Card.tsx, FieldValueRow.tsx, AppSegmentedControl.tsx, Badge.tsx, CheckSelectList.tsx. */

* {
  box-sizing: border-box;
}

.help-kit {
  margin: 0;
  background: #15171c;
  color: #e7e7ea;
  font-family:
    "Satoshi",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- device frame -------------------------------------------------------- */
/* Fixed 393x852 (iPhone 15 logical size). Every screen shares these dimensions,
   so exported PNGs are identical in size and sit uniformly in an article. */

/* Declared on the frame itself, not only on body, so a PNG export (which clones
   the frame without a body above it) still resolves Satoshi instead of falling
   back to the browser's default serif. */
.phone,
.stage {
  font-family:
    "Satoshi",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.phone {
  --screen-w: 393px;
  --screen-h: 852px;
  width: calc(var(--screen-w) + 24px);
  height: calc(var(--screen-h) + 24px);
  padding: 12px;
  background: #05060a;
  border-radius: 52px;
  /* A metal band, then a faint light hairline outside it so the frame keeps a
     visible edge on a dark surface (the in-app help ground). No drop shadow. */
  box-shadow:
    0 0 0 2px #23252c,
    0 0 0 3.5px rgba(255, 255, 255, 0.14);
}

.screen {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: 40px;
  overflow: hidden;
  background: var(--gradient);
  color: var(--text-base);
  display: flex;
  flex-direction: column;
}

/* ---- stage --------------------------------------------------------------- */
/* A fixed-width transparent window. The width and the phone size stay constant
   across every step; only the height varies, so each step shows as much of the
   screen as it needs and crops the rest. The phone is anchored to the top, so a
   shorter height crops from the bottom. Set the height per shot with --stage-h. */
.stage {
  --stage-w: 460px;
  --stage-h: 560px;
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  overflow: hidden;
  background: var(--stage-bg, transparent);
}

.stage .phone {
  position: absolute;
  left: 50%;
  top: var(--phone-top, 24px);
  transform: translateX(-50%);
}
/* The display viewport for one shot. The runtime scales the stage to fill it. */
.thumb {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* ---- status bar ---------------------------------------------------------- */

/* No time, notch, or signal glyphs. A plain top inset keeps the header off the
   rounded corner and reads as a generic phone rather than iOS or Android. */
.statusbar {
  height: 32px;
  flex-shrink: 0;
}

/* ---- screen header (pushed screens) ------------------------------------- */

.screen-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px 12px;
}

.screen-header .back {
  display: flex;
  align-items: center;
  color: var(--text-base);
}

/* The back control is a left arrow, not a chevron. Drawn as a mask so it takes
   the header's text color; the markup's chevron span is hidden. */
.screen-header .back .chevron {
  display: none;
}

.screen-header .back::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.screen-header .title {
  flex: 1;
  min-width: 0;
  font-size: var(--type-title);
  font-weight: 700;
  white-space: nowrap;
}

.screen-header .action {
  font-size: var(--type-body);
  color: var(--text-base);
}

.screen-header .action.muted {
  color: var(--text-muted);
}

/* ---- scroll body --------------------------------------------------------- */

.screen-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* 12px, not 6px, so a highlight on the first card has room for its 9px outset
     instead of being clipped against the screen top. */
  padding: 12px var(--list-gutter) var(--list-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  /* The offsetParent for a step's scroll-to-highlight on a plain screen. */
  position: relative;
}

.screen-body.tabs-inset {
  padding-bottom: 96px;
}

/* A screen with a pinned dock (the calculator readout) splits into a fixed dock
   above and a region that scrolls beneath it. The dock never moves; each step
   sets the region's scroll offset, so one screen can be shown at different scroll
   positions. The screen gradient runs behind both, so there is no seam. */
.screen-body.split {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.screen-body.split .dock-region {
  flex-shrink: 0;
  padding: 6px var(--list-gutter) var(--card-gap);
}

.screen-body.split .scroll-region {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: 0 var(--list-gutter) var(--list-gutter);
}

/* ---- greeting / display heading ----------------------------------------- */

.greeting-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.greeting-row .muted {
  color: var(--text-muted);
}

.display {
  font-size: var(--type-title);
  margin: 2px 0 6px;
}

/* ---- card ---------------------------------------------------------------- */

.card {
  background: var(--surface-dark-fill);
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card.light {
  background: var(--surface-light-fill);
}

/* Flush list rows: no gap between children, so a row list is only spaced by each
   row's own padding and separator. */
.card.tight {
  gap: 0;
}

.card.frosted {
  border-radius: var(--frosted-card-radius);
}

.section-title {
  font-size: var(--type-heading);
}

.block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.state-label {
  font-size: var(--type-body);
}

.hint {
  font-size: var(--type-label);
  color: var(--text-muted);
}

/* ---- field row (FieldValueRow / StickyField) ---------------------------- */

.field {
  padding: 12px 0;
  border-bottom: 1px solid var(--separator);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field.compact {
  padding: 6px 0;
}

.field.no-sep {
  border-bottom: 0;
}

.field-label {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.field-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}

.field-value {
  flex: 1;
  font-size: var(--type-body);
  color: var(--text-base);
}

.field-value.placeholder {
  color: var(--text-muted);
}

.field-unit {
  font-size: var(--type-body);
  color: var(--text-muted);
}

.readonly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.readonly-row .label,
.readonly-row .value {
  font-size: var(--type-body);
}

.readonly-row .label {
  color: var(--text-muted);
}

.warning {
  font-size: var(--type-label);
  color: var(--text-danger);
}

/* Label-left, value-right row, as on the protocol detail and settings screens. */
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--separator);
}

.detail-row.no-sep {
  border-bottom: 0;
}

.detail-row .k {
  font-size: var(--type-body);
  color: var(--text-muted);
}

.detail-row .v {
  font-size: var(--type-body);
  color: var(--text-base);
  text-align: right;
}

/* Grouped inventory list: bold compound headers and item rows, packed tight so
   their hairlines separate them (mirrors InventorySectionHeader and VialListRow). */
.inventory {
  display: flex;
  flex-direction: column;
}

.inv-header {
  font-size: var(--type-body);
  font-weight: 700;
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--separator);
}

.inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--separator);
}

.inv-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inv-title {
  font-size: var(--type-label);
  line-height: 1.2;
}

.inv-sub {
  font-size: var(--type-label);
  line-height: 1.2;
  color: var(--text-muted);
}

.inv-value {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-label);
}
.inv-value.low {
  color: var(--border-danger);
}

/* History-style row: a date over a colored dot and a short line, with a chevron. */
.hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.hist-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hist-date {
  font-size: var(--type-body);
}

.hist-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-label);
  color: var(--text-muted);
}

.dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--adherence-success);
}

/* Standard "interact with this" highlight: a rounded rectangle drawn just outside
   the element, so it reads as an annotation over the screenshot rather than a UI
   focus state. Add `tap` to any element; recolor per shot with --tap-color. */
.tap {
  position: relative;
}

.tap::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 3px solid var(--tap-color, #ff3d7f);
  border-radius: 14px;
  pointer-events: none;
}

/* A stack row can be bled to the screen edge, so hold the box sides inside the
   frame instead of letting the outset clip against it. */
.stack-row.tap::after {
  inset: -8px 6px;
}

/* A bordered option card with a title, a description, and an example line, as on
   the "What do you have?" supply picker. */
.list-prompt {
  font-size: var(--type-heading);
  color: var(--text-base);
}

.select-card {
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--surface-dark-fill);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.select-title {
  font-size: var(--type-heading);
  font-weight: 700;
}

.select-desc {
  font-size: var(--type-body);
  color: var(--text-muted);
}

.select-eg {
  font-size: var(--type-label);
  color: var(--text-muted);
  opacity: 0.75;
}

/* Toggle mirroring the app's AppSwitch. Off by default; add `on` for the on
   state. The on state is a subtle dark track with a white thumb, not green. */
.switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 15px;
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--text-muted);
  opacity: 0.62;
}

.switch.on {
  background: var(--surface-dark-fill);
  border-color: var(--text-muted);
}

.switch.on::after {
  left: auto;
  right: 3px;
  background: var(--text-base);
  opacity: 1;
}

/* A floating action-sheet menu inside a .screen. It sits inset from the screen
   edges with rounded corners and a soft shadow, and does not dim the screen
   behind it. The side padding keeps a tap ring on an option from clipping. */
.sheet {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  /* Bottom room so a highlight on the last option is not clipped by the sheet. */
  padding: 0 12px 10px;
  background: var(--sheet-opaque-fill);
  border-radius: 22px;
  overflow: hidden;
  color: var(--text-base);
  box-shadow: 0 10px 44px rgba(0, 0, 0, 0.5);
}

.sheet-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 13px;
}

.sheet-option {
  padding: 13px 8px;
  font-size: var(--type-reading);
  border-top: 1px solid var(--separator);
}
.sheet-option.selected {
  background: var(--surface-light-selected);
}
.sheet-option.disabled .sheet-option-label {
  color: var(--text-muted);
}
.sheet-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
}
.sheet-sub.low {
  color: var(--border-danger);
}

.sheet-done {
  text-align: center;
  padding: 14px;
  font-size: var(--type-body);
  font-weight: 600;
  border-top: 1px solid var(--separator);
}

/* Uppercase group label inside a screen, as on the compound picker sections. */
.group-label {
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* A tappable list row, as in the compound picker. */
.pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  font-size: var(--type-body);
}

/* A neutral pill, as the "Custom" tag on a compound-picker result. */
.badge.neutral {
  background: var(--surface-light-selected);
}

.pick-row + .pick-row {
  border-top: 1px solid var(--separator);
}

/* Search input dock. */
.search-dock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
  color: var(--text-muted);
  font-size: var(--type-body);
}

.search-dock svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Empty state, as on the Stack tab with no protocols. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 24px 24px;
}

.empty-title {
  font-size: var(--type-title);
  font-weight: 700;
  text-wrap: balance;
}

.empty-body {
  font-size: var(--type-body);
  color: var(--text-muted);
  max-width: 280px;
}

.empty .btn {
  margin-top: 18px;
  min-width: 180px;
}

/* Weekday picker row (Days frequency). */
.weekday {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.day-row {
  display: flex;
  gap: 6px;
}

.day {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--separator);
  background: var(--surface-light-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-label);
}

.day.selected {
  background: var(--text-base);
  color: var(--text-inverse);
  border-color: var(--text-base);
}

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.block-head-title {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--text-base);
}

.block-head-action {
  font-size: var(--type-label);
  color: var(--text-base);
}

.day-shortcuts {
  display: flex;
  gap: 8px;
}

.day-shortcut {
  flex: 1;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--separator);
  background: var(--surface-light-fill);
  color: var(--text-base);
  font-size: var(--type-label);
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-shortcut.selected {
  background: var(--surface-light-selected);
  border-color: var(--text-base);
}

/* Nested titration step group: a bordered box with a header, a remove control,
   and field rows. */
.step-group {
  border: 1px solid var(--separator);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--surface-light-fill);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-group-title {
  font-size: var(--type-body);
  font-weight: 600;
}

.minus {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid var(--text-muted);
}

.minus::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1.5px;
  background: var(--text-muted);
  transform: translateY(-50%);
}

.add-link {
  text-align: center;
  padding: 6px;
  font-size: var(--type-body);
  color: var(--text-base);
}

/* chevron: two borders rotated, matching the 14px muted glyph at 0.6 opacity */
.chevron {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  opacity: 0.6;
}

/* A protocol color swatch, sits before the chevron in a Color row. */
.color-dot {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 999px;
}

/* ---- segmented control --------------------------------------------------- */

.segmented {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 16px;
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
}

.segmented .seg {
  flex: 1;
  min-height: 36px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-label);
  color: var(--text-base);
  text-align: center;
}

.segmented .seg.selected {
  background: var(--text-base);
  color: var(--text-inverse);
}

/* ---- single-select button group ----------------------------------------- */

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--separator);
  background: transparent;
  color: var(--text-base);
  font-size: var(--type-label);
  display: flex;
  align-items: center;
  justify-content: center;
}

.choice.selected {
  background: var(--text-base);
  color: var(--text-inverse);
  border-color: transparent;
}

/* ---- check-select list --------------------------------------------------- */

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

.checklist .opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.checklist .opt + .opt {
  border-top: 1px solid var(--separator);
}

.check-circle {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid var(--separator);
  background: var(--surface-light-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: transparent;
}

.check-circle.on {
  border-color: var(--text-base);
  background: var(--surface-light-selected);
  color: var(--text-base);
}

.opt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opt-title {
  font-size: var(--type-body);
  font-weight: 700;
}

.opt-desc {
  font-size: var(--type-label);
  color: var(--text-muted);
}

/* ---- badge --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-base);
}

.badge.success {
  background: var(--badge-success-fill);
}
.badge.attention {
  background: var(--badge-attention-fill);
}
.badge.warning {
  background: var(--badge-warning-fill);
}
.badge.primary {
  background: var(--badge-primary-fill);
}
.badge.tinted {
  background: var(--badge-tinted-fill);
  border: 1px solid var(--badge-tinted-border);
  padding: 3px 7px;
}
.badge.solid {
  background: var(--badge-solid-fill);
  color: var(--badge-solid-label);
}
.badge.beta {
  background: var(--badge-beta-fill);
  border: 1px solid var(--badge-beta-border);
  color: var(--badge-beta-label);
  padding: 3px 7px;
}

/* ---- button -------------------------------------------------------------- */

.btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--type-body);
  font-weight: 500;
}

.btn.full {
  width: 100%;
}

.btn.solid {
  background: var(--button-solid-fill);
  color: var(--button-solid-label);
}

.btn.soft {
  background: var(--button-soft-fill);
  color: var(--button-soft-label);
}

.btn.outline {
  background: transparent;
  border: 1px solid var(--button-outline-border);
  color: var(--button-outline-label);
}

/* ---- floating tab bar ---------------------------------------------------- */

.tabbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 20px;
  height: 60px;
  border-radius: 28px;
  background: var(--panel-fill);
  border: 1px solid var(--separator);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
}

.tabbar .tab {
  font-size: var(--type-tab);
  color: var(--tab-bar-muted);
}

.tabbar .tab.active {
  color: var(--tab-bar-base);
}

/* ---- adherence ring (Today) --------------------------------------------- */

.ring {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: var(--type-label);
  background: conic-gradient(var(--adherence-success) var(--pct, 80%), var(--separator) 0);
}

.ring .inner {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface-dark-fill);
  display: grid;
  place-items: center;
}

/* ---- chevron directions -------------------------------------------------- */
.chevron.up {
  transform: rotate(-135deg);
}
.chevron.down {
  transform: rotate(45deg);
}

/* ---- stack (protocol list) ----------------------------------------------- */
.stack-list {
  display: flex;
  flex-direction: column;
}

.stack-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--separator);
}

.stack-row:last-child {
  border-bottom: 0;
}

.stack-row.paused {
  opacity: 0.45;
}

/* Color rail flush to the screen edge, full row height, only on colored rows. */
.stack-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}

.stack-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stack-name {
  font-size: var(--type-body);
}

.stack-sub {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.stack-adherence {
  font-size: var(--type-label);
  color: var(--text-muted);
  opacity: 0.8;
}

.reorder {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--separator);
  border-radius: 12px;
  overflow: hidden;
}

.reorder-btn {
  width: 42px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reorder-btn + .reorder-btn {
  border-left: 1px solid var(--separator);
}

/* ---- today dose card ----------------------------------------------------- */
.today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.today-time {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.today-name {
  font-size: var(--type-title);
  font-weight: 700;
}

.today-dose {
  font-size: var(--type-body);
  color: var(--text-muted);
}

/* ---- syringe hint / draw ruler ------------------------------------------- */
.syringe-head {
  display: flex;
  gap: 16px;
}

.syringe-head > div {
  flex: 1;
}

.syringe-val {
  font-size: var(--type-body);
  font-weight: 700;
}

/* Ported from the app's SyringeRuler: a shaded draw region, a baseline axis, and
   major/minor ticks, stretched to width. currentColor is the base ink. */
.ruler-svg {
  display: block;
  width: 100%;
  height: 40px;
  overflow: visible;
  color: var(--text-base);
  margin: 8px 0 2px;
}

.ruler-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--type-label);
  color: var(--text-muted);
}

/* ---- injection sites ----------------------------------------------------- */
.sites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid var(--text-muted);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
  font-size: var(--type-label);
}

.site-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.site-card {
  border: 1px solid var(--separator);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.site-card.selected {
  border-color: var(--text-base);
}

.site-label {
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.25;
}

.site-status {
  font-size: var(--type-label);
  color: var(--text-muted);
}

/* The "Next" rotation hint on the suggested site: a small, tight, filled chip. */
.site-badge {
  align-self: flex-start;
  font-size: var(--type-tab);
  font-weight: 600;
  line-height: 1.3;
  background: var(--text-base);
  color: var(--text-inverse);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
}

/* ---- inventory motifs ---------------------------------------------------- */
.motif {
  color: var(--text-base);
}

.motif.low {
  color: var(--border-danger);
}

/* ---- vial-detail hero ---------------------------------------------------- */
.pen-dose {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pen-dose-figures {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pen-dose-label {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.pen-dose-value {
  font-size: var(--type-heading);
  font-weight: 500;
}

.pen-dose-art {
  width: 60px;
  flex-shrink: 0;
}

.pen-dose-art svg {
  display: block;
  width: 60px;
  height: 78px;
}

.pen-dose .low {
  color: var(--border-danger);
}

.vial-hero {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
}
.vial-hero-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vial-hero-art {
  flex-shrink: 0;
  color: var(--text-base);
}
.vial-hero-art.low {
  color: var(--border-danger);
}
.vial-hero.dimmed {
  opacity: 0.55;
}
.vial-hero-status {
  font-size: var(--type-label);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---- Today active-inventory rail ---------------------------------------- */
.inventory-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rail-head-title {
  font-size: var(--type-heading);
  font-weight: 700;
}
.rail-count {
  font-size: var(--type-label);
  color: var(--text-muted);
}
.rail-low {
  color: var(--border-danger);
}
.rail-scroll {
  display: flex;
  gap: 12px;
  overflow: hidden;
  margin: 0 -20px;
  /* Vertical room so a highlighted card's tap box is not clipped by overflow. */
  padding: 12px 20px;
}
.rail-card {
  flex-shrink: 0;
  width: 132px;
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.rail-card.low {
  border-color: var(--border-danger);
}
.rail-motif {
  color: var(--text-base);
}
.rail-motif svg {
  width: 46px;
  height: auto;
}
.rail-card.low .rail-motif {
  color: var(--border-danger);
}
.rail-compound {
  font-weight: 700;
  font-size: var(--type-label);
  margin-top: 8px;
}
.rail-title {
  font-size: var(--type-label);
  margin-top: 2px;
  letter-spacing: 0.4px;
}
.rail-summary {
  font-size: var(--type-label);
  margin-top: 3px;
  letter-spacing: 0.4px;
}
.rail-summary.low {
  color: var(--border-danger);
}

/* ---- danger zone --------------------------------------------------------- */
/* The destructive form-action card: same shell as .form-action, with a warning
   icon and a rule under the title. Keep it in step with .form-action above. */
.danger-zone {
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.danger-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--type-label);
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--separator);
}

.danger-head svg {
  flex-shrink: 0;
}

.danger-body {
  font-size: var(--type-label);
  color: var(--text-muted);
  line-height: 1.5;
}

.danger-action {
  font-size: var(--type-heading);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ---- action / entry card ------------------------------------------------- */
.action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 16px 18px;
}

.action-card.danger {
  border-color: var(--border-danger);
}

.action-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--surface-light-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-base);
}

.action-card.danger .action-icon {
  background: var(--field-error-fill);
  color: var(--adherence-danger);
}

.action-icon svg {
  width: auto;
  height: 28px;
}

.action-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.action-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-title {
  font-size: var(--type-body);
  font-weight: 700;
}

/* A hairline between screen sections (the nav cards under the dose list on Today). */
.divider {
  height: 1px;
  /* An empty flex child collapses under flex-shrink when the screen overflows
     (a bottom-cropped screen does), so it must hold its 1px. */
  flex-shrink: 0;
  /* Stronger than a card's inner --separator hairline: a divider sits on the
     screen background between blocks, where 0.15 white all but disappears. */
  background: rgba(255, 255, 255, 0.3);
  margin: 8px 0;
}

.action-sub {
  font-size: var(--type-label);
  color: var(--text-muted);
  line-height: 1.35;
}

/* ---- note, stat, button bar ---------------------------------------------- */
.note {
  font-size: var(--type-label);
  color: var(--text-muted);
  line-height: 1.4;
}

.note.danger {
  color: var(--text-danger);
}

.note.muted {
  color: var(--text-muted);
}

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

.stat-label {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.stat-value {
  font-size: var(--type-heading);
  font-weight: 700;
}
.stat-row {
  display: flex;
}
.stat-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat-cell + .stat-cell {
  border-left: 1px solid var(--separator);
  padding-left: 16px;
}
.stat-cell-value {
  font-size: var(--type-reading);
  font-weight: 700;
}

.button-bar {
  display: flex;
  gap: 12px;
}

.button-bar .btn {
  flex: 1;
}

/* A mid-card section title starts a new group, so it carries a divider above it. */
.card > .section-title:not(:first-child) {
  border-top: 1px solid var(--separator);
  padding-top: 14px;
  margin-top: 8px;
}

/* A sentence line with one bold span, as on "Scheduled for Thu, Jan 8 at 8am". */
.sched {
  font-size: var(--type-body);
  color: var(--text-muted);
}

.sched-strong {
  color: var(--text-base);
  font-weight: 700;
}

/* ---- record heading (bold name over muted lines) ------------------------- */
.heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.heading-title {
  font-size: var(--type-title);
  font-weight: 700;
}

.heading-line {
  font-size: var(--type-body);
  color: var(--text-muted);
}

/* ---- numeric keypad (KeyboardStickyInput + NumericKeypad) ---------------- */
.screen > .keypad {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.keypad {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.keypad-input {
  border-radius: 22px;
  padding: 14px 18px;
  background: var(--sheet-opaque-fill);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.keypad-input > .segmented {
  margin-top: 10px;
}

.keypad-label {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.keypad-value {
  font-size: var(--type-title);
  font-weight: 400;
  display: flex;
  align-items: center;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 26px;
  margin-left: 2px;
  background: var(--text-base);
}

.keypad-actions {
  display: flex;
  margin: 14px -18px 0;
  padding: 0 18px;
  border-top: 1px solid var(--separator);
  font-size: var(--type-label);
  color: var(--text-base);
}

.keypad-actions > span {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 6px;
  border-radius: 22px;
  background: var(--sheet-opaque-fill);
}

.numkey {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: var(--type-title);
  color: var(--text-base);
}

.numkey svg {
  width: 24px;
  height: 24px;
}

/* ---- dose-history calendar ----------------------------------------------- */
.calendar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-title {
  font-size: var(--type-heading);
}

.cal-nav {
  font-size: var(--type-title);
  color: var(--text-muted);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-weekday {
  text-align: center;
  font-size: var(--type-label);
  color: var(--text-muted);
  padding-bottom: 4px;
}

.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  min-height: 42px;
}

.cal-day {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: var(--type-label);
}

.cal-day.today {
  background: var(--text-base);
  color: var(--text-inverse);
  font-weight: 700;
}

.cal-day.muted {
  color: var(--text-muted);
}

.cal-dots {
  display: flex;
  gap: 3px;
  height: 6px;
}

.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

/* Trailing time and chevron on a history / dose row. */
.hist-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.hist-time {
  font-size: var(--type-label);
  color: var(--text-muted);
}

/* ---- large input field (StickyField numeric entry) ---------------------- */
.field.big {
  padding: 10px 0;
}

.field.big .field-value {
  font-size: var(--type-title);
}

/* An empty input reads as a normal placeholder, not a huge value. */
.field.big .field-value.placeholder {
  font-size: var(--type-body);
}

.field.big .field-unit {
  font-size: var(--type-body);
}

/* ---- reconstitution calculator readout ---------------------------------- */
.measure {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.measure-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.measure-units {
  font-size: var(--type-title);
  font-weight: 700;
}

.measure-vol {
  font-size: var(--type-body);
  color: var(--text-muted);
}

.measure-syringe {
  text-align: right;
}

.syringe-pick {
  font-size: var(--type-body);
  text-decoration: underline;
}

.measure-spec {
  font-size: var(--type-label);
  color: var(--text-muted);
}

.measure-slider {
  position: relative;
  height: 20px;
  margin-top: 2px;
}

.measure-slider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  border-radius: 999px;
  background: var(--separator);
}

.slider-handle {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--text-base);
  transform: translateX(-50%);
}

/* A centered computed readout under the calculator inputs. */
.result {
  text-align: center;
  font-size: var(--type-heading);
  font-weight: 700;
}

/* A centered tappable line. */
.link {
  text-align: center;
  font-size: var(--type-body);
  color: var(--text-muted);
}

.btn.ghost {
  background: transparent;
  color: var(--button-ghost-label);
}

/* A titled card that explains one action and offers it as a text link beneath the
   copy (FormActionCard: unskip a dose, undo a log). The title is a small ruled
   heading, the body is label text, and the action reads at heading size. */
.form-action {
  background: var(--surface-light-fill);
  border: 1px solid var(--separator);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-action-head {
  font-size: var(--type-label);
  letter-spacing: 0.5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--separator);
}

.form-action-body {
  font-size: var(--type-label);
}

.form-action-link {
  font-size: var(--type-heading);
  min-height: 44px;
  display: flex;
  align-items: center;
}