/* Reflect Daily -- the app walkthroughs on the home page.
   Each walkthrough is a phone (the .phone frame from style.css) whose screen
   is drawn in the app's own 402 x 874 point space and played by
   walkthroughs.js. Everything that moves is moved with transform and
   opacity only, so the browser can hand it to the graphics card and it stays
   smooth; nothing animates width, height, or position. */

/* Daybreak and Spring, the light palettes added in the app on Sep 30. */
.phone[data-palette="daybreak"] {
  --app-bg-solid: #f5f6fd;
  --app-surface: #ffffff; --app-surface2: #eef0fb; --app-border: #d8ddf3;
  --app-text: #1d2140; --app-dim: #5f6487; --app-accent: #4d5dcb;
  --app-on-accent: #ffffff; --app-tint: rgba(77, 93, 203, 0.12);
  --app-w1: #fff3e3; --app-w2: #f0a06a; --app-w3: #d8743a;
  --app-shadow: rgba(40, 50, 110, 0.14);
}
.pbg[data-p="daybreak"] { background: linear-gradient(170deg, #f5f6fd, #e9ecfa 55%, #dce1f7); }
.phone[data-palette="daybreak"] .pbg[data-p="daybreak"] { opacity: 1; }
.phone[data-palette="daybreak"] .tile { box-shadow: 0 0 0 1px rgba(40, 50, 110, 0.04), 0 6px 18px var(--app-shadow); }
.phone[data-palette="daybreak"] .tile::after { display: none; }
.phone[data-palette="spring"] {
  --app-bg-solid: #f4f9f3;
  --app-surface: #ffffff; --app-surface2: #e9f3eb; --app-border: #cfe4d4;
  --app-text: #16302a; --app-dim: #56736b; --app-accent: #267a56;
  --app-on-accent: #ffffff; --app-tint: rgba(38, 122, 86, 0.12);
  --app-w1: #fff3e3; --app-w2: #e8a15c; --app-w3: #c9793a;
  --app-shadow: rgba(30, 80, 50, 0.14);
}
.pbg[data-p="spring"] { background: linear-gradient(170deg, #f4f9f3, #e6f2e7 55%, #d5ead9); }
.phone[data-palette="spring"] .pbg[data-p="spring"] { opacity: 1; }
.phone[data-palette="spring"] .tile { box-shadow: 0 0 0 1px rgba(30, 80, 50, 0.04), 0 6px 18px var(--app-shadow); }
.phone[data-palette="spring"] .tile::after { display: none; }
.phone[data-palette="spring"] .touch2 { background: rgba(22, 48, 42, 0.35); box-shadow: 0 0 0 6px rgba(22, 48, 42, 0.1); }

/* No home bar on the Profile phone (owner, Oct 2). */
#wt-look .home-ind { display: none; }

/* The screen's own black cover (walkthroughs.js): every walkthrough starts
   from black, fades in, and fades back to black before it starts again.
   It sits inside the screen, so the phone itself never fades. */
.screen-black { position: absolute; inset: 0; background: #000; opacity: 1; z-index: 30; pointer-events: none; }

/* A slower cross-fade for the morning-to-evening walkthrough. */
.phone.slow-fade .pbg { transition-duration: 1.6s; }
.phone.slow-fade, .phone.slow-fade * { transition-duration: 1.4s !important; }
.phone.quick-fade .pbg, .phone.quick-fade, .phone.quick-fade * { transition-duration: 0.45s !important; }

/* Smaller phones for the gallery. */
.phone.phone-sm { --k: 0.6; }
@media (max-width: 420px) { .phone.phone-sm { --k: 0.66; } }

/* ---------- Review tags (only while the owner is choosing) ---------- */
.wt-tag { display: none; }
html.review .wt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warm);
  color: #241a14;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
html.review .wt-tag small { font-weight: 600; opacity: 0.75; letter-spacing: 0; }

/* ---------- Gallery ---------- */
.wt-gallery { padding: 80px 0 40px; }
.wt-gallery > .wrap > h2 {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 38px);
  text-align: center;
  margin: 0 0 10px;
}
.wt-gallery > .wrap > p.lead-small {
  text-align: center;
  color: var(--text-dim);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 48px;
}
.wt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 56px 28px;
  justify-items: center;
}
.wt-item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 320px; }
.wt-item h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 22px; margin: 0; }
.wt-item p { margin: 0; color: var(--text-dim); font-size: 15.5px; line-height: 1.5; }
.wt-caption {
  min-height: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

/* A soft glow behind every section's phone, on whichever side the phone sits
   (owner, Oct 1). Sections alternate: phone left, then right. */
.screen-beat { position: relative; }
.screen-beat::before {
  content: "";
  position: absolute;
  inset: 4% 0;
  background: radial-gradient(ellipse 42% 60% at 27% 50%, rgba(140, 160, 232, 0.16), transparent 70%);
  pointer-events: none;
}
.screen-beat-reverse::before { background: radial-gradient(ellipse 42% 60% at 73% 50%, rgba(246, 181, 137, 0.14), transparent 70%); }
@media (max-width: 840px) {
  .screen-beat::before, .screen-beat-reverse::before { background: radial-gradient(ellipse 70% 40% at 50% 34%, rgba(140, 160, 232, 0.16), transparent 70%); }
}
.feature-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.feature-points li { display: flex; gap: 10px; align-items: baseline; color: var(--text); font-size: 16px; }
.feature-points li::before { content: "✦"; color: var(--warm); font-size: 13px; }
@media (max-width: 840px) { .feature-points { justify-items: center; } }

/* ---------- Shared pieces inside the phone ---------- */
.ws { position: absolute; inset: 0; padding: 59px 16px 0; }
.ws-hide { opacity: 0; visibility: hidden; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.fill-bg { position: absolute; inset: 0; background: var(--app-bg-solid); }
.touch2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16);
  opacity: 0;
  z-index: 30;
  pointer-events: none;
  will-change: transform, opacity;
}
.phone[data-palette="daybreak"] .touch2 { background: rgba(29, 33, 64, 0.35); box-shadow: 0 0 0 6px rgba(29, 33, 64, 0.1); }
.app-sub { font-size: 14px; color: var(--app-dim); margin: -8px 0 16px; }
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.55), 0 7px 22px var(--app-shadow);
}
.label-sm { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--app-dim); }
.dimmer { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 12; }

/* Mini entry tiles, without photos where the demo does not need them. */
.mtile { padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; background: var(--app-surface); border: 1px solid var(--app-border); }
.mtile .mt-top { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: var(--app-accent); letter-spacing: 0.3px; }
.mtile .mt-grat { font-family: "Nunito", sans-serif; font-weight: 600; font-size: 14px; margin-top: 4px; color: var(--app-text); }
.mtile .mt-ph { height: 120px; margin: 10px -14px -12px; background-size: cover; background-position: center; border-radius: 0 0 14px 14px; }

/* Home goal row (HomeGoalRow): one dot per goal, dim until worked on. */
.grow { display: flex; gap: 8px; margin: -2px 0 14px; }
.gdot { position: relative; width: 36px; height: 36px; }
.gdot .gd-face {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--app-surface); border: 1px solid var(--app-border);
  transition: opacity 0.4s ease;
}
.gdot.dim .gd-face { opacity: 0.35; }
.gdot .gd-ring { position: absolute; left: -4px; top: -4px; width: 44px; height: 44px; overflow: visible; }
.gdot .gd-ring circle { fill: none; stroke: #6fcf97; stroke-width: 2.5; stroke-linecap: round; }
.gdot .gd-check, .gt-check {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: #6fcf97; border: 1.5px solid var(--app-bg-solid);
  display: grid; place-items: center; color: #1b1d2a; font-size: 9px; font-weight: 900; line-height: 1;
  opacity: 0; transform: scale(0);
}
.gdot.met .gd-check { opacity: 1; transform: none; }
.gd-star { position: absolute; left: 12px; top: 0; font-size: 11px; opacity: 0; }

/* Today's week segment filling in after a save. */
.wk-bar i { position: relative; }
.wk-bar .wk-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--app-accent); }

/* Week bar streamers (StreamerBurst). */
.streamer { position: absolute; width: 4px; height: 11px; border-radius: 1px; opacity: 0; z-index: 14; will-change: transform, opacity; }

/* Composer sheet, short version. */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 640px;
  background: var(--app-surface); border-radius: 26px 26px 0 0; border-top: 1px solid var(--app-border);
  z-index: 13; padding: 18px 18px 0; transform: translateY(105%);
  will-change: transform;
}
.sheet .sh-top { display: flex; justify-content: space-between; color: var(--app-dim); font-size: 14px; font-weight: 700; }
.sheet .sh-face { font-size: 56px; text-align: center; margin: 22px 0 4px; }
.sheet .sh-word { text-align: center; font-weight: 700; color: var(--app-text); font-size: 16px; }
.sheet .sh-scale { display: flex; gap: 5px; justify-content: center; margin: 14px 0 22px; }
.sheet .sh-scale i { width: 28px; height: 28px; border-radius: 50%; background: var(--app-surface2); font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; color: var(--app-dim); }
.sheet .sh-scale i.sel { background: var(--app-accent); color: var(--app-on-accent); }
.sheet .sh-in { padding: 12px 14px; border-radius: 12px; background: var(--app-surface2); font-family: "Nunito", sans-serif; font-weight: 600; font-size: 15px; color: var(--app-text); margin-top: 8px; }
.sheet .sh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sheet .sh-chips span { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--app-border); font-size: 13px; font-weight: 700; color: var(--app-text); }
.sheet .sh-chips span.sel { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-on-accent); }
.sheet .sh-save { position: absolute; left: 18px; right: 18px; bottom: 120px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: var(--app-on-accent); background: linear-gradient(149deg, var(--app-w1), var(--app-w2), var(--app-w3)); }

/* ---------- Badge pop-up (BadgeEarnedToast + Seal) ---------- */
.bcard {
  position: absolute; left: 34px; right: 34px; top: 190px; z-index: 15;
  padding: 26px 22px 18px; border-radius: 26px; text-align: center;
  background: var(--app-surface2); border: 1px solid var(--app-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: scale(0.9);
  will-change: transform, opacity;
}
.bcard .bc-x { position: absolute; right: 18px; top: 14px; color: var(--app-dim); font-size: 15px; }
.bcard .bc-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--app-w3); }
.bcard .bc-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 26px; color: var(--app-text); margin-top: 6px; }
.bcard .bc-crit { font-size: 14px; line-height: 19px; color: var(--app-dim); margin-top: 4px; }
.bcard .bc-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--app-border); font-size: 12.5px; line-height: 17px; color: var(--app-dim); }
.seal { --s: 96px; position: relative; width: var(--s); height: var(--s); margin: 14px auto 12px; display: grid; place-items: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.seal > i { position: absolute; width: 70%; height: 70%; border-radius: 11%; background: #e8724f; }
.seal > i + i { transform: rotate(45deg); }
.seal > b { position: absolute; width: 68%; height: 68%; border-radius: 50%; background: linear-gradient(150deg, #fff6e8, #f6b589 55%, #e8724f); }
.seal > u { position: absolute; width: 58%; height: 58%; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.75); }
.seal > em { position: relative; font-style: normal; font-size: calc(var(--s) * 0.35); line-height: 1; }
.seal.locked { filter: none; }
.seal.locked > i { background: var(--app-border); }
.seal.locked > b { background: var(--app-surface2); }
.seal.locked > u { border-color: var(--app-dim); }
.seal.locked > em { opacity: 0.6; font-size: calc(var(--s) * 0.28); }

/* Badges grid */
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.bgrid .bg-cell { text-align: center; }
.bgrid .seal { --s: 84px; margin: 0 auto 6px; }
.bgrid .bg-name { font-size: 12px; font-weight: 700; color: var(--app-text); }
.bg-shine { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 190, 0.85), transparent 62%); opacity: 0; }

/* ---------- Lock ---------- */
.lockscr { position: absolute; inset: 0; z-index: 16; display: flex; flex-direction: column; align-items: center; padding-top: 210px; background: var(--app-bg-solid); }
.lockscr img { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.lockscr h4 { margin: 22px 0 6px; font-family: "Fraunces", serif; font-weight: 600; font-size: 24px; color: var(--app-text); }
.lockscr p { margin: 0; font-size: 14px; color: var(--app-dim); }
.faceid { margin-top: 70px; width: 76px; height: 76px; }
.faceid path { fill: none; stroke: var(--app-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.faceid .fi-check { stroke: #6fcf97; stroke-width: 4; }
.pcode { display: flex; gap: 14px; margin-top: 40px; }
.pcode i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--app-text); }
.pcode i.on { background: var(--app-text); }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 26px; margin-top: 36px; }
.keypad span { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 500; color: var(--app-text); background: var(--app-surface); transition: background-color 0.15s ease; }
.keypad span.hit { background: var(--app-surface2); }
.keypad span.blank { background: transparent; }

/* ---------- Opening greeting (WelcomeReveal, returning) ---------- */
.greet { position: absolute; inset: 0; z-index: 16; display: grid; place-items: center; }
.greet .gr-glow { position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 160, 232, 0.5), rgba(140, 160, 232, 0.16) 55%, transparent 70%); opacity: 0; will-change: transform, opacity; }
.greet .gr-words { position: relative; text-align: center; font-family: "Fraunces", serif; font-weight: 600; font-size: 34px; line-height: 1.25; color: var(--app-text); opacity: 0; will-change: transform, opacity; }

/* ---------- Goals ---------- */
.wkcard { overflow: hidden; padding: 14px 0; }
.wkcard .wc-head { display: flex; justify-content: space-between; padding: 0 14px; font-size: 13px; font-weight: 800; color: var(--app-text); }
.wkcard .wc-head small { color: var(--app-dim); font-weight: 700; }
.wkcard .wc-track { display: flex; width: 200%; will-change: transform; }
.wkcard .wc-page { width: 50%; display: flex; justify-content: space-between; padding: 12px 14px 0; }
.wkcard .wc-day { width: 40px; text-align: center; }
.wkcard .wc-day small { display: block; font-size: 10px; font-weight: 800; color: var(--app-dim); }
.wkcard .wc-day b { display: grid; place-items: center; width: 36px; height: 36px; margin: 4px auto 0; border-radius: 50%; font-size: 13px; color: var(--app-text); background: var(--app-surface2); }
.wkcard .wc-day b.done { background: var(--app-accent); color: var(--app-on-accent); }
.wkcard .wc-day b.today { box-shadow: inset 0 0 0 2px var(--app-accent); background: transparent; }
.gtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.gtile { position: relative; padding: 12px; }
.gtile .gt-emoji { font-size: 22px; }
.gtile .gt-title { font-weight: 800; font-size: 14px; margin-top: 6px; color: var(--app-text); }
.gtile .gt-sub { font-size: 11.5px; color: var(--app-dim); margin-top: 2px; }
.gtile .gt-bar { height: 7px; border-radius: 4px; background: var(--app-surface2); margin-top: 10px; overflow: hidden; }
.gtile .gt-bar i { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--app-accent); transform-origin: 0 50%; will-change: transform; }
.gtile .gt-check { right: 10px; top: 10px; bottom: auto; width: 20px; height: 20px; font-size: 11px; }
.gtile.met .gt-check { opacity: 1; transform: none; }

/* Goal story (GoalStoryRow + GoalStoryScreen) */
.srow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--app-border); }
.srow:last-child { border-bottom: 0; }
.ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; font-size: 19px; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .r-bg { stroke: var(--app-surface2); }
.ring .r-fg { stroke: #6fcf97; stroke-linecap: round; }
.srow .s-mid { flex: 1; min-width: 0; }
.srow .s-title { font-weight: 800; font-size: 14.5px; color: var(--app-text); }
.srow .s-line { font-size: 11.5px; color: var(--app-dim); margin-top: 2px; }
.srow .s-side { font-size: 11.5px; font-weight: 700; color: #6fcf97; text-align: right; }
.story-head { display: flex; gap: 12px; align-items: center; }
.story-head .sh-em { width: 56px; height: 56px; border-radius: 50%; background: var(--app-surface2); display: grid; place-items: center; font-size: 28px; }
.story-head h4 { margin: 0; font-family: "Fraunces", serif; font-weight: 600; font-size: 24px; color: var(--app-text); }
.story-head small { display: block; color: var(--app-dim); font-size: 12.5px; }
.mood2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mood2 .card { text-align: center; padding: 12px; }
.mood2 b { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 32px; color: var(--app-text); }
.mood2 small { font-size: 11px; color: var(--app-dim); }
.sec-label { margin: 18px 0 8px; }

/* Charts */
.bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 0 4px; }
.bars i { flex: 1; height: 100%; border-radius: 6px 6px 3px 3px; background: var(--app-accent); opacity: 0.55; transform-origin: 50% 100%; will-change: transform; }
.bars i.hi { opacity: 1; }
.bars i.sel { opacity: 1; background: var(--app-w2); }
.bars-x { display: flex; gap: 10px; padding: 6px 4px 0; }
.bars-x span { flex: 1; text-align: center; font-size: 11px; font-weight: 700; color: var(--app-dim); }
.bubble {
  position: absolute; left: 0; top: 0; z-index: 5; padding: 8px 12px; border-radius: 12px; white-space: nowrap;
  background: var(--app-text); color: var(--app-bg-solid); font-size: 12px; font-weight: 700; line-height: 1.35;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); opacity: 0; will-change: transform, opacity;
}
.bubble small { display: block; font-weight: 600; opacity: 0.75; }
.trend { position: relative; height: 170px; }
.trend svg { width: 100%; height: 100%; overflow: visible; }
.trend .tr-line { fill: none; stroke: var(--app-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend .tr-area { fill: var(--app-tint); opacity: 0; }
.trend .tr-dot { fill: var(--app-accent); opacity: 0; }
.trend .tr-target { stroke: var(--app-dim); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.6; }

/* Search (Home) */
.sbox {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; margin-bottom: 14px;
  background: var(--app-surface); border: 1px solid var(--app-border); color: var(--app-dim); font-size: 15px;
}
.sbox b { color: var(--app-text); font-weight: 600; }
.caret { display: inline-block; width: 2px; height: 18px; background: var(--app-accent); margin-left: 1px; vertical-align: middle; animation: caret 1s steps(1) infinite; }
.hl { background: rgba(246, 181, 137, 0.35); border-radius: 3px; padding: 0 2px; }

/* Text size */
.tsize-seg { display: flex; padding: 4px; border-radius: 14px; background: var(--app-surface); border: 1px solid var(--app-border); margin-bottom: 18px; }
.tsize-seg span { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; font-size: 13.5px; font-weight: 800; color: var(--app-dim); transition: background-color 0.3s ease, color 0.3s ease; }
.tsize-seg span.on { background: var(--app-accent); color: var(--app-on-accent); }
.tsize-stage { position: relative; }
.tsize-v { position: absolute; left: 0; right: 0; top: 0; opacity: 0; will-change: opacity, transform; }
.tsize-v.on { opacity: 1; }
.entry-date { font-weight: 800; color: var(--app-accent); }
.entry-grat { font-family: "Nunito", sans-serif; font-weight: 600; color: var(--app-text); }
.entry-text { color: var(--app-dim); }

/* Backup */
.reqs { display: grid; gap: 8px; margin-top: 14px; }
.reqs div { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--app-dim); }
.reqs .rq { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: #e8776e; transition: background-color 0.35s ease; }
.reqs .rq.ok { background: #6fcf97; color: #1b1d2a; }
.pwfield { height: 48px; border-radius: 12px; background: var(--app-surface2); display: flex; align-items: center; padding: 0 14px; gap: 6px; margin-top: 8px; }
.pwfield i { width: 9px; height: 9px; border-radius: 50%; background: var(--app-text); opacity: 0; transform: scale(0.4); transition: opacity 0.15s ease, transform 0.15s ease; }
.pwfield i.on { opacity: 1; transform: none; }
.btn-main { margin-top: 22px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; color: var(--app-on-accent); background: var(--app-accent); }
.done-card { text-align: center; padding: 28px 16px; }
.done-card .dc-file { font-size: 46px; }
.done-card b { display: block; margin-top: 8px; color: var(--app-text); font-size: 16px; }
.done-card small { color: var(--app-dim); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
}

/* SVG pieces that scale around their own middle. */
.faceid .fi-frame, .trend .tr-dot { transform-box: fill-box; transform-origin: center; }
/* Sections centre their text on small screens and the gallery centres its
   captions; the screens inside phones stay left-aligned. */
.phone { text-align: left; }
/* Full-screen layers sit under the status bar, as in the app. */
.lockscr, .greet { z-index: 6; }

/* ---------- Round 2 (Oct 1, evening) ---------- */
/* No clock, signal, Wi-Fi or battery on any phone (owner, Oct 1): only the
   Dynamic Island stays. */
.phone .sbar { display: none; }

/* A1: Home's edge slider (TimelineScrubber). At rest only the small tab
   shows; the line, the month ticks and the date bubble appear while a
   finger drags it. */
.o-ws { overflow: hidden; }
.o-scroll { will-change: transform; padding-bottom: 140px; }
.scrub { position: absolute; right: 0; top: 150px; bottom: 130px; width: 16px; z-index: 5; }
.scrub .s-line { position: absolute; top: 0; bottom: 0; right: 5px; width: 2px; border-radius: 1px; background: var(--app-accent); opacity: 0; }
.scrub .s-tick { position: absolute; right: 3px; width: 6px; height: 1.5px; border-radius: 1px; background: var(--app-accent); opacity: 0; }
.scrub .s-thumb { position: absolute; right: 2px; top: 0; width: 8px; height: 46px; border-radius: 4px; background: var(--app-accent); will-change: transform; }
.scrub .s-bubble {
  position: absolute; right: 26px; top: 0; min-width: 168px; padding: 9px 14px; border-radius: 14px;
  background: var(--app-surface2); border: 1px solid var(--app-border); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  opacity: 0; will-change: transform, opacity;
}
.scrub .s-bubble b { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 18px; color: var(--app-text); white-space: nowrap; }
.scrub .s-bubble small { display: block; font-size: 11.5px; font-weight: 700; color: var(--app-dim); margin-top: 1px; }

/* A15: the Insights page (InsightsHubScreen), scrolled. */
.i-ws { overflow: hidden; padding-top: 0; }
.i-scroll { padding: 104px 0 150px; will-change: transform; }
.i-head {
  position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 6; padding-top: 52px; text-align: center;
  font-family: "Fraunces", serif; font-weight: 600; font-size: 24px; color: var(--app-text);
  background: linear-gradient(var(--app-bg-solid) 78%, transparent);
}
.i-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* Longest streak and Average mood as half tiles, like the app (Nov 5). */
.i-tiles .i-t small { font-size: 11px; min-height: 28px; }
.i-tiles .i-t b { font-size: 24px; }
.i-tiles .i-t em { font-size: 18px; }
.i-tiles .i-t { padding: 8px 4px; min-height: 0; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; }
.i-t { text-align: center; padding: 14px 6px; border-radius: 18px; }
.i-t small { display: block; font-size: 12.5px; font-weight: 700; color: var(--app-text); line-height: 1.25; min-height: 32px; }
.i-t b { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 30px; color: var(--app-text); margin-top: 4px; }
.i-t em { font-style: normal; font-size: 22px; }
.i-sec { margin: 20px 2px 8px; }
.i-card { border-radius: 18px; margin-bottom: 10px; }
.i-h { font-size: 14.5px; font-weight: 800; color: var(--app-text); margin-bottom: 8px; }
.i-trend { width: 100%; height: 88px; overflow: visible; }
.i-trend polyline { fill: none; stroke: var(--app-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.i-cons { display: grid; grid-template-columns: repeat(18, 1fr); gap: 3px; }
.i-cons i { height: 9px; border-radius: 3px; }
.i-cons i.e { box-shadow: inset 0 0 0 1px var(--app-border); }
.i-legend { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--app-dim); }
.i-legend i { width: 9px; height: 9px; border-radius: 2px; }
.i-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.i-two .i-card { min-height: 128px; }
.i-spread, .i-dow { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.i-spread i, .i-dow i { flex: 1; border-radius: 3px 3px 2px 2px; background: var(--app-accent); }
.i-spread i.d { height: 4px !important; border-radius: 2px; }
.i-dow { gap: 4px; }
.i-words-line { width: 100%; height: 66px; overflow: visible; }
.i-words-line polyline { fill: none; stroke: #f6b589; stroke-width: 2; stroke-linejoin: round; }
.i-most div { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; }
.i-most i { flex: none; height: 7px; border-radius: 4px; background: #8d7ad8; max-width: 70%; }
.i-most b { font-size: 12px; color: var(--app-dim); font-weight: 600; width: 18px; text-align: right; }
.i-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 14px; }
.i-cloud span { font-family: "Fraunces", serif; font-weight: 600; color: var(--app-accent); line-height: 1.3; }
.i-seeall { padding: 12px 0 10px; font-weight: 800; font-size: 14px; color: var(--app-accent); }
.srow .chev { color: var(--app-dim); font-size: 18px; margin-left: 2px; }
.ring .r-check {
  position: absolute; right: -2px; bottom: -2px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; background: #6fcf97; color: #1b1d2a; font-size: 10px; font-weight: 900;
  border: 1.5px solid var(--app-surface);
}
.i-map { display: block; width: 100%; height: 76px; border-radius: 12px; margin-top: 8px; }
.i-face { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--app-surface2, #2b3050); font-size: 10px; font-weight: 700; color: var(--app-text); }
.i-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 8px; border-radius: 14px; }
.i-row span { font-size: 20px; }
.i-row b { flex: 1; font-size: 15px; color: var(--app-text); }
.i-row small { font-family: "Fraunces", serif; font-size: 17px; font-weight: 600; color: var(--app-text); }
.i-row em { font-style: normal; color: var(--app-dim); font-size: 18px; }


/* ---------- Round 3 (Oct 1, late) ---------- */
/* Section labels (Home, Goals, Our mission ...): larger and bold, still
   smaller than the line they introduce. */
.copy-col .eyebrow { font-size: 20px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 14px; }
.eyebrow-center { font-size: 22px; font-weight: 800; letter-spacing: 0.12em; }

/* Nine goals in one row, as the app shrinks them to fit. */
.grow { gap: 7px; }
.grow .gdot { width: 33px; height: 33px; }
.grow .gd-face { width: 33px; height: 33px; font-size: 16px; }
.grow .gd-ring { left: -3.5px; top: -3.5px; width: 40px; height: 40px; }
.grow .gd-star { left: 11px; }
.grow .gd-check { width: 15px; height: 15px; font-size: 8.5px; }

/* Home composer: the journal types too. */
.cmp-journal.typing .cmp-text::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom;
  background: var(--app-accent); animation: caret 1s steps(1) infinite;
}
.cmp-journal { line-height: 1.45; }

/* Goals tab (GoalsListScreen + WeekRecapCard) */
.g-ws { padding-top: 54px; }
.g-title { text-align: center; font-family: "Fraunces", serif; font-weight: 600; font-size: 19px; color: var(--app-text); margin-bottom: 16px; }
.gw { padding: 12px 12px 10px; border-radius: 20px; }
.gw-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.8px; color: var(--app-dim); }
.gw-arr { font-size: 20px; color: var(--app-accent); line-height: 1; transition: opacity 0.3s ease; }
.gw-arr.off { opacity: 0.25; }
.gw-clip { overflow: hidden; margin: 0 -12px; }
.gw-track { display: flex; width: 200%; transform: translateX(-50%); will-change: transform; }
.gw-page { width: 50%; padding: 0 12px; }
.gw-big { margin: 8px 2px 8px; font-size: 14px; color: var(--app-dim); }
.gw-big b { font-family: "Fraunces", serif; font-weight: 600; font-size: 34px; color: var(--app-text); margin-right: 6px; vertical-align: -3px; }
.gw-row { display: flex; align-items: center; gap: 6px; height: 27px; }
.gw-em { width: 20px; font-size: 15px; text-align: center; }
.gw-name { width: 92px; font-size: 13px; font-weight: 700; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-days { display: flex; gap: 4px; }
.gw-days i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 900; color: var(--app-on-accent); }
.gw-letters { height: 18px; }
.gw-letters .gw-days i { font-size: 10px; font-weight: 800; color: var(--app-dim); }
.b-d { background: var(--app-accent); }
.b-p { background: color-mix(in srgb, var(--app-accent) 45%, var(--app-surface2)); }
.b-e { box-shadow: inset 0 0 0 1.5px var(--app-border); }
.b-f { border: 1.5px dashed var(--app-border); opacity: 0.7; }
.gw-sum { margin-left: auto; font-size: 12px; color: var(--app-dim); white-space: nowrap; }
.gw-sum.met { color: #6fcf97; font-weight: 700; }
.g-period { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding: 0; overflow: hidden; }
.g-period span { display: grid; place-items: center; gap: 2px; padding: 9px 0; font-size: 15px; border-left: 1px solid var(--app-border); }
.g-period span:first-child { border-left: 0; }
.g-period b { font-size: 12px; font-weight: 600; color: var(--app-dim); }
.g-sort { display: flex; padding: 3px; border-radius: 14px; background: var(--app-surface); border: 1px solid var(--app-border); }
.g-sort span { flex: 1; text-align: center; padding: 7px 0; border-radius: 11px; font-size: 12px; font-weight: 700; color: var(--app-dim); }
.g-sort span.on { background: var(--app-accent); color: var(--app-on-accent); }
.g-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 2px; font-size: 15px; font-weight: 600; color: var(--app-dim); }
/* The outlined ＋ New goal pill (Nov 5). */
.g-meta b { color: var(--app-accent); font-size: 12.5px; border: 1px solid var(--app-accent); border-radius: 999px; padding: 4px 10px; }
.g-sec { text-align: center; margin: 14px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--app-dim); }
.g-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 12px; border-radius: 16px; box-shadow: 0 0 2px 1px rgba(0,0,0,.9), 0 7px 22px rgba(0,0,0,.7); }
.g-mid { flex: 1; }
.g-bar { height: 5px; border-radius: 3px; background: var(--app-surface2); margin-top: 6px; overflow: hidden; }
.g-bar i { display: block; height: 100%; border-radius: 3px; background: var(--app-accent); }
.g-bar i.met { background: #6fcf97; }
.g-check { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--app-dim); background: var(--app-surface2); }
.g-check.met { color: #fff; background: #6fcf97; }
.g-card .g-em { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--app-surface2); font-size: 18px; }
.g-card b { display: block; font-size: 15px; color: var(--app-text); }
.g-card small { font-size: 12px; color: var(--app-dim); }

/* Insights from Home */
.h-ws { overflow: hidden; }
#wt-ihome .i-head { opacity: 0; }

/* Layouts and looks (the owner's B2 note): each part of a tile can be
   switched on and off on its own. */
.look .t-dow, .look .t-time { max-width: 0 !important; opacity: 0 !important; margin-left: 0 !important; }
.look.show-dow .t-dow { max-width: 40px !important; opacity: 1 !important; margin-left: 5px !important; }
.look.show-time .t-time { max-width: 72px !important; opacity: 1 !important; margin-left: 5px !important; }
.look .t-mood { opacity: 0; transform: scale(0.6); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); position: relative; min-width: 18px; text-align: right; }
.look.show-mood .t-mood { opacity: 1; transform: none; }
.look .t-mood em { font-style: normal; transition: opacity 0.4s ease; }
.look .t-mood .m-n { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; font-size: 12px; font-weight: 800; color: var(--app-accent); }
.look.mood-num .t-mood .m-e { opacity: 0; }
.look.mood-num .t-mood .m-n { opacity: 1; }
.look .t-grat.g2, .look .t-grat.g3 { max-height: 0; opacity: 0; margin-top: 0; }
.look.show-grat3 .t-grat.g2, .look.show-grat3 .t-grat.g3 { max-height: 90px; opacity: 1; margin-top: 3px; }
.feed.look[data-layout="card"].show-grat3 .t-grat.g2, .feed.look[data-layout="card"].show-grat3 .t-grat.g3 { margin-top: 4px; }
.look .t-grat { position: relative; }
/* The two hidden gratitude lines take no room at all, so the journal sits
   right under the first one (owner, Oct 2: there was a gap). */
.feed.look[data-layout] .t-grat.g2, .feed.look[data-layout] .t-grat.g3 { margin-top: 0; }
.feed.look[data-layout].show-grat3 .t-grat.g2, .feed.look[data-layout].show-grat3 .t-grat.g3 { margin-top: 3px; }
.feed.look[data-layout="card"].show-grat3 .t-grat.g2, .feed.look[data-layout="card"].show-grat3 .t-grat.g3 { margin-top: 4px; }
.l-ws { overflow: hidden; }
.blackout { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 20; pointer-events: none; }

/* ---------- Round 4 (Oct 1, night) ---------- */
/* A met goal wears a full green ring on its own edge (as in the app). */
.gdot.met .gd-face { box-shadow: inset 0 0 0 2.5px #6fcf97; }
.grow .gd-ring { left: 0; top: 0; width: 33px; height: 33px; }
.gd-ring circle { stroke-width: 3; }

/* Built to be trusted: larger tiles, more room, larger type, icons centred. */
.beat-trust .wrap { max-width: 1040px; }
.beat-trust h2 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 48px; }
.trust-grid { gap: 28px; }
.trust-card { padding: 38px 36px; border-radius: 26px; }
.trust-card p { font-size: 19.5px; line-height: 1.55; margin-top: 24px; }
.trust-icon { width: 92px; height: 92px; border-radius: 24px; margin: 0 auto; }
.trust-icon .ti { width: 54px; height: 54px; }

/* The official store badges, the same height. */
.store-badge { display: inline-flex; transition: transform 0.15s ease, opacity 0.15s ease; }
.store-badge:hover { transform: translateY(-1px); opacity: 0.9; }
.store-badge img { height: 54px; width: auto; display: block; }

/* Goals: the card grows and shrinks with the week's rows. */
.gw-clip { transition: height 0.5s cubic-bezier(0.2, 0.8, 0.25, 1); }
.gw-track { align-items: flex-start; }

/* Insights' mood trend runs the full width of its card. */
.i-trend { display: block; }
.i-trend polyline { vector-effect: non-scaling-stroke; }

/* Goal History (Insights), as in the app. */
.gh-ws { padding-top: 54px; background: var(--app-bg-solid); z-index: 3; }
.gh-nav { position: relative; display: flex; justify-content: center; align-items: center; height: 36px; }
.gh-nav b { font-family: "Fraunces", serif; font-weight: 600; font-size: 19px; color: var(--app-text); }
.gh-back { position: absolute; left: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--app-text); background: var(--app-surface); }
.gh-intro { margin: 14px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--app-dim); }
.gh-week { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gh-week div { text-align: center; }
.gh-week b { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 20px; color: var(--app-text); }
.gh-week small { font-size: 12px; color: var(--app-dim); }
.gh-arr { font-size: 26px; color: var(--app-accent); padding: 0 6px; }
.gh-arr.off { opacity: 0.25; }
.gh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gh-tile { padding: 11px 12px; border-radius: 16px; }
.gh-top { display: flex; justify-content: space-between; align-items: center; min-height: 24px; font-size: 20px; }
.gh-top i { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: #6fcf97; color: #1b1d2a; font-style: normal; font-size: 11px; font-weight: 900; }
.gh-tile b { display: block; margin-top: 4px; font-size: 13px; color: var(--app-text); }
.gh-tile small { display: block; font-size: 11px; color: var(--app-dim); }
.gh-bar { height: 6px; border-radius: 3px; margin-top: 8px; background: var(--app-surface2); overflow: hidden; }
.gh-bar i { display: block; height: 100%; border-radius: 3px; background: var(--app-accent); }
.gh-bar i.met { background: #6fcf97; }

/* Trust cards: a short bold header, then the icon, then the description
   (owner, Oct 14). */
.trust-card { text-align: center; }
.trust-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 24px; color: var(--text); margin: 0 0 22px; }

/* The closing glow is centered on its icon by site.js and may reach above
   the section's top edge (owner, Oct 14-15). */
.closing { overflow-x: clip; overflow-y: visible; }
.closing .hero-glow { height: 560px; }

/* Bullets only when more than one gratitude shows (owner, Oct 15). */
.look.show-grat3 .t-grat::before { content: "• "; }