/* Per Push's interface, shared by every chapter: the app's own tokens (PerPushFigTokens), named --a-* so they
   never collide with the page's. Light is the app's default appearance. */
.pp {
  position: absolute; inset: 0; overflow: hidden; font-family: var(--sf); -webkit-font-smoothing: antialiased; color: var(--a-ink);
  --a-canvas: #fefaf5; --a-surface: #ffffff; --a-ink: #1c1108; --a-muted: #a07858; --a-warm: #5c3d28;
  --a-accent: #d94f0a; --a-bright: #e8651f; --a-wash: #fff4ec; --a-herowash: #fff7f1; --a-chip: #fff9f4;
  --a-border: rgba(217, 79, 10, 0.1); --a-borderS: rgba(217, 79, 10, 0.14); --a-track: #f3ece6; --a-ring: #edd8c8;
  --a-gold: #d4a84b; --a-tabbar: rgba(253, 250, 247, 0.94);
}
.pp.dark {
  --a-canvas: #121214; --a-surface: #1c1c1e; --a-ink: #ffffff; --a-muted: #8a8078; --a-warm: #e8e0d8;
  --a-accent: #e8752a; --a-bright: #e8752a; --a-wash: rgba(232, 117, 42, 0.08); --a-herowash: #1c1c1e; --a-chip: #1c1c1e;
  --a-border: rgba(244, 197, 160, 0.08); --a-borderS: rgba(232, 117, 42, 0.24); --a-track: #2a2622; --a-ring: #2c2926;
  --a-tabbar: rgba(34, 34, 36, 0.94);
}
.sy { width: 1em; height: 1em; display: block; flex: none; overflow: visible; }

/* status bar */
.pp-sb { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 4px 30px 0 44px; font-size: 16.5px; font-weight: 640; letter-spacing: -0.01em; }
.pp-sb .sb-t { font-weight: 640; font-variant-numeric: tabular-nums; }
.pp-sb .sb-i { display: flex; align-items: center; gap: 6px; }
.pp-sb .sb-i svg { height: 11.5px; fill: currentColor; }
.sb-batt { display: block; width: 25px; height: 12px; border-radius: 4px; border: 1.2px solid currentColor; padding: 1.5px; opacity: 0.9; }
.sb-batt i { display: block; width: 72%; height: 100%; border-radius: 2px; background: currentColor; }

/* app tiles (invented apps) and Per Push's icon */
.pp-tile { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18); }
.pp-tile svg { width: 58%; height: 58%; }
.pp-icon { width: 62px; height: 62px; border-radius: 14px; }

/* iOS 26 tab bar: a floating glass capsule; the selected tab sits in a tinted pill */
.pp-tabs {
  position: absolute; display: flex; align-items: center; padding: 0 5px; width: 361px; height: 62px; border-radius: 31px;
  background: var(--a-tabbar); box-shadow: 0 10px 28px -10px rgba(28, 17, 8, 0.32), inset 0 0 0 0.5px rgba(28, 17, 8, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.pp.dark .pp-tabs { box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.pp-tab { position: relative; z-index: 1; flex: 1; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--a-ink); opacity: 0.86; }
.pp-tab .sy { font-size: 23px; }
.pp-tab b { font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
.pp-tab.on { color: var(--a-accent); opacity: 1; }
.pp-tabsel { position: absolute; left: 5px; top: 5px; width: 87.75px; height: 52px; border-radius: 26px; background: rgba(217, 79, 10, 0.1); }
.pp.dark .pp-tabsel { background: rgba(255, 255, 255, 0.1); }

/* cards and chips in the app's Fig style: a 1px orange-tinted border, a whisper of shadow */
.pp-card { background: var(--a-surface); border-radius: 20px; box-shadow: 0 0 0 1px var(--a-border), 0 4px 8px -6px rgba(28, 17, 8, 0.08); }
.pp-label { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--a-muted); text-transform: uppercase; }
.pp-cta {
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 700; border-radius: 999px;
  background: linear-gradient(90deg, #e8651f, #d94f0a); box-shadow: 0 8px 16px -8px rgba(217, 79, 10, 0.5);
}
/* a finger on a button: a darkening that rides --press (0..1), set by the scroll */
.press { position: relative; }
.press::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: calc(var(--press, 0) * 0.18); pointer-events: none; }

/* ——— Home (HomeView): header, week, the horseshoe, chips, locked apps, recent sets ——— */
.ph { position: absolute; inset: 0; background: var(--a-canvas); color: var(--a-ink); }
.ph-sb { position: absolute; left: 0; top: 0; width: 393px; }
.ph-head { position: absolute; left: 22px; top: 62px; }
.ph-date { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--a-muted); }
.ph-brand { margin-top: 3px; font-size: 30px; font-weight: 900; letter-spacing: -0.8px; line-height: 1.1; }
.ph-tag { margin-top: 3px; font-size: 13px; color: var(--a-muted); }
.ph-streak {
  position: absolute; right: 22px; top: 70px; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 18px;
  background: rgba(217, 79, 10, 0.15); box-shadow: inset 0 0 0 1px var(--a-accent), 0 3px 7px rgba(217, 79, 10, 0.28);
}
.ph-fire { font-size: 17px; line-height: 1; }
.ph-streak span:last-child { display: flex; flex-direction: column; gap: 1px; }
.ph-streak b { font-size: 16px; font-weight: 900; line-height: 1; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.ph-streak small { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: rgba(217, 79, 10, 0.65); }
.ph-week { position: absolute; left: 22px; top: 148px; width: 349px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.ph-week > span:first-child { font-size: 12px; font-weight: 500; color: var(--a-muted); }
.ph-dots { display: flex; gap: 5px; }
.ph-dots i { width: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ph-dots b { width: 8px; height: 8px; border-radius: 50%; background: rgba(237, 216, 200, 0.55); }
.ph-dots em { font-style: normal; font-size: 8px; font-weight: 600; color: rgba(160, 120, 88, 0.55); }
.ph-dots i.on b { background: var(--a-accent); box-shadow: 0 0 3px rgba(217, 79, 10, 0.35); }
.ph-dots i.on em { color: var(--a-bright); }
.ph-wk { font-size: 12px; font-weight: 700; color: var(--a-accent); font-variant-numeric: tabular-nums; }
.ph-gauge { position: absolute; left: 22px; top: 222px; width: 349px; height: 338px; border-radius: 28px; background: linear-gradient(135deg, var(--a-surface), var(--a-herowash)); box-shadow: 0 0 0 1px var(--a-border), 0 4px 14px rgba(217, 79, 10, 0.1), 0 1px 2px rgba(28, 17, 8, 0.04); }
.ph-arc { position: absolute; left: -22px; top: -222px; width: 393px; height: 886px; overflow: visible; }
.ph-arc path { fill: none; stroke-linecap: round; stroke-width: 14; }
.ph-arc .ga-track { stroke: var(--a-ring); }
.ph-arc .ga-oglow, .ph-arc .ga-gglow { stroke-width: 22; opacity: 0.16; }
.ph-left { position: absolute; left: 0; right: 0; top: 122px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--a-muted); }
.ph-val { position: absolute; left: 0; right: 0; top: 138px; display: flex; justify-content: center; align-items: baseline; gap: 6px; white-space: nowrap; }
.ph-v { font-size: 39px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ph-plus { font-size: 22px; font-weight: 700; color: #d4a84b; font-variant-numeric: tabular-nums; }
.ph-chips { position: absolute; left: 22px; top: 574px; width: 349px; display: flex; gap: 8px; }
.ph-chips span { flex: 1; height: 66px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.ph-chips small { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--a-muted); }
.ph-chips b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-lockh, .ph-recenth { position: absolute; left: 22px; width: 349px; display: flex; justify-content: space-between; align-items: baseline; }
.ph-lockh { top: 658px; }
.ph-recenth { top: 790px; }
.ph-lockh b, .ph-recenth b { font-size: 15px; font-weight: 700; }
.ph-lockh em, .ph-recenth em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--a-accent); }
.ph-lock { position: absolute; left: 22px; top: 684px; width: 349px; height: 92px; border-radius: 20px; padding: 0 14px; }
.ph-row { display: flex; align-items: center; gap: 12px; height: 56px; }
.ph-emo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 18px; background: var(--a-wash); }
.ph-row span { flex: 1; display: flex; flex-direction: column; }
.ph-row b { font-size: 13px; font-weight: 600; }
.ph-row small { font-size: 11px; color: var(--a-muted); }
.ph-pad { position: relative; width: 26px; height: 26px; border-radius: 8px; background: var(--a-wash); color: var(--a-accent); }
.ph-pad .sy { position: absolute; left: 7px; top: 7px; font-size: 12px; }
.ph-foot { position: relative; height: 16px; text-align: center; font-size: 11px; color: var(--a-muted); }
.ph-foot span { position: absolute; left: 0; right: 0; top: 0; }
.ph-recent { position: absolute; left: 22px; top: 816px; width: 349px; height: 62px; border-radius: 20px; padding: 0 14px; }
.ph-set { display: flex; align-items: center; gap: 12px; height: 62px; }
.ph-sic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--a-wash); color: var(--a-accent); flex: none; }
.ph-si { font-size: 17px; }
.ph-set span { flex: 1; display: flex; flex-direction: column; }
.ph-set b { font-size: 13px; font-weight: 600; }
.ph-set small { font-size: 11px; color: var(--a-muted); }
.ph-set em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--a-accent); }
.ph-tabs { left: 16px; top: 806px; }

/* ——— Settings (SettingsView) ——— */
.pst { position: absolute; inset: 0; background: var(--a-canvas); color: var(--a-ink); }
.pst-sb { position: absolute; left: 0; top: 0; width: 393px; }
.pst-title { position: absolute; left: 22px; top: 62px; font-size: 28px; font-weight: 900; letter-spacing: -0.4px; }
.pst-sub { position: absolute; left: 22px; top: 100px; font-size: 13px; color: var(--a-muted); }
.pst-hero {
  position: absolute; left: 22px; top: 128px; width: 349px; height: 254px; border-radius: 22px;
  background: linear-gradient(150deg, var(--a-surface) 15%, var(--a-herowash)); box-shadow: inset 0 0 0 1px var(--a-accent), 0 8px 14px -4px rgba(217, 79, 10, 0.1);
}
.pst-well { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 16px; color: var(--a-accent); background: var(--a-wash); }
.pst-well.on { color: #fff; background: var(--a-accent); }
.pst-hh { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 12px; }
.pst-hh b { font-size: 15px; font-weight: 700; }
.pst-val { position: absolute; left: 20px; top: 64px; display: flex; align-items: baseline; gap: 6px; }
.pst-v { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pst-val small { font-size: 12px; color: var(--a-muted); }
.pst-sl { position: absolute; left: 20px; top: 116px; width: 309px; height: 50px; }
.pst-trk { position: absolute; left: 0; top: 13px; width: 309px; height: 4px; border-radius: 2px; background: var(--a-ring); overflow: hidden; }
.pst-fill { position: absolute; inset: 0; background: var(--a-accent); transform-origin: 0 50%; }
.pst-knob { position: absolute; left: -14px; top: 1px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.05); }
.pst-sl p { position: absolute; left: 0; top: 36px; width: 309px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; color: var(--a-muted); }
.pst-apply { position: absolute; left: 20px; top: 176px; width: 309px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 700; background: var(--a-accent); opacity: 0; }
.pst-apply .sy { font-size: 17px; }
.pst-hard { position: absolute; left: 6px; top: 180px; width: 337px; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.pst-hard span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pst-hard b { font-size: 14px; font-weight: 600; }
.pst-hard small { font-size: 11px; color: var(--a-muted); }
.pst-sw { --on: 0; position: relative; width: 51px; height: 31px; border-radius: 16px; background: color-mix(in srgb, #f2736b calc(var(--on) * 100%), #e9e9eb); }
.pp.dark .pst-sw { background: color-mix(in srgb, #f2736b calc(var(--on) * 100%), #39393d); }
.pst-sw i { position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); transform: translateX(calc(var(--on) * 20px)); }
.pst-sec { position: absolute; left: 22px; width: 349px; }
.pst-sec > p { padding-left: 4px; font-size: 15px; font-weight: 700; height: 26px; }
.pst-s1 { top: 396px; }
.pst-s2 { top: 488px; }
.pst-s3 { top: 640px; }
.pst-card { border-radius: 20px; background: var(--a-surface); box-shadow: 0 0 0 1px var(--a-border), 0 2px 4px -2px rgba(28, 17, 8, 0.06); }
.pst-row { --hl: 0; position: relative; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.pst-row::after { content: ""; position: absolute; inset: 0; border-radius: 20px; background: rgba(28, 17, 8, 0.06); opacity: var(--hl); pointer-events: none; }
.pst-row b { flex: 1; font-size: 14px; font-weight: 600; }
.pst-row em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--a-muted); }
.pst-chev { font-size: 11px; color: var(--a-muted); }
.pst-div { display: block; height: 1px; margin-left: 60px; background: var(--a-border); }
.pst-mul { height: 60px; }
.pst-mul > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pst-mul small { font-size: 11px; color: var(--a-muted); }
.pst-rates { display: flex; gap: 16px; }
.pst-r { --on: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pst-r b { font-size: 13px; font-weight: calc(500 + var(--on) * 200); color: color-mix(in srgb, #e0532b calc(var(--on) * 100%), #8c7e74); }
.pst-r i { width: 4px; height: 4px; border-radius: 2px; background: #e0532b; opacity: var(--on); }
.pst-pause { --press: 0; position: absolute; left: 22px; top: 732px; width: 349px; height: 56px; border-radius: 20px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--a-surface); box-shadow: inset 0 0 0 1px var(--a-accent); }
.pst-pause b { flex: 1; font-size: 14px; font-weight: 600; }
.pst-pi { width: 34px; height: 34px; border-radius: 11px; }
.pst-tabs { left: 16px; top: 806px; }