/*
 * The phone: a live, coded replica of the Tokos app's Today screen for the hero, and reusable still frames around real
 * screenshots for the rest of the page.
 *
 *   Live   the phone partial (partials/phone.html), driven by phone.js.
 *   Still  div.tk-phone.tk-phone--still > div.tk-phone__screen > img (a 720 × 1566 shot from site/media, with its
 *          width and height attributes set).
 *
 * Both fill their container's width (capped by --tk-phone-width) and reserve their height with aspect-ratio, so
 * nothing shifts while fonts or images load. The frame is drawn in percentages of the device, so it stays crisp and
 * in proportion at any size. The live screen is laid out at the app's real 402 × 874 points ("design px") and scaled
 * by --tk-scale, which phone.js keeps in step with the frame through a ResizeObserver.
 *
 * Light and dark: the screen follows the page's theme (html[data-theme], or the system without script), because every
 * colour inside the app comes from the app's own tokens (tokens.css), which carry both schemes — so it shows the app's
 * own light or dark mode. The revenue card stays dark in both, as in the app (.scheme-dark, its <ThemeScope>). The few
 * literal colours here are iOS itself — the status bar, the Dynamic Island, the glass materials, which iOS draws per
 * appearance (the --tk-ios-* values below, measured from the app on iOS 26) — and the frame. A theme change restyles in
 * place: nothing reboots or shifts; colours crossfade only while the page marks the switch (html.theme-switching).
 * Motion is transform and opacity only, set through custom properties by phone.js; the .tk-phone--still-motion
 * state (reduced motion, or the page's pause control) turns every animation and transition here off.
 */

/* Per-frame values phone.js writes. Registered as non-inheriting so a change restyles one element, not its subtree. */
@property --tk-rx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-ry { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-gx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-gy { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-dx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-dy { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-y { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ---------- the device (shared by live and still) ---------- */

.tk-phone {
  /* 433 × 905: the 402 × 874 screen plus a 15.5 pt bezel — an iPhone 17 Pro's proportions. */
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--tk-phone-width, 380px));
  aspect-ratio: 433 / 905;
  margin-inline: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Per appearance, dark first (the overrides follow). iOS's own colours, as it draws them over this app: status-bar
     ink, the header's bar-button glyphs (the app tints them `foreground`), tab labels and the selected tab (tinted
     `primary`), the Liquid Glass fill/edge/shadow/lens, and the toast's shadow. */
  --tk-ios-label: 255 255 255;
  --tk-ios-bar-item: 253 255 245;
  --tk-ios-tab: 233 247 240;
  --tk-ios-tab-on: 157 234 194;
  --tk-ios-glass: 33 48 42 / 0.55;
  --tk-ios-glass-edge: inset 0 0 0 1px rgb(var(--primary) / 0.15), inset 0 1px 1px rgb(255 255 255 / 0.05), 0 6px 16px rgb(0 0 0 / 0.22);
  --tk-ios-glass-filter: blur(16px) saturate(1.6) brightness(0.85);
  --tk-ios-lens: 255 255 255 / 0.14;
  --tk-ios-lens-sheen: 0.058;
  --tk-ios-lens-edge: 255 255 255 / 0.12;
  --tk-toast-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.3);
  /* The frame's light and shadow on the page: a teal rim (Tokos Health's brand teal, lifted for the dark page) and a
     deep shadow; the light page gets a softer rim and a softer, green-tinted shadow. */
  --tk-rim: 125 181 172;
  --tk-rim-peak: 0.62;
  --tk-rim-mid: 0.14;
  --tk-rim-back: 0.26;
  --tk-rim-white: 0.22;
  --tk-frame-shadow: 0 2px 3px rgb(0 0 0 / 0.35), 0 26px 48px -18px rgb(0 0 0 / 0.75), 0 60px 110px -40px rgb(0 0 0 / 0.65);
}

:root[data-theme="light"] .tk-phone {
  --tk-ios-label: 0 0 0;
  --tk-ios-bar-item: 23 36 22;
  --tk-ios-tab: 28 25 16;
  --tk-ios-tab-on: 10 67 36;
  --tk-ios-glass: 255 252 243 / 0.72;
  --tk-ios-glass-edge: inset 0 0 0 1px rgb(255 255 255 / 0.7), inset 0 1px 1px rgb(255 255 255 / 0.6), 0 8px 22px rgb(56 48 24 / 0.1);
  --tk-ios-glass-filter: blur(16px) saturate(1.4) brightness(1.03);
  --tk-ios-lens: 30 40 20 / 0.075;
  --tk-ios-lens-sheen: 0;
  --tk-ios-lens-edge: 255 255 255 / 0.3;
  --tk-toast-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.15), 0 3px 8px -3px rgb(0 0 0 / 0.08);
  --tk-rim: 88 144 136;
  --tk-rim-peak: 0.45;
  --tk-rim-mid: 0.1;
  --tk-rim-back: 0.18;
  --tk-rim-white: 0.2;
  --tk-frame-shadow: 0 2px 3px rgb(34 57 56 / 0.2), 0 26px 48px -18px rgb(34 57 56 / 0.34), 0 60px 110px -40px rgb(34 57 56 / 0.3);
}

/* Without script there is no data-theme; tokens.css follows the system then, and so does the phone. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tk-phone {
    --tk-ios-label: 0 0 0;
    --tk-ios-bar-item: 23 36 22;
    --tk-ios-tab: 28 25 16;
    --tk-ios-tab-on: 10 67 36;
    --tk-ios-glass: 255 252 243 / 0.72;
    --tk-ios-glass-edge: inset 0 0 0 1px rgb(255 255 255 / 0.7), inset 0 1px 1px rgb(255 255 255 / 0.6), 0 8px 22px rgb(56 48 24 / 0.1);
    --tk-ios-glass-filter: blur(16px) saturate(1.4) brightness(1.03);
    --tk-ios-lens: 30 40 20 / 0.075;
    --tk-ios-lens-sheen: 0;
    --tk-ios-lens-edge: 255 255 255 / 0.3;
    --tk-toast-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.15), 0 3px 8px -3px rgb(0 0 0 / 0.08);
    --tk-rim: 88 144 136;
    --tk-rim-peak: 0.45;
    --tk-rim-mid: 0.1;
    --tk-rim-back: 0.18;
    --tk-rim-white: 0.2;
    --tk-frame-shadow: 0 2px 3px rgb(34 57 56 / 0.2), 0 26px 48px -18px rgb(34 57 56 / 0.34), 0 60px 110px -40px rgb(34 57 56 / 0.3);
  }
}

.tk-phone__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tk-phone__stage,
.tk-phone__float,
.tk-phone__body {
  position: absolute;
  inset: 0;
}

.tk-phone__stage {
  transform: perspective(1600px) rotateX(calc(var(--tk-rx) * 1deg)) rotateY(calc(var(--tk-ry) * 1deg));
  transform-origin: 50% 50%;
}

/* Titanium: a dark, neutral band with thin highlights on its edges. */
.tk-phone__body,
.tk-phone--still {
  border-radius: 17.898% / 8.564%;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.2) 0%, rgb(255 255 255 / 0) 12%, rgb(255 255 255 / 0) 86%, rgb(255 255 255 / 0.12) 100%),
    linear-gradient(90deg, #2c2f2c 0%, #1b1e1c 6%, #141715 50%, #1b1e1c 94%, #2c2f2c 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    inset 0 1.5px 0.5px rgb(255 255 255 / 0.16),
    inset 0 -1px 0.5px rgb(0 0 0 / 0.55),
    var(--tk-frame-shadow);
}

/* The black glass around the display. */
.tk-phone__body::before,
.tk-phone--still::before {
  content: "";
  position: absolute;
  inset: 0.4972% 1.0393%;
  border-radius: 17.217% / 8.147%;
  background: #030403;
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.07), 0 0 0 0.5px rgb(0 0 0 / 0.6);
}

/* A soft teal rim light along the titanium, brightest at the top left, with a cool white catch light opposite. */
.tk-phone__body::after,
.tk-phone--still::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: conic-gradient(
    from 300deg,
    rgb(var(--tk-rim) / var(--tk-rim-peak)) 0deg,
    rgb(var(--tk-rim) / var(--tk-rim-mid)) 55deg,
    rgb(255 255 255 / 0.06) 140deg,
    rgb(255 255 255 / var(--tk-rim-white)) 190deg,
    rgb(255 255 255 / 0.05) 250deg,
    rgb(var(--tk-rim) / var(--tk-rim-back)) 320deg,
    rgb(var(--tk-rim) / var(--tk-rim-peak)) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.tk-phone--still {
  position: relative;
}

/* The display: 402 × 874 inside the bezel, with the iPhone's 62 pt corners. */
.tk-phone__screen {
  position: absolute;
  inset: 1.7127% 3.5797%;
  border-radius: 15.423% / 7.094%;
  background: #000;
}

/* Until a screenshot paints (or while the page swaps it for the other theme's), the screen shows the app's background. */
.tk-phone--still .tk-phone__screen {
  background: rgb(var(--background, 0 0 0));
}

.tk-phone__screen > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: inherit;
}

/* The live phone without script: the screen as a screenshot, in the system's appearance (tokens.css follows the system
   then too). A background, so only the one shown is fetched. */
.tk-phone__fallback {
  position: absolute;
  inset: 0;
  background: url("/assets/media/screen-today.5821b2a8f6.jpg") center / cover no-repeat;
}

@media (prefers-color-scheme: light) {
  .tk-phone__fallback {
    background-image: url("/assets/media/screen-today-light.27737a9ec4.jpg");
  }
}

/* Side buttons, drawn outside the frame from the screen's box: action + volume (left), side + Camera Control (right). */
.tk-phone__screen::before,
.tk-phone__screen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.75%;
  background: linear-gradient(90deg, #3a3d3a, #1d201e 55%, #2a2d2a);
  pointer-events: none;
}

.tk-phone__screen::before {
  left: -4.58%;
  border-radius: 1px 0 0 1px;
  -webkit-mask: linear-gradient(transparent 17.9%, #000 17.9% 23.6%, transparent 23.6% 29.4%, #000 29.4% 36.2%, transparent 36.2% 39.4%, #000 39.4% 46.2%, transparent 46.2%);
  mask: linear-gradient(transparent 17.9%, #000 17.9% 23.6%, transparent 23.6% 29.4%, #000 29.4% 36.2%, transparent 36.2% 39.4%, #000 39.4% 46.2%, transparent 46.2%);
}

.tk-phone__screen::after {
  right: -4.58%;
  border-radius: 0 1px 1px 0;
  background: linear-gradient(270deg, #3a3d3a, #1d201e 55%, #2a2d2a);
  -webkit-mask: linear-gradient(transparent 29.6%, #000 29.6% 41.4%, transparent 41.4% 62.4%, #000 62.4% 70.6%, transparent 70.6%);
  mask: linear-gradient(transparent 29.6%, #000 29.6% 41.4%, transparent 41.4% 62.4%, #000 62.4% 70.6%, transparent 70.6%);
}

.tk-phone__display {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: rgb(var(--background));
  /* Keeps the rounded clip around composited children in WebKit. */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

/* Glass glare: a faint diagonal sheen that slides as the phone turns. */
.tk-phone__glare {
  position: absolute;
  inset: -30% -60%;
  background: linear-gradient(
    112deg,
    rgb(255 255 255 / 0) 34%,
    rgb(255 255 255 / 0.055) 42%,
    rgb(255 255 255 / 0.018) 50%,
    rgb(255 255 255 / 0) 58%
  );
  transform: translate3d(calc(var(--tk-gx) * -9%), calc(var(--tk-gy) * -5%), 0);
  pointer-events: none;
}

/* ---------- the app canvas ---------- */

.tk-app {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  overflow: hidden;
  transform: scale(var(--tk-scale, 1));
  transform-origin: 0 0;
  visibility: hidden;
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.tk-phone--sized .tk-app {
  visibility: visible;
}

/* Page styles stop at the phone's glass. (Two classes outrank a page's `.section p`; :where keeps the component rules
   below, which come later at the same weight, in charge.) */
.tk-phone .tk-app :where(p, div, span, svg) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-wrap: wrap;
  max-width: none;
}

.tk-app svg {
  display: block;
  overflow: visible;
  fill: currentColor;
}

.tk-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Type scale (components/ui/Text.tsx). */
.tk-app .tk-t-overline { font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 1.3px; text-transform: uppercase; }
.tk-app .tk-t-title1 { position: relative; top: -1px; font-family: var(--font-serif, "Instrument Serif", serif); font-size: 30px; line-height: 36px; }
.tk-app .tk-t-title2 { position: relative; top: -0.67px; font-family: var(--font-serif, "Instrument Serif", serif); font-size: 24px; line-height: 30px; }
.tk-app .tk-t-body { font-size: 16px; line-height: 24px; }
.tk-app .tk-t-display { position: relative; top: -3px; font-family: var(--font-serif, "Instrument Serif", serif); font-size: 46px; line-height: 50px; letter-spacing: -0.5px; white-space: nowrap; }
.tk-app .tk-t-metric { position: relative; top: -3px; font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -0.6px; white-space: nowrap; }
.tk-app .tk-muted { color: rgb(var(--muted-foreground)); }
.tk-app .tk-strong { font-weight: 600; color: rgb(var(--foreground)); }
.tk-app .tk-nowrap { white-space: nowrap; }

/* Tones (theme/tones.ts): --tone is the solid/foreground, --tone-soft the tinted background. */
.tk-tone-primary { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.tk-tone-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.tk-tone-success { --tone: var(--success); --tone-soft: var(--success-soft); }
.tk-tone-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.tk-tone-destructive { --tone: var(--destructive); --tone-soft: var(--destructive-soft); }
.tk-tone-info { --tone: var(--info); --tone-soft: var(--info-soft); }

/* Cut-outs inside filled glyphs take the tile's tint, like an SF Symbol's knockout. */
.tk-cut { fill: none; stroke: rgb(var(--tone-soft)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tk-fill-cut { fill: rgb(var(--tone-soft)); }
.tk-cut--thin { stroke-width: 1.1; }

/* ---------- scrolling content ---------- */

.tk-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  transform: translate3d(0, calc(var(--tk-y) * -1px), 0);
}

.tk-app .tk-largetitle {
  position: absolute;
  top: 117.6px;
  left: 16px;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-size: 38px;
  line-height: 46px;
  white-space: nowrap;
}

.tk-app .tk-content {
  position: absolute;
  top: 181.67px;
  left: 20px;
  width: 362px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 64px;
}

.tk-app .tk-greeting {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tk-app .tk-sec--money {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Revenue hero (components/today/RevenueHero.tsx), always in the dark scheme. */
.tk-app .tk-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  border-radius: 24px;
  background: rgb(var(--hero));
}

/* The card's soft warm light: the app's gradient from the top-right corner to (35%, 55%). */
.tk-app .tk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(223.3deg, rgb(var(--hero-accent) / 0.16) 0%, rgb(var(--hero-accent) / 0) 59.3%);
  pointer-events: none;
}

.tk-app .tk-hero > * {
  position: relative;
}

.tk-app .tk-hero__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tk-app .tk-hero__title {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tk-app .tk-hero__label { color: rgb(var(--hero-accent)); }
/* Like the app's text frame, the big figure's descenders stop at its line box. */
.tk-app .tk-t-display { color: rgb(var(--hero-foreground)); clip-path: inset(-12px -12px 3.67px -12px); }

.tk-app .tk-hero__delta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}

.tk-app .tk-delta {
  display: flex;
  align-items: center;
  gap: 2px;
  color: rgb(var(--success));
}

.tk-app .tk-delta__arrow {
  width: 11px;
  height: 11px;
}

.tk-app .tk-hero__vs { color: rgb(var(--hero-foreground) / 0.6); }

.tk-app .tk-hero__go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(var(--hero-foreground) / 0.1);
  color: rgb(var(--hero-foreground));
}

.tk-app .tk-hero__go svg {
  width: 14px;
  height: 14px;
}

.tk-app .tk-chart {
  min-height: 136px;
}

.tk-app .tk-chart__bars {
  width: 322px;
  height: 112px;
}

.tk-app .tk-c1 { fill: rgb(var(--chart-1)); background: rgb(var(--chart-1)); }
.tk-app .tk-c2 { fill: rgb(var(--chart-2)); background: rgb(var(--chart-2)); }
.tk-app .tk-c3 { fill: rgb(var(--chart-3)); background: rgb(var(--chart-3)); }
.tk-app .tk-c4 { fill: rgb(var(--chart-4)); background: rgb(var(--chart-4)); }

/* Each column grows from the baseline (StackedBars: 800 ms ease-out cubic, 70 ms apart). */
.tk-app .tk-bar {
  transform-origin: 0 112px;
}

.tk-app .tk-chart__months {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--hero-foreground));
}

.tk-app .tk-chart__months > span {
  position: relative;
  top: 0.67px;
  width: 45.33px;
  text-align: center;
  opacity: 0.6;
}

.tk-app .tk-legend {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
}

.tk-app .tk-legend__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 50%;
  padding-right: 12px;
}

.tk-app .tk-legend__item > span:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.tk-app .tk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
}

.tk-app .tk-legend__label {
  position: relative;
  top: 1px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--hero-foreground) / 0.6);
  white-space: nowrap;
}

.tk-app .tk-legend__value {
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  color: rgb(var(--hero-foreground));
  white-space: nowrap;
}

.tk-app .tk-hairline {
  display: block;
  height: 0.5px;
  background: rgb(var(--hero-foreground) / 0.15);
}

.tk-app .tk-mtd {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tk-app .tk-pulse {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--success));
}

/* PulseDot: the halo breathes out to 2.6× and fades, every 1.6 s. */
.tk-app .tk-pulse__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(var(--success));
  opacity: 0;
  animation: tk-pulse 1600ms cubic-bezier(0.5, 1, 0.89, 1) infinite;
}

@keyframes tk-pulse {
  from { opacity: 0.5; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}

.tk-app .tk-mtd__label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: rgb(var(--hero-foreground) / 0.7);
  white-space: nowrap;
}

.tk-app .tk-mtd__value {
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--hero-foreground));
  white-space: nowrap;
}

/* Badge (components/ui/Badge.tsx, size sm). */
.tk-app .tk-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

.tk-app .tk-badge--solid {
  background: rgb(var(--accent));
  color: rgb(var(--accent-foreground));
}

.tk-app .tk-badge--success {
  background: rgb(var(--success-soft));
  color: rgb(var(--success));
}

/* The month-to-date gain shows for a few seconds after a payment lands (useCountUp). Once faded it is hidden as well:
   WebKit can keep painting a composited fade-out at full opacity after it ends. */
.tk-app [data-tk="gain"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s 260ms;
}

.tk-app [data-tk="gain"].is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease;
}

/* KPI tiles (StatTile). */
.tk-app .tk-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tk-app .tk-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(var(--border));
  border-radius: 24px;
  background: rgb(var(--card));
}

.tk-app .tk-tile__text {
  display: flex;
  flex-direction: column;
}

.tk-app .tk-tile__label {
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: rgb(var(--muted-foreground));
  white-space: nowrap;
}

.tk-app .tk-tile__caption {
  margin-top: 2px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: rgb(var(--muted-foreground));
  white-space: nowrap;
}

/* IconTile: a tinted rounded square holding a glyph. */
.tk-app .tk-icontile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  background: rgb(var(--tone-soft));
  color: rgb(var(--tone));
}

.tk-app .tk-icontile--sm { width: 30px; height: 30px; border-radius: 9px; }
.tk-app .tk-icontile--md { width: 38px; height: 38px; border-radius: 12px; }
.tk-app .tk-icontile--md svg { width: 15px; height: 15px; }

/* Glyph boxes at the sizes the app's SF Symbols render (15 pt in small tiles, 18 pt in medium ones). */
.tk-app .tk-ic--heart-doc { width: 12px; height: 12px; margin: 0.67px 0 0 0.67px; }
.tk-app .tk-ic--sparkles { width: 10px; height: 13px; margin-left: 1px; }
.tk-app .tk-ic--plane { width: 12.67px; height: 12.67px; }
.tk-app .tk-ic--doc { width: 10.33px; height: 12.67px; margin: 0.33px 0 0 0.67px; }
.tk-app .tk-icontile--md .tk-ic--alert { width: 15.33px; height: 14px; margin-top: -0.33px; }
.tk-app .tk-icontile--md .tk-ic--bolt-heart { width: 14.67px; height: 13.67px; margin-top: 0.67px; }
.tk-app .tk-icontile--md .tk-ic--people { width: 17px; height: 14px; }

/* Needs you (components/today/NeedsYou.tsx). */
.tk-app .tk-needs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tk-app .tk-needs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.tk-app .tk-needs__head > p {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tk-app .tk-needs__head .tk-badge {
  margin-bottom: 4px;
}

.tk-app .tk-attn {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 16px 16px 20px;
  overflow: hidden;
  border: 1px solid rgb(var(--border));
  border-radius: 24px;
  background: rgb(var(--card));
}

.tk-app .tk-attn::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: rgb(var(--tone));
}

.tk-app .tk-attn__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tk-app .tk-attn__title {
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tk-app .tk-attn__detail {
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  color: rgb(var(--muted-foreground));
}

.tk-app .tk-cta {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(var(--tone-soft));
  color: rgb(var(--tone));
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.tk-app .tk-cta svg {
  width: 9px;
  height: 9px;
}

/* ---------- iOS chrome ---------- */

/* Scroll edges, as on iOS 26: content passing under the status and navigation bars blurs and fades toward the
   background (so the bars stay legible over the dark revenue card in light mode too); content passing under the tab bar
   fades and stays sharp. Measured from the app: loop frames of Today scrolling, and the screen at rest. */
.tk-app .tk-edge {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* The top edge stops short of the screen's sides (content keeps 16 pt clear of them): a backdrop blur that reaches past
   the screen's clip averages in transparency, which WebKit shows as a grey vignette on a light screen. */
.tk-app .tk-edge--top {
  top: 0;
  left: 12px;
  right: 12px;
  height: 128px;
}

/* Its blur, on a layer of its own, so its mask doesn't thin out the fade beneath it. The layer stops at 112 pt, above
   the large title's letters (~121 pt): Chromium blurs the whole box of a backdrop filter whatever its mask says, so a
   taller layer smudged the tops of "T" and "d" at rest. */
.tk-app .tk-edge--top::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 112px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}

.tk-app .tk-edge--bottom {
  bottom: 0;
  height: 112px;
}

/* The fade: the background colour, shaped by a mask (a colour, unlike a gradient, can crossfade with the theme). */
.tk-app .tk-edge::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--background));
}

/* ~85% faded under the bars, easing off from 98 pt to nothing at 128 pt (the large title, whose letters start at
   ~126 pt, stays clear at rest). */
.tk-app .tk-edge--top::before {
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.85) 76.5%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.28) 87.5%, rgb(0 0 0 / 0.14) 92%, rgb(0 0 0 / 0.04) 97%, transparent);
  mask-image: linear-gradient(rgb(0 0 0 / 0.85) 76.5%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.28) 87.5%, rgb(0 0 0 / 0.14) 92%, rgb(0 0 0 / 0.04) 97%, transparent);
}

/* A quarter faded just above the tab bar, ~85% below it (the same in both appearances). */
.tk-app .tk-edge--bottom::before {
  -webkit-mask-image: linear-gradient(transparent 0%, rgb(0 0 0 / 0.25) 24%, rgb(0 0 0 / 0.84) 81%, rgb(0 0 0 / 0.85) 100%);
  mask-image: linear-gradient(transparent 0%, rgb(0 0 0 / 0.25) 24%, rgb(0 0 0 / 0.84) 81%, rgb(0 0 0 / 0.85) 100%);
}

.tk-app .tk-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  color: rgb(var(--tk-ios-label));
}

.tk-app .tk-status__time {
  position: absolute;
  top: 21.3px;
  left: 30px;
  width: 85px;
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.2px;
  text-align: center;
  white-space: nowrap;
}

.tk-app .tk-status__icons {
  position: absolute;
  top: 25.67px;
  left: 288.33px;
  width: 78.4px;
  height: 14px;
}

.tk-app .tk-status__wifi { fill: none; stroke: currentColor; stroke-width: 2.85; stroke-linecap: round; }

.tk-app .tk-status__case { fill: none; stroke: rgb(var(--tk-ios-label) / 0.4); stroke-width: 1.6; }
.tk-app .tk-status__cap { fill: rgb(var(--tk-ios-label) / 0.4); }

.tk-app .tk-island {
  position: absolute;
  top: 14px;
  left: 138.33px;
  width: 125.33px;
  height: 36.67px;
  border-radius: 18.33px;
  background: #000;
}

/* Liquid Glass: a blurred lens — in dark, faintly lit with a thin green-tinted rim; in light, warm white with a bright
   rim and a soft shadow. */
.tk-app .tk-glass {
  position: absolute;
  background-color: rgb(var(--tk-ios-glass));
  box-shadow: var(--tk-ios-glass-edge);
  -webkit-backdrop-filter: var(--tk-ios-glass-filter);
  backdrop-filter: var(--tk-ios-glass-filter);
}

.tk-app .tk-nav__pill {
  top: 62px;
  left: 284.67px;
  width: 101px;
  height: 44px;
  border-radius: 22px;
}

.tk-app .tk-nav__msg {
  position: absolute;
  top: 12.5px;
  left: 10.85px;
  width: 23.7px;
  height: 18.7px;
  color: rgb(var(--tk-ios-bar-item));
}

.tk-app .tk-nav__me {
  position: absolute;
  top: 10.85px;
  left: 66.2px;
  width: 21.9px;
  height: 21.9px;
  color: rgb(var(--tk-ios-bar-item));
}

.tk-app .tk-nav__badge {
  position: absolute;
  top: -4px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.67px;
  height: 20.67px;
  border-radius: 50%;
  background: rgb(var(--accent));
  color: rgb(var(--accent-foreground));
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1;
}

.tk-app .tk-nav__title {
  position: absolute;
  top: 73px;
  left: 0;
  right: 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 22px;
  text-align: center;
  opacity: clamp(0, calc((var(--tk-y) - 42) / 16), 1);
}

.tk-app .tk-tabbar {
  top: 791px;
  left: 21px;
  width: 360px;
  height: 62px;
  border-radius: 31px;
}

.tk-app .tk-tabbar__active {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 79.33px;
  height: 52px;
  border-radius: 26px;
  background-color: rgb(var(--tk-ios-lens));
  background-image: linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / var(--tk-ios-lens-sheen)));
  box-shadow: inset 0 0.5px 0 rgb(var(--tk-ios-lens-edge));
}

.tk-app .tk-tab {
  position: absolute;
  top: 0;
  width: 68.05px;
  height: 62px;
  color: rgb(var(--tk-ios-tab));
}

.tk-app .tk-tab:nth-of-type(2) { left: 9.67px; }
.tk-app .tk-tab:nth-of-type(3) { left: 77.72px; }
.tk-app .tk-tab:nth-of-type(4) { left: 145.77px; }
.tk-app .tk-tab:nth-of-type(5) { left: 213.82px; }
.tk-app .tk-tab:nth-of-type(6) { left: 281.87px; }

.tk-app .tk-tab--on { color: rgb(var(--tk-ios-tab-on)); }

.tk-app .tk-tab > svg {
  position: absolute;
  left: 50%;
}

.tk-app .tk-tab__sun { top: 13.67px; width: 29px; height: 18.67px; margin-left: -14.5px; }
.tk-app .tk-tab__pipe { top: 13px; width: 26px; height: 22px; margin-left: -13px; }
.tk-app .tk-tab__fam { top: 13.33px; width: 21px; height: 21px; margin-left: -10.5px; }
.tk-app .tk-tab__cal { top: 13.33px; width: 22.67px; height: 21px; margin-left: -11.33px; }
.tk-app .tk-tab__bill { top: 12.83px; width: 22px; height: 22px; margin-left: -11px; }

.tk-app .tk-tab > span:first-of-type {
  position: absolute;
  top: 37px;
  left: -10px;
  right: -10px;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
}

.tk-app .tk-tab__badge {
  position: absolute;
  top: 6px;
  left: 43.7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.5px;
  height: 19.5px;
  border-radius: 50%;
  background: rgb(var(--accent));
  color: #fff;
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1;
}

/* ---------- the toast (components/ui/ToastHost.tsx) ---------- */

.tk-app .tk-toastlayer {
  position: absolute;
  top: 68px;
  left: 12px;
  right: 12px;
  transform: translate3d(calc(var(--tk-dx) * 1px), calc(var(--tk-dy) * 1px), 0);
}

.tk-app .tk-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--border));
  border-radius: 24px;
  background: rgb(var(--elevated));
  box-shadow: var(--tk-toast-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -25px, 0);
}

/* FadeInUp.springify().damping(18) in; FadeOutUp.duration(220) out. */
.tk-app .tk-toast.is-in {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    transform 720ms linear(0, 0.038, 0.126, 0.238, 0.356, 0.469, 0.571, 0.661, 0.736, 0.798, 0.849, 0.888, 0.919, 0.943, 0.96, 0.973, 0.983, 0.99, 0.994, 0.997, 0.999, 1),
    opacity 720ms linear(0, 0.038, 0.126, 0.238, 0.356, 0.469, 0.571, 0.661, 0.736, 0.798, 0.849, 0.888, 0.919, 0.943, 0.96, 0.973, 0.983, 0.99, 0.994, 0.997, 0.999, 1);
}

.tk-app .tk-toast.is-out {
  opacity: 0;
  visibility: visible;
  transform: translate3d(0, -25px, 0);
  transition: transform 220ms cubic-bezier(0.45, 0, 0.55, 1), opacity 220ms cubic-bezier(0.45, 0, 0.55, 1);
}

.tk-app .tk-toast__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.tk-app .tk-toast__title {
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  line-height: 21px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tk-app .tk-toast__body {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  text-wrap: pretty; /* no lone word on the last line ("…acknowledged the / claim") */
  color: rgb(var(--muted-foreground));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tk-app .tk-toast__action {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(var(--primary-soft));
  color: rgb(var(--primary));
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

/* ---------- a theme switch: colours crossfade while the page marks it (main.js; never with reduced motion) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Backgrounds, borders, and shadows don't inherit, so everything fades its own. Zero-specificity html, so anything
     with transitions of its own (the boot cascade, the gain badge, the page's story shots) keeps them. Colours only:
     the tilt, float, and scroll are untouched. */
  :where(html.theme-switching) .tk-phone,
  :where(html.theme-switching) .tk-phone *,
  :where(html.theme-switching) .tk-phone *::before,
  :where(html.theme-switching) .tk-phone *::after {
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 250ms;
    transition-timing-function: ease;
  }

  /* Text and glyph colours inherit, so only the elements that set one fade it, and whatever inherits follows them in
     step. (Given its own fade, inherited text restarts it at every level of nesting in WebKit and lags behind the
     background, vanishing for half a second.) Add an element here when it sets a colour that changes with the theme. */
  :where(html.theme-switching) .tk-app,
  :where(html.theme-switching) .tk-app :is(.tk-muted, .tk-strong, .tk-badge--solid, .tk-tile__label, .tk-tile__caption,
    .tk-icontile, .tk-cut, .tk-fill-cut, .tk-attn__detail, .tk-cta, .tk-status, .tk-status__case, .tk-status__cap,
    .tk-nav__msg, .tk-nav__me, .tk-nav__badge, .tk-tab, .tk-toast__body, .tk-toast__action) {
    transition-property: color, fill, stroke, background-color, border-color, box-shadow;
  }

  /* A toast on screen fades with the rest, without losing its entrance. */
  :where(html.theme-switching) .tk-app .tk-toast.is-in {
    transition:
      transform 720ms linear(0, 0.038, 0.126, 0.238, 0.356, 0.469, 0.571, 0.661, 0.736, 0.798, 0.849, 0.888, 0.919, 0.943, 0.96, 0.973, 0.983, 0.99, 0.994, 0.997, 0.999, 1),
      opacity 720ms linear(0, 0.038, 0.126, 0.238, 0.356, 0.469, 0.571, 0.661, 0.736, 0.798, 0.849, 0.888, 0.919, 0.943, 0.96, 0.973, 0.983, 0.99, 0.994, 0.997, 0.999, 1),
      background-color 250ms ease,
      border-color 250ms ease,
      box-shadow 250ms ease;
  }
}

/* ---------- boot: the screen opens once the page reveals it (phone.js) ---------- */

/* Armed: everything is mounted, waiting at its "from" state. */
.tk-phone--armed .tk-app .tk-sec {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
}

.tk-phone--armed .tk-app .tk-bar {
  transform: scaleY(0);
}

/* Booting: sections cascade in (sectionEnter: 480 ms, 60 + 70·i ms) while the columns grow. */
.tk-phone--booting .tk-app .tk-sec {
  transition:
    opacity 480ms cubic-bezier(0.45, 0, 0.55, 1),
    transform 480ms cubic-bezier(0.45, 0, 0.55, 1);
}

.tk-phone--booting .tk-app .tk-sec:nth-child(1) { transition-delay: 60ms; }
.tk-phone--booting .tk-app .tk-sec:nth-child(2) { transition-delay: 130ms; }
.tk-phone--booting .tk-app .tk-sec:nth-child(3) { transition-delay: 200ms; }

.tk-phone--booting .tk-app .tk-bar {
  transition: transform 800ms cubic-bezier(0.33, 1, 0.68, 1);
}

.tk-phone--booting .tk-app .tk-bar:nth-child(1) { transition-delay: 130ms; }
.tk-phone--booting .tk-app .tk-bar:nth-child(2) { transition-delay: 200ms; }
.tk-phone--booting .tk-app .tk-bar:nth-child(3) { transition-delay: 270ms; }
.tk-phone--booting .tk-app .tk-bar:nth-child(4) { transition-delay: 340ms; }
.tk-phone--booting .tk-app .tk-bar:nth-child(5) { transition-delay: 410ms; }
.tk-phone--booting .tk-app .tk-bar:nth-child(6) { transition-delay: 480ms; }

/* Touch: a slow idle float (phone.js adds --float only where motion is welcome). */
.tk-phone--float .tk-phone__float {
  animation: tk-float 9s ease-in-out infinite;
}

@keyframes tk-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(0, -1.3%, 0) rotate(0.45deg); }
  65% { transform: translate3d(0, -0.5%, 0) rotate(-0.35deg); }
}

/* Off screen or in a background tab: nothing runs. */
.tk-phone--idle .tk-phone__float,
.tk-phone--idle .tk-app .tk-pulse__halo {
  animation-play-state: paused;
}

/* Reduced motion, or the page's pause control: a still phone — final values, no float, no pulse. Reduced motion
   keeps an opacity-only boot. */
.tk-phone--still-motion .tk-phone__float,
.tk-phone--still-motion .tk-app .tk-pulse__halo {
  animation: none;
}

.tk-phone--still-motion .tk-app .tk-sec {
  transform: none;
}

.tk-phone--still-motion .tk-app .tk-bar {
  transform: none;
  transition: none;
}

.tk-phone--still-motion .tk-app .tk-toast {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .tk-phone .tk-phone__float,
  .tk-phone .tk-app .tk-pulse__halo {
    animation: none;
  }

  .tk-phone .tk-app .tk-sec,
  .tk-phone .tk-app .tk-bar {
    transform: none;
  }

  .tk-phone .tk-app .tk-bar {
    transition: none;
  }
}