/* The app's screens inside the phones: the session, the rules, the plans,
   the adaptive goal, carb cycling, the coach, the lock screen and the
   analysis. Each is laid out at 402 points, as the app lays it out. */

/* -------------------------------------------------------------- session */

.app-switch { position: absolute; top: 127px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; font: 600 11px/1 var(--font); font-stretch: 112%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.app-switch b { color: var(--text); }
.app-switch svg { width: 10px; height: 12px; fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-switch-line { position: absolute; left: 24px; right: 24px; top: 156px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(174, 174, 178, 0.05), rgba(174, 174, 178, 0.18) 50%, rgba(174, 174, 178, 0.05)); }
.app-exercise {
  position: absolute;
  top: 171px;
  left: 25px;
  right: 25px;
  padding: 18px 20px 18px;
  border-radius: 16px;
  border: 0.5px solid rgba(174, 174, 178, 0.14);
  background: linear-gradient(180deg, rgba(24, 24, 28, 0.6) 0%, rgba(10, 10, 12, 0.92) 100%);
}
.app-exercise-name { font: 600 20px/1.2 var(--font); letter-spacing: -0.01em; }
.app-exercise-meta { margin-top: 6px; font: 400 14.5px/1.2 var(--font); color: var(--text-3); }
.app-exercise-plan { margin-top: 12px; display: flex; align-items: center; gap: 16px; font: 500 14px/1 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.app-exercise-plan b { font: 600 17px/1 var(--font); color: var(--text); letter-spacing: -0.01em; }
.app-exercise-plan span { display: inline-flex; align-items: center; gap: 6px; }
.app-exercise-plan svg { width: 14px; height: 14px; fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; }
.app-kebab { position: absolute; top: 16px; right: 18px; width: 4px; display: grid; gap: 3px; }
.app-kebab i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--text-2); }
.app .setcard { position: absolute; top: 290px; left: 25px; right: 25px; width: auto; max-width: none; }
.app-next { position: absolute; top: 710px; left: 25px; right: 25px; height: 120px; padding: 22px 20px; border-radius: 16px; border: 0.5px solid rgba(174, 174, 178, 0.12); background: linear-gradient(180deg, rgba(24, 24, 28, 0.5), rgba(10, 10, 12, 0.9)); }
.app-next span { font: 700 12px/1 var(--font); letter-spacing: 0.125em; text-transform: uppercase; color: var(--text-2); }
.app-next div { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); font: 700 9.5px/1 var(--font); letter-spacing: 0.16em; color: rgba(174, 174, 178, 0.45); }
.app-dock { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; padding: 18px 25px 0; display: flex; gap: 12px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 22%, #000 40%); }
.app-finish {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  border: 0.8px solid rgba(174, 174, 178, 0.14);
  background: linear-gradient(180deg, #1c1c21 0%, #121215 100%);
  font: 600 16px/1 var(--font);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.app-finish svg { width: 18px; height: 18px; fill: none; stroke: var(--core); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-flame { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; border: 0.8px solid rgba(174, 174, 178, 0.14); background: linear-gradient(180deg, #1c1c21 0%, #121215 100%); }
.app-flame img { width: 24px; }

/* ---------------------------------------------------- the rule chain */

.chain { padding: var(--s-4) var(--s-3) var(--s-3); }
.chain-head { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 10px/1 var(--font); font-stretch: var(--wide); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.chain-head::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--core); box-shadow: 0 0 10px rgba(255, 69, 0, 0.6); }
.chain-count { color: var(--text-2); }
.chain-count::before { content: "// "; color: var(--text-3); }
.chain-today { margin-top: 10px; text-align: center; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; text-wrap: balance; }
.chain-today b { color: var(--text-2); font-weight: 600; }
.chain-today b.is-firing { color: var(--text); }
.chain-list { list-style: none; display: grid; margin-top: var(--s-3); }
.rule-else { position: relative; padding: 7px 0 7px 26px; font: 700 8.5px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--asteroid); }
.rule-else::before { content: ""; position: absolute; left: 17px; top: 3px; bottom: 3px; width: 1px; background: linear-gradient(180deg, transparent, rgba(174, 174, 178, 0.22), transparent); }
.rule {
  border-radius: var(--r-l);
  border: 0.5px solid rgba(174, 174, 178, 0.12);
  background: linear-gradient(180deg, rgba(26, 26, 30, 0.75) 0%, rgba(12, 12, 14, 0.92) 100%);
  box-shadow: inset 0 0.5px 0 rgba(174, 174, 178, 0.10), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  transition: opacity var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.rule-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px 10px 10px; }
.rule-plate { display: grid; justify-items: center; gap: 6px; }
.rule-n { font: 700 9.5px/1 var(--font); letter-spacing: 0.08em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.rule-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a4a50 0%, #2a2a2e 70%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  transition: background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.rule[data-light="rejected"] .rule-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, #ff5252 24%, #ff1744 62%, #a8001c 100%); box-shadow: 0 0 7px rgba(255, 23, 68, 0.55); }
.rule[data-light="partial"] .rule-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, #ffab40 24%, #ff9100 62%, #b25f00 100%); box-shadow: 0 0 7px rgba(255, 145, 0, 0.5); }
.rule[data-light="active"] .rule-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, var(--led-active-glow) 24%, var(--led-active) 62%, #00964d 100%); box-shadow: 0 0 8px rgba(0, 230, 118, 0.6); }
.rule[data-light="idle"] { opacity: 0.42; }
.rule-text { display: grid; gap: 5px; min-width: 0; }
.rule-when, .rule-then { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13px; line-height: 1.3; }
.rule-k { flex: none; width: 3.6em; font: 700 8.5px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.rule-cond { min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rule-more { flex: none; font-size: 11px; color: var(--text-3); }
.rule-act { color: var(--text); font-weight: 600; }
.rule.is-firing { border-color: rgba(174, 174, 178, 0.22); }
.rule-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-standard); }
.rule-inner { overflow: hidden; min-height: 0; padding: 0 16px; }
.rule.is-firing .rule-detail { grid-template-rows: 1fr; }
.rule-inner > :last-child { padding-bottom: 14px; }
.rule-section-title { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; font: 700 8.5px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.rule-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(174, 174, 178, 0.14), transparent); }
.rule-conditions { list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.rule-condition { display: flex; align-items: center; gap: 10px; }
.rule-and { padding-left: 18px; font: 700 8px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--asteroid); }
.rule-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff1744; box-shadow: 0 0 6px rgba(255, 23, 68, 0.5); flex: none; }
.rule-dot.is-met { background: var(--led-active); box-shadow: 0 0 6px rgba(0, 230, 118, 0.55); }
.rule-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 13px; }
.rule-spec dt { font: 700 8.5px/1.6 var(--font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.rule-spec dd { color: var(--text); }

/* ------------------------------------------------------ pace instrument */

.pace { --zone: var(--nutrition); }
.pace-panel { padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-panel); border: 0.5px solid rgba(174, 174, 178, 0.14); background: linear-gradient(180deg, rgba(20, 20, 24, 0.72) 0%, rgba(8, 8, 10, 0.94) 50%, rgba(0, 0, 0, 0.97) 100%); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(174, 174, 178, 0.14); }
.pace-top { display: grid; gap: var(--s-2); }
.pace-title { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pace-quality { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.pace-quality svg { width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pace-zone { display: flex; align-items: center; gap: 10px; margin-top: var(--s-4); font: 700 10px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--zone); transition: color var(--dur-normal) var(--ease-standard); }
.pace-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zone); box-shadow: 0 0 8px var(--zone); transition: background var(--dur-normal) var(--ease-standard); }
.pace-rate { display: flex; align-items: baseline; gap: var(--s-2); margin-top: 12px; min-height: 58px; }
.pace-big { font-size: 50px; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pace-unit { font-size: 15px; color: var(--text-2); }
.pace-share { font-size: 14px; color: var(--text-2); }
.pace-chart svg { width: 100%; height: auto; margin-top: var(--s-3); overflow: visible; }
.pace-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.pace-fan.is-gain { fill: rgba(34, 197, 94, 0.13); }
.pace-fan.is-loss { fill: rgba(255, 165, 0, 0.07); }
.pace-floor { stroke: rgba(255, 165, 0, 0.32); stroke-width: 1; }
.pace-line { stroke-width: 2.5; stroke-linecap: round; }
.pace-line-end { stop-color: var(--zone); }
.pace-start { fill: #ffffff; }
.pace-end { fill: var(--zone); filter: drop-shadow(0 0 6px var(--zone)); }
.pace-label { fill: var(--text-2); font: 500 13px var(--font); }
.pace-label.is-end { fill: var(--text); font-weight: 600; font-size: 17px; }
.pace-axis { display: flex; justify-content: space-between; padding: 6px 20.5% 0 2px; font: 700 9.5px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.pace-rail { position: relative; margin-top: var(--s-5); padding-top: 24px; }
.pace-recommended { position: absolute; top: 0; transform: translateX(-50%); font: 700 9px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.pace-recommended::after { content: ""; position: absolute; left: 50%; top: 13px; border: 3px solid transparent; border-top-color: var(--text-3); transform: translateX(-50%); }
.pace-track { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 165, 0, 0.20) 0%, rgba(255, 165, 0, 0.10) 55%, rgba(34, 197, 94, 0.10) 82%, rgba(34, 197, 94, 0.20) 100%); }
.pace-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--zone); box-shadow: 0 0 12px color-mix(in srgb, var(--zone) 60%, transparent); }
.pace-tick { position: absolute; top: -7px; bottom: -7px; width: 1px; background: rgba(255, 255, 255, 0.30); }
.pace-input { position: absolute; left: -14px; top: 14px; width: calc(100% + 28px); height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pace-input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
.pace-input::-moz-range-track { height: 28px; background: transparent; }
.pace-input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff 0%, #e8e8ea 70%, #d4d4d8 100%); box-shadow: 0 0 0 3px var(--zone), 0 0 22px var(--zone), 0 4px 10px rgba(0, 0, 0, 0.6); }
.pace-input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff 0%, #e8e8ea 70%, #d4d4d8 100%); box-shadow: 0 0 0 3px var(--zone), 0 0 22px var(--zone), 0 4px 10px rgba(0, 0, 0, 0.6); }
.pace-input:focus-visible { outline: none; }
.pace-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--zone), 0 0 0 6px rgba(255, 140, 105, 0.6), 0 0 22px var(--zone); }
.pace-ends { display: flex; justify-content: space-between; margin-top: 22px; font-size: 12px; letter-spacing: 0.06em; color: var(--text-3); }
.pace-result { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.pace-kcal { font-size: 42px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pace-kcal-unit { margin-left: var(--s-2); font-size: 15px; color: var(--text-2); }
.pace-vs { font-size: 13px; letter-spacing: 0.06em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pace-stats { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: 12px; font: 700 10px/1.4 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.pace-stats b { margin-left: 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pace-stats .is-target, .pace-stats .is-target b { color: var(--nutrition); }
.pace-caption { margin-top: 12px; text-align: center; font-size: 13px; color: var(--text-3); }

/* ------------------------------------------------------------- planner */

.planner-panel { padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-panel); border: 0.5px solid rgba(174, 174, 178, 0.14); background: linear-gradient(180deg, rgba(20, 20, 24, 0.72) 0%, rgba(8, 8, 10, 0.94) 50%, rgba(0, 0, 0, 0.97) 100%); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 0.5px 0 rgba(174, 174, 178, 0.14); }
.planner-ask { display: grid; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.planner-answer { color: var(--text-2); }
.freq { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--s-4); padding-bottom: 20px; }
.freq-choice { min-height: 56px; font-size: 40px; font-weight: 500; letter-spacing: -0.02em; color: rgba(174, 174, 178, 0.42); transition: color var(--dur-normal) var(--ease-standard); }
.freq-choice:hover { color: rgba(174, 174, 178, 0.75); }
.freq-choice[aria-checked="true"] { color: var(--text); }
.freq-ruler { position: absolute; left: 0; right: 0; bottom: 4px; height: 9px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px calc(100% / 20)) 0 0 / 100% 4px no-repeat, repeating-linear-gradient(90deg, transparent 0 calc(10% - 0.5px), rgba(255, 255, 255, 0.32) calc(10% - 0.5px) calc(10% + 0.5px), transparent calc(10% + 0.5px) 20%) 0 0 / 100% 9px no-repeat; }
.freq-marker { position: absolute; bottom: 16px; left: calc(var(--x, 0.7) * 100%); width: 44px; height: 3px; border-radius: 3px; background: var(--core); box-shadow: 0 0 10px rgba(255, 69, 0, 0.6); transform: translateX(-50%); transition: left var(--dur-slow) var(--ease-standard); }
.plan-card { position: relative; margin-top: var(--s-3); padding: 20px 18px 14px; border-radius: 22px; border: 0.5px solid rgba(174, 174, 178, 0.14); background: linear-gradient(180deg, rgba(28, 28, 32, 0.85) 0%, rgba(10, 10, 12, 0.96) 100%); overflow: hidden; }
.plan-card::before { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, var(--temper), var(--core), var(--temper), transparent); opacity: 0.8; }
.plan-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.plan-titles { min-width: 0; }
.plan-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.plan-kit { margin-top: 4px; font-size: 14px; color: var(--text-2); }
.plan-sets-label { flex: none; font: 700 9.5px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); padding-bottom: 3px; }
.plan-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 220px; margin-top: var(--s-3); }
.pocket { position: relative; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.22)); --face: transparent; --body: transparent; --base: transparent; --ink: transparent; }
.pocket::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 12%, rgba(255, 255, 255, 0.08) 88%, transparent); }
.pocket[data-tone="petrol"] { --face: #128792; --body: #006872; --base: #004a52; --ink: #85ccd4; }
.pocket[data-tone="cobalt"] { --face: #5079ae; --body: #385c8a; --base: #234166; --ink: #9fc1ec; }
.pocket[data-tone="iris"] { --face: #7b6ca9; --body: #5e5086; --base: #433763; --ink: #c0b5e8; }
.pocket[data-tone="brass"] { --face: #986f31; --body: #77531a; --base: #563906; --ink: #d9b88a; }
.pocket-day { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 700 10px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); transition: color var(--dur-slow) var(--ease-standard); }
.pocket.is-rest .pocket-day { color: var(--asteroid); }
.pocket-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc((100% - 52px) * var(--level, 0)); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--face) 0%, var(--body) 35%, var(--base) 100%); transition: height var(--dur-slow) var(--ease-standard); }
.pocket-fill::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; height: 1px; background: var(--ink); opacity: 0.55; }
.pocket-count { position: absolute; left: 0; right: 0; bottom: max(calc((100% - 52px) * var(--level, 0) + 4px), 30px); text-align: center; font: 700 10px/1 var(--font); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink); transition: bottom var(--dur-slow) var(--ease-standard); }
.pocket-label { position: absolute; left: 2px; right: 2px; bottom: 8px; text-align: center; font: 600 11px/1 var(--font); letter-spacing: 0.04em; color: var(--text); white-space: nowrap; overflow: hidden; }
.plan-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--text-2); }
.plan-pager { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-2); }
.pager-step { display: grid; place-items: center; width: 44px; height: 44px; font-size: 22px; color: var(--text-3); }
.pager-step:hover { color: var(--text); }
.pager-dots { display: flex; gap: 6px; }
.pager-dots span { width: 12px; height: 3px; border-radius: 3px; background: rgba(174, 174, 178, 0.3); transition: width var(--dur-normal) var(--ease-standard), background-color var(--dur-normal) var(--ease-standard); }
.pager-dots span.is-on { width: 28px; background: var(--core); }
.level-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: var(--s-2); padding: 5px; border-radius: 18px; border: 0.5px solid var(--hairline); background: rgba(255, 255, 255, 0.015); }
.level-choice { position: relative; display: grid; gap: 2px; justify-items: center; min-height: 56px; padding: 8px; border-radius: 14px; color: var(--text-3); transition: background-color var(--dur-normal) var(--ease-standard), color var(--dur-normal) var(--ease-standard); }
.level-choice[aria-checked="true"] { color: var(--text); background: linear-gradient(180deg, rgba(40, 40, 46, 0.9), rgba(20, 20, 24, 0.9)); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5); }
.level-choice[aria-checked="true"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; border-radius: 2px; background: var(--core); box-shadow: 0 0 8px rgba(255, 69, 0, 0.6); }
.level-title { font-size: 16px; font-weight: 600; }
.level-since { font-size: 13px; color: var(--text-3); }

/* ---------------------------------------------------------- rest timer */

/* The rest timer's lock-screen face (ios/RestTimerWidget/RestActivityViews.swift). */
.activity {
  position: relative;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) 20px;
  border-radius: 24px;
  background: radial-gradient(150px 150px at 50% 50%, rgba(255, 69, 0, 0.09), transparent 100%), linear-gradient(180deg, var(--stellar) 0%, var(--void) 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  isolation: isolate;
}
.activity::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 50%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.activity-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.activity-state, .activity-set { display: inline-flex; align-items: center; gap: var(--s-2); font: 700 11px/1 var(--font); letter-spacing: 0.145em; text-transform: uppercase; color: var(--text-3); }
.activity-set { color: var(--text-2); }
.activity-state img { width: 14px; height: auto; }
.activity-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.rail { position: relative; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.92); box-shadow: inset 0 0 0 0.5px rgba(174, 174, 178, 0.12); overflow: hidden; }
.rail-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--fill, 0)); background: linear-gradient(90deg, var(--core), var(--glow)); box-shadow: 0 0 4px rgba(255, 69, 0, 0.55); }
.activity-figure { font-size: 44px; font-weight: 600; font-stretch: 125%; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.activity-exercise { font-size: 15px; font-weight: 600; color: var(--text); }
.activity.is-over .activity-state { color: var(--core); }
.activity.is-over .activity-figure { color: var(--text-3); }
.activity.is-over .rail-fill { background: rgba(174, 174, 178, 0.28); box-shadow: none; }

/* ------------------------------------------------------------ analysis */

.trend svg { width: 100%; height: auto; overflow: visible; }
.trend-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.trend-area { fill: url(#trend-fill); }
.trend-line { fill: none; stroke: var(--temper); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 107, 61, 0.45)); }
.trend-dot { fill: var(--void); stroke: var(--temper); stroke-width: 2; }
.trend-dot.is-best { fill: var(--glow); stroke: #fff; }
.trend-label { fill: var(--text-3); font: 700 9.5px var(--font); letter-spacing: 0.14em; text-transform: uppercase; }
.trend-value { fill: var(--text); font: 600 14px var(--font); }
@media (prefers-reduced-motion: no-preference) {
  .js .trend .trend-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
  .js .is-in .trend-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-glide) 200ms; }
  .js .trend .trend-dot, .js .trend .trend-area { opacity: 0; }
  .js .is-in .trend-dot, .js .is-in .trend-area { opacity: 1; transition: opacity var(--dur-slow) var(--ease-standard) 900ms; }
}


/* ------------------------------------------- instruments inside a phone */

/* On a phone the instruments are the screen itself: no card around them. */
.app .chain, .app .pace-panel, .app .planner-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.app .pace-caption { display: none; }

/* Rules: the Prover One tab, scrolled to the rule that decides. */
.screen-rules .app-list { position: absolute; top: 76px; left: 0; right: 0; bottom: 0; padding: 0 24px; overflow: hidden; }
.screen-rules .chain-list { margin-top: 0; transition: transform var(--dur-deliberate) var(--ease-standard); }
.screen-rules .chain-today { display: none; }

/* Plans: ready-made plans, two questions. */
.screen-plans .planner { position: absolute; top: 22px; left: 24px; right: 24px; }
.screen-plans .planner-ask { font-size: 24px; }
.screen-plans .plan-week { height: 180px; }
.screen-plans .freq { margin-top: var(--s-3); }
.screen-plans .pager-step { height: 32px; }
.screen-plans .app-fade { height: 120px; }

/* The adaptive goal's pace question. */
.screen-pace .app-steps { position: absolute; top: 14px; left: 24px; display: flex; gap: 4px; }
.screen-pace .app-steps i { width: 16px; height: 2px; border-radius: 1px; background: rgba(174, 174, 178, 0.3); }
.screen-pace .app-steps i:first-child { width: 22px; background: var(--nutrition); }
.screen-pace .pace { position: absolute; top: 40px; left: 24px; right: 24px; }
.screen-pace .pace-title { font-size: 24px; }
.screen-pace .pace-zone { margin-top: var(--s-3); }
.screen-pace .pace-rail { margin-top: var(--s-4); }
.screen-pace .pace-result { margin-top: var(--s-3); padding-top: var(--s-3); }

/* Carb cycling on the goals tab. */
.screen-carb .app-brand { position: absolute; top: 72px; left: 0; right: 0; display: flex; justify-content: center; }
.screen-carb .app-brand img { height: 22px; width: auto; }
.screen-carb .app-person { position: absolute; top: 76px; right: 26px; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; }
.screen-carb .app-body { top: 116px; }
.carb-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 24px 0; font-size: 13.5px; color: var(--text-2); }
.carb-toggle { flex: none; width: 52px; height: 32px; border-radius: 16px; background: var(--nutrition); position: relative; box-shadow: 0 0 14px rgba(34, 197, 94, 0.35); }
.carb-toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.carb-avg { display: flex; align-items: center; justify-content: space-between; margin: 18px 24px 0; padding: 14px 18px; border-radius: 16px; border: 0.5px solid rgba(174, 174, 178, 0.12); background: linear-gradient(180deg, rgba(24, 24, 28, 0.5), rgba(10, 10, 12, 0.9)); }
.carb-avg-label { display: grid; gap: 4px; font: 700 9.5px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.carb-avg-label b { font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--nutrition); }
.carb-avg-figure { font: 300 30px/1 var(--font); font-variant-numeric: tabular-nums; }
.carb-avg-figure small { font-size: 14px; color: var(--text-2); margin-left: 3px; }
.carb-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; height: 236px; margin: 22px 24px 0; }
.carb-day { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; justify-items: center; }
.carb-pct { font: 600 11px/1 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carb-day.is-high .carb-pct { color: var(--nutrition-glow); }
.carb-slot { position: relative; width: 100%; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); overflow: hidden; }
.carb-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #4ade80 0%, #22c55e 40%, #15803d 100%); }
.carb-fill::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: #f4f4f5; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.carb-name { font: 600 12px/1 var(--font); color: var(--text-3); }
.carb-day.is-today .carb-name { color: var(--text); }
.carb-detail { margin: 18px 24px 0; padding: 14px; border-radius: 16px; border: 0.5px solid rgba(174, 174, 178, 0.12); text-align: center; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.carb-detail b { color: var(--text); font-weight: 600; }
.carb-detail .is-carbs { color: var(--nutrition); font-weight: 600; }
.app-tabbar { position: absolute; left: 12px; right: 12px; bottom: 26px; z-index: 4; height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border-radius: 32px; border: 0.5px solid rgba(174, 174, 178, 0.14); background: rgba(18, 18, 21, 0.92); }
.app-tabbar span { display: grid; justify-items: center; gap: 4px; font: 500 10px/1 var(--font); color: var(--text-3); }
.app-tabbar svg { width: 20px; height: 20px; fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-tabbar .is-on { color: var(--text); }
.app-tabbar .is-on svg { stroke: var(--nutrition); }

/* The coach. */
.screen-chat .chat-thread { position: absolute; top: 20px; left: 20px; right: 20px; display: grid; gap: 12px; }
.screen-chat .bubble { max-width: 86%; padding: 12px 16px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; }
.screen-chat .bubble.is-you { justify-self: end; color: var(--text); background: linear-gradient(180deg, #2a2a30, #1c1c21); border-bottom-right-radius: 6px; }
.screen-chat .bubble.is-coach { justify-self: start; color: var(--text-2); background: linear-gradient(180deg, rgba(36, 36, 41, 0.6), rgba(15, 15, 18, 0.9)); border: 0.5px solid rgba(240, 138, 58, 0.32); border-bottom-left-radius: 6px; }
.chat-input { position: absolute; left: 16px; right: 16px; bottom: 40px; z-index: 4; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; border-radius: 26px; border: 0.5px solid rgba(174, 174, 178, 0.16); background: rgba(24, 24, 28, 0.9); font-size: 15px; color: var(--text-3); }
.chat-send { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #ff7a45, var(--core)); }
.chat-send svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.no-live) .reveal .screen-chat .bubble { opacity: 0; transform: translateY(10px); }
  .js:not(.no-live) .reveal.is-in .screen-chat .bubble, .js:not(.no-live) .page-hero .screen-chat .bubble { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-entering), transform var(--dur-slow) var(--ease-entering); transition-delay: calc(500ms + var(--b, 0) * 900ms); }
}

/* The lock screen with the rest timer's Live Activity. */
.screen-lock { background: radial-gradient(120% 70% at 50% 0%, #1d1b22 0%, #0b0a0e 55%, #000 100%); }
.screen-lock::after { content: ""; position: absolute; left: 50%; top: 300px; width: 520px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 90, 31, 0.10), rgba(255, 90, 31, 0)); pointer-events: none; }
.lock-head { position: absolute; top: 96px; left: 0; right: 0; display: grid; justify-items: center; gap: 2px; z-index: 1; }
.lock-date { font: 600 19px/1 var(--font); color: rgba(255, 255, 255, 0.8); }
.lock-time { font: 600 104px/1 var(--font); font-stretch: 108%; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums; }
.screen-lock .activity { position: absolute; left: 14px; right: 14px; bottom: 168px; z-index: 1; }
.lock-buttons { position: absolute; left: 46px; right: 46px; bottom: 56px; display: flex; justify-content: space-between; z-index: 1; }
.lock-buttons span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(40, 40, 46, 0.7); }
.lock-buttons svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The analysis of one exercise. */
.trend-head { position: absolute; top: 26px; left: 24px; right: 24px; display: grid; gap: 6px; }
.trend-kicker { font: 700 10px/1 var(--font); font-stretch: var(--wide); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
.trend-figure { font: 600 44px/1 var(--font); font-stretch: var(--wide); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trend-figure small { font-size: 18px; color: var(--text-2); margin-left: 6px; font-weight: 500; }
.trend-delta { font-size: 14px; color: var(--temper); font-variant-numeric: tabular-nums; }
.screen-trend .trend { position: absolute; top: 168px; left: 18px; right: 34px; }
.trend-stats { position: absolute; top: 370px; left: 24px; right: 24px; display: grid; border-top: 1px solid var(--hairline); }
.trend-history { position: absolute; top: 562px; left: 24px; right: 24px; display: grid; gap: 12px; }
.trend-history ol { list-style: none; display: grid; }
.trend-history li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline-quiet); font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.trend-history li b { color: var(--text); font-weight: 600; }
.trend-stats div { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.trend-stats dt { color: var(--text-3); }
.trend-stats dd { color: var(--text); font-variant-numeric: tabular-nums; }