/* ---- phone.css ---- */
/* ==========================================================================
   OIT Journal phone: the device frame, the status bar and the app's shared UI.
   Shared by every scene. Scene files style only their own `.scr--<id>` subtree.

   Coordinate system: the screen is always 393 x 852 CSS px (iPhone 16 Pro
   logical size). phone.js scales it to the frame with --ph-scale, so scenes
   are authored in real app points and never think about responsive sizes.
   ========================================================================== */

@font-face { font-family: "Caprasimo"; src: url("/assets/caprasimo.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 400; src: url("/assets/figtree-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 600; src: url("/assets/figtree-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 700; src: url("/assets/figtree-700.woff2") format("woff2"); font-display: swap; }

:root {
  /* App palette, sampled from the light theme (Resources/Styles/Colors.xaml + captures). */
  --app-bg: #f5ead8;          /* Cream */
  --app-card: #f9f4ed;        /* SurfaceColor, light theme cards */
  --app-card-2: #eee4ce;      /* tab bar / inset fills */
  --app-sand: #ebddc5;        /* Surface */
  --app-ink: #201e1d;
  --app-ink-soft: rgba(32, 30, 29, 0.55);   /* TextMuted #8C201E1D */
  --app-line: rgba(32, 30, 29, 0.12);
  --app-accent: #c67139;      /* Terracotta */
  --app-accent-deep: #b2622d;
  --app-accent-wash: #fff2eb;
  --app-sage: #7a8a5e;
  --app-sage-wash: #eef1e2;
  --app-sage-deep: #56633f;
  --app-night: #2e2b25;
  --app-font-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --app-font: "Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Frame */
  --ph-bezel: 12px;
  --ph-plate: #1d1b1a;
  --ph-radius: 62px;
  --ph-screen-radius: 50px;
}

/* --------------------------------------------------------------------------
   Frame. Give .phone a width (any unit); height follows the 417:876 ratio.
   -------------------------------------------------------------------------- */
.phone {
  position: relative;
  aspect-ratio: 417 / 876;
  width: 100%;
  max-width: 100%;
  border-radius: calc(var(--ph-radius) * var(--ph-scale, 1));
  background: var(--ph-plate);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 0 0 1px rgba(0, 0, 0, 0.35) inset,
    0 30px 60px -20px rgba(46, 43, 37, 0.45),
    0 12px 24px -12px rgba(46, 43, 37, 0.35);
  isolation: isolate;
}
.phone__glass {
  position: absolute;
  inset: calc(var(--ph-bezel) * var(--ph-scale, 1));
  border-radius: calc(var(--ph-screen-radius) * var(--ph-scale, 1));
  overflow: hidden;
  background: var(--app-bg);
  /* Safari: keep the rounded clip on transformed children */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* No-JS / reduced-data fallback: a real capture filling the glass. */
.phone__fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  max-width: none;
}
html.js .phone--live .phone__fallback { visibility: hidden; }

/* The fixed 393 x 852 coordinate space, scaled down to the glass. */
.ph-screen {
  position: absolute; left: 0; top: 0;
  width: 393px; height: 852px;
  transform: scale(var(--ph-scale, 1));
  transform-origin: 0 0;
  font-family: var(--app-font);
  color: var(--app-ink);
  font-size: 15px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  contain: layout paint;
  display: none;
}
html.js .phone--live .ph-screen { display: block; }

/* Scene layers: stacked; phone.js toggles visibility + opacity. */
.scr {
  position: absolute; inset: 0;
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
}
.scr.is-on { visibility: visible; }

/* --------------------------------------------------------------------------
   Status bar + Dynamic Island (above every scene)
   -------------------------------------------------------------------------- */
.ph-status {
  position: absolute; left: 0; right: 0; top: 0; height: 54px;
  z-index: 50; pointer-events: none;
  color: var(--app-ink);
  transition: color 160ms linear;
}
.ph-status[data-tone="light"] { color: #fff; }
.ph-status[data-tone="none"] .ph-time { opacity: 0; }
.ph-time {
  position: absolute; left: 0; width: 140px; top: 17px;
  text-align: center;
  font: 600 17px/22px var(--app-font);
  letter-spacing: -0.2px;
}
.ph-island {
  position: absolute; top: 11px; left: 50%; width: 125px; height: 37px;
  margin-left: -62.5px; border-radius: 20px; background: #000;
}
.ph-icons {
  position: absolute; right: 26px; top: 19px; height: 14px;
  display: flex; gap: 6px; align-items: center;
}
.ph-icons svg { display: block; height: 12px; width: auto; fill: currentColor; }
.ph-icons .ph-batt { height: 13px; }

/* Home indicator */
.ph-home {
  position: absolute; left: 50%; bottom: 8px; width: 139px; height: 5px;
  margin-left: -69.5px; border-radius: 3px; background: var(--app-ink);
  z-index: 50; pointer-events: none; opacity: 0.9;
}
.ph-home[data-tone="light"] { background: #fff; }

/* --------------------------------------------------------------------------
   Shared app UI (prefix .app-). Matches the shipped light theme.
   -------------------------------------------------------------------------- */
.app {
  position: absolute; inset: 0;
  background: var(--app-bg);
  padding: 59px 16px 0;
  display: flex; flex-direction: column;
}
.app-date { font: 600 12px/16px var(--app-font); color: var(--app-ink-soft); letter-spacing: 0.1px; }
.app-title { font: 400 26px/32px var(--app-font-display); color: var(--app-ink); margin: 2px 0 0; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin: 12px 0 14px; }
.app-sync {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: 11px;
  background: var(--app-sage-wash); color: var(--app-sage-deep);
  font: 600 11px/1 var(--app-font); white-space: nowrap;
}
.app-card {
  background: var(--app-card);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 1px 2px rgba(46, 43, 37, 0.06);
}
.app-card--hero { border-radius: 28px; padding: 18px; }
.app-label { font: 600 12px/16px var(--app-font); color: var(--app-ink-soft); }
.app-muted { color: var(--app-ink-soft); }
.app-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 26px; border: 0;
  background: var(--app-accent); color: #f5ead8;
  font: 600 16px/1 var(--app-font);
  width: 100%;
  transform-origin: 50% 50%;
}
.app-btn--ghost {
  background: transparent; color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-line);
  font-weight: 600;
}
.app-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 14px;
  background: var(--app-bg);
}
.app-chip__ico {
  width: 34px; height: 34px; border-radius: 17px; background: var(--app-card-2);
  display: grid; place-items: center; flex: none;
}
.app-chip__name { font: 600 15px/18px var(--app-font); }
.app-chip__sub { font: 400 12px/15px var(--app-font); color: var(--app-ink-soft); }

/* Monochrome icon tinted by currentColor: <i class="app-ico" style="--ico: the icon URL, /assets/app-<name>.svg"></i> */
.app-ico {
  display: inline-block; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}

/* Floating tab bar */
.app-tabbar {
  position: absolute; left: 19.5px; right: 19px; top: 780px; height: 54.5px;
  border-radius: 27.25px; background: var(--app-card-2);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center;
  padding: 0 6px;
  box-shadow: 0 6px 16px -8px rgba(46, 43, 37, 0.25);
}
.app-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 600 10px/1 var(--app-font); color: var(--app-ink-soft);
  height: 46px; justify-content: center; border-radius: 23px;
}
.app-tab .app-ico { width: 22px; height: 22px; }
.app-tab.is-active { background: rgba(198, 113, 57, 0.14); color: var(--app-accent-deep); }

/* Toast / inline banner ("Dose logged, observation started   Undo") */
.app-toast {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px;
  background: var(--app-sage-wash); font: 400 13px/16px var(--app-font);
}
.app-toast b { color: var(--app-accent-deep); font-weight: 600; }

/* Finger tap indicator any scene can position: set left/top in screen px, drive --tap 0..1 */
.ph-tap {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; z-index: 40; pointer-events: none;
  background: rgba(32, 30, 29, 0.16);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
  opacity: calc(var(--tap, 0) * 1);
  transform: scale(calc(1.25 - var(--tap, 0) * 0.35));
}

/* "Demo scenario" honesty label, rendered under the phone by the page. */
.ph-demo-note { font: 400 12px/1.3 var(--app-font); color: var(--app-ink-soft); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ph-status { transition: none; }
}

/* ---- scenes/today.css ---- */
/* scenes/today.css (scene agent A). Shared Today chrome first, then the today specifics. */
/* ---- shared Today chrome for the A scenes (generated: every selector is prefixed with this scene) ----
   The real captures are an iPhone Pro Max (440 x 956 pt). .o-root lays the app out in those real points
   (straight from the XAML) and scales it to the phone's 393-pt screen: 393 / 440 = 0.893182. */
.scr--today .app.o-root {
  position: absolute; left: 0; top: 0;
  width: 440px; height: 954px;
  padding: 0; display: block;
  transform: scale(0.893182); transform-origin: 0 0;
  background: #f5ead8;
  font-family: var(--app-font);
  color: #201e1d;
  overflow: hidden;
}
.scr--today .o-page { position: absolute; inset: 0; background: #f5ead8; }
.scr--today .o-content { position: absolute; left: 20px; right: 20px; top: 62px; padding-top: 20px; }
.scr--today .o-stack { display: flex; flex-direction: column; gap: 16px; }
.scr--today .o-stack--14 { gap: 14px; }
.scr--today .o-layer { position: absolute; left: 0; right: 0; top: 0; }

/* header */
.scr--today .o-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.scr--today .o-head__l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scr--today .o-kicker { font: 600 12px/14.4px var(--app-font); letter-spacing: 1.2px; color: rgba(32, 30, 29, 0.55); }
.scr--today .o-h2 { font: 400 28px/32.2px var(--app-font-display); color: #201e1d; margin: 0; padding-top: 5.2px; }  /* wraps like the app (DE "Heute mit Mara und Leo") */
.scr--today .o-sync {
  display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 5px 12px; border-radius: 999px;
  background: #f0fae1; color: #3d472b; font: 600 11px/13.2px var(--app-font); white-space: nowrap; flex: none;
}
.scr--today .o-sync .app-ico { width: 12px; height: 12px; }

/* cards */
.scr--today .app-card.o-card { background: #f9f4ed; border-radius: 16px; padding: 18px; box-shadow: none; }
.scr--today .app-card.o-card--hero { border-radius: 28px; box-shadow: 0 3px 20px rgba(46, 43, 37, 0.16); }
.scr--today .o-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scr--today .o-tiles { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.scr--today .o-tile {
  flex: 0 0 48%; box-sizing: border-box; margin-bottom: 10px; padding: 10px;
  border-radius: 18px; background: #f5ead8; display: flex; align-items: center; gap: 10px;
}
.scr--today .o-allergen { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.scr--today .o-allergen .app-ico { width: 20px; height: 20px; }
.scr--today .o-tile__name { font: 600 15px/18px var(--app-font); color: #201e1d; }
.scr--today .o-tile__sub { font: 400 12px/14.4px var(--app-font); color: rgba(32, 30, 29, 0.55); margin-top: 1px; }

/* pills */
.scr--today .o-given {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #f0fae1; color: #3d472b; font: 600 12px/14.4px var(--app-font); white-space: nowrap; flex: none;
}
.scr--today .o-given .app-ico { width: 11px; height: 11px; }
.scr--today .o-outline {
  display: inline-flex; align-items: center; padding: 2.5px 8.5px; border-radius: 999px;
  border: 1.5px solid rgba(32, 30, 29, 0.16); color: rgba(32, 30, 29, 0.55);
  font: 600 12px/14.4px var(--app-font); white-space: nowrap; flex: none;
}

/* buttons */
.scr--today .o-prompt { font: 400 15px/18px var(--app-font); text-align: center; color: #201e1d; }
.scr--today .app-btn.o-btn {
  position: relative; height: 52px; border-radius: 26px; background: #c67139; color: #f5ead8;
  font: 600 16px/19.2px var(--app-font); gap: 10px; overflow: hidden; padding: 0 20px; box-sizing: border-box;
}
.scr--today .o-btn .app-ico { width: 22px; height: 22px; position: relative; }
.scr--today .o-btn > span { position: relative; }
.scr--today .o-btn__press { position: absolute; inset: 0; background: #b2622d; opacity: 0; border-radius: inherit; }
.scr--today .app-btn.app-btn--ghost.o-btn2 {
  height: 48px; border-radius: 24px; background: transparent; color: #201e1d;
  box-shadow: inset 0 0 0 1px rgba(32, 30, 29, 0.16); font: 600 15px/18px var(--app-font);
}

/* Undo banner */
.scr--today .app-toast.o-undo {
  padding: 10px 14px; border-radius: 18px; background: #f0fae1; min-height: 0;
  font: 400 13px/15.6px var(--app-font); color: #272e1b; gap: 10px;
}
.scr--today .o-undo b { color: #c67139; font: 600 15px/18px var(--app-font); padding: 4px 8px; margin: 0; }

/* observation window card */
.scr--today .o-win { display: flex; align-items: center; gap: 16px; }
.scr--today .o-ring { position: relative; flex: none; }
.scr--today .o-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr--today .o-ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scr--today .o-ring__t { font: 400 16px/18.4px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--today .o-ring__c { font: 400 10px/12px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--today .o-win__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scr--today .o-win__k { font: 600 11px/13.2px var(--app-font); letter-spacing: 1.2px; color: #3d472b; }
.scr--today .o-h4 { font: 400 18px/20.7px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--today .o-cap { font: 400 12px/14.4px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--today .o-restrict {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 14px; border-radius: 999px; margin-top: 12px;
  background: #f0fae1; color: #272e1b; font: 400 13px/15.6px var(--app-font);
}
.scr--today .o-restrict .app-ico { width: 14px; height: 14px; margin-top: 1px; color: #3d472b; }

/* "Day 58 on plan" progress card (single child) */
.scr--today .o-pcard {
  display: flex; align-items: center; gap: 12px; min-height: 62px; box-sizing: border-box;
  padding: 10px 14px 10px 10px; border-radius: 24px; border: 1.5px solid rgba(32, 30, 29, 0.16);
}
.scr--today .o-step { width: 40px; height: 40px; border-radius: 50%; background: #e1eecc; display: grid; place-items: center; flex: none; }
.scr--today .o-step svg { width: 20px; height: 20px; display: block; }
.scr--today .o-pcard__t { font: 400 16px/18.4px var(--app-font-display); color: #201e1d; }
.scr--today .o-pcard__s { font: 400 12.5px/15px var(--app-font); color: rgba(32, 30, 29, 0.55); margin-top: 2px; }
.scr--today .o-chev { width: 8px; height: 14px; flex: none; margin-left: auto; display: block; }

/* Dose given / Symptoms? cards */
.scr--today .o-body { font: 400 15px/18px var(--app-font); color: #201e1d; margin-top: 4px; }

/* tab bar (iOS 26 floating bar over the page) */
.scr--today .app-tabbar.o-tabbar {
  left: 22px; right: 22px; top: auto; bottom: 20px; height: 61px; padding: 3.5px; box-sizing: border-box;
  border-radius: 31px; background: #fff7e5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  box-shadow: 0 0 0 0.75px rgba(255, 255, 255, 0.9) inset, 0 10px 34px rgba(46, 43, 37, 0.16), 0 1px 3px rgba(46, 43, 37, 0.08);
}
.scr--today .o-tabbar .app-tab {
  height: 54px; border-radius: 27px; gap: 2px; padding-top: 1px;
  font: 600 11px/13px -apple-system, "SF Pro Text", var(--app-font); letter-spacing: 0.1px; color: #8a847c;
}
.scr--today .o-tabbar .app-tab .app-ico { width: 25px; height: 25px; color: #201806; }
.scr--today .o-tabbar .app-tab.is-active { background: #eee4cf; color: #c67139; width: 103.7px; justify-self: start; }
.scr--today .o-tabbar .app-tab.is-active .app-ico { color: #c67139; }

/* the dose-logged checkmark (Resources/Raw/dose_logged_check.json, redrawn as SVG) */
.scr--today .o-check { position: absolute; pointer-events: none; opacity: 0; }
.scr--today .o-check svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* finger */
.scr--today .o-finger { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; }
.scr--today .o-finger .ph-tap { left: 0; top: 0; }

/* child avatar (multi-child) */
.scr--today .o-av { border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--app-font-display); font-weight: 400; }
.scr--today .o-av--clay { background: #ffe1d0; color: #643312; }
.scr--today .o-av--dusk { background: #dfe5f2; color: #2b3a57; }
.scr--today .o-step svg { overflow: visible; }
.scr--today .o-states { position: relative; margin-top: 16px; }
.scr--today .o-quick { display: flex; flex-direction: column; gap: 14px; }
.scr--today .o-quick .o-btn2 { margin-top: 6px; }

/* ---- scenes/window.css ---- */
/* ==========================================================================
   Scene "window": the iOS lock screen during the 2-hour observation window.
   Screen space 393 x 852. The Live Activity and the notification are authored
   in native points of the captured device (440 pt wide) and scaled by
   393 / 440 = 0.89318, so their geometry matches the captures 1:1.
   ========================================================================== */

.scr--window {
  --lw-k: 0.89318;
  --lw-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Figtree", Arial, sans-serif;
  --lw-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Figtree", Arial, sans-serif;
  background: #e9dcc3;
  overflow: hidden;
  font-family: var(--lw-sys);
}

/* ---------- wallpaper ---------------------------------------------------- */
.scr--window .lw-wall { position: absolute; inset: 0; overflow: hidden; }
.scr--window .lw-wall > * { position: absolute; will-change: transform, opacity; }
.scr--window .lw-sky {
  inset: 0;
  background:
    radial-gradient(120% 60% at 80% 0%, #f7eedd 0%, rgba(247, 238, 221, 0) 60%),
    linear-gradient(180deg, #f1e6d0 0%, #ecdcc0 38%, #e5cfad 62%, #d9bf98 100%);
}
.scr--window .lw-glow {
  left: 262px; top: 420px; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 178, 120, 0.50), rgba(240, 178, 120, 0.16) 55%, rgba(240, 178, 120, 0) 100%);
}
.scr--window .lw-sun {
  left: 262px; top: 436px; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #eab083 0%, #df9a66 55%, #d38a55 100%);
  box-shadow: 0 0 40px 6px rgba(236, 168, 110, 0.35);
}
.scr--window .lw-hill { border-radius: 50%; }
.scr--window .lw-hill--back {
  left: -330px; top: 392px; width: 860px; height: 760px;
  background: radial-gradient(70% 55% at 62% 18%, #a7b38c 0%, #8e9d72 45%, #7a8a5e 100%);
}
.scr--window .lw-ring {
  left: -330px; top: 392px; width: 860px; height: 760px;
  border-radius: 50%;
  box-shadow: inset 0 1.5px 0 rgba(255, 249, 238, 0.55);
}
.scr--window .lw-hill--front {
  left: 70px; top: 520px; width: 760px; height: 700px;
  background: radial-gradient(60% 50% at 34% 14%, #6f7d55 0%, #5c6a44 42%, #4a5636 100%);
}
/* late-morning warmth: fades in with the clock */
.scr--window .lw-warm {
  inset: 0;
  background: radial-gradient(90% 55% at 70% 30%, rgba(255, 214, 160, 0.42), rgba(255, 214, 160, 0) 70%);
  opacity: 0;
}

/* ---------- clock ---------------------------------------------------------- */
.scr--window .lw-date,
.scr--window .lw-clock {
  position: absolute; left: 0; right: 0; text-align: center;
  color: rgba(52, 60, 37, 0.86);
  font-family: var(--lw-sys);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 250, 240, 0.35);
  white-space: nowrap;
}
.scr--window .lw-date { top: 71px; font-weight: 600; font-size: 19.5px; line-height: 24px; letter-spacing: 0.1px; }
.scr--window .lw-clock {
  top: 86px; font-weight: 600; font-size: 116px; line-height: 116px; letter-spacing: -3px;
  padding-right: 3px;
}

/* ---------- Live Activity (native points) --------------------------------- */
.scr--window .lw-stack {
  position: absolute; left: 12.5px; bottom: 121px; width: 368px; height: 0;
  z-index: 2;
  will-change: transform;
}
.scr--window .lw-la {
  position: absolute; left: 0; bottom: 0; width: 412px; box-sizing: border-box;
  transform: scale(var(--lw-k)); transform-origin: 0 100%;
  padding: 16px;
  border-radius: 25px;
  background: rgba(252, 249, 244, 0.97);
  box-shadow: 0 1px 1px rgba(46, 43, 37, 0.06), 0 10px 30px -14px rgba(46, 43, 37, 0.35);
  color: #201e1d;
  font-family: var(--lw-sys);
}
.scr--window .lw-la__top { display: flex; align-items: center; gap: 8px; }
.scr--window .lw-la__lead { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scr--window .lw-la__kick { display: flex; align-items: center; gap: 6px; height: 16px; }
.scr--window .lw-ava {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #ffe1d0; color: #643312;
  box-shadow: 0 0 0 1px #f5ead8, inset 0 0 0 1px #f5ead8;
  font: 600 8.8px/1 var(--lw-round);
}
.scr--window .lw-kick { display: grid; }
.scr--window .lw-kick__t {
  grid-area: 1 / 1;
  font: 600 11.5px/14px var(--lw-sys);
  letter-spacing: 0.7px; text-transform: uppercase; white-space: nowrap;
}
.scr--window .lw-kick__t--crit { color: #8c491a; }
.scr--window .lw-kick__t--calm { color: #3d472b; opacity: 0; }
.scr--window .lw-count {
  font: 600 34px/40px var(--lw-round);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  color: #201e1d;
  white-space: nowrap;
}
.scr--window .lw-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  background: #f0fae1; color: #3d472b;
  font: 600 12.5px/15px var(--lw-sys);
  white-space: nowrap;
}
.scr--window .lw-btn svg { width: 11px; height: 11px; display: block; }
.scr--window .lw-bar {
  position: relative; margin-top: 12px; height: 4px; border-radius: 2px;
  background: #dcd9d9; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.scr--window .lw-bar__fill {
  position: absolute; inset: 0; border-radius: 2px;
  transform: translateX(-100%);
  will-change: transform, opacity;
}
.scr--window .lw-bar__fill--crit { background: #c67139; }
.scr--window .lw-bar__fill--calm { background: #7a8a5e; opacity: 0; }
.scr--window .lw-pills { display: grid; margin-top: 12px; }
.scr--window .lw-pill {
  grid-area: 1 / 1;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font: 500 12px/14.5px var(--lw-sys);
}
.scr--window .lw-pill svg { width: 16px; height: 11px; flex: none; margin-top: 1.8px; }
.scr--window .lw-pill--crit { background: #fff2eb; color: #643312; }
.scr--window .lw-pill--calm { background: #f0fae1; color: #272e1b; opacity: 0; }

/* ---------- notification (native points) ---------------------------------- */
.scr--window .lw-note {
  position: absolute; left: 12.5px; bottom: 121px; width: 368px; height: 0;
  transform-origin: 50% 100%;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
}
.scr--window .lw-note__in {
  position: absolute; left: 0; bottom: 0; width: 412px; box-sizing: border-box;
  transform: scale(var(--lw-k)); transform-origin: 0 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px 12px 14px;
  min-height: 79px;
  border-radius: 25px;
  background: rgba(248, 244, 236, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.55), 0 8px 24px -14px rgba(30, 34, 20, 0.45);
  color: #1d1c1b;
  font-family: var(--lw-sys);
}
.scr--window .lw-note__ico {
  width: 38px; height: 38px; border-radius: 9px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.18);
}
.scr--window .lw-note__ico svg { display: block; width: 100%; height: 100%; }
.scr--window .lw-note__txt { flex: 1; min-width: 0; }
.scr--window .lw-note__head { display: flex; align-items: baseline; gap: 8px; }
.scr--window .lw-note__head b { flex: 1; font: 600 15.5px/19px var(--lw-sys); letter-spacing: -0.15px; white-space: nowrap; }
.scr--window .lw-note__head i { font: 400 14px/19px var(--lw-sys); font-style: normal; color: rgba(29, 28, 27, 0.5); }
.scr--window .lw-note__body { font: 400 15.5px/19px var(--lw-sys); letter-spacing: -0.15px; }

/* ---------- quick actions -------------------------------------------------- */
.scr--window .lw-qa {
  position: absolute; top: 762px; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(24, 28, 18, 0.32);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  color: #fff;
}
.scr--window .lw-qa--l { left: 46px; }
.scr--window .lw-qa--r { right: 46px; }
.scr--window .lw-qa svg { width: 22px; height: 22px; display: block; }

/* ---- scenes/progress.css ---- */
/* Progress tab (Mara, Day 58, 20:15). Authored in the store captures' own points: the captures are
   1320 x 2868 px of a 440 pt wide layout (3 px per pt), so .pr-pg is 440 x 954 and scales by 393/440.
   Every position below is a capture measurement / 3. */
.scr--progress { background: #f5ead8; overflow: hidden; }
.scr--progress .pr-pg {
  position: absolute; left: 0; top: 0; width: 440px; height: 954px;
  transform: scale(0.893182); transform-origin: 0 0;
  font-family: var(--app-font); color: #201e1d;
}
.scr--progress .pr-scroll { position: absolute; left: 0; top: 0; width: 440px; height: 1500px; will-change: transform; }
/* icons use the shared .app-ico (mask url resolves next to phone.css) */
.scr--progress .pr-card { position: absolute; left: 20px; width: 400px; background: #f9f4ed; border-radius: 16px; }
.scr--progress .pr-row {
  position: absolute; left: 18px; right: 18px; top: 18px; height: 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.scr--progress .pr-kicker { font: 600 12px/16px var(--app-font); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(32, 30, 29, 0.55); }
.scr--progress .pr-small { font: 400 12.5px/16px var(--app-font); color: rgba(32, 30, 29, 0.55); white-space: nowrap; }

/* chip + segment */
.scr--progress .pr-chip {
  position: absolute; left: 20px; top: 82px; height: 44px; width: 114px; border-radius: 22px;
  background: #f9f4ed; box-shadow: 0 1px 3px rgba(46, 43, 37, 0.10);
}
.scr--progress .pr-chip__av {
  position: absolute; left: 8.5px; top: 8.5px; width: 27px; height: 27px; border-radius: 50%;
  background: #ffe1d0; color: #643312; font: 400 14px/27px var(--app-font-display); text-align: center;
}
.scr--progress .pr-chip__name { position: absolute; left: 44.5px; top: 12px; font: 600 16px/20px var(--app-font); }
.scr--progress .pr-chip__chev { position: absolute; left: 83.8px; top: 11.5px; width: 19px; height: 19px; color: #645c50; }
.scr--progress .pr-seg {
  position: absolute; left: 21px; top: 142px; width: 397px; height: 48px; border-radius: 24px; background: #eee7db;
}
.scr--progress .pr-seg__on, .scr--progress .pr-seg__off {
  position: absolute; top: 4px; height: 40px; width: 192.5px; border-radius: 20px;
  font: 600 16px/40px var(--app-font); text-align: center;
}
.scr--progress .pr-seg__on { left: 4.7px; background: #f9f4ed; box-shadow: 0 1px 3px rgba(46, 43, 37, 0.14); }
.scr--progress .pr-seg__off { left: 200px; color: rgba(32, 30, 29, 0.55); }

/* hero */
.scr--progress .pr-hero {
  top: 206px; height: 160.7px; border-radius: 28px; overflow: hidden;
  box-shadow: 0 3px 10px rgba(46, 43, 37, 0.16);
}
.scr--progress .pr-hero__blob { position: absolute; left: 290px; top: -70px; width: 160px; height: 160px; border-radius: 50%; background: #f0fae1; }
.scr--progress .pr-hero__dot { position: absolute; left: 352px; top: 66px; width: 48px; height: 48px; border-radius: 50%; background: #ffe1d0; }
.scr--progress .pr-hero__kicker {
  position: absolute; left: 22px; top: 22px; font: 700 11.5px/14px var(--app-font); letter-spacing: 0.8px;
  text-transform: uppercase; color: #8c491a;
}
.scr--progress .pr-hero__day {
  position: absolute; left: 22px; top: 42px; font: 400 58px/61px var(--app-font-display); white-space: nowrap;
  letter-spacing: -0.3px;
}
.scr--progress .pr-hero__sub { position: absolute; left: 22px; top: 119px; font: 400 15px/19px var(--app-font); color: rgba(32, 30, 29, 0.55); white-space: nowrap; }

/* milestones */
.scr--progress .pr-mil { top: 382.7px; height: 164.3px; overflow: hidden; }
.scr--progress .pr-mil__track { position: absolute; left: 18px; top: 46.6px; right: 0; height: 110px; }
.scr--progress .pr-badge {
  position: absolute; left: 0; top: 0; width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; will-change: transform, opacity;
}
.scr--progress .pr-disc {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.scr--progress .pr-disc b { font: 400 18px/20px var(--app-font-display); }
.scr--progress .pr-disc i { font: 700 9.5px/10px var(--app-font); font-style: normal; letter-spacing: 0.5px; text-transform: uppercase; max-width: 58px; white-space: nowrap; }
/* a long caption (DE "nächster", ES "próximo") stays inside the 64-pt disc */
.scr--progress .pr-disc i:lang(de), .scr--progress .pr-disc i:lang(es), .scr--progress .pr-disc i:lang(ro) { letter-spacing: 0; font-size: 9px; }
.scr--progress .pr-badge__lbl { width: 67px; text-align: center; font: 600 11.5px/14px var(--app-font); color: #201e1d; }
.scr--progress .is-sage .pr-disc { background: #e1eecc; color: #3d472b; }
.scr--progress .is-accent .pr-disc { background: #ffe1d0; color: #8c491a; }
.scr--progress .is-locked .pr-disc { color: rgba(32, 30, 29, 0.55); }
.scr--progress .is-locked .pr-disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='%23a19786' stroke-width='2' stroke-dasharray='3 3'/%3E%3C/svg%3E") center / 100% 100%;
}
.scr--progress .is-locked .pr-badge__lbl { color: rgba(32, 30, 29, 0.55); }

/* ladder */
.scr--progress .pr-lad { top: 563.3px; height: 279px; overflow: hidden; }
.scr--progress .pr-lad__fill, .scr--progress .pr-lad__svg { position: absolute; left: 0; top: 47.7px; overflow: visible; }
.scr--progress .pr-lad__fill { will-change: clip-path; }
.scr--progress .pr-lad__svg text { font-family: var(--app-font); }
.scr--progress .pr-lad__foot {
  position: absolute; left: 18px; right: 18px; top: 238.7px; height: 22.7px;
  display: flex; align-items: center; justify-content: space-between;
}
.scr--progress .pr-pill {
  display: inline-flex; align-items: center; height: 22.7px; padding: 0 10px; border-radius: 12px;
  font: 600 12px/1 var(--app-font); white-space: nowrap;
}
.scr--progress .pr-pill--accent { background: #fff2eb; color: #643312; }
.scr--progress .pr-pill--plain { background: #eee7db; color: rgba(32, 30, 29, 0.55); position: absolute; left: 0; top: 0; }
.scr--progress .pr-pill--sage { background: #f0fae1; color: #3d472b; }

/* amount */
.scr--progress .pr-amt { top: 860px; height: 291.7px; overflow: hidden; }
.scr--progress .pr-amt .pr-row { top: 17.3px; height: 22.7px; }
.scr--progress .pr-amt__val { position: absolute; left: 18px; top: 60px; font: 400 36px/40px var(--app-font-display); white-space: nowrap; }
.scr--progress .pr-amt__cap { position: absolute; left: 18px; top: 105px; }
.scr--progress .pr-amt__svg { position: absolute; left: 0; top: 125.3px; overflow: visible; }
.scr--progress .pr-amt__svg text { font-family: var(--app-font); }

/* calm */
.scr--progress .pr-calm { top: 1168.3px; height: 239px; overflow: hidden; }
.scr--progress .pr-calm__svg { position: absolute; left: 0; top: 51.7px; overflow: visible; }
.scr--progress .pr-calm__svg text { font-family: var(--app-font); }
.scr--progress .pr-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.scr--progress .pr-calm__legend {
  position: absolute; left: 18px; top: 207px; display: flex; gap: 16px;
  font: 600 12px/16px var(--app-font); color: rgba(32, 30, 29, 0.55);
}
.scr--progress .pr-calm__legend span { display: inline-flex; align-items: center; gap: 6px; }
.scr--progress .pr-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.scr--progress .pr-sw--calm { background: #7a8a5e; }
.scr--progress .pr-sw--given { background: #e1eecc; }

/* dose time */
.scr--progress .pr-time {
  position: absolute; left: 28px; right: 28px; top: 1424px; height: 22px;
  display: flex; align-items: center; gap: 10px;
}
.scr--progress .pr-time__ico { width: 18px; height: 18px; color: #645c50; }
.scr--progress .pr-time .pr-small { flex: 1; }
.scr--progress .pr-time__val { font: 600 13.5px/16px var(--app-font); color: rgba(32, 30, 29, 0.55); white-space: nowrap; }

/* chrome over the scroll */
.scr--progress .pr-edge {
  position: absolute; left: 0; right: 0; top: 820px; height: 134px; pointer-events: none;
  background: linear-gradient(rgba(245, 234, 216, 0), rgba(245, 234, 216, 0.55) 45%, rgba(239, 228, 210, 0.9));
}
.scr--progress .pr-fab {
  position: absolute; right: 20px; top: 805px; height: 52px; padding: 0 20px 0 18px; border-radius: 26px;
  display: flex; align-items: center; gap: 8px;
  background: #ffe1d0; color: #8c491a; font: 700 15px/1 var(--app-font);
  box-shadow: 0 4px 12px rgba(46, 43, 37, 0.18);
}
.scr--progress .pr-fab__ico { width: 20px; height: 20px; }
.scr--progress .pr-tabbar {
  position: absolute; left: 21.7px; top: 873.3px; width: 397.3px; height: 61px; border-radius: 30.5px;
  background: #fff7e4; box-shadow: 0 6px 18px rgba(46, 43, 37, 0.14), inset 0 0 0 0.6px rgba(255, 255, 255, 0.9);
}
.scr--progress .pr-tabbar__sel { position: absolute; left: 98.6px; top: 3.4px; width: 104px; height: 54px; border-radius: 27px; background: #eee4cd; }
.scr--progress .pr-tab {
  position: absolute; top: 0; width: 96px; height: 61px; margin-left: -48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font: 600 11px/13px var(--app-font); color: rgba(32, 30, 29, 0.55);
}
.scr--progress .pr-tab .app-ico { width: 23px; height: 23px; color: #201806; }
.scr--progress .pr-tab:nth-child(2) { left: 55px; }
.scr--progress .pr-tab:nth-child(3) { left: 150.6px; }
.scr--progress .pr-tab:nth-child(4) { left: 245.3px; }
.scr--progress .pr-tab:nth-child(5) { left: 341px; }
.scr--progress .pr-tab.is-on, .scr--progress .pr-tab.is-on .app-ico { color: #c67139; }

/* ---- scenes/report.css ---- */
/* Export screen (20:20). Authored in the store captures' own points (440 pt wide, 3 px per pt, captures 13 + 14)
   and scaled by 393/440. Gaps are capture measurements / 3. */
.scr--report { background: #f5ead8; overflow: hidden; }
.scr--report .rp-pg {
  position: absolute; left: 0; top: 0; width: 440px; height: 954px;
  transform: scale(0.893182); transform-origin: 0 0;
  font-family: var(--app-font); color: #201e1d;
}
.scr--report .rp-scroll { position: absolute; left: 0; top: 0; width: 440px; will-change: transform; }

/* The scrolling content flows top to bottom like the app's stack. Margins are the capture gaps (EN), so the
   English frame matches the captures; longer copy simply pushes what follows down. */
.scr--report .rp-scroll { box-sizing: border-box; padding: 131.8px 20px 420px; display: flex; flex-direction: column; align-items: stretch; }

/* chip */
.scr--report .rp-chip {
  position: relative; flex: none; height: 44px; width: 114px; border-radius: 22px;
  background: #f9f4ed; box-shadow: 0 1px 3px rgba(46, 43, 37, 0.10);
}
.scr--report .rp-chip__av {
  position: absolute; left: 8.5px; top: 8.5px; width: 27px; height: 27px; border-radius: 50%;
  background: #ffe1d0; color: #643312; font: 400 14px/27px var(--app-font-display); text-align: center;
}
.scr--report .rp-chip__name { position: absolute; left: 44.5px; top: 12px; font: 600 16px/20px var(--app-font); }
.scr--report .rp-chip__chev { position: absolute; left: 83.8px; top: 11.5px; width: 19px; height: 19px; color: #645c50; }

/* section labels */
.scr--report .rp-label {
  padding-left: 4px; min-height: 15px;
  font: 700 11px/15px var(--app-font); letter-spacing: 1.2px; text-transform: uppercase; color: rgba(32, 30, 29, 0.55);
}
.scr--report .rp-label--format { margin-top: 19.2px; }
.scr--report .rp-label--period { margin-top: 19.7px; }
.scr--report .rp-label--opts { margin-top: 18px; }
.scr--report .rp-label--preview { margin-top: 20.4px; }

/* format cards */
.scr--report .rp-fmt {
  position: relative; box-sizing: border-box; border-radius: 22px; margin-top: 14.8px;
  padding: 12px 12px 14.2px 46px;
  background: #f9f4ed; border: 2px solid transparent;
}
.scr--report .rp-fmt--on { background: #fff2eb; border-color: #c67139; margin-top: 9.5px; padding-bottom: 15.2px; }
.scr--report .rp-radio {
  position: absolute; left: 12.7px; top: 12.5px; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(32, 30, 29, 0.55);
}
.scr--report .rp-radio.is-on { border-color: #8c491a; }
.scr--report .rp-radio.is-on::after { content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #8c491a; }
.scr--report .rp-fmt__title { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 16px/22px var(--app-font); }
.scr--report .rp-fmt__name { min-width: 0; }
.scr--report .rp-rec { flex: none; display: inline-flex; align-items: center; height: 20.7px; padding: 0 8px; border-radius: 11px; background: #e1eecc; color: #3d472b; font: 700 11px/1 var(--app-font); white-space: nowrap; }
.scr--report .rp-fmt__desc { margin-top: 1px; font: 400 13px/17.4px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--report .rp-fmt--on .rp-fmt__desc { margin-top: 3px; }

/* period chips */
.scr--report .rp-chips { margin-top: 5.3px; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.scr--report .rp-pchip {
  position: relative; height: 40px; padding: 0 16px; border-radius: 20px; background: #f9f4ed; overflow: hidden;
  font: 600 14px/40px var(--app-font); text-align: center; white-space: nowrap; transform-origin: 50% 50%;
}
.scr--report .rp-pchip > span { position: relative; }
.scr--report .rp-pchip__sel { position: absolute; inset: 0; background: #201e1d; border-radius: 20px; opacity: 0; }
.scr--report .rp-pchip__on { position: absolute !important; left: 0; right: 0; top: 0; color: #f9f4ed; opacity: 0; }
.scr--report .rp-summary { margin-top: 20.7px; padding-left: 4px; display: grid; font: 400 13px/18px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--report .rp-summary > span { grid-area: 1 / 1; }

/* report options card */
.scr--report .rp-opts { margin-top: 9.7px; padding: 8.6px 14px 6.6px; border-radius: 20px; background: #f9f4ed; display: flex; flex-direction: column; }
.scr--report .rp-strong { font: 600 16px/20px var(--app-font); }
.scr--report .rp-strong--15 { font-size: 15px; }
.scr--report .rp-lang { margin-right: 0.7px; height: 41.3px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scr--report .rp-seg {
  flex: none; display: flex; gap: 4px; padding: 4px; height: 41.3px; box-sizing: border-box; border-radius: 21px;
  background: #f5ead8; box-shadow: inset 0 0 0 1.5px rgba(32, 30, 29, 0.16);
}
.scr--report .rp-seg span { width: 51.3px; border-radius: 17px; text-align: center; font: 600 14px/33.3px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--report .rp-seg .is-on { background: #c67139; color: #fff; }
.scr--report .rp-div { display: block; height: 1px; background: rgba(32, 30, 29, 0.16); margin-top: 9.4px; }
.scr--report .rp-notes + .rp-div, .scr--report .rp-entry + .rp-div { margin-top: 13.4px; }
.scr--report .rp-prep { margin-top: 11px; font: 600 15px/20px var(--app-font); }
.scr--report .rp-opt { font: 400 13px/20px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--report .rp-entry {
  position: relative; margin: 5.3px 0.7px 0 0.7px; height: 42px; box-sizing: border-box; border-radius: 12px;
  background: #f5ead8; box-shadow: inset 0 0 0 1.5px rgba(32, 30, 29, 0.16);
}
.scr--report .rp-entry i { position: absolute; left: 12px; right: 12px; top: 4px; bottom: 4px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(32, 30, 29, 0.08); }
.scr--report .rp-entry span {
  position: absolute; left: 20px; right: 20px; top: 0; font: 400 16px/42px var(--app-font); color: rgba(32, 30, 29, 0.40);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr--report .rp-notes { margin-top: 9px; min-height: 42px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scr--report .rp-notes__txt { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; min-width: 0; }
.scr--report .rp-sub { font: 400 12px/16px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--report .rp-switch { position: relative; flex: none; margin-top: 6px; width: 63.3px; height: 28px; border-radius: 14px; background: #7a8a5e; }
.scr--report .rp-switch i { position: absolute; right: 2.5px; top: 2.5px; width: 37px; height: 23px; border-radius: 12px; background: #fbfbf8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

/* preview */
.scr--report .rp-prev { margin-top: 9.6px; display: flex; align-items: center; gap: 14px; }
.scr--report .rp-thumb {
  position: relative; flex: none; margin-left: 1.3px; width: 150px; height: 212px; border-radius: 6px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px rgba(32, 30, 29, 0.16), 0 2px 10px rgba(46, 43, 37, 0.18);
}
.scr--report .rp-thumb__pg { position: absolute; inset: 0; }
.scr--report .rp-thumb__pg svg { display: block; width: 100%; height: 100%; }
.scr--report .rp-spin { display: block; width: 20px; height: 20px; transform-origin: 50% 50%; }
.scr--report .rp-spin--thumb { position: absolute; left: 63px; top: 94px; width: 24px; height: 24px; opacity: 0; }
.scr--report .rp-cap { flex: 1; min-width: 0; display: grid; }
.scr--report .rp-cap > span { grid-area: 1 / 1; font: 400 13px/15.4px var(--app-font); color: rgba(32, 30, 29, 0.55); }

/* CTA, busy row, sync note */
.scr--report .rp-act { position: relative; margin-top: 16.7px; }
.scr--report .rp-cta {
  height: 52px; border-radius: 26px; padding: 0 16px;
  background: #c67139; color: #fff; font: 600 16px/52px var(--app-font); text-align: center; white-space: nowrap; transform-origin: 50% 50%;
}
.scr--report .rp-busy {
  position: absolute; left: 0; right: 0; top: 66px; height: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0;
}
.scr--report .rp-busy__txt { display: grid; }
.scr--report .rp-busy__txt span { grid-area: 1 / 1; font: 400 13px/18px var(--app-font); color: rgba(32, 30, 29, 0.55); white-space: nowrap; }
.scr--report .rp-syncnote {
  margin-top: 13px; text-align: center;
  font: 400 13px/18px var(--app-font); color: rgba(32, 30, 29, 0.55);
}

/* navigation bar */
.scr--report .rp-nav { position: absolute; left: 0; top: 0; width: 440px; height: 116px; background: #f5ead8; box-shadow: 0 0.5px 0 rgba(32, 30, 29, 0.14); }
.scr--report .rp-back {
  position: absolute; left: 20px; top: 62px; width: 44px; height: 44px; border-radius: 50%;
  background: #fffbe8; box-shadow: 0 2px 8px rgba(46, 43, 37, 0.14), inset 0 0 0 0.5px rgba(255, 255, 255, 0.9);
  display: grid; place-items: center;
}
.scr--report .rp-back svg { width: 24px; height: 24px; }
.scr--report .rp-nav__title { position: absolute; left: 0; right: 0; top: 73px; text-align: center; font: 600 17px/22px var(--app-font); }

/* share sheet */
.scr--report .rp-scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.22); opacity: 0; }
.scr--report .rp-sheet {
  position: absolute; left: 7px; right: 7px; top: 520px; height: 426px; border-radius: 40px;
  background: #f7f5f1;
  box-shadow: 0 -2px 30px rgba(20, 18, 16, 0.18), inset 0 0 0 0.6px rgba(255, 255, 255, 0.9);
  transform: translateY(460px);
}
.scr--report .rp-sheet__head { position: absolute; left: 22px; right: 18px; top: 22px; height: 64px; }
.scr--report .rp-sheet__doc {
  position: absolute; left: 0; top: 0; width: 46px; height: 65px; border-radius: 4px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 0.6px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.10);
}
.scr--report .rp-sheet__doc svg { display: block; width: 100%; height: 100%; }
.scr--report .rp-sheet__meta { position: absolute; left: 60px; right: 52px; top: 13px; display: flex; flex-direction: column; gap: 3px; }
.scr--report .rp-sheet__meta b { font: 600 15px/19px var(--app-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr--report .rp-sheet__meta span { font: 400 13px/17px var(--app-font); color: #7c776f; }
.scr--report .rp-sheet__x {
  position: absolute; right: 0; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(32, 30, 29, 0.07);
  display: grid; place-items: center;
}
.scr--report .rp-sheet__x svg { width: 18px; height: 18px; }
.scr--report .rp-sheet__list { position: absolute; left: 16px; right: 16px; top: 110px; border-radius: 22px; background: #fff; overflow: hidden; }
.scr--report .rp-sheet__row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; height: 54px; padding: 0 18px;
  font: 400 17px/1 var(--app-font); box-shadow: inset 0 -0.6px 0 rgba(32, 30, 29, 0.12);
}
.scr--report .rp-sheet__row:last-child { box-shadow: none; }
.scr--report .rp-sheet__row svg { width: 24px; height: 24px; }

/* finger (screen px, outside the scaled layer) */
.scr--report .rp-tapw { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40; will-change: transform; }
.scr--report .rp-tapw .ph-tap { left: 0; top: 0; }

/* ---- scenes/report-fan.css ---- */
/* Report fan: page-level overlay on the phone's box (the page gives .rfan the phone's position and size).
   Four real-layout A4 miniatures of the OIT Journal report leave the phone and fan out to one side.
   Sizes are % of the box (box width = 1 W, height = 876/417 W), so the fan scales with the phone.
   Page width is --pw (fraction of W, set by the page; 0.82 by default). */
.rfan {
  position: absolute; inset: 0;
  overflow: visible; pointer-events: none;
  z-index: 3;
}
.rfan__pg {
  position: absolute; left: 0; top: 0; width: calc(var(--pw, 0.82) * 100%);
  aspect-ratio: 595 / 842;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.rfan__paper {
  width: 100%; height: 100%;
  border-radius: 1.6% / 1.13%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.6em 1.6em rgba(46, 43, 37, 0.22), 0 0.1em 0.3em rgba(46, 43, 37, 0.14);
  font-size: 12px;
}
.rfan__svg { display: block; width: 100%; height: 100%; }

/* Page position, size and tilt all come from the transform (scenes/report-fan.js); later pages lie on top. */
.rfan__pg[data-pg="1"] { z-index: 1; }
.rfan__pg[data-pg="2"] { z-index: 2; }
.rfan__pg[data-pg="3"] { z-index: 3; }
.rfan__pg[data-pg="4"] { z-index: 4; }

@media (prefers-reduced-motion: reduce) {
  .rfan__pg { will-change: auto; }
}

/* ---- scenes/family.css ---- */
/* scenes/family.css (scene agent A). Shared Today chrome first, then the family specifics. */
/* ---- shared Today chrome for the A scenes (generated: every selector is prefixed with this scene) ----
   The real captures are an iPhone Pro Max (440 x 956 pt). .o-root lays the app out in those real points
   (straight from the XAML) and scales it to the phone's 393-pt screen: 393 / 440 = 0.893182. */
.scr--family .app.o-root {
  position: absolute; left: 0; top: 0;
  width: 440px; height: 954px;
  padding: 0; display: block;
  transform: scale(0.893182); transform-origin: 0 0;
  background: #f5ead8;
  font-family: var(--app-font);
  color: #201e1d;
  overflow: hidden;
}
.scr--family .o-page { position: absolute; inset: 0; background: #f5ead8; }
.scr--family .o-content { position: absolute; left: 20px; right: 20px; top: 62px; padding-top: 20px; }
.scr--family .o-stack { display: flex; flex-direction: column; gap: 16px; }
.scr--family .o-stack--14 { gap: 14px; }
.scr--family .o-layer { position: absolute; left: 0; right: 0; top: 0; }

/* header */
.scr--family .o-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.scr--family .o-head__l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scr--family .o-kicker { font: 600 12px/14.4px var(--app-font); letter-spacing: 1.2px; color: rgba(32, 30, 29, 0.55); }
.scr--family .o-h2 { font: 400 28px/32.2px var(--app-font-display); color: #201e1d; margin: 0; padding-top: 5.2px; }  /* wraps like the app (DE "Heute mit Mara und Leo") */
.scr--family .o-sync {
  display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 5px 12px; border-radius: 999px;
  background: #f0fae1; color: #3d472b; font: 600 11px/13.2px var(--app-font); white-space: nowrap; flex: none;
}
.scr--family .o-sync .app-ico { width: 12px; height: 12px; }

/* cards */
.scr--family .app-card.o-card { background: #f9f4ed; border-radius: 16px; padding: 18px; box-shadow: none; }
.scr--family .app-card.o-card--hero { border-radius: 28px; box-shadow: 0 3px 20px rgba(46, 43, 37, 0.16); }
.scr--family .o-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scr--family .o-tiles { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.scr--family .o-tile {
  flex: 0 0 48%; box-sizing: border-box; margin-bottom: 10px; padding: 10px;
  border-radius: 18px; background: #f5ead8; display: flex; align-items: center; gap: 10px;
}
.scr--family .o-allergen { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.scr--family .o-allergen .app-ico { width: 20px; height: 20px; }
.scr--family .o-tile__name { font: 600 15px/18px var(--app-font); color: #201e1d; }
.scr--family .o-tile__sub { font: 400 12px/14.4px var(--app-font); color: rgba(32, 30, 29, 0.55); margin-top: 1px; }

/* pills */
.scr--family .o-given {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #f0fae1; color: #3d472b; font: 600 12px/14.4px var(--app-font); white-space: nowrap; flex: none;
}
.scr--family .o-given .app-ico { width: 11px; height: 11px; }
.scr--family .o-outline {
  display: inline-flex; align-items: center; padding: 2.5px 8.5px; border-radius: 999px;
  border: 1.5px solid rgba(32, 30, 29, 0.16); color: rgba(32, 30, 29, 0.55);
  font: 600 12px/14.4px var(--app-font); white-space: nowrap; flex: none;
}

/* buttons */
.scr--family .o-prompt { font: 400 15px/18px var(--app-font); text-align: center; color: #201e1d; }
.scr--family .app-btn.o-btn {
  position: relative; height: 52px; border-radius: 26px; background: #c67139; color: #f5ead8;
  font: 600 16px/19.2px var(--app-font); gap: 10px; overflow: hidden; padding: 0 20px; box-sizing: border-box;
}
.scr--family .o-btn .app-ico { width: 22px; height: 22px; position: relative; }
.scr--family .o-btn > span { position: relative; }
.scr--family .o-btn__press { position: absolute; inset: 0; background: #b2622d; opacity: 0; border-radius: inherit; }
.scr--family .app-btn.app-btn--ghost.o-btn2 {
  height: 48px; border-radius: 24px; background: transparent; color: #201e1d;
  box-shadow: inset 0 0 0 1px rgba(32, 30, 29, 0.16); font: 600 15px/18px var(--app-font);
}

/* Undo banner */
.scr--family .app-toast.o-undo {
  padding: 10px 14px; border-radius: 18px; background: #f0fae1; min-height: 0;
  font: 400 13px/15.6px var(--app-font); color: #272e1b; gap: 10px;
}
.scr--family .o-undo b { color: #c67139; font: 600 15px/18px var(--app-font); padding: 4px 8px; margin: 0; }

/* observation window card */
.scr--family .o-win { display: flex; align-items: center; gap: 16px; }
.scr--family .o-ring { position: relative; flex: none; }
.scr--family .o-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr--family .o-ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scr--family .o-ring__t { font: 400 16px/18.4px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--family .o-ring__c { font: 400 10px/12px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--family .o-win__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scr--family .o-win__k { font: 600 11px/13.2px var(--app-font); letter-spacing: 1.2px; color: #3d472b; }
.scr--family .o-h4 { font: 400 18px/20.7px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--family .o-cap { font: 400 12px/14.4px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--family .o-restrict {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 14px; border-radius: 999px; margin-top: 12px;
  background: #f0fae1; color: #272e1b; font: 400 13px/15.6px var(--app-font);
}
.scr--family .o-restrict .app-ico { width: 14px; height: 14px; margin-top: 1px; color: #3d472b; }

/* "Day 58 on plan" progress card (single child) */
.scr--family .o-pcard {
  display: flex; align-items: center; gap: 12px; min-height: 62px; box-sizing: border-box;
  padding: 10px 14px 10px 10px; border-radius: 24px; border: 1.5px solid rgba(32, 30, 29, 0.16);
}
.scr--family .o-step { width: 40px; height: 40px; border-radius: 50%; background: #e1eecc; display: grid; place-items: center; flex: none; }
.scr--family .o-step svg { width: 20px; height: 20px; display: block; }
.scr--family .o-pcard__t { font: 400 16px/18.4px var(--app-font-display); color: #201e1d; }
.scr--family .o-pcard__s { font: 400 12.5px/15px var(--app-font); color: rgba(32, 30, 29, 0.55); margin-top: 2px; }
.scr--family .o-chev { width: 8px; height: 14px; flex: none; margin-left: auto; display: block; }

/* Dose given / Symptoms? cards */
.scr--family .o-body { font: 400 15px/18px var(--app-font); color: #201e1d; margin-top: 4px; }

/* tab bar (iOS 26 floating bar over the page) */
.scr--family .app-tabbar.o-tabbar {
  left: 22px; right: 22px; top: auto; bottom: 20px; height: 61px; padding: 3.5px; box-sizing: border-box;
  border-radius: 31px; background: #fff7e5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  box-shadow: 0 0 0 0.75px rgba(255, 255, 255, 0.9) inset, 0 10px 34px rgba(46, 43, 37, 0.16), 0 1px 3px rgba(46, 43, 37, 0.08);
}
.scr--family .o-tabbar .app-tab {
  height: 54px; border-radius: 27px; gap: 2px; padding-top: 1px;
  font: 600 11px/13px -apple-system, "SF Pro Text", var(--app-font); letter-spacing: 0.1px; color: #8a847c;
}
.scr--family .o-tabbar .app-tab .app-ico { width: 25px; height: 25px; color: #201806; }
.scr--family .o-tabbar .app-tab.is-active { background: #eee4cf; color: #c67139; width: 103.7px; justify-self: start; }
.scr--family .o-tabbar .app-tab.is-active .app-ico { color: #c67139; }

/* the dose-logged checkmark (Resources/Raw/dose_logged_check.json, redrawn as SVG) */
.scr--family .o-check { position: absolute; pointer-events: none; opacity: 0; }
.scr--family .o-check svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* finger */
.scr--family .o-finger { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; }
.scr--family .o-finger .ph-tap { left: 0; top: 0; }

/* child avatar (multi-child) */
.scr--family .o-av { border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--app-font-display); font-weight: 400; }
.scr--family .o-av--clay { background: #ffe1d0; color: #643312; }
.scr--family .o-av--dusk { background: #dfe5f2; color: #2b3a57; }
.scr--family .o-step svg { overflow: visible; }
.scr--family .o-states { position: relative; margin-top: 16px; }
.scr--family .o-quick { display: flex; flex-direction: column; gap: 14px; }
.scr--family .o-quick .o-btn2 { margin-top: 6px; }
/* ---- family: the multi-child Today (one card per child, window cards first) ---- */
.scr--family .o-ring--84 { width: 84px; height: 84px; }
.scr--family .o-ring--84 .o-ring__t { font-size: 15px; line-height: 17.3px; }
.scr--family .app-card.o-card.o-child { padding: 16px 18px 18px; }
.scr--family .o-child__head { display: flex; align-items: center; gap: 10px; }
.scr--family .o-child__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.scr--family .o-child__name { font: 400 20px/23px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--family .o-child__name--folded { font-size: 18px; line-height: 20.7px; }
.scr--family .o-small { font: 400 12.5px/15px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--family .o-av--34 { width: 34px; height: 34px; font-size: 16px; line-height: 1; }
.scr--family .o-av--42 { width: 42px; height: 42px; font-size: 19px; line-height: 1; }
.scr--family .o-av--28 { width: 28px; height: 28px; font-size: 13.5px; line-height: 1; }
.scr--family .o-quick--child { gap: 12px; margin-top: 12px; }
.scr--family .o-quick--child .o-btn2 { margin-top: 2px; }
.scr--family .o-child .o-tiles { margin-top: 12px; }
.scr--family .o-prow { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(32, 30, 29, 0.16); }
.scr--family .o-step--30 { width: 30px; height: 30px; }
.scr--family .o-step--30 svg { width: 16px; height: 16px; }
.scr--family .o-prow__t { font: 400 15px/17.3px var(--app-font-display); color: #201e1d; flex: 1; }

/* B layer: banner + the content it pushes down */
.scr--family .fm-ban { position: absolute; left: 0; right: 0; top: 0; }
.scr--family .fm-grp { padding-top: 60px; }
.scr--family .fm-caption {
  position: absolute; left: 42px; bottom: calc(100% + 4px); transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; background: #f9f4ed; white-space: nowrap;
  font: 600 13px/15.6px var(--app-font); color: #201e1d; box-shadow: 0 2px 12px rgba(46, 43, 37, 0.16); opacity: 0;
}

/* sheet */
.scr--family .fm-scrim { position: absolute; inset: 0; background: rgba(32, 30, 29, 0.32); opacity: 0; }
.scr--family .fm-sheet {
  position: absolute; left: 0; right: 0; top: 609.7px; bottom: 0; box-sizing: border-box;
  padding: 12px 20px 0; background: #f9f4ed; border-radius: 32px 32px 0 0;
  transform: translateY(360px);
}
.scr--family .fm-grab { width: 40px; height: 5px; border-radius: 2.5px; background: rgba(32, 30, 29, 0.16); margin: 0 auto 10px; }
.scr--family .fm-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin-bottom: 10px; }
.scr--family .fm-sheet__title { font: 400 23px/26.5px var(--app-font-display); color: #201e1d; }
.scr--family .fm-close { width: 44px; height: 44px; border-radius: 22px; background: #eee7db; display: grid; place-items: center; flex: none; }
.scr--family .fm-close .app-ico { width: 18px; height: 18px; color: #201e1d; }
.scr--family .fm-rows { display: flex; flex-direction: column; gap: 10px; }
.scr--family .fm-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 10px 14px;
  border-radius: 22px; background: #f5ead8; border: 2px solid transparent;
}
.scr--family .fm-row__n { font: 600 16px/19.2px var(--app-font); color: #201e1d; }
.scr--family .fm-row__d { font: 400 12.5px/15px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--family .fm-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }

/* Log symptoms page */
.scr--family .fm-sym { transform: translateX(440px); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); }
.scr--family .fm-nav { position: absolute; left: 0; right: 0; top: 62px; height: 53.5px; border-bottom: 1px solid rgba(32, 30, 29, 0.16); }
.scr--family .fm-back {
  position: absolute; left: 20px; top: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff7e5;
  display: grid; place-items: center; box-shadow: 0 4px 16px rgba(46, 43, 37, 0.14);
}
.scr--family .fm-back svg { width: 12px; height: 20px; display: block; margin-left: -2px; }
.scr--family .fm-nav__t { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font: 600 18px/22px var(--app-font); color: #201e1d; }
.scr--family .fm-form { position: absolute; left: 20px; right: 20px; top: 116px; padding-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.scr--family .fm-for { display: flex; align-items: center; gap: 10px; font: 600 15px/18px var(--app-font); color: #201e1d; }
.scr--family .fm-h3 { font: 400 22px/25.3px var(--app-font-display); color: #201e1d; }
.scr--family .fm-list { background: #f9f4ed; border-radius: 16px; }
.scr--family .fm-check { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font: 600 15px/24px var(--app-font); color: #201e1d; }
.scr--family .fm-check i { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid rgba(32, 30, 29, 0.16); margin-left: 12px; }
.scr--family .fm-segwrap { overflow: hidden; }
.scr--family .fm-seg {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f5ead8; border: 1px solid rgba(32, 30, 29, 0.16);
  white-space: nowrap;
}
.scr--family .fm-seg span { padding: 8px 16px; font: 600 14px/16.8px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--family .fm-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #f9f4ed; border-radius: 16px; font: 600 15px/18px var(--app-font); color: #201e1d; }
.scr--family .fm-toggle i { width: 64px; height: 30px; border-radius: 15px; background: #e9e5de; position: relative; }
.scr--family .fm-toggle i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 40px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.scr--family .fm-note .o-kicker { margin-bottom: 6px; }
.scr--family .fm-editor { background: #fff; padding: 8px 4px; font: 400 17px/20px var(--app-font); color: rgba(32, 30, 29, 0.55); }

/* ---- scenes/done.css ---- */
/* scenes/done.css (scene agent A). Shared Today chrome first, then the done specifics. */
/* ---- shared Today chrome for the A scenes (generated: every selector is prefixed with this scene) ----
   The real captures are an iPhone Pro Max (440 x 956 pt). .o-root lays the app out in those real points
   (straight from the XAML) and scales it to the phone's 393-pt screen: 393 / 440 = 0.893182. */
.scr--done .app.o-root {
  position: absolute; left: 0; top: 0;
  width: 440px; height: 954px;
  padding: 0; display: block;
  transform: scale(0.893182); transform-origin: 0 0;
  background: #f5ead8;
  font-family: var(--app-font);
  color: #201e1d;
  overflow: hidden;
}
.scr--done .o-page { position: absolute; inset: 0; background: #f5ead8; }
.scr--done .o-content { position: absolute; left: 20px; right: 20px; top: 62px; padding-top: 20px; }
.scr--done .o-stack { display: flex; flex-direction: column; gap: 16px; }
.scr--done .o-stack--14 { gap: 14px; }
.scr--done .o-layer { position: absolute; left: 0; right: 0; top: 0; }

/* header */
.scr--done .o-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.scr--done .o-head__l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.scr--done .o-kicker { font: 600 12px/14.4px var(--app-font); letter-spacing: 1.2px; color: rgba(32, 30, 29, 0.55); }
.scr--done .o-h2 { font: 400 28px/32.2px var(--app-font-display); color: #201e1d; margin: 0; padding-top: 5.2px; }  /* wraps like the app (DE "Heute mit Mara und Leo") */
.scr--done .o-sync {
  display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 5px 12px; border-radius: 999px;
  background: #f0fae1; color: #3d472b; font: 600 11px/13.2px var(--app-font); white-space: nowrap; flex: none;
}
.scr--done .o-sync .app-ico { width: 12px; height: 12px; }

/* cards */
.scr--done .app-card.o-card { background: #f9f4ed; border-radius: 16px; padding: 18px; box-shadow: none; }
.scr--done .app-card.o-card--hero { border-radius: 28px; box-shadow: 0 3px 20px rgba(46, 43, 37, 0.16); }
.scr--done .o-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scr--done .o-tiles { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 12px; }
.scr--done .o-tile {
  flex: 0 0 48%; box-sizing: border-box; margin-bottom: 10px; padding: 10px;
  border-radius: 18px; background: #f5ead8; display: flex; align-items: center; gap: 10px;
}
.scr--done .o-allergen { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.scr--done .o-allergen .app-ico { width: 20px; height: 20px; }
.scr--done .o-tile__name { font: 600 15px/18px var(--app-font); color: #201e1d; }
.scr--done .o-tile__sub { font: 400 12px/14.4px var(--app-font); color: rgba(32, 30, 29, 0.55); margin-top: 1px; }

/* pills */
.scr--done .o-given {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #f0fae1; color: #3d472b; font: 600 12px/14.4px var(--app-font); white-space: nowrap; flex: none;
}
.scr--done .o-given .app-ico { width: 11px; height: 11px; }
.scr--done .o-outline {
  display: inline-flex; align-items: center; padding: 2.5px 8.5px; border-radius: 999px;
  border: 1.5px solid rgba(32, 30, 29, 0.16); color: rgba(32, 30, 29, 0.55);
  font: 600 12px/14.4px var(--app-font); white-space: nowrap; flex: none;
}

/* buttons */
.scr--done .o-prompt { font: 400 15px/18px var(--app-font); text-align: center; color: #201e1d; }
.scr--done .app-btn.o-btn {
  position: relative; height: 52px; border-radius: 26px; background: #c67139; color: #f5ead8;
  font: 600 16px/19.2px var(--app-font); gap: 10px; overflow: hidden; padding: 0 20px; box-sizing: border-box;
}
.scr--done .o-btn .app-ico { width: 22px; height: 22px; position: relative; }
.scr--done .o-btn > span { position: relative; }
.scr--done .o-btn__press { position: absolute; inset: 0; background: #b2622d; opacity: 0; border-radius: inherit; }
.scr--done .app-btn.app-btn--ghost.o-btn2 {
  height: 48px; border-radius: 24px; background: transparent; color: #201e1d;
  box-shadow: inset 0 0 0 1px rgba(32, 30, 29, 0.16); font: 600 15px/18px var(--app-font);
}

/* Undo banner */
.scr--done .app-toast.o-undo {
  padding: 10px 14px; border-radius: 18px; background: #f0fae1; min-height: 0;
  font: 400 13px/15.6px var(--app-font); color: #272e1b; gap: 10px;
}
.scr--done .o-undo b { color: #c67139; font: 600 15px/18px var(--app-font); padding: 4px 8px; margin: 0; }

/* observation window card */
.scr--done .o-win { display: flex; align-items: center; gap: 16px; }
.scr--done .o-ring { position: relative; flex: none; }
.scr--done .o-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr--done .o-ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scr--done .o-ring__t { font: 400 16px/18.4px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--done .o-ring__c { font: 400 10px/12px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--done .o-win__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scr--done .o-win__k { font: 600 11px/13.2px var(--app-font); letter-spacing: 1.2px; color: #3d472b; }
.scr--done .o-h4 { font: 400 18px/20.7px var(--app-font-display); color: #201e1d; white-space: nowrap; }
.scr--done .o-cap { font: 400 12px/14.4px var(--app-font); color: rgba(32, 30, 29, 0.55); }
.scr--done .o-restrict {
  display: flex; align-items: flex-start; gap: 9px; padding: 7px 14px; border-radius: 999px; margin-top: 12px;
  background: #f0fae1; color: #272e1b; font: 400 13px/15.6px var(--app-font);
}
.scr--done .o-restrict .app-ico { width: 14px; height: 14px; margin-top: 1px; color: #3d472b; }

/* "Day 58 on plan" progress card (single child) */
.scr--done .o-pcard {
  display: flex; align-items: center; gap: 12px; min-height: 62px; box-sizing: border-box;
  padding: 10px 14px 10px 10px; border-radius: 24px; border: 1.5px solid rgba(32, 30, 29, 0.16);
}
.scr--done .o-step { width: 40px; height: 40px; border-radius: 50%; background: #e1eecc; display: grid; place-items: center; flex: none; }
.scr--done .o-step svg { width: 20px; height: 20px; display: block; }
.scr--done .o-pcard__t { font: 400 16px/18.4px var(--app-font-display); color: #201e1d; }
.scr--done .o-pcard__s { font: 400 12.5px/15px var(--app-font); color: rgba(32, 30, 29, 0.55); margin-top: 2px; }
.scr--done .o-chev { width: 8px; height: 14px; flex: none; margin-left: auto; display: block; }

/* Dose given / Symptoms? cards */
.scr--done .o-body { font: 400 15px/18px var(--app-font); color: #201e1d; margin-top: 4px; }

/* tab bar (iOS 26 floating bar over the page) */
.scr--done .app-tabbar.o-tabbar {
  left: 22px; right: 22px; top: auto; bottom: 20px; height: 61px; padding: 3.5px; box-sizing: border-box;
  border-radius: 31px; background: #fff7e5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  box-shadow: 0 0 0 0.75px rgba(255, 255, 255, 0.9) inset, 0 10px 34px rgba(46, 43, 37, 0.16), 0 1px 3px rgba(46, 43, 37, 0.08);
}
.scr--done .o-tabbar .app-tab {
  height: 54px; border-radius: 27px; gap: 2px; padding-top: 1px;
  font: 600 11px/13px -apple-system, "SF Pro Text", var(--app-font); letter-spacing: 0.1px; color: #8a847c;
}
.scr--done .o-tabbar .app-tab .app-ico { width: 25px; height: 25px; color: #201806; }
.scr--done .o-tabbar .app-tab.is-active { background: #eee4cf; color: #c67139; width: 103.7px; justify-self: start; }
.scr--done .o-tabbar .app-tab.is-active .app-ico { color: #c67139; }

/* the dose-logged checkmark (Resources/Raw/dose_logged_check.json, redrawn as SVG) */
.scr--done .o-check { position: absolute; pointer-events: none; opacity: 0; }
.scr--done .o-check svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* finger */
.scr--done .o-finger { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; }
.scr--done .o-finger .ph-tap { left: 0; top: 0; }

/* child avatar (multi-child) */
.scr--done .o-av { border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--app-font-display); font-weight: 400; }
.scr--done .o-av--clay { background: #ffe1d0; color: #643312; }
.scr--done .o-av--dusk { background: #dfe5f2; color: #2b3a57; }
.scr--done .o-step svg { overflow: visible; }
.scr--done .o-states { position: relative; margin-top: 16px; }
.scr--done .o-quick { display: flex; flex-direction: column; gap: 14px; }
.scr--done .o-quick .o-btn2 { margin-top: 6px; }
/* ---- done: Today after the window ended (Card default padding 14) ---- */
.scr--done .app-card.o-card.dn-card { padding: 14px; }
.scr--done .dn-card .o-body { margin-top: 4px; }
.scr--done .dn-sym { display: flex; flex-direction: column; gap: 12px; }

/* ---- page.css ---- */
/* ==========================================================================
   OIT Journal landing page. The page around the phone (phone.css owns the
   device, scenes own their screens).

   Modes
     (no class)    no JS: static document, every act shows its capture.
     html.js       JS on.
     html.live     JS on and motion allowed: sticky phone, scroll clock.
     html.is-posed OIT.pose() froze one frame for a fallback capture.
   Page kinds: body.pg-landing (the scroll show), body.pg-doc (About and other
   text pages). Forms are plain posts; nothing here depends on JS.
   Anything hidden for animation is keyed to html.live, so no-JS and
   reduced-motion visitors always get the complete page.
   ========================================================================== */

@font-face {
  font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica Neue");
  size-adjust: 97%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%;
}
@font-face {
  font-family: "Caprasimo Fallback"; src: local("Georgia");
  size-adjust: 112%; ascent-override: 88%; descent-override: 24%;
}

:root {
  --canvas: #f5ead8;
  --surface: #f9f4ed;
  --surface-2: #eee4ce;
  --field: #fffdf8;
  --ink: #201e1d;
  --ink-soft: #5c5249;
  --line: rgba(32, 30, 29, 0.16);
  --line-strong: rgba(32, 30, 29, 0.5);
  --accent: #a5582a;
  --accent-hover: #8c491a;
  --accent-ink: #fffaf2;
  --accent-wash: #f2d3bb;
  --sage: #7a8a5e;
  --sage-wash: #e4e6cf;
  --night: #2e2b25;
  --night-ink: #f5ead8;
  --warm: #edc596;

  --font-display: "Caprasimo", "Caprasimo Fallback", Georgia, serif;
  --font-text: "Figtree", "Figtree Fallback", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --s8: 40px; --s9: 56px; --s10: 80px; --s11: 120px;
  --gutter: max(16px, min(5vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --radius: 24px;
  --e1: 0 1px 2px rgba(46, 43, 37, 0.08);
  --e2: 0 10px 24px -12px rgba(46, 43, 37, 0.30), 0 2px 6px -2px rgba(46, 43, 37, 0.10);
  --e3: 0 28px 50px -24px rgba(46, 43, 37, 0.42), 0 8px 16px -8px rgba(46, 43, 37, 0.18);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --t-display: clamp(2.5rem, 3.65vw, 3.5rem);
  --t-h2: clamp(1.9rem, 2.7vw, 2.55rem);
  --t-h3: 1.35rem;
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --measure: 34rem;

  /* phone size on the stage */
  --dev-w: min(calc((100svh - 190px) * 0.476), 340px, 30vw);
  --dev-h: calc(var(--dev-w) * 2.1007);

  color-scheme: light;
  caret-color: var(--accent);
  accent-color: var(--accent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: rgba(32, 30, 29, 0.28) transparent; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--accent-wash); color: var(--ink); }
a { color: var(--accent-hover); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h2 { font: 400 var(--t-h2)/1.06 var(--font-display); letter-spacing: -0.01em; }
h3 { font: 700 var(--t-h3)/1.2 var(--font-text); letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }

/* The page light: a warm wash that comes up through the observation window. */
.light {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 72% 28%, rgba(237, 181, 118, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(240, 205, 160, 0.35), rgba(240, 205, 160, 0));
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink);
  font: 600 1rem/1 var(--font-text); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color 150ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.9rem; }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 1.05rem; }
.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.5; cursor: default; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bar {
  display: flex; align-items: center; gap: var(--s5);
  max-width: 1320px; margin: 0 auto; height: 72px; padding: 0 var(--gutter);
  position: relative; z-index: 5;
}
html.live .pg-landing .bar { position: absolute; left: 0; right: 0; top: 0; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--ink); text-decoration: none; font: 700 1.15rem/1 var(--font-text); letter-spacing: -0.01em;
}
.brand img { width: 34px; height: 34px; }
.langs { display: flex; gap: 4px; }
.langs a {
  display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 10px;
  border-radius: 999px; color: var(--ink-soft); text-decoration: none;
  font: 600 0.8rem/1 var(--font-text); letter-spacing: 0.04em;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.langs a:hover { background: var(--surface-2); color: var(--ink); }
.langs a[aria-current="page"] { background: var(--ink); color: var(--canvas); }

/* --------------------------------------------------------------------------
   The show: copy column + stage column share one grid cell row, so the
   sticky stage is constrained by the whole run of acts.
   -------------------------------------------------------------------------- */
.show {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s8);
  max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter);
}
.copy { grid-area: 1 / 1; min-width: 0; position: relative; z-index: 1; }
.stage { grid-area: 1 / 2; min-width: 0; position: relative; }

.hero { max-width: 36rem; }
@media (min-width: 861px) { .hero { width: calc(100% + var(--s8)); max-width: 42rem; } }
.hero h1 { display: block; }
.hero__display {
  display: block;
  font: 400 var(--t-display)/1.0 var(--font-display);
  letter-spacing: -0.015em; color: var(--ink);
  text-wrap: balance;
}
/* Romanian comma-below ș/ț descend further than the display face's tight leading allows. */
html[lang="ro"] .hero__display { line-height: 1.1; }
html[lang="ro"] h2 { line-height: 1.14; }
.hero__kw {
  display: block; margin-top: var(--s5);
  font: 600 1.18rem/1.35 var(--font-text); color: var(--ink-soft); letter-spacing: -0.005em;
}
.hero__sub { margin-top: var(--s5); max-width: 30rem; font-size: 1.125rem; }
.hero__cta { margin-top: var(--s7); }
.hero__cta, .close__cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__note { margin-top: var(--s3); font: 600 var(--t-small)/1.4 var(--font-text); color: var(--ink-soft); letter-spacing: 0.01em; }

.act__copy { max-width: var(--measure); }
.act__copy h2 + p { margin-top: var(--s4); }
.act__aside { margin-top: var(--s4); color: var(--ink-soft); font-size: 0.98rem; }
.beat { font: 400 1.7rem/1.1 var(--font-display); color: var(--ink-soft); text-align: center; }
.anchor { display: block; height: 0; }

/* Static captures (no JS, reduced motion). */
.shot { margin: 0; }
.phone--still { width: 250px; --ph-scale: 0.6; margin: 0 auto; }
html.live .shot { display: none; }

/* Stage pieces */
.device { position: relative; z-index: 7; width: var(--dev-w); margin: 0 auto; }
html:not(.live) .device { width: 300px; }
html:not(.live) .phone--stage { --ph-scale: 0.7194; }
html.live { scroll-behavior: smooth; }
.phone__sleep {
  position: absolute; inset: 0; z-index: 60; pointer-events: none;
  background: #0d0c0b; opacity: 0;
}
.phone.is-fb .ph-status, .phone.is-fb .ph-home { visibility: hidden; }
.scr--fb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; max-width: none; }
/* The report fan shares the phone's box and sits under the phone: pages slide out from behind it and
   never cover its screen. page.js gives it the geometry for the viewport (between copy and phone). */
.device .phone--stage { z-index: 2; }
.device .rfan { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; }
.demo {
  margin-top: var(--s5); text-align: center;
  font: 400 0.875rem/1.35 var(--font-text); color: var(--ink-soft);
}

/* Hero planes */
.plane { position: absolute; pointer-events: none; }
.plane--sage, .plane--wash { z-index: -1; }
.plane--sage {
  left: 50%; top: 50%; width: calc(var(--dev-w) * 1.9); height: calc(var(--dev-w) * 1.75);
  margin: calc(var(--dev-w) * -0.95) 0 0 calc(var(--dev-w) * -1.02);
  background: var(--sage-wash);
  border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
}
.plane--wash {
  left: 50%; top: 50%; width: calc(var(--dev-w) * 0.95); height: calc(var(--dev-w) * 0.88);
  margin: calc(var(--dev-w) * -1.2) 0 0 calc(var(--dev-w) * 0.1);
  background: var(--accent-wash); opacity: 0.85;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
}
.plane--token {
  z-index: 4; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--e2), var(--edge);
}
.plane--token img { width: 26px; height: 26px; opacity: 0.85; }
.plane--t1 { left: -86px; top: 16%; }
.plane--t2 { right: -78px; top: 9%; width: 48px; height: 48px; }
.plane--t3 { right: -96px; top: 47%; }
.plane--t4 { left: -64px; top: 64%; width: 44px; height: 44px; }
.plane--t5 { right: -54px; top: 80%; width: 46px; height: 46px; }
.plane--t2 img, .plane--t4 img, .plane--t5 img { width: 22px; height: 22px; }
.plane--chip { z-index: 5; left: -52%; top: 42%; }   /* 42%: clears the end of the longest (German) headline line */
.lachip {
  display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 12px 18px 12px 14px; border-radius: 22px;
  background: var(--night); color: var(--night-ink);
  box-shadow: var(--e3);
  transform: rotate(-6deg);
}
.lachip img { grid-row: 1 / 3; width: 26px; height: 26px; }
.lachip__who { font: 700 0.68rem/1 var(--font-text); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.lachip__time { grid-column: 2; font: 700 1.6rem/1 var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lachip__state { grid-column: 1 / 3; margin-top: 6px; font: 600 0.75rem/1 var(--font-text); opacity: 0.8; }

/* Day rail */
.rail { display: none; }

/* --------------------------------------------------------------------------
   Static layout (no JS / reduced motion)
   -------------------------------------------------------------------------- */
html:not(.live) .copy { display: contents; }
html:not(.live) .act--hero { grid-area: 1 / 1; align-self: center; padding: var(--s9) 0; }
html:not(.live) .stage { grid-area: 1 / 2; padding: var(--s9) 0; display: flex; flex-direction: column; justify-content: center; }
html:not(.live) .act:not(.act--hero) {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); align-items: center;
  padding: var(--s10) 0; border-top: 1px solid var(--line);
}
html:not(.live) .act--beat { display: block !important; padding: var(--s7) 0 !important; }
html:not(.live) .act--beat + .act { border-top: 0; }
html:not(.live) .act .act__copy { justify-self: end; }
html:not(.live) .act .act__copy { grid-column: 1; grid-row: 1; }
html:not(.live) .act .shot { grid-column: 2; grid-row: 1; }
html:not(.live) .anchor { position: absolute; }
html:not(.live) .act { position: relative; }

/* --------------------------------------------------------------------------
   Live layout, desktop and tablet (> 860px)
   -------------------------------------------------------------------------- */
html.live .stage {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* A rail jump lands just past the crossfade band (page.js: 9svh either side of an act's top), on a clean frame. */
html.live .act { position: relative; height: calc(var(--span) * 100vh); height: calc(var(--span) * 100svh); scroll-margin-top: calc(40svh - 8px); }
html.live .act--hero { height: auto; min-height: 100svh; display: flex; align-items: center; padding: 96px 0 var(--s10); }
html.live .act__copy { position: sticky; top: calc(50svh - 7.5rem); margin-bottom: 22svh; }
html.live .rail { opacity: 0; transition: opacity 260ms var(--ease); }
html.live .rail.is-on, html.live .rail:focus-within { opacity: 1; }
.rail__stamp span { display: block; }
html.live .act--beat { display: flex; align-items: center; justify-content: center; }
html.live .anchor { position: absolute; left: 0; top: 95.5%; scroll-margin-top: calc(50svh - 4px); }
html.live .rail { display: block; }

.rail {
  position: absolute; z-index: 6;
  top: 50%; height: calc(var(--dev-h) * 0.72); margin-top: calc(var(--dev-h) * -0.36 - 18px);
  right: calc(50% + var(--dev-w) / 2 + 74px); width: 96px;
}
.rail__track { position: absolute; inset: 0; }
.rail__track::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: var(--line);
}
.rail__fill {
  position: absolute; right: 0; top: 0; width: 2px; height: 100%; border-radius: 2px;
  background: var(--accent); transform-origin: 50% 0; transform: scaleY(0);
}
.rail__stamp {
  position: absolute; right: -6px; top: calc(var(--at) * 100%);
  display: flex; align-items: center; gap: 10px; height: 28px; margin-top: -14px; padding-left: 6px;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  font: 600 0.78rem/1 var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  border-radius: 8px;
  transition: color 180ms var(--ease);
}
.rail__stamp::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--canvas); box-shadow: inset 0 0 0 2px var(--line-strong);
  transition: transform 220ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.rail__stamp:hover { color: var(--ink); }
.rail__stamp.is-passed { color: var(--ink); }
.rail__stamp.is-passed::after { background: var(--accent); box-shadow: 0 0 0 3px rgba(165, 88, 42, 0.16); }
.rail__stamp.is-now::after { transform: scale(1.3); }
.rail__head {
  position: absolute; left: 100%; top: 0; height: 0; pointer-events: none;
  will-change: transform;
}
.rail__dot { display: none; }
.rail__time {
  position: absolute; left: 14px; top: -12px; height: 24px; padding: 0 9px; border-radius: 999px;
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--accent-ink);
  font: 700 0.75rem/1 var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  box-shadow: var(--e1);
}
.rail__time::before {
  content: ""; position: absolute; left: -9px; top: 7px; width: 0; height: 0;
  border: 5px solid transparent; border-right-color: var(--accent); border-left: 0;
}

/* --------------------------------------------------------------------------
   Flow sections after the show
   -------------------------------------------------------------------------- */
.beats { max-width: 1120px; margin: 0 auto; padding: var(--s9) var(--gutter) var(--s8); }
.beats__row {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--s9);
  align-items: center;
}
.beats__row + .beats__row { margin-top: var(--s9); }
.beats__row--flip { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.beats__row--flip .beats__text { order: 2; }
.beats__text { max-width: var(--measure); }
.beats__text h2 + p { margin-top: var(--s4); }
.beats__langs { margin-top: var(--s4); font-weight: 600; color: var(--ink-soft); }
.beats__art { display: flex; align-items: center; justify-content: center; min-height: 150px; }
.beats__art--pair { gap: 0; }
.pairdot {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; flex: none;
  font: 400 1.9rem/1 var(--font-display);
  box-shadow: var(--e2), var(--edge);
}
.pairdot--a { background: var(--accent-wash); color: var(--accent-hover); }
.pairdot--c { background: var(--sage-wash); color: #4b5736; }
.pairdot--b { width: 52px; height: 52px; background: var(--surface); }
.pairdot--b img { width: 22px; height: 22px; }
.pairline { width: clamp(28px, 6vw, 64px); height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.leafdisc {
  display: grid; place-items: center; width: 150px; height: 150px;
  border-radius: 54% 46% 50% 50% / 48% 54% 46% 52%;
  background: var(--sage-wash); box-shadow: var(--edge);
}
.leafdisc img { width: 46px; height: 46px; opacity: 0.8; }

.faq { padding: var(--s10) var(--gutter); }
.faq__in { max-width: 44rem; margin: 0 auto; }
.faq h2 { margin-bottom: var(--s7); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font: 600 1.075rem/1.35 var(--font-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-3px) rotate(45deg); transition: transform 180ms var(--ease);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover { color: var(--accent-hover); }
.faq summary:focus-visible { outline-offset: 2px; }
.faq details p { padding: 0 0 var(--s5); max-width: 40rem; color: var(--ink-soft); }

/* The close and the footer fill the last viewport together, so the final scroll position rests here. */
.close {
  max-width: 1120px; margin: 0 auto; padding: var(--s7) var(--gutter);
  min-height: calc(100vh - var(--foot-h, 150px)); min-height: calc(100svh - var(--foot-h, 150px));
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--s9);
  align-items: center; align-content: center;
}
.close__phone { position: relative; display: flex; justify-content: center; }
.close__phone::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 420px; height: 400px; margin: -200px 0 0 -210px;
  background: var(--sage-wash); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
}
.phone--close { width: min(290px, calc((100svh - var(--foot-h, 150px) - 72px) * 0.476)); --ph-scale: 0.6955; }
.close__panel { max-width: 34rem; }
.close__cta { margin-top: var(--s6); }
.wait { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.wait h3 + p { margin-top: var(--s3); }
.wait p + p, .wait .form { margin-top: var(--s4); }
.small { font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft); }
.wait .form + .small { margin-top: var(--s3); }

.form { display: grid; gap: var(--s3); }
.form__row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.form__row .field { flex: 1 1 15rem; }
.field { display: grid; gap: 6px; }
.field label { font: 600 0.875rem/1.3 var(--font-text); color: var(--ink); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 1.5px solid var(--line-strong); border-radius: 16px;
  background: var(--field); color: var(--ink);
  font: 400 1rem/1.4 var(--font-text);
  transition: border-color 150ms var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field textarea:hover { border-color: rgba(32, 30, 29, 0.7); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 1px; border-color: var(--accent-hover); border-radius: 16px; }
/* Form results: the API redirects back with ?joined= / ?sent=, the server renders one of these. */
.banner {
  margin: 0 0 var(--s4); padding: 12px 16px; border-radius: 16px;
  font: 600 0.94rem/1.45 var(--font-text);
}
.banner-ok { background: #e6efd8; color: #2b3c11; box-shadow: inset 0 0 0 1px rgba(85, 112, 44, 0.45); }
.banner-err { background: #f7e0d6; color: #67210f; box-shadow: inset 0 0 0 1px rgba(164, 64, 42, 0.45); }
.wait .banner { margin-bottom: var(--s5); }

/* Google Play, as a styled text badge (no third-party artwork). */
.btn--play {
  background: var(--night); color: var(--night-ink);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--play:hover { background: #1d1b17; }
.btn--play::before {
  content: ""; width: 0; height: 0; margin-right: 10px; flex: none;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.idea { padding: var(--s6) var(--gutter) var(--s7); }
.idea__in {
  max-width: 1120px; margin: 0 auto; padding: var(--s7) var(--s8);
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--e1), var(--edge);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--s9);
}
.idea__text h2 { font-size: 1.7rem; }
.idea__text p { margin-top: var(--s3); color: var(--ink-soft); }

.foot { padding: var(--s5) var(--gutter) max(var(--s6), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.foot__in { max-width: 1120px; margin: 0 auto; display: grid; gap: var(--s2); font-size: var(--t-small); color: var(--ink-soft); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-weight: 600; }
.foot__links a { color: var(--ink); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Text pages (About)
   -------------------------------------------------------------------------- */
.doc { max-width: 44rem; margin: 0 auto; padding: var(--s8) var(--gutter) var(--s10); }
.doc h1 { font: 400 var(--t-h2)/1.08 var(--font-display); letter-spacing: -0.01em; }
.doc__lead { margin-top: var(--s5); font-size: 1.15rem; }
.doc h2 { margin-top: var(--s8); font: 700 var(--t-h3)/1.25 var(--font-text); letter-spacing: -0.01em; }
.doc h2 + p, .doc p + p { margin-top: var(--s3); }
.doc p { max-width: var(--measure); }
.doc ul { margin: var(--s3) 0 0; padding-left: 1.2em; max-width: var(--measure); }
.doc li + li { margin-top: var(--s2); }
.doc__cta { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s3); }

/* OIT.pose(): one clean frame of the stage phone for a fallback capture. */
html.is-posed .plane, html.is-posed .rail, html.is-posed .rfan, html.is-posed .demo { visibility: hidden !important; }
html.is-posed .device { transform: none !important; }

/* Flow reveals: fire once on entry; only hidden when motion is live. */
html.live [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
html.live [data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Between tablet and desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) and (min-width: 861px) {
  .plane--chip { left: -30%; top: 46%; }
  .hero { width: auto !important; }
  .act__copy, .hero__sub { max-width: 26rem; }
  .show { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--s6); }
  .act__copy { max-width: 27rem; }
  .rail { right: calc(50% + var(--dev-w) / 2 + 66px); width: 76px; }
  .rail__stamp { font-size: 0.72rem; }
}

/* --------------------------------------------------------------------------
   Phones and small tablets (<= 860px). Art-directed, not shrunk: the phone
   sticks in the top 56svh, act copy rides up beneath it in cream panels.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root {
    --t-display: 2.1rem;
    --t-h2: 1.6rem;
    --t-body: 1rem;
    --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --stage-h: 56svh;
    /* phone + the day strip (26px) + the demo caption fill the stage */
    --dev-w: min(calc((var(--stage-h) - 66px) / 2.1007), 62vw);
  }
  .bar { height: 60px; gap: var(--s3); }
  .brand { font-size: 1.02rem; gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  .langs a { min-width: 34px; height: 30px; padding: 0 7px; font-size: 0.74rem; }
  .bar__cta { display: none; }
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; }
  /* German, Romanian and Spanish run ~20% longer: a size step down keeps each act panel within the
     space under the sticky phone. */
  html:is([lang="de"], [lang="ro"], [lang="es"]) .act__copy h2 { font-size: 1.42rem; }

  .show { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .hero__kw { margin-top: var(--s3); font-size: 1rem; }
  .hero__sub { margin-top: var(--s3); font-size: 1rem; line-height: 1.5; }
  .hero__cta { margin-top: var(--s5); }
  .hero__cta .btn { width: 100%; }
  .hero__note { margin-top: var(--s2); }

  .plane--token { width: 40px; height: 40px; }
  .plane--token img { width: 20px !important; height: 20px !important; }
  .plane--t1 { left: -52px; top: 10%; }
  .plane--t2 { right: -50px; top: 4%; width: 36px; height: 36px; }
  .plane--t3 { right: -62px; top: 42%; }
  .plane--t4 { left: -46px; top: 70%; width: 34px; height: 34px; }
  .plane--t5 { right: -44px; top: 82%; width: 34px; height: 34px; }
  .plane--chip { left: -46%; top: 74%; }
  .lachip { padding: 8px 12px 8px 10px; border-radius: 16px; column-gap: 7px; }
  .lachip img { width: 18px; height: 18px; }
  .lachip__who { font-size: 0.55rem; }
  .lachip__time { font-size: 1.1rem; }
  .lachip__state { font-size: 0.6rem; margin-top: 4px; }

  /* static */
  html:not(.live) .act--hero { grid-area: auto; grid-row: 1; padding: var(--s6) 0 var(--s7); }
  html:not(.live) .stage { grid-area: auto; grid-row: 2; grid-column: 1; padding: var(--s6) 0 var(--s9); overflow: clip; }
  html:not(.live) .plane--chip { left: -20%; top: 80%; }
  html:not(.live) .act:not(.act--hero) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); padding: var(--s9) 0; }
  html:not(.live) .act .act__copy { justify-self: start; }
  html:not(.live) .act .shot { grid-column: 1; grid-row: 2; }
  .phone--still { width: 220px; --ph-scale: 0.5276; }
  html:not(.live) .device { width: 240px; }
  html:not(.live) .phone--stage { --ph-scale: 0.5755; }

  /* live */
  html.live .stage {
    grid-area: 1 / 1; z-index: 3;
    height: var(--stage-h); justify-content: flex-start; padding-top: 8px;
    background: var(--canvas);
    clip-path: inset(0 -100vw -40px -100vw);   /* blobs never paint over the copy above the stage */
  }
  html.live .stage::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; pointer-events: none;
    background: linear-gradient(var(--canvas), rgba(245, 234, 216, 0));
  }
  html.live .stage { margin-inline: calc(-1 * var(--gutter)); }
  html.live .stage__light {
    position: absolute; left: 0; right: 0; top: 0; height: 100svh; pointer-events: none; z-index: -1;
    background:
      radial-gradient(70% 60% at 72% 28%, rgba(237, 181, 118, 0.55), transparent 70%),
      linear-gradient(180deg, rgba(240, 205, 160, 0.35), rgba(240, 205, 160, 0));
    clip-path: inset(0 0 calc(100svh - var(--stage-h)) 0);
    opacity: 0;
  }
  html.live .stage, html.live .show { overflow: visible; }
  html.live .copy { grid-area: 1 / 1; padding-top: var(--stage-h); }
  html.live .act { height: calc(var(--span) * 86svh); scroll-margin-top: calc(65svh - 8px); }
  html.live .act--hero { min-height: 0; height: auto; display: block; padding: var(--s5) 0 var(--s9); }
  html.live .pg-landing .bar { position: relative; }
  html.live .act__copy {
    top: calc(var(--stage-h) + 14px); margin-bottom: 8svh;
    padding: var(--s4) var(--s5) var(--s5); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--e2), var(--edge);
  }
  html.live .act--beat .beat { position: sticky; top: calc(var(--stage-h) + 18vh); }
  html.live .act--beat { align-items: flex-start; padding-top: 10svh; }
  html.live .anchor { scroll-margin-top: calc(75svh - 4px); }
  .demo { margin-top: 38px; font-size: 0.75rem; line-height: 1.2; }
  html:not(.live) .demo { margin-top: var(--s4); }
  .act__copy h2 + p { margin-top: var(--s3); }
  .act__aside { margin-top: var(--s3); font-size: 0.9rem; line-height: 1.5; }

  /* the day rail becomes a slim strip under the phone: the clock pill, then the stamps as dots */
  .rail {
    left: var(--gutter); right: var(--gutter); width: auto; margin: 0;
    top: calc(8px + var(--dev-h) + 6px); height: 26px;
  }
  .rail__track { left: 62px; right: 10px; }
  .rail__track::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin-top: -1px; }
  .rail__fill { left: 0; right: auto; top: 50%; width: 100%; height: 2px; margin-top: -1px; transform-origin: 0 50%; transform: scaleX(0); }
  .rail__stamp {
    right: auto; left: calc(var(--at) * 100%); top: 50%;
    width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; gap: 0; justify-content: center;
  }
  .rail__stamp span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rail__stamp::after { width: 9px; height: 9px; }
  .rail__head { left: -62px; top: 50%; transform: none !important; }
  .rail__time { left: 0; top: -12px; }
  .rail__time::before { display: none; }

  .beats { padding: var(--s8) var(--gutter) var(--s7); }
  .beats__row, .beats__row--flip { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .beats__row--flip .beats__text { order: 0; }
  .beats__row + .beats__row { margin-top: var(--s8); }
  .beats__art { min-height: 0; justify-content: flex-start; }
  .pairdot { width: 60px; height: 60px; font-size: 1.5rem; }
  .pairdot--b { width: 44px; height: 44px; }
  .leafdisc { width: 104px; height: 104px; }
  .leafdisc img { width: 34px; height: 34px; }

  .faq { padding: var(--s9) var(--gutter); }
  .faq summary { font-size: 1rem; }

  /* the close, art-directed: a small phone at rest beside the question, the button, the waitlist */
  .close {
    grid-template-columns: 108px minmax(0, 1fr); column-gap: var(--s4); row-gap: 0;
    padding: var(--s5) var(--gutter) var(--s4); align-items: center;
  }
  .close__panel { display: contents; }
  .close__phone { grid-column: 1; grid-row: 1 / span 2; }
  .close__phone::before { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .phone--close { width: 108px; --ph-scale: 0.259; }
  .close h2 { grid-column: 2; grid-row: 1; align-self: end; font-size: 1.5rem; }
  .close .close__cta + .hero__note { grid-column: 2; grid-row: 2; align-self: start; margin-top: var(--s2); }
  .close__cta { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s5); }
  .close .wait { grid-column: 1 / -1; grid-row: 4; margin-top: var(--s5); padding-top: var(--s4); }
  .wait h3 { font-size: 1.15rem; }
  .wait h3 + p { margin-top: var(--s2); font-size: 0.95rem; line-height: 1.5; }
  .wait p + p, .wait .form { margin-top: var(--s3); }
  .wait .small { font-size: 0.8rem; line-height: 1.45; }
  .wait .form { gap: var(--s2); }
  .wait .form__row { gap: var(--s2); }
  .wait .field input { min-height: 48px; }
  .wait .form__row .btn { min-height: 48px; }
  .close__cta .btn { width: 100%; }
  .doc { padding: var(--s6) var(--gutter) var(--s9); }
  .doc__lead { font-size: 1.05rem; }
  .doc h2 { margin-top: var(--s7); }
  .doc__cta .btn { width: 100%; }
  .form__row .btn { width: 100%; }
  .foot { padding: var(--s4) var(--gutter) max(var(--s4), env(safe-area-inset-bottom)); }
  .foot__in { font-size: 0.8rem; gap: 6px; }
  .foot__links { gap: 4px var(--s5); }

  .idea { padding: var(--s5) var(--gutter) var(--s6); }
  .idea__in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); padding: var(--s6) var(--s5); }
}

/* Short phones: copy first, so the headline and the button share the first screen; the phone follows. */
@media (max-width: 860px) and (max-height: 760px) {
  :root { --stage-h: 54svh; }
  html.live .act__copy { padding: var(--s3) var(--s4) var(--s4); }
  html.live .act__copy p { font-size: 0.94rem; line-height: 1.5; }
  html.live .copy { padding-top: 0; }
  html.live .act--hero { margin-bottom: var(--stage-h); padding: var(--s3) 0 var(--s6); }
  html.live .stage { margin-top: var(--hero-h, 0px); }
}

@media (max-width: 370px) {
  .langs a { min-width: 30px; padding: 0 5px; }
  .brand span { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .faq summary::after, .rail__stamp, .rail__stamp::after { transition: none; }
}