/* ============================================================
   touch targets
   ============================================================

   Several controls are drawn small on purpose — a 26px tick beside a
   meal, a 28px chevron, the language pills — and at those sizes they
   are below the 44px a thumb actually needs. Rather than inflating the
   artwork, each grows an invisible pad around itself. The control looks
   exactly the same and is simply easier to hit.

   Measured before: tick 26, chevron 28, refresh 30, language 43x29,
   back 55x26, steppers 36.                                          */
/* Only the ones drawn in normal flow. .icon-corner is already
   position:absolute and forcing it to relative dropped it back into the
   flow, where it sat on top of the card's heading. */
.meal-check, .chev, .stepper, .icon-btn, .back-btn,
.link-btn, .item-x, .msg-copy,
.langtoggle button, .meal-title, .seg button, .date-btn {
  position: relative;
}
.meal-check::after, .chev::after, .stepper::after,
.icon-btn::after, .back-btn::after, .link-btn::after, .item-x::after, .msg-copy::after,
.langtoggle button::after, .meal-title::after, .icon-corner::after {
  content: '';
  position: absolute;
  /* the pad is centred on the control, so it never shifts the layout */
  inset: -9px;
}

/* Two of these sit close enough together that a -9px pad would overlap
   the neighbour and steal its taps. */
/* No pad on the full-size stepper: at 44px it already meets the
   minimum, and -5px each side made the minus and plus hit areas overlap
   by 2px — a tap in that band landed on whichever came later in the DOM. */
.stepper::after { inset: 0; }
.item-x::after  { inset: -7px; }

/* Vertical only, so the pad does not reach across to the control next
   to it. The short text links need more of it: some are only 18px tall. */
/* 18px of text plus 13 either side is 44. It was 12, which came to 42
   — near enough to look right in a screenshot and not near enough for
   a thumb. The horizontal reach grows too: these sit under headings
   and beside card edges where a near-miss lands on nothing. */
.link-btn::after { inset: -13px -10px; }
.msg-copy::after, .back-btn::after { inset: -8px -4px; }
.meal-title::after { inset: -6px -2px; }
.langtoggle button::after { inset: -8px -2px; }

/* ============================================================
   onboarding — the fancy pass
   ============================================================

   Apple HIG: clarity, deference, depth. With no illustration to defer
   to, the content is the type, so it gets the large-title treatment
   and real space around it. Depth comes from light — three wide,
   blurred colour fields drifting behind the glass — rather than from
   anything drawn. 4pt spacing throughout, continuous corners, spring
   motion, and every animation removed for reduced-motion.            */

/* The app's own mesh, brought up so it carries the design where there
   are no cards to carry it.

   It is still held off the top of the screen. That band has to stay the
   flat page colour for two reasons: the status bar takes its colour
   from --page, so any wash up there and the phone's bar no longer
   matches the app; and colour arriving right at the notch reads as a
   coloured header rather than as light in the room. */
html.onboarding #mesh {
  opacity: .82;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 14%, #000 40%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 14%, #000 40%, #000 100%);
}
/* html is the root, so it carries both classes — a descendant selector
   here would never match. */
html.onboarding[data-theme="dark"] #mesh { opacity: .62; }
@media (prefers-color-scheme: dark) {
  html.onboarding:not([data-theme="light"]) #mesh { opacity: .62; }
}

.onb-fancy { position: relative; display: flex; flex-direction: column; }

/* --- the type --- */
.onb-hero {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12px 4px 24px;
  text-align: start;
}

/* A short label gives each introductory screen one job. */
.onb-eyebrow {
  display: block; margin-bottom: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  color: var(--accent-ink);
}
html[dir="rtl"] .onb-eyebrow { letter-spacing: 0; }

/* Large-title proportions: tight tracking, tight leading, and enough
   size that it is the first and only thing read. */
.onb-fancy .onb-title {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.16;
  max-width: 18ch;
  text-wrap: balance;
}
.onb-fancy .onb-body {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 34ch;
}
.onb-extra { margin-top: 16px; }
.onb-fancy .onb-medical { margin: 0; }

.onb-visual { display: grid; place-items: center; min-height: 188px; margin-bottom: 22px; }
.onb-liver-scene {
  position: relative; width: min(100%, 356px); height: 194px;
  display: grid; place-items: center;
  border-radius: var(--r-xl);
  background: radial-gradient(ellipse at 55% 60%, var(--accent-wash), transparent 70%);
}
.onb-eyebrow .onb-logo {
  display: inline-block; inline-size: 22px; block-size: 22px; margin: 0;
  margin-inline-end: 8px; vertical-align: -6px;
}
.onb-liver { display: block; width: min(96%, 318px); height: auto; max-height: 190px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(15, 26, 23, .16)); }
.onb-stat {
  width: min(100%, 356px); min-height: 188px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 20px 24px; border-radius: var(--r-xl);
  background: var(--glass); border: 1px solid var(--hairline); box-shadow: var(--shadow);
}
.onb-stat-lead { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.onb-stat-figure {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--text); font-size: clamp(3.3rem, 14vw, 4.6rem);
  line-height: 1.05; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.onb-stat-figure small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text-dim); }
.onb-stat-people { max-width: 31ch; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.onb-preview { width: min(100%, 356px); display: grid; gap: 8px; }
.onb-preview-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--glass); box-shadow: var(--shadow); font-size: 14px; font-weight: 600;
}
.onb-preview-icon {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--accent-wash); color: var(--accent-ink);
}
.onb-source { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.onb-source a { color: var(--accent-ink); text-underline-offset: 3px; }
.onb-fancy .onb-medical { margin-top: 14px; padding-top: 12px; }

@media (max-height: 720px) {
  .onb-lang { padding-top: calc(env(safe-area-inset-top) + 8px); }
  .onb-bar { padding-top: 8px; padding-bottom: 8px; }
  .onb-hero { padding-top: 4px; padding-bottom: 10px; }
  .onb-visual { min-height: 138px; margin-bottom: 12px; }
  .onb-liver-scene { height: 142px; }
  .onb-liver { max-height: 140px; }
  .onb-stat { min-height: 138px; padding: 12px 18px; }
  .onb-stat-figure { font-size: 3.2rem; }
  .onb-preview { gap: 5px; }
  .onb-preview-row { min-height: 42px; padding: 4px 10px; }
  .onb-preview-icon { width: 30px; height: 30px; }
  .onb-eyebrow { margin-bottom: 6px; }
  .onb-fancy .onb-title { margin-bottom: 8px; font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .onb-fancy .onb-body { font-size: .94rem; line-height: 1.5; }
  .onb-extra { margin-top: 8px; }
  .onb-fancy .onb-medical { margin-top: 8px; padding-top: 8px; }
  .onb-actions { padding-top: 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

.onb-cta {
  border-radius: 14px;   /* continuous-corner proportion for a 56px control */
  font-size: 1.02rem;
  font-weight: 600;
  padding: 16px 20px;
  transition: transform .22s cubic-bezier(.2, .8, .25, 1), filter .22s;
}
.onb-cta:active { transform: scale(.97); filter: brightness(.97); }

/* --- choreography: each part a beat behind the last --- */
.onb-visual, .onb-eyebrow, .onb-fancy .onb-title, .onb-fancy .onb-body, .onb-extra {
  animation: onbRise .62s cubic-bezier(.2, .8, .25, 1) both;
}
.onb-eyebrow { animation-delay: 50ms; }
.onb-fancy .onb-title { animation-delay: 90ms; }
.onb-fancy .onb-body { animation-delay: 140ms; }
.onb-extra { animation-delay: 190ms; }
@keyframes onbRise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-visual, .onb-eyebrow, .onb-fancy .onb-title, .onb-fancy .onb-body,
  .onb-extra { animation: none; }
  .onb-cta { transition: none; }
}

/* A dose past its hour reads as overdue rather than upcoming. */
.next-tag.overdue { color: var(--warn-ink); }

/* The rule behind the three numbers above it. */
.streak-rule { margin-top: 12px; margin-bottom: 0; font-size: 13px; line-height: 1.5; }

/* Present to a screen reader, absent to everyone else. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   the live session sheet
   ============================================================
   Docked above the tab bar while a walk or a round runs, so the
   session follows you across tabs instead of living on one card.
   Collapsed it is one line; tapped, it opens into the widget. */
/* While a session runs the page gets extra room at the bottom, so the
   sheet never sits permanently on top of the last card. */
html.live-session #app { padding-bottom: 188px; }

.livesheet {
  position: fixed; z-index: 60;
  left: 8px; right: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid color-mix(in srgb, var(--c) 32%, var(--hairline));
  box-shadow: var(--shadow-lift);
  padding: 6px 12px 12px;
  animation: live-in .32s var(--ease);
}
@keyframes live-in { from { transform: translateY(14px); opacity: 0; } }

.livesheet.held { border-color: var(--hairline-dim); }
.livesheet.held .lr-fill { opacity: .45; }

.live-grab {
  display: block; width: 100%; padding: 4px 0 6px;
  background: none; border: 0; cursor: pointer;
}
.live-grab i {
  display: block; width: 34px; height: 4px; margin: 0 auto;
  border-radius: 99px; background: var(--hairline-dim);
}

.live-row { display: flex; align-items: center; gap: 11px; }

.live-ring { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.live-ring > svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.lr-track { fill: none; stroke: var(--glass-sunk); stroke-width: 7; }
.lr-fill {
  fill: none; stroke: var(--ci); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.live-glyph {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--ci);
}

.live-id { flex: 1 1 auto; min-width: 0; }
/* Two lines, not one with an ellipsis.
   The collapsed row leaves this column about 119px between the ring and
   the clock, and the moves are sentences — "Sit to stand from a chair"
   was arriving as "Sit to stand fr…", which is not a move anybody can
   follow. It wraps to two lines and stops there, a size down, so a long
   name is readable without the sheet growing every time one appears. */
.live-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Open, there is room for the whole name however long it runs. */
.livesheet.open .live-title {
  display: block; font-size: 14.5px; overflow: visible;
}
.livesheet.open .live-clock { font-size: 19px; }
.live-reps { font-weight: 500; color: var(--text-mute); }
.live-sub { font-size: 11.5px; color: var(--text-dim); }

.live-clock {
  /* 19px collapsed left the title 119px. The clock is four characters
     and reads perfectly well a point smaller. */
  font-size: 17.5px; font-weight: 600; color: var(--ci); flex: 0 0 auto;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}

.live-controls { display: flex; gap: 6px; flex: 0 0 auto; }
.live-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  color: var(--ci); position: relative;
}
.live-btn::after { content: ''; position: absolute; inset: -2px; }
.live-btn:active { transform: scale(.92); }
.live-btn.stop {
  background: var(--glass-sunk); border-color: var(--hairline-dim); color: var(--text-dim);
}

.live-body {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline-dim);
  display: flex; flex-direction: column; gap: 9px;
}
.live-tip { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.live-next { margin: 0; font-size: 12.5px; color: var(--text-mute); }

/* one pip per move in the round */
.live-steps { display: flex; gap: 5px; }
.live-steps i {
  flex: 1 1 0; height: 4px; border-radius: 99px; background: var(--glass-sunk);
}
.live-steps i.done { background: color-mix(in srgb, var(--c) 55%, transparent); }
.live-steps i.on   { background: var(--ci); }

@media (prefers-reduced-motion: reduce) {
  .livesheet { animation: none; }
  .lr-fill { transition: none; }
}

/* ============================================================
   the weekly review
   ============================================================ */
.weekrev { display: flex; flex-direction: column; gap: 14px; }
.wk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wk-head h3 { margin: 0; }
.wk-range { font-size: 12.5px; color: var(--text-mute); white-space: nowrap; }

.wk-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wk-stat {
  display: flex; flex-direction: column; gap: var(--pair-y);
  padding: var(--pad-panel); border-radius: var(--r-md);
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
}
.wk-stat b { font-size: 17px; font-variant-numeric: tabular-nums; }
.wk-stat span { font-size: 11.5px; color: var(--text-mute); }
.wk-stat.good b { color: var(--accent-ink); }
.wk-stat.mid  b { color: var(--warn-ink); }
.wk-stat.bad  b { color: var(--danger-ink); }

.wk-goals { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.wk-goals div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wk-goals b { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.wk-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 99px;
}
.wk-tag.good { background: var(--accent-wash); color: var(--accent-ink); }
.wk-tag.bad  { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

.wk-advice {
  padding: 14px; border-radius: var(--r-md);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  display: flex; flex-direction: column; gap: 6px;
}
.wk-advice p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* the date the card's slider is showing */
.liver-when {
  text-align: center; font-size: 12.5px; font-weight: 500;
  color: var(--text-dim); margin-top: 4px; min-height: 1.2em;
}

/* ============================================================
   cook mode — for standing at the counter with the phone
   ============================================================ */
.cookmode { display: flex; flex-direction: column; gap: 14px; }
.cook-head { display: flex; flex-direction: column; gap: 5px; }
.cook-head h3 { margin: 0; font-size: 21px; }

.cook-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cook-line {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; border-radius: var(--r-md);
  background: var(--glass-sunk); border: 1px solid var(--hairline-dim);
  font: inherit; color: var(--text); text-align: start; cursor: pointer;
  transition: .18s var(--ease);
}
.cook-tick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--hairline-dim); color: transparent;
}
.cook-tick svg { width: 15px; height: 15px; }
.cook-text { font-size: 16.5px; line-height: 1.4; }

.cook-line.on { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.cook-line.on .cook-tick { background: var(--accent); border-color: var(--accent); color: var(--on-bright); }
.cook-line.on .cook-text { color: var(--text-dim); text-decoration: line-through; }

.cook-left { margin: 0; text-align: center; font-size: 13px; color: var(--text-mute); }

/* ============================================================
   the page for the appointment
   ============================================================
   Read across a desk, sometimes upside down, so: generous rows, one
   fact per line, and the label and the number pinned to opposite ends
   rather than centred. */
.doc-h {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); margin: 18px 0 6px;
}
.doc-h:first-of-type { margin-top: 12px; }

.doc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline-dim);
}
.doc-row:last-child { border-bottom: none; }
.doc-label { font-size: 14.5px; color: var(--text-dim); }
.doc-value {
  font-size: 15.5px; font-weight: 600; text-align: end;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.doc-value small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-mute); }

.doc-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: 13.5px; font-weight: 500;
}
.doc-foot {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--hairline-dim);
  font-size: 12px; line-height: 1.5; color: var(--text-mute);
}

/* what you reach for, above the catalogue */
.fp-recent { margin-bottom: 12px; display: flex; flex-direction: column; gap: 7px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip {
  padding: 9px 13px; border-radius: 99px; cursor: pointer;
  background: var(--accent-wash); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font: inherit; font-size: 13.5px; font-weight: 500;
  position: relative;
}
.fp-chip::after { content: ''; position: absolute; inset: -4px; }
.fp-chip:active { transform: scale(.96); }

/* ============================================================
   the eating window
   ============================================================ */
.win { display: flex; flex-direction: column; gap: 8px; }
.win-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Open or shut is a state, and a state is a badge. It was the biggest
   type on the card, which spent the emphasis on the one thing the
   colour of the bar already says. */
.win-badge {
  flex: none; font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 99px;
  background: var(--glass-sunk); color: var(--text-dim);
}
.win.open .win-badge { background: var(--accent-wash); color: var(--accent-ink); }

/* The line somebody is reading the card for. */
.win-lead {
  margin: 2px 0 2px; font-size: 19px; font-weight: 650;
  letter-spacing: -.015em; line-height: 1.25; color: var(--text);
}
.win.shut .win-lead { color: var(--text-dim); }

/* The two ends of the bar, under the two ends of the bar. */
.win-ends {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* The track has to be visible now that the two times hang off its ends
   — --glass-sunk is lighter than the card it sits on, so a window that
   has not opened yet drew nothing at all and left the times floating
   under a gap. */
.win-bar {
  height: 6px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--text-mute) 18%, transparent);
}
.win-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .4s var(--ease);
}
.win.shut .win-bar i { background: color-mix(in srgb, var(--text-mute) 38%, transparent); }

.win-actual { margin: 4px 0 0; font-size: 12.5px; color: var(--text-mute); }

.seg.sm button { padding: 8px 4px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) { .win-bar i { transition: none; } }

/* what Health Connect reads, one line each */
.hc-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hc-list li { display: flex; flex-direction: column; gap: 2px; }
.hc-list b { font-size: 14.5px; }
.hc-list span { font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* The organ is a button now, so it has to behave like one without
   looking like one. */
.liver-tilt {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease);
}
.liver-tilt:active { opacity: .88; }   /* transform belongs to liverFloat */
.liver-tilt:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }

/* the run of days, in the corner of the goal card */
.goal { position: relative; }
/* ---------- a run of days ----------
   One badge, used by the goal cards and the avoid tiles: a bolt and a
   number, pinned to the inline-start corner — top right in Arabic, top
   left in English.

   That corner and not the other one. The badge lived at the inline-END
   corner once and sat twelve pixels on top of the plus button, which
   made it read as a label for the control. The steppers are always at
   the inline-end, so the opposite corner is free by construction in
   both directions.

   It overlaps the ring's outer corner by a few pixels, which is why it
   carries a page-coloured border: the same trick the play badge on the
   dial uses to stay legible against whatever is behind it.

   Three tiers, because the number alone reads the same at three days
   as at forty. Amber throughout, whatever the item's own colour is: a
   run is the same achievement everywhere. */
.run-pill {
  position: absolute; top: 6px; inset-inline-start: 6px; z-index: 3;
  display: inline-flex; align-items: center; gap: 1px;
  padding: 2px 6px 2px 4px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap;
  border: 1.5px solid var(--page);
}
html[dir="rtl"] .run-pill { padding: 2px 4px 2px 6px; }
.run-pill .ico { flex: none; }

/* Every run is lit. All three tiers carry the same amber-into-orange
   the streak stats do — what grows with the run is the glow around it,
   not whether it is coloured at all.

   It used to go quiet under a week, and since most runs are under a
   week most badges were a pale tint: the stat tile blazed at five days
   while the goal card beside it whispered at the same five. A tier
   people rarely reach is not where the design should live. */
.run-pill.t1,
.run-pill.t2,
.run-pill.t3 {
  background-color: var(--streak-lit);
  background-image: linear-gradient(135deg, var(--streak-lit), var(--streak-hot));
  color: var(--streak-on-lit);
}
/* two to six days */
.run-pill.t1 { box-shadow: 0 1px 3px color-mix(in srgb, var(--streak-hot) 30%, transparent); }
/* a week or more: it starts to throw light */
.run-pill.t2 { box-shadow: 0 1px 5px color-mix(in srgb, var(--streak-hot) 50%, transparent); }
/* a month: haloed */
.run-pill.t3 {
  box-shadow: 0 1px 5px color-mix(in srgb, var(--streak-hot) 50%, transparent),
              0 0 0 2px color-mix(in srgb, var(--streak-lit) 45%, transparent);
}

/* which kinds of health data are actually allowed */
.hc-grants { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-grants li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--hairline-dim);
}
.hc-grants li:last-child { border-bottom: none; }
.hc-grants span { font-size: 11.5px; font-weight: 600; }
.hc-grants li.on  span { color: var(--accent-ink); }
.hc-grants li.off span { color: var(--warn-ink); }