/* ==========================================================================
   Stillpaw's pages on the app page kit (/apps/kit/kit.css).

   The app's design is Steady (Docs/design/design-system.md in the app's repo):
   standard iOS, SF Pro at standard width, scrub blue #086F8C as the one tint, the
   grouped grey #F2F2F7 behind white modules, and the Timer always dark. The page
   uses those colours on the app's own content: the record's gaps between seizures,
   the Timer's black, the trigger chips, History's bars, the PDF's page one, the
   backup rows. Drawn screens use a 402-point grid sized from their container (--u),
   so each scales as one piece; they're pictures (role="img" or aria-hidden).
   ========================================================================== */

body.k-page.k-stillpaw {
  --k-bg: #FFFFFF;
  --k-bg-2: #F2F2F7;
  --k-ink: #0B0B0D;
  --k-ink-2: #55555C;
  --k-accent: #086F8C;
  --k-accent-ink: #FFFFFF;
  --k-card: #FFFFFF;
  --k-line: rgba(60, 60, 67, .16);
  --k-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
  --k-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
  --sp-blue: #086F8C;
  --sp-blue-deep: #065A72;
  --sp-grey: #F2F2F7;
  --sp-sec: rgba(60, 60, 67, .62);
  --sp-past: #8E8E93;
}
.k-stillpaw main :where(h1, h2, h3) { font-weight: 700; letter-spacing: -0.022em; }
.k-stillpaw .k-h3 { font-weight: 650; letter-spacing: -0.012em; }
.k-stillpaw .k-btn-primary { background: var(--sp-blue); color: #FFFFFF; }
.k-stillpaw .k-soon::before { background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.k-stillpaw .k-step-n::before { background: var(--k-accent); }
.k-stillpaw .k-subnav a[aria-current="page"] { background: var(--sp-blue); color: #FFFFFF; }

/* ---------- Hero: Today on an iPhone, its key and record lifting off the glass ---------- */
.sp-hero-run {
  position: relative; overflow-x: clip; background: var(--sp-blue); color: #FFFFFF;
  --k-ink: #FFFFFF; --k-ink-2: #E3F0F4; --k-line: rgba(255, 255, 255, .45);
}
.sp-hero .k-h1 { max-width: 11ch; text-wrap: balance; }
.sp-hero .k-hero-head > * + * { margin-top: 22px !important; }
.sp-hero .k-hero-more > * + * { margin-top: 20px !important; }
.sp-hero .k-hero-more > .k-lead + .sp-price { margin-top: 14px !important; }
.sp-hero .k-lockup img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 6px 16px -6px rgba(0, 0, 0, .35); }
.sp-hero .k-lockup span span { color: #E3F0F4; }
.sp-hero .k-btn-primary { background: #FFFFFF; color: var(--sp-blue-deep); }
.sp-hero .k-btn-primary.k-soon::before { background: var(--sp-blue); box-shadow: 0 0 0 3px rgba(8, 111, 140, .22); }
.sp-hero .k-btn-quiet { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.sp-hero .k-meta { color: #E3F0F4; }
.sp-price { font-size: 17px; line-height: 1.45; color: var(--k-ink); max-width: 34ch; }

/* The stage. --lift runs 0 (on the glass) to 1 (lifted); stillpaw.js scrubs it. The phone
   turns and each part of Today rises off the screen on its own plane: an exploded view of
   the real screen. Every transform below is a function of --lift. */
.sp-show { position: relative; height: clamp(440px, calc(100svh - 170px), 690px); }
.sp-lift {
  --lift: 1; --pw: min(calc((100svh - 190px) / 2.12), 322px);
  --ry0: -12deg; --rx0: 5deg; --ry: -10deg; --rx: 5deg; --z: 1px;
  --kx: -44%; --ky: 0%; --kz: 150; --ks: .1;
  --cx: 46%; --cy: -4%; --cz: 110; --cs: .4;
  --tx: -10%; --ty: -14%; --tz: 40;
  --dx: -18%; --dy: 26%; --dz: 60;
  --bx: 0%; --by: 26%; --bz: 20;
  position: relative; height: 100%; display: flex; align-items: center; font-family: var(--k-text);
  perspective: 1900px; perspective-origin: 40% 42%;
}
.sp-ph {
  --u: calc(100cqw / 402); --o: 2.966cqw;
  position: relative; flex: none; width: var(--pw); margin-left: 6%; container-type: inline-size; transform-style: preserve-3d;
  padding: calc(var(--pw) * .028); box-sizing: border-box; border-radius: calc(var(--pw) * .155); background: #0B0B0C;
  box-shadow: 0 0 0 1.5px #3A3A3D inset, 0 50px 90px -36px rgba(0, 20, 30, .65), 0 18px 36px -18px rgba(0, 0, 0, .35);
  transform: rotateY(calc(var(--ry0) + var(--ry) * var(--lift))) rotateX(calc(var(--rx0) + var(--rx) * var(--lift)));
}
.sp-ph::after { content: ""; position: absolute; z-index: 4; top: calc(var(--pw) * .045); left: 50%; width: 30%; height: calc(var(--pw) * .085); transform: translateX(-50%); background: #000; border-radius: 999px; }
.sp-ph-scr { position: relative; aspect-ratio: 402 / 874; border-radius: calc(var(--pw) * .13); overflow: hidden; background: #F2F2F7; color: #000; }
.sp-sb { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 52); box-sizing: border-box; }
.sp-sb b { font-size: calc(var(--u) * 17); font-weight: 600; }
.sp-sb-r { display: flex; align-items: flex-end; gap: calc(var(--u) * 3); }
.sp-sb-r i { width: calc(var(--u) * 3.5); background: #000; border-radius: 1px; }
.sp-sb-r i:nth-child(1) { height: calc(var(--u) * 5); } .sp-sb-r i:nth-child(2) { height: calc(var(--u) * 8); } .sp-sb-r i:nth-child(3) { height: calc(var(--u) * 11); }
.sp-sb-bat { margin-left: calc(var(--u) * 6); width: calc(var(--u) * 25); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 3.5); background: #000; }
/* the hollows each part leaves on the glass */
.sp-slot { position: absolute; left: calc(var(--u) * 16); width: calc(var(--u) * 370); background: rgba(120, 120, 128, .1); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .18); opacity: var(--lift); }
.sp-slot-title { top: calc(var(--u) * 80); height: calc(var(--u) * 96); border-radius: calc(var(--u) * 18); }
.sp-slot-key { top: calc(var(--u) * 188); height: calc(var(--u) * 88); border-radius: 999px; }
.sp-slot-rec { top: calc(var(--u) * 292); height: calc(var(--u) * 224); border-radius: calc(var(--u) * 26); }
.sp-slot-doses { top: calc(var(--u) * 534); height: calc(var(--u) * 196); border-radius: calc(var(--u) * 26); }
.sp-slot-tabs { left: calc(var(--u) * 22); width: calc(var(--u) * 358); top: calc(var(--u) * 784); height: calc(var(--u) * 62); border-radius: 999px; }
/* the parts */
.sp-layer { position: absolute; left: calc(var(--o) + var(--u) * 16); width: calc(var(--u) * 370); box-sizing: border-box; transform-origin: 50% 50%; color: #000; }
.sp-layer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 calc(var(--u) * 46) calc(var(--u) * 70) calc(var(--u) * -20) rgba(0, 25, 35, .6), 0 calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * -8) rgba(0, 0, 0, .25); opacity: var(--lift); }
.sp-l-title { top: calc(var(--o) + var(--u) * 80); height: calc(var(--u) * 96); padding: calc(var(--u) * 6) 0 0; border-radius: calc(var(--u) * 18); background: #F2F2F7;
  transform: translate3d(calc(var(--tx) * var(--lift)), calc(var(--ty) * var(--lift)), calc(var(--tz) * var(--z) * var(--lift))); }
.sp-l-title::after { opacity: calc(var(--lift) * .5); }
.sp-td-lt { padding: 0 calc(var(--u) * 4); font-size: calc(var(--u) * 34); font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.sp-td-seg { display: flex; margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 2); border-radius: 999px; background: rgba(120, 120, 128, .14); }
.sp-td-seg span { flex: 1; text-align: center; padding: calc(var(--u) * 6) 0; border-radius: 999px; font-size: calc(var(--u) * 13); font-weight: 600; }
.sp-td-seg .on { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.sp-l-key {
  top: calc(var(--o) + var(--u) * 188); height: calc(var(--u) * 88); border-radius: 999px; background: var(--sp-blue); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 22); font-weight: 600; letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translate3d(calc(var(--kx) * var(--lift)), calc(var(--ky) * var(--lift)), calc(var(--kz) * var(--z) * var(--lift))) scale(calc(1 + var(--ks) * var(--lift)));
}
.sp-l-key svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sp-l-rec {
  top: calc(var(--o) + var(--u) * 292); height: calc(var(--u) * 224); padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 12); border-radius: calc(var(--u) * 26); background: #FFFFFF; color: #000;
  transform: translate3d(calc(var(--cx) * var(--lift)), calc(var(--cy) * var(--lift)), calc(var(--cz) * var(--z) * var(--lift))) scale(calc(1 + var(--cs) * var(--lift)));
}
.sp-l-rec .sp-fig { display: flex; align-items: baseline; gap: calc(var(--u) * 7); }
.sp-l-rec .sp-fig-n { font-size: calc(var(--u) * 34); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sp-l-rec .sp-fig-l { font-size: calc(var(--u) * 17); font-weight: 600; }
.sp-l-rec .sp-sec { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 15); color: var(--sp-sec); font-variant-numeric: tabular-nums; }
.sp-l-rec .sp-gaps { position: relative; display: flex; align-items: flex-end; height: calc(var(--u) * 80); margin-top: calc(var(--u) * 22); border-bottom: 1px solid rgba(60, 60, 67, .22); }
.sp-l-rec .sp-gaps i { position: relative; flex: 1; height: 100%; font-style: normal; }
.sp-l-rec .sp-gaps i::before { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 100%; border-radius: calc(var(--u) * 3) calc(var(--u) * 3) 0 0; background: var(--sp-past); transform-origin: 50% 100%; transform: scaleY(max(.05, calc(var(--d) / 53))); }
.sp-l-rec .sp-gaps i.now::before { background: var(--sp-blue); transform: scaleY(var(--k, calc(44 / 53))); }
.sp-l-rec .sp-gaps i.now b { position: absolute; left: 50%; bottom: calc(var(--k, calc(44 / 53)) * 100%); transform: translate(-50%, calc(var(--u) * -4)); font-size: calc(var(--u) * 13); font-weight: 600; color: var(--sp-blue); font-variant-numeric: tabular-nums; }
.sp-l-rec .sp-cap { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 13); color: var(--sp-sec); }
.sp-daytag {
  position: absolute; left: auto; right: 0; top: calc(100% + var(--u) * 14); display: inline-flex; align-items: center; gap: calc(var(--u) * 7);
  padding: calc(var(--u) * 6) calc(var(--u) * 11) calc(var(--u) * 6) calc(var(--u) * 9); border-radius: 999px;
  background: var(--sp-blue); box-shadow: none; color: #FFFFFF;
  font-size: calc(var(--u) * 15); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: clamp(0, calc((var(--lift) - .75) * 4), 1);
}
.sp-daytag svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sp-l-doses { top: calc(var(--o) + var(--u) * 534); height: calc(var(--u) * 196); border-radius: calc(var(--u) * 26);
  transform: translate3d(calc(var(--dx) * var(--lift)), calc(var(--dy) * var(--lift)), calc(var(--dz) * var(--z) * var(--lift))); }
.sp-l-doses::after { top: calc(var(--u) * 26); }
.sp-td-sh { margin: 0 calc(var(--u) * 16) calc(var(--u) * 8); font-size: calc(var(--u) * 15); color: var(--sp-sec); }
.sp-td-grp { background: #FFFFFF; border-radius: calc(var(--u) * 26); overflow: hidden; }
.sp-td-row { display: flex; justify-content: space-between; align-items: center; margin-left: calc(var(--u) * 16); padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 12) 0; font-size: calc(var(--u) * 17); border-top: 1px solid rgba(60, 60, 67, .14); }
.sp-td-row:first-child { border-top: 0; }
.sp-td-row-t { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2); }
.sp-td-row-t b { font-weight: 600; }
.sp-td-row-t span, .sp-td-st { font-size: calc(var(--u) * 15); color: var(--sp-sec); }
.sp-td-st { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); }
.sp-td-st svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-td-later { color: var(--sp-sec); }
.sp-l-tabs {
  left: calc(var(--o) + var(--u) * 22); width: calc(var(--u) * 358); top: calc(var(--o) + var(--u) * 784); height: calc(var(--u) * 62);
  display: flex; padding: calc(var(--u) * 4); border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .05);
  transform: translate3d(calc(var(--bx) * var(--lift)), calc(var(--by) * var(--lift)), calc(var(--bz) * var(--z) * var(--lift)));
}
.sp-l-tabs span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); border-radius: 999px; font-size: calc(var(--u) * 11); font-weight: 500; color: #000; }
.sp-l-tabs svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.sp-l-tabs svg.fill { fill: currentColor; }
.sp-l-tabs svg.line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sp-l-tabs .on { background: rgba(120, 120, 128, .14); color: var(--sp-blue); }

@media (min-width: 1200px) and (min-height: 620px), (min-width: 900px) and (min-height: 760px) {
  html.k-motion .sp-hero-run { height: 190svh; }
  html.k-motion .sp-hero { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 100px 0 36px; }
  .sp-hero .k-h1 { font-size: clamp(44px, min(6vw, 8.6svh), 92px); }
}
@media (max-width: 899px) {
  .sp-show { height: auto; }
  .sp-lift { --pw: min(60vw, 246px); --ry0: -7deg; --rx0: 3deg; --ry: -6deg; --rx: 3deg;
    --kx: 0%; --ky: -10%; --kz: 60; --ks: .12; --cx: 0%; --cy: 14%; --cz: 50; --cs: .22; --tx: 0%; --ty: -26%; --tz: 20; --dx: 0%; --dy: 24%; --dz: 30; --bx: 0%; --by: 20%; --bz: 10;
    justify-content: center; padding: 40px 0 70px; }
  .sp-ph { margin-left: 0; }
}

/* ---------- The record module, at size (the close) ---------- */
.sp-hrec {
  --ch: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) clamp(18px, 2vw, 26px);
  border-radius: clamp(26px, 2.6vw, 38px); background: #FFFFFF; color: #000; font-family: var(--k-text);
  box-shadow: 0 60px 90px -40px rgba(0, 25, 35, .6), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}
.sp-hrec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-yr-a { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sp-yr-a .sp-fig-n { font-size: clamp(64px, min(7vw, 12svh), 120px); font-weight: 700; line-height: .9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sp-yr-a .sp-fig-l { font-size: clamp(20px, 1.9vw, 28px); font-weight: 650; letter-spacing: -0.012em; }
.sp-yr-sec { margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); color: var(--sp-sec); font-variant-numeric: tabular-nums; }
.sp-yr-cap { margin-top: 6px; font-size: 14px; color: var(--sp-sec); }
.sp-yr-chart { position: relative; flex: 1; min-height: 90px; display: flex; align-items: flex-end; gap: clamp(4px, .6vw, 10px); margin-top: 30px; border-bottom: 1.5px solid rgba(60, 60, 67, .3); }
.sp-yr-chart i { position: relative; flex: 1; height: 100%; font-style: normal; }
.sp-yr-chart i::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 100%; border-radius: 6px 6px 0 0; background: var(--sp-past); transform-origin: 50% 100%; transform: scaleY(max(.04, calc(var(--d) / 53))); }
.sp-yr-chart i b { position: absolute; left: 50%; bottom: calc(max(.04, var(--d) / 53) * 100%); transform: translate(-50%, -5px); font-size: clamp(11px, .9vw, 14px); font-weight: 600; color: rgba(60, 60, 67, .7); font-variant-numeric: tabular-nums; }
.sp-yr-chart i.now::before { background: var(--sp-blue); }
.sp-yr-chart i.now b { color: var(--sp-blue); font-size: clamp(15px, 1.3vw, 20px); font-weight: 700; }
@media (max-width: 899px) { .sp-yr-a .sp-fig-n { font-size: 64px; } .sp-yr-chart { gap: 3px; } .sp-yr-chart i b { font-size: 11px; } }

/* ---------- 1. The timer, on the Timer's own black ---------- */
.k-stillpaw .sp-dark {
  background: #000000; color: #FFFFFF;
  --k-bg: #000000; --k-ink: #FFFFFF; --k-ink-2: #A8A8AE; --k-line: rgba(255, 255, 255, .2); --k-accent: #5AB8DB; --k-card: #1C1C1E;
}
.sp-timer-visual { gap: clamp(24px, 3vw, 52px); }
.sp-timer-screens { container-type: inline-size; }
.sp-zoom { position: absolute; left: 4.6%; top: 25.1%; width: 90.8%; height: 9.2%; border-radius: 999px; background: #000; opacity: 0; transform-origin: 50% 50%; }
.sp-tmr { position: absolute; inset: 0; background: #000; color: #FFFFFF; z-index: 2; }
html.k-motion .sp-tmr { opacity: 0; }
.sp-tmr-in { --u: calc(100cqw / 402); position: absolute; inset: 0; font-family: var(--k-text); }
.sp-tmr-sb { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 21) calc(var(--u) * 32) 0 calc(var(--u) * 50); }
.sp-tmr-sb b { font-size: calc(var(--u) * 17); font-weight: 600; }
.sp-tmr-bat { width: calc(var(--u) * 26); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 4); background: #FFFFFF; }
.sp-tmr-bar { position: relative; display: flex; align-items: center; justify-content: center; margin-top: calc(var(--u) * 20); height: calc(var(--u) * 44); }
.sp-tmr-hide { position: absolute; left: calc(var(--u) * 16); padding: calc(var(--u) * 10) calc(var(--u) * 16); border-radius: 999px; background: rgba(120, 120, 128, .32); font-size: calc(var(--u) * 17); font-weight: 500; }
.sp-tmr-who { font-size: calc(var(--u) * 15); color: #98989F; }
.sp-tmr-clock { margin: calc(var(--u) * 10) calc(var(--u) * 16) 0; height: calc(var(--u) * 92); transform-origin: 0 0; transform: scale(.68); }
.sp-clk { display: block; font-size: calc(var(--u) * 84); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sp-tmr-at { margin: calc(var(--u) * 4) calc(var(--u) * 16) 0; font-size: calc(var(--u) * 15); color: #98989F; opacity: 0; }
.sp-tmr-plan { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 250); padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 26); background: #1C1C1E; }
.sp-tmr-plan p { font-size: calc(var(--u) * 17); line-height: 1.32; margin-top: calc(var(--u) * 8) !important; }
.sp-tmr-a { opacity: 0; }
.sp-tmr-a p { color: #98989F; }
.sp-tmr-cap { font-size: calc(var(--u) * 13); color: #98989F; }
.sp-tmr-b { top: calc(var(--u) * 186); }
.sp-tmr-b p { color: #FFFFFF; }
.sp-tmr-warn { font-size: calc(var(--u) * 20); font-weight: 600; color: #FF9F0A; margin-bottom: calc(var(--u) * 2); }
.sp-tmr-call { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 16); height: calc(var(--u) * 46); border-radius: 999px; background: rgba(90, 184, 219, .2); color: #5AB8DB; font-size: calc(var(--u) * 17); font-weight: 500; }
.sp-tmr-call svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); fill: currentColor; }
.sp-tmr-end { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 40); height: calc(var(--u) * 88); border-radius: 999px; background: #1A7F9E; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 22); font-weight: 600; }
.sp-tmr-end svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); fill: #FFFFFF; }
.sp-rule { width: 170px; flex: none; color: #FFFFFF; font-family: var(--k-text); }
.sp-rule-body { position: relative; display: flex; gap: 16px; height: clamp(240px, 46svh, 420px); }
.sp-rule-track { position: relative; width: 10px; border-radius: 5px; background: #2C2C2E; overflow: hidden; }
.sp-rule-fill { position: absolute; inset: 0; background: #5AB8DB; transform-origin: 50% 100%; transform: scaleY(var(--f, .9472)); }
.sp-rule-ticks { position: relative; flex: 1; }
.sp-rule-ticks span { position: absolute; left: 0; bottom: calc(var(--m) / 6 * 100%); transform: translateY(50%); font-size: 14px; color: #8E8E93; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-rule-ticks span::before { content: ""; display: inline-block; width: 10px; height: 1px; margin-right: 8px; vertical-align: middle; background: #48484A; }
.sp-rule-ticks .at { color: #FFFFFF; font-weight: 600; font-size: 15px; }
.sp-rule-ticks .at::before { width: 18px; height: 2px; background: #FFFFFF; }
.sp-strip-rule { gap: 12px !important; }
.sp-mini { position: relative; width: 150px; height: 8px; border-radius: 4px; background: #2C2C2E; overflow: hidden; }
.sp-mini-fill { position: absolute; inset: 0; background: #5AB8DB; transform-origin: 0 50%; transform: scaleX(var(--f, .9472)); }
.sp-mini-mark { position: absolute; top: 0; bottom: 0; left: 83.33%; width: 2px; background: #FFFFFF; }
.sp-mini-at { font-size: 14px; color: #E5E5EA; }
@media (max-width: 899px) { .sp-rule { display: none; } }

/* ---------- 2. Seizure details, drawn ---------- */
.sp-band-details { padding: clamp(96px, 14svh, 180px) 0; }
.sp-det { display: flex; justify-content: center; }
.sp-det-card {
  width: min(100%, 440px); container-type: inline-size; background: #FFFFFF; border-radius: clamp(28px, 3vw, 40px);
  box-shadow: 0 0 0 1px rgba(60, 60, 67, .1), 0 40px 70px -40px rgba(0, 0, 0, .35); overflow: hidden;
}
.sp-det-in { --u: calc(100cqw / 402); padding: calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 24); font-family: var(--k-text); color: #000; }
.sp-det-top { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 17); }
.sp-det-top b { font-weight: 600; }
.sp-det-btn { padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: 999px; background: var(--sp-grey); font-size: calc(var(--u) * 16); }
.sp-det-save { background: var(--sp-blue); color: #FFFFFF; font-weight: 600; }
.sp-det-when { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 15); color: var(--sp-sec); }
.sp-det-len { font-size: calc(var(--u) * 20); color: var(--sp-sec); }
.sp-det-len b { font-size: calc(var(--u) * 34); color: #000; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-det-h { margin: calc(var(--u) * 22) calc(var(--u) * 6) calc(var(--u) * 8); font-size: calc(var(--u) * 15); color: var(--sp-sec); }
.sp-det-seg { position: relative; display: flex; padding: calc(var(--u) * 3); border-radius: 999px; background: var(--sp-grey); }
.sp-det-seg span { position: relative; flex: 1; text-align: center; padding: calc(var(--u) * 11) 0; font-size: calc(var(--u) * 15); z-index: 1; }
.sp-det-thumb {
  position: absolute; top: calc(var(--u) * 3); bottom: calc(var(--u) * 3); left: calc(var(--u) * 3); width: calc((100% - var(--u) * 6) / 3);
  border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); transform: translateX(calc(var(--seg, 0) * 100%));
}
.sp-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 26); background: var(--sp-grey); }
.sp-chips span { padding: calc(var(--u) * 10) calc(var(--u) * 15); border-radius: 999px; background: rgba(120, 120, 128, .16); font-size: calc(var(--u) * 15); color: #000; }
.sp-chips .sp-chip-on { background: var(--sp-blue); color: #FFFFFF; }

/* ---------- 3. Doses: the Lock Screen, drawn ---------- */
.sp-lock { position: absolute; inset: 0; container-type: inline-size; background: #1C2A32; color: #FFFFFF; font-family: var(--k-text); }
.sp-lock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, #2E4A57 0%, rgba(28, 42, 50, 0) 70%); }
.sp-lock { --u: calc(100cqw / 402); }
.sp-lock-date { position: relative; margin-top: calc(var(--u) * 92); text-align: center; font-size: max(12px, calc(var(--u) * 20)); font-weight: 600; opacity: .92; }
.sp-lock-time { position: relative; display: grid; justify-items: center; font-size: calc(var(--u) * 96); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sp-lock-time span { grid-area: 1 / 1; }
.sp-lt0 { opacity: 0; }
.sp-ntfs { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 300); display: grid; gap: calc(var(--u) * 10); }
.sp-ntf { border-radius: calc(var(--u) * 24); background: rgba(245, 245, 247, .92); color: #000; padding: calc(var(--u) * 14); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.sp-ntf-row { display: flex; gap: calc(var(--u) * 11); align-items: flex-start; }
.k-page main .sp-ntf-row img { position: static; inset: auto; opacity: 1; width: calc(var(--u) * 38); height: calc(var(--u) * 38); max-width: none; border-radius: calc(var(--u) * 9); flex: none; }
.sp-ntf-row > div { flex: 1; min-width: 0; }
.sp-ntf-t { display: flex; justify-content: space-between; gap: 8px; font-size: max(12px, calc(var(--u) * 15)); }
.sp-ntf-t b { font-weight: 600; }
.sp-ntf-t small { display: grid; font-size: max(11px, calc(var(--u) * 13)); color: rgba(60, 60, 67, .6); }
.sp-ntf-t small span { grid-area: 1 / 1; text-align: right; white-space: nowrap; }
.sp-n0 { opacity: 0; }
.sp-ntf-b { margin-top: calc(var(--u) * 2); font-size: max(12px, calc(var(--u) * 15)); line-height: 1.3; }
.sp-ntf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 12); }
.sp-ntf-acts span { text-align: center; padding: calc(var(--u) * 10) 0; border-radius: calc(var(--u) * 14); background: rgba(120, 120, 128, .14); font-size: max(12px, calc(var(--u) * 16)); font-weight: 600; }
.sp-doses .k-device-screen > img { z-index: 2; }

/* ---------- 4. History, on scrub blue ---------- */
.k-stillpaw .sp-band-history {
  background: var(--sp-blue); color: #FFFFFF;
  --k-bg-2: #086F8C; --k-ink: #FFFFFF; --k-ink-2: #E3F0F4; --k-line: rgba(255, 255, 255, .25);
}
.sp-hist { width: 100%; max-width: 600px; justify-self: center; font-family: var(--k-text); color: #FFFFFF; }
.sp-hist-fig { display: flex; align-items: baseline; gap: 12px; }
.sp-hist-fig b { font-size: clamp(52px, 5.4vw, 76px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-hist-fig span { font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
.sp-hist-sec { margin-top: 6px; font-size: 17px; color: #E3F0F4; }
.sp-chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: clamp(160px, 22svh, 220px) auto; margin-top: 40px; }
.sp-chart-plot {
  position: relative; display: flex; align-items: flex-end; border-bottom: 1.5px solid rgba(255, 255, 255, .6);
  background: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 0 0 / 100% 1px no-repeat,
              linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16)) 0 50% / 100% 1px no-repeat;
}
.sp-chart-y { grid-column: 2; grid-row: 1; position: relative; }
.sp-chart-y span { position: absolute; right: 0; top: calc((4 - var(--y)) / 4 * 100%); transform: translateY(-50%); font-size: 13px; color: #E3F0F4; font-variant-numeric: tabular-nums; }
.sp-mo { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column-reverse; align-items: center; transform-origin: 50% 100%; }
.sp-mo::before, .sp-mo::after { content: ""; width: 52%; flex: none; }
.sp-mo::before { height: calc(var(--c, 0) * 25%); background: #FFFFFF; }
.sp-mo::after { height: calc(var(--o, 0) * 25%); background: rgba(255, 255, 255, .42); border-radius: 4px 4px 0 0; }
.sp-mo[style*="--c"]:not([style*="--o"])::before { border-radius: 4px 4px 0 0; }
.sp-rl { position: absolute; top: -26px; bottom: 0; left: calc(var(--m) / 12 * 100%); width: 0; border-left: 1.5px dashed rgba(255, 255, 255, .75); z-index: 1; transform-origin: 50% 100%; }
.sp-rl:not(:has(b)) { top: 0; }
.sp-rl b { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: #FFFFFF; color: var(--sp-blue); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-chart-x { grid-column: 1; grid-row: 2; display: flex; margin-top: 8px; }
.sp-chart-x span { flex: 1; text-align: center; font-size: 13px; color: #E3F0F4; }
.sp-chart-x small { display: block; font-size: 12px; opacity: .9; }
.sp-leg { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 15px; }
.sp-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; background: rgba(255, 255, 255, .42); }
.sp-leg i.c { background: #FFFFFF; }
.sp-keys { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.sp-keys li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 4px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: 16px; }
.sp-keys li > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; color: var(--sp-blue); font-size: 12px; }
.sp-keys li small { display: block; font-size: 14px; color: #E3F0F4; }
.sp-keys li em { font-style: normal; font-size: 14px; color: #E3F0F4; white-space: nowrap; }

/* ---------- 5. The vet report: page one comes out of Share PDF ---------- */
.sp-report-visual { position: relative; }

.sp-pdf-in { --p: calc(100cqw / 595); padding: calc(var(--p) * 40); font-family: var(--k-text); height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.sp-pdf-name { font-size: calc(var(--p) * 34); font-weight: 700; }
.sp-pdf-sub, .sp-pdf-prep { font-size: calc(var(--p) * 13); color: #555; margin-top: calc(var(--p) * 3); }
.sp-pdf-range { font-size: calc(var(--p) * 15); font-weight: 600; margin-top: calc(var(--p) * 12); }
.sp-pdf-tot { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--p) * 6); margin-top: calc(var(--p) * 16); padding: calc(var(--p) * 12) 0; border-top: calc(var(--p) * 2) solid #000; border-bottom: 1px solid #ccc; }
.sp-pdf-tot span { font-size: calc(var(--p) * 11); color: #555; line-height: 1.2; }
.sp-pdf-tot b { display: block; font-size: calc(var(--p) * 30); color: #000; font-variant-numeric: tabular-nums; margin-bottom: calc(var(--p) * 3); }
.sp-pdf-h { margin-top: calc(var(--p) * 18); font-size: calc(var(--p) * 13); font-weight: 600; }
.sp-pdf-chart { position: relative; flex: none; display: flex; align-items: flex-end; height: calc(var(--p) * 150); margin-top: calc(var(--p) * 22); border-bottom: 1px solid #000; }
.sp-pdf-chart i { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; height: 100%; }
.sp-pdf-chart i::before, .sp-pdf-chart i::after { content: ""; width: 50%; }
.sp-pdf-chart i::before { height: calc(var(--c, 0) * 25%); background: #111; }
.sp-pdf-chart i::after { height: calc(var(--a, 0) * 25%); background: #A8A8A8; }
.sp-pdf-rl { position: absolute; bottom: 0; top: calc(var(--p) * -18); left: calc(var(--m) / 13 * 100%); transform: translateX(-50%); font-size: calc(var(--p) * 10); font-weight: 600; color: #333; white-space: nowrap; }
.sp-pdf-rl::after { content: ""; position: absolute; left: 50%; top: calc(1.2em + 2px); bottom: 0; border-left: 1px dashed #777; }
.sp-pdf-key { margin-top: calc(var(--p) * 8); font-size: calc(var(--p) * 10); color: #555; }
.sp-pdf-ch { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--p) * 2) calc(var(--p) * 10); margin-top: calc(var(--p) * 10); font-size: calc(var(--p) * 10); color: #333; }
.sp-pdf-ch b { display: inline-block; width: calc(var(--p) * 14); font-weight: 700; }
.sp-pdf-foot { margin-top: auto; padding-top: calc(var(--p) * 8); border-top: 1px solid #ccc; font-size: calc(var(--p) * 10); color: #555; }
/* ---------- 6. Kept on your iPhone: the backup rows, drawn ---------- */
.sp-kept { width: 100%; max-width: 440px; justify-self: center; font-family: var(--k-text); color: #000; }
.sp-kept-lbl { margin: 0 16px 8px; font-size: 15px; color: var(--sp-sec); }
.sp-kept .sp-grp { background: #FFFFFF; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.sp-kept .sp-row { display: flex; align-items: center; gap: 12px; margin-left: 16px; padding: 13px 16px 13px 0; font-size: 17px; border-top: 1px solid rgba(60, 60, 67, .14); }
.sp-kept .sp-row:first-child { border-top: 0; }
.sp-kept .sp-row > span:first-child { flex: 1; }
.sp-kept .sp-val { color: var(--sp-sec); font-variant-numeric: tabular-nums; }
.sp-kept .sp-tint { color: var(--sp-blue); }
.sp-kept svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sp-kept .sp-dim { color: rgba(60, 60, 67, .38); }
.sp-kept .sp-dim > span:first-of-type { flex: 1; }
.sp-kept-foot { margin: 8px 16px 0; font-size: 13px; line-height: 1.35; color: var(--sp-sec); }
.sp-days { display: flex; align-items: center; gap: 12px; margin: 26px 16px; font-size: 15px; font-weight: 600; color: var(--sp-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-days-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(8, 111, 140, .16); overflow: hidden; }
.sp-days-track i { position: absolute; inset: 0; background: var(--sp-blue); transform-origin: 0 50%; transform: scaleX(var(--f, 1)); }
.sp-kept-today { margin-bottom: 14px; }
.sp-nudge { padding: 16px; }
.sp-nudge-t { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.sp-nudge-b { margin-top: 6px; font-size: 15px; line-height: 1.35; color: var(--sp-sec); }
.sp-nudge-a { display: flex; gap: 10px; margin-top: 14px; }
.sp-nudge-a span { padding: 9px 16px; border-radius: 999px; background: #DAE9EE; color: var(--sp-blue-deep); font-size: 15px; font-weight: 600; }
.sp-nudge-a .q { background: rgba(120, 120, 128, .14); color: #000; }

/* On a phone, a band's heading comes before its drawing. */
@media (max-width: 899px) { .k-band-grid > .k-stack { order: -1; } }

/* ---------- The rest ---------- */
.sp-rest .k-tile { background: var(--sp-grey); box-shadow: none; }
.sp-rest .k-tile-art { font-family: var(--k-text); color: #000; }
.sp-byd { background: #FFFFFF; border-radius: 22px; padding: 20px 20px 18px; display: grid; gap: 14px; }
.sp-byd-h { font-size: 22px; font-weight: 700; }
.sp-byd-p { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 15px; line-height: 1.35; }
.sp-byd-p svg { width: 26px; height: 26px; fill: none; stroke: var(--sp-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-byd-p b { display: block; font-size: 16px; font-weight: 600; }
.sp-byd-p span { color: var(--sp-sec); }
.sp-byd-r { font-size: 14px; line-height: 1.35; color: var(--sp-sec); }
.sp-byd-btn { justify-self: start; padding: 10px 20px; border-radius: 999px; background: #DAE9EE; color: var(--sp-blue-deep); font-size: 16px; font-weight: 600; }
@media (min-width: 900px) { .sp-byd { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; } .sp-byd-h, .sp-byd-r, .sp-byd-btn { grid-column: 1 / -1; } }
.sp-mseg { display: flex; padding: 3px; border-radius: 999px; background: rgba(120, 120, 128, .14); max-width: 280px; }
.sp-mseg span { flex: 1; text-align: center; padding: 8px 0; border-radius: 999px; font-size: 15px; font-weight: 600; }
.sp-mseg .on { background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.sp-art-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: #FFFFFF; font-size: 16px; }
.sp-art-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-art-col { flex-direction: column; gap: 2px; }
.sp-art-col span { color: var(--sp-sec); font-size: 15px; }
.sp-art-l { display: flex; justify-content: space-between; gap: 12px; color: #000 !important; font-size: 16px !important; }
.sp-art-l em { font-style: normal; color: var(--sp-sec); font-variant-numeric: tabular-nums; }
.sp-art-rescue .sp-art-col { margin-top: 0; }
.sp-wheel { margin-top: 12px; padding: 10px 16px 12px; border-radius: 16px; background: #FFFFFF; }
.sp-wheel-h { font-size: 15px; color: var(--sp-sec); }
.sp-wheel-w { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
.sp-wheel-w::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 34px; transform: translateY(-50%); border-radius: 10px; background: rgba(120, 120, 128, .14); }
.sp-wheel-w > div { position: relative; display: grid; text-align: center; font-size: 16px; line-height: 26px; color: rgba(60, 60, 67, .45); font-variant-numeric: tabular-nums; }
.sp-wheel-w > div > span { min-height: 26px; }
.sp-wheel-w b { color: #000; font-size: 19px; font-weight: 600; line-height: 34px; }
.sp-csv { background: #FFFFFF; border-radius: 14px; padding: 10px 12px; font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace; overflow: hidden; }
.sp-csv div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; white-space: nowrap; }
.sp-csv div:first-child { color: var(--sp-blue); font-weight: 600; }

/* ---------- Compare, plans, questions, close ---------- */
.sp-compare { background: var(--sp-grey); }
.sp-compare .k-actions { margin-top: 28px; }
.k-stillpaw .k-plan.k-plus { background: var(--sp-blue); color: #FFFFFF; --k-accent: #FFFFFF; }
.sp-plans-note { margin-top: 22px !important; max-width: 70ch; }
.sp-diary-note { margin-top: 28px !important; max-width: 62ch; }
.sp-close { background: var(--sp-blue); color: #FFFFFF; --k-ink: #FFFFFF; --k-ink-2: #E3F0F4; --k-line: rgba(255, 255, 255, .4); min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; }
.sp-close .k-lockup img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 6px 16px -6px rgba(0, 0, 0, .35); }
.sp-close .k-lockup span span { color: #E3F0F4; }
.sp-close .k-h2 { max-width: 16ch; margin: 0 auto; }
.sp-close .k-soon { background: #FFFFFF; color: var(--sp-blue-deep); }
.sp-close .k-soon::before { background: var(--sp-blue); box-shadow: 0 0 0 3px rgba(8, 111, 140, .25); }
.sp-close-rec { width: min(100%, 760px); margin: 56px auto 0; text-align: left; }
.sp-close-rec .sp-hrec { height: clamp(300px, 40svh, 420px); box-sizing: border-box; }
.sp-close-nav { justify-content: center; margin-top: 40px; }
.sp-close-nav a { color: #FFFFFF; }
.sp-close .sp-close-nav a[aria-current="page"] { background: #FFFFFF; color: var(--sp-blue-deep); }

/* ---------- Child pages ---------- */
.k-stillpaw.k-child-page .k-doc .sp-short { margin-top: 8px; }
.k-stillpaw.k-child-page .k-doc .sp-short h2 { margin-top: 4px; font-size: clamp(24px, 2.2vw, 30px); }
.k-stillpaw.k-child-page .k-doc .sp-short p { color: var(--k-ink); }
.k-stillpaw.k-child-page .k-doc .sp-short strong { font-weight: 650; }
.k-stillpaw.k-child-page .k-doc ul.k-note { list-style: disc; padding: 20px 24px 20px 42px; }
.k-stillpaw.k-child-page .k-doc ul.k-note li { color: var(--k-ink); }
.k-stillpaw.k-child-page .k-doc p.k-note { color: var(--k-ink); }
.k-stillpaw.k-child-page .sp-support-form { margin: 24px 0; }
.k-stillpaw .k-doc a, .k-stillpaw .k-doc p, .k-stillpaw .k-doc li, .k-stillpaw .k-doc td, .k-stillpaw .k-doc th { overflow-wrap: anywhere; }
.k-stillpaw .k-sub-hero .k-h1 { overflow-wrap: break-word; }

/* ---------- Round 3 ---------- */
/* Timer: small print with a floor, so it reads on a phone */
.sp-tmr-who { font-size: max(11px, calc(var(--u) * 15)); }
.sp-tmr-cap { font-size: max(10px, calc(var(--u) * 13)); }
.sp-tmr-at { font-size: max(11px, calc(var(--u) * 15)); }
.sp-tmr-plan p { font-size: max(11px, calc(var(--u) * 17)); }
.sp-tmr-call { font-size: max(11px, calc(var(--u) * 17)); }
.sp-tmr-hide { font-size: max(11px, calc(var(--u) * 17)); }
/* Seizure details: back to normal, the third tap */
.sp-det-bnbox { margin-top: calc(var(--u) * 18); border-radius: calc(var(--u) * 26); background: var(--sp-grey); }
.sp-det-bn { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 13) calc(var(--u) * 16); font-size: calc(var(--u) * 17); }
.sp-det-bn-v { display: grid; }
.sp-det-bn-v b { grid-area: 1 / 1; text-align: right; font-weight: 400; }
.sp-bn0 { color: var(--sp-blue); opacity: 0; }
.sp-bn1 { font-variant-numeric: tabular-nums; }
.sp-det-bn-s { padding: 0 calc(var(--u) * 16) calc(var(--u) * 13); font-size: calc(var(--u) * 15); color: var(--sp-sec); }
/* The report: totals as a strip on phones, and a tidier page one */
.sp-strip-totals span { padding: 6px 10px; border-radius: 999px; background: var(--sp-grey); font-size: 13px; color: var(--k-ink); }
.sp-pdf-tot { grid-template-columns: 1fr 1fr 1fr 1.35fr 1.1fr; }
.sp-pdf-ch b { width: auto; margin-right: .45em; }


/* The rest: pictures sit under their words; shorter on a phone */
.sp-rest .k-tile-art { margin-top: 16px; }
@media (min-width: 900px) { .sp-rest .k-tile-art { margin-top: auto; padding-top: 16px; } }
@media (max-width: 899px) { .sp-byd-p span, .sp-byd-r { display: none; } }
.sp-art-pets .sp-art-col { gap: 8px; }
/* Child pages: the app's blue at the top, as on the overview */
.k-stillpaw .k-sub-hero { background: var(--sp-blue); color: #FFFFFF; --k-ink: #FFFFFF; --k-ink-2: #E3F0F4; --k-line: rgba(255, 255, 255, .5); }
.k-stillpaw .k-sub-hero .k-lockup img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.k-stillpaw .k-sub-hero .k-lockup span span { color: #E3F0F4; }
.k-stillpaw .k-sub-hero .k-subnav a { color: #FFFFFF; }
.k-stillpaw .k-sub-hero .k-subnav a[aria-current="page"] { background: #FFFFFF; color: var(--sp-blue-deep); }
.k-stillpaw .k-sub-hero .k-standout { background: #FFFFFF; color: #0B0B0D; box-shadow: none; }
.k-stillpaw .k-sub-hero .k-standout > span { color: #55555C; }

/* Round 3 fixes */
.k-stillpaw .k-step .k-h2 { font-size: clamp(36px, 4vw, 60px); }
@media (max-width: 899px) { html.k-motion .k-stillpaw .k-step .k-h2 { font-size: clamp(28px, 7.4vw, 34px); } }
.sp-strip-nrc span { font-size: 14px; color: var(--k-ink); }
.sp-strip-nrc span:last-child { font-weight: 600; }
.sp-strip-nrc em { font-style: normal; color: var(--k-ink-2); font-weight: 400; }

/* ==========================================================================
   Lifted out of the phone (29 October, second pass): in every chapter a real piece of
   the app leaves the glass as its moment plays. Devices that carry a lifted layer are
   containers, so the layer is drawn on the screen's own 402-point grid (--u) and sits
   exactly over its place before it lifts.
   ========================================================================== */
.sp-tdev, .sp-ddev, .sp-rdev { container-type: inline-size; --u: calc(100cqw / 402); --o: 2.966cqw; }
/* the Timer: past 5:00 the plan lifts off the screen into the gutter */
.sp-rule { display: none; }
@media (min-width: 900px) { .sp-timer-visual { justify-content: flex-start; padding-left: 0; } }
.sp-tmr-slot { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 186); height: calc(var(--u) * 330); border-radius: calc(var(--u) * 26); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sp-tmr-bw { opacity: 0; }
.sp-tlift { --tl: 1; position: absolute; z-index: 3; left: var(--o); top: var(--o); width: 100cqw; height: calc(100cqw * 874 / 402); pointer-events: none; font-family: var(--k-text); color: #FFFFFF; transform-origin: 50% 30%;
  transform: translate(calc(100% * var(--tl)), calc(-6% * var(--tl))) scale(calc(1 + .3 * var(--tl))); }
.sp-tlift .sp-tmr-plan { top: calc(var(--u) * 186); }
.sp-tlift .sp-tmr-plan p { color: #FFFFFF; }
.sp-tlift .sp-tmr-plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); opacity: var(--tl); pointer-events: none; }
@media (max-width: 899px) { .sp-tlift { transform-origin: 50% calc(var(--u) * 186); transform: scale(calc(1 + .06 * var(--tl))); } }
/* Doses: the notifications sit on the glass, outside the screen's clip, so they can lift */
.sp-ddev .sp-ntfs { position: absolute; z-index: 3; left: calc(var(--o) + var(--u) * 12); right: calc(var(--o) + var(--u) * 12); top: calc(var(--o) + var(--u) * 300); font-family: var(--k-text); }
.sp-ntf { position: relative; --nl: 0; }
.sp-ntf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 34px 50px -18px rgba(0, 20, 30, .55); opacity: var(--nl); pointer-events: none; }
.sp-nrc {
  --nl: 1; position: absolute; z-index: 3; left: calc(var(--o) + var(--u) * 18); width: calc(100cqw - var(--u) * 36); top: calc(var(--o) + var(--u) * 690);
  display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 11) calc(var(--u) * 16); box-sizing: border-box; border-radius: calc(var(--u) * 14);
  background: #FFFFFF; color: #000; font-family: var(--k-text); font-size: calc(var(--u) * 15); font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 30% 50%;
  transform: translate(-40%, -40%) scale(1.55);
}
.sp-nrc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 30px 50px -16px rgba(0, 20, 30, .5), 0 0 0 1px rgba(60, 60, 67, .12); opacity: var(--nl); pointer-events: none; }
.sp-nrc b { font-size: calc(var(--u) * 17); font-weight: 600; min-width: calc(var(--u) * 100); }
.sp-nrc-s { display: flex; gap: calc(var(--u) * 14); color: var(--sp-sec); }
.sp-nrc-s span:last-child { color: #000; font-weight: 600; }
.sp-nrc em { font-style: normal; color: var(--sp-sec); font-weight: 400; }
.sp-strip-nrc { display: none !important; }
.sp-nrc-slot { position: absolute; z-index: 2; left: calc(var(--o) + var(--u) * 16); width: calc(100cqw - var(--u) * 32); top: calc(var(--o) + var(--u) * 686); height: calc(var(--u) * 48); border-radius: calc(var(--u) * 14); background: #E9E9EF; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .16); }
@media (max-width: 899px) { .sp-nrc { top: calc(var(--o) + var(--u) * 340); } .sp-nrc-slot { top: calc(var(--o) + var(--u) * 336); } .sp-nrc { transform: translateY(-30%) scale(1.35); } }
/* The report: page one leaves the phone's preview and grows into the page */
@media (min-width: 900px) { .sp-report-visual { justify-content: flex-start; padding-left: 5%; } }
.sp-rdev .sp-pdf {
  position: absolute; z-index: 3; left: 11.47cqw; top: 117.5cqw; width: 83cqw; aspect-ratio: 595 / 842; transform-origin: 50% 0;
  background: #FFFFFF; color: #000; border-radius: 4px; container-type: inline-size; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 50px 80px -30px rgba(0, 0, 0, .45);
  transform: translate(125%, -85%) scale(1.8) rotate(2deg);
}
@media (max-width: 899px) { .sp-rdev .sp-pdf { transform: translate(0, -100%) scale(1.5) rotate(1deg); clip-path: inset(0 0 66% 0); } }
/* Details and the backup notice: a piece lifts while it's tapped, then settles */
.sp-up { position: relative; --up: 0; transform: translateY(calc(var(--up) * -24px)) scale(calc(1 + var(--up) * .18)); }
.sp-up::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 24px 40px -12px rgba(0, 30, 40, .45); opacity: var(--up); pointer-events: none; }
.sp-chips .sp-up { z-index: 2; }

/* History: the chart under its words, at full width */
@media (min-width: 1100px) {
  .sp-band-history.sp-wide .k-band-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sp-band-history.sp-wide .k-stack { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: end; }
  .sp-band-history.sp-wide .k-stack .k-eyebrow, .sp-band-history.sp-wide .k-stack .k-h2 { grid-column: 1; }
  .sp-band-history.sp-wide .k-stack .k-body { grid-column: 2; grid-row: 2; max-width: 52ch; }
  .sp-band-history.sp-wide .sp-hist { max-width: none; justify-self: stretch; }
}
.sp-band-history .sp-chart { grid-template-rows: clamp(220px, 30svh, 320px) auto; }

/* Round A3 */
.sp-pdf-hole { position: absolute; z-index: 2; left: 11.47cqw; top: 117.5cqw; width: 83cqw; height: calc(217.4cqw * .36); border-radius: 6px; background: #E9E9EF; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .16); }
.sp-rl { clip-path: inset(-40px -24px 0 -24px); }
@media (max-width: 899px) {
  .sp-rest .k-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .sp-rest .k-tile.k-wide { grid-column: 1 / -1; }
  .sp-rest .k-tile { padding: 18px; }
  .sp-rest .k-tile .k-h3 { font-size: 18px; }
  .sp-rest .k-tile p { font-size: 15px; }
  .sp-rest .k-tile:not(.k-wide) .k-tile-art { display: none; }
}

/* Last defects from round A3 (not re-scored) */
.sp-det-card { overflow: visible; }
.sp-det-in { border-radius: inherit; }
.sp-l-doses .sp-td-sh { color: var(--sp-sec); background: #F2F2F7; display: inline-block; padding: calc(var(--u) * 2) calc(var(--u) * 8); margin-left: calc(var(--u) * 8); border-radius: 999px; }