/* Plain neutral base that follows the phone's light or dark setting. Color is saved for the
   things worth noticing: the Dawn gradient while goals are open, Aurora once they are done. */
:root {
  --bg: #f4f4f6; --card: #ffffff; --raise: #eeeef1; --raise-2: #e0e0e6; --line: #e8e8ed; --focus: #e8e8ee;
  --text: #121216; --muted: #6b6b76; --faint: #a5a5af; --cues: #3c3c45;
  --accent: #5b4be0; --primary: #121216; --on-primary: #ffffff;
  --bad: #e0485c; --warn: #e38a1c;
  --health: #f07a3e; --spiritual: #6d5df6; --financial: #0f9f86; --misc: #d9509a;
  --blue: #2f80ed; --gold: #c99a14; --red: #dc4a4f; --green: #3a9d4b; --slate: #64748b; --cyan: #0891b2; --lime: #5b9a0c;
  --glass: rgba(255,255,255,0.8); --glass-line: rgba(0,0,0,0.06); --glass-on: rgba(18,18,22,0.08); --glass-on-text: #121216;
  --shadow: 0 10px 30px rgba(0,0,0,0.10); --scrim: rgba(0,0,0,0.3);
  --dawn: linear-gradient(135deg, #6d5df6 0%, #e86aa6 58%, #ffb07a 100%);
  --aurora: linear-gradient(135deg, #4f46e5 0%, #14b8a6 60%, #6ee7b7 100%);
  --nav-h: 58px;
  --mk-rest: #1c1c21; --wash: 0.2;
  color-scheme: light dark;
}
/* Dark colors: with the phone in dark mode (unless Settings says always light), or always dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0d; --card: #151518; --raise: #202024; --raise-2: #2d2d33; --line: #232328; --focus: #26262c;
    --text: #f4f4f6; --muted: #8f8f99; --faint: #5e5e67; --cues: #cfcfd6;
    --accent: #a197ff; --primary: #f4f4f6; --on-primary: #0b0b0d;
    --bad: #ff6b7d; --warn: #f5b14c;
    --health: #ffa26b; --spiritual: #a197ff; --financial: #3ddbb0; --misc: #f47ab8;
    --blue: #6fb1ff; --gold: #f2c94c; --red: #ff8084; --green: #7bd88a; --slate: #a3b1c6; --cyan: #5fd0e6; --lime: #a8dc62;
    --glass: rgba(30,30,34,0.74); --glass-line: rgba(255,255,255,0.07); --glass-on: rgba(255,255,255,0.12); --glass-on-text: #ffffff;
    --shadow: 0 12px 34px rgba(0,0,0,0.5); --scrim: rgba(0,0,0,0.6);
    --mk-rest: #e6e6ec; --wash: 0.3;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0d; --card: #151518; --raise: #202024; --raise-2: #2d2d33; --line: #232328; --focus: #26262c;
  --text: #f4f4f6; --muted: #8f8f99; --faint: #5e5e67; --cues: #cfcfd6;
  --accent: #a197ff; --primary: #f4f4f6; --on-primary: #0b0b0d;
  --bad: #ff6b7d; --warn: #f5b14c;
  --health: #ffa26b; --spiritual: #a197ff; --financial: #3ddbb0; --misc: #f47ab8;
  --blue: #6fb1ff; --gold: #f2c94c; --red: #ff8084; --green: #7bd88a; --slate: #a3b1c6; --cyan: #5fd0e6; --lime: #a8dc62;
  --glass: rgba(30,30,34,0.74); --glass-line: rgba(255,255,255,0.07); --glass-on: rgba(255,255,255,0.12); --glass-on-text: #ffffff;
  --shadow: 0 12px 34px rgba(0,0,0,0.5); --scrim: rgba(0,0,0,0.6);
    --mk-rest: #e6e6ec; --wash: 0.3;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:active { transform: scale(0.97); }
[hidden] { display: none !important; }
button > svg.i { margin: 0 auto; flex: 0 0 auto; }
svg.i { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#view {
  width: 100%; max-width: 640px; margin: 0 auto; /* full width even when its content is narrow (the chat's welcome) */
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 96px);
}
h1 { font-size: 30px; font-weight: 600; margin: 0; letter-spacing: -0.025em; }
h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
h3.group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 20px 4px 8px; }
.muted { color: var(--muted); font-size: 14px; }
.block { display: block; }
.empty { color: var(--muted); text-align: center; padding: 28px 12px; }
p { margin: 8px 0; }
section, .card { margin-bottom: 12px; }

/* ---- header */
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.top-title { flex: 1; min-width: 0; }
.top-title .muted { margin-top: 2px; }
.top.greet { text-align: center; }
.top.greet h1 { font-size: 27px; line-height: 1.15; letter-spacing: -0.03em; }
.icon-btn { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 0; background: var(--raise); color: var(--text); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.card.tight { padding: 2px 16px; }
.card > h2:first-child, .card-label { display: flex; align-items: center; gap: 8px; }
.card-label .count { margin-left: auto; letter-spacing: 0.02em; color: var(--faint); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
/* category colors: the first four are the starting categories */
.col-orange { --c: var(--health); } .col-violet { --c: var(--spiritual); }
.col-teal { --c: var(--financial); } .col-pink { --c: var(--misc); }
.col-blue { --c: var(--blue); } .col-gold { --c: var(--gold); } .col-red { --c: var(--red); }
.col-green { --c: var(--green); } .col-slate { --c: var(--slate); }
.col-cyan { --c: var(--cyan); } .col-lime { --c: var(--lime); }

/* ---- week strip */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 0 -4px 14px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; color: var(--muted); }
.wd-l { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.wd-n { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#6d5df6, #e86aa6 calc(var(--p, 0) * 200deg), #ffb07a calc(var(--p, 0) * 360deg), var(--raise-2) 0); }
.wd.full .wd-n { background: conic-gradient(#4f46e5, #14b8a6 200deg, #6ee7b7); }
.wd-n::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg); }
.wd-n b { position: relative; font-size: 14px; font-weight: 600; color: var(--text); }
.wd.free .wd-n { background: var(--raise); }
.wd.off { opacity: 0.35; }
.wd.off .wd-n { background: none; }
.icon-btn:disabled { opacity: 0.3; }
.wd.on .wd-l { color: var(--text); }
.wd.on .wd-n::before { background: var(--primary); }
.wd.on .wd-n b { color: var(--on-primary); }

/* coming days: open to look at, with a dot per category that has something planned */
.wd-dots { display: flex; justify-content: center; gap: 3px; height: 5px; }
.wd-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.wd.ahead .wd-n { background: var(--raise); }
.wd.ahead .wd-n::before { inset: 0; background: transparent; }
.wd.ahead.on .wd-n::before { background: var(--primary); }
.today-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; border-radius: 99px; padding: 7px 14px 7px 12px;
  background: var(--primary); color: var(--on-primary); font-size: 13px; font-weight: 600; }
.today-btn svg.i { margin: 0; font-size: 15px; }
.item.ahead { padding: 12px 0; }
.item.ahead:last-child { padding-bottom: 2px; }

/* ---- hero */
.hero { position: relative; overflow: hidden; border-radius: 22px; padding: 18px 18px 20px; margin-bottom: 12px; color: #fff; background: var(--dawn); box-shadow: var(--shadow); }
.hero.done { background: var(--aurora); }
.hero.quiet { background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.hero.quiet::after { display: none; }
.hero.quiet .pill { background: var(--raise); }
.hero.quiet .hero-head { text-shadow: none; }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 85% 0%, rgba(255,255,255,0.16), transparent 60%); pointer-events: none; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.pill { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-body { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.hero-text { flex: 1; min-width: 0; }
.hero-head { text-shadow: 0 1px 12px rgba(0,0,0,0.12); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.hero-sub { font-size: 14px; opacity: 0.85; margin: 8px 0 0; }
.ring { width: 76px; height: 76px; flex: 0 0 auto; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: rgba(255,255,255,0.22); }
.ring .fill { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ring-num small { font-size: 12px; opacity: 0.75; font-weight: 500; }

/* ---- goal rows */
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; padding-bottom: 2px; }
.card > h2 + .item { padding-top: 4px; }
.item-main { flex: 1; min-width: 0; }
.item-main[data-action] { cursor: pointer; } /* the name opens the goal on the Goals tab */
.item-main[data-action]:active { opacity: 0.55; }
.item-name { font-weight: 500; font-size: 16px; }
.item-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.item-reason { color: var(--bad); font-size: 13px; margin-top: 3px; }
.item.is-done .item-name { color: var(--muted); }
.item-actions { display: flex; gap: 8px; }
.act { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--raise); color: var(--faint); font-size: 19px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s, color 0.2s; }
.act svg.i { stroke-width: 2.6; }
.act.yes.on, .act.add.on { background: var(--aurora); color: #fff; }
.act.no.on { background: var(--bad); color: #fff; }
.act.add { font-size: 15px; color: var(--text); }
.link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 6px 0 0; color: var(--accent); font-size: 14px; text-align: left; }

/* ---- For You: plain cards; the only color is the small label */
.fy { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; }
.fy.inset { background: var(--raise); border: 0; border-radius: 14px; padding: 12px 14px; margin: 2px 0 10px; }
.fy-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fy-label svg.i { stroke: #e86aa6; stroke-width: 1.8; font-size: 13px; }
.fy-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 6px 0 4px; }
.fy-line { font-size: 14px; margin: 6px 0 0; color: var(--text); }
.fy-line b { font-weight: 600; }
.fy-line .muted { font-size: 13px; }
.fy-line .link { display: inline; padding: 0; font-size: inherit; }
.fy-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fy-actions .btn { flex: 0 0 auto; }
.fy.inset .btn.ghost { box-shadow: inset 0 0 0 1px var(--raise-2); }
.fy.inset .btn:not(.primary):not(.ghost) { background: var(--card); }
.item-hint { color: var(--accent); font-size: 13px; font-weight: 500; margin-top: 3px; }

/* ---- first open on a new account (welcome in goals.js) */
.welcome { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px 20px 20px; margin-bottom: 12px; text-align: center; }
.welcome::before { content: ''; position: absolute; inset: 0 0 auto; height: 140px; background: var(--dawn); opacity: 0.16; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.welcome > * { position: relative; }
.welcome-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.welcome-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 8px; }
.welcome-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.welcome-btns .btn { flex: 0 0 auto; }
.welcome-btns .btn svg.i { margin: 0; font-size: 17px; }

/* ---- week in review (reviewCard and lastWeekCard in goals.js) */
.rv { margin: 10px 0 2px; border-top: 1px solid var(--line); }
.rv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rv-n { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-row.full .rv-n { color: var(--text); }
.rv-n svg.i { margin: 0; font-size: 14px; stroke: #14b8a6; stroke-width: 2.6; }
.rv-sum { margin: -2px 0 12px; font-size: 13px; }
.fy-actions .btn svg.i { margin: 0; font-size: 15px; }
.item-sub.pace { margin-top: 3px; }
.item-sub.pace.behind { color: var(--bad); }
.item-sub.pace.soon { color: var(--accent); }
.item-sub.pace.ahead { color: var(--financial); }
.try { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; border-radius: 99px; padding: 7px 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); font-size: 13px; font-weight: 600; }
.try svg.i { margin: 0; }
.try span { color: var(--muted); font-weight: 500; margin-left: 2px; }

/* ---- bars */
.bar-row { padding: 8px 0; }
.bar-row:last-child { padding-bottom: 2px; }
.bar-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 7px; }
.bar-top .muted { font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 5px; background: var(--raise); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: var(--dawn); transition: width 0.4s ease; }
.bar-fill.met { background: var(--aurora); }
.bar-fill.warn { background: var(--warn); }
.bal { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.bal:last-child { border-bottom: 0; padding-bottom: 2px; }
.card > h2 + .bal { padding-top: 4px; }
.bal:active { transform: none; opacity: 0.6; }
.bal .bar-top { font-size: 16px; font-weight: 500; }
.bal .bar-top strong { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal .item-sub { margin-top: 7px; }
.pay-amt { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.plain-row { align-items: center; }
.pay-fix input { margin: 0; flex: 1; }
.plain-row, .miss-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.plain-row:last-child, .miss-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.miss-row span { white-space: nowrap; }

/* ---- heatmap */
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.cell { aspect-ratio: 1; border-radius: 3px; background: var(--raise); display: block; }
.cell.future { background: transparent; }
.cell.due { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 50%, transparent); }
.cell.l1 { background: color-mix(in srgb, var(--c) 28%, var(--raise)); }
.cell.l2 { background: color-mix(in srgb, var(--c) 52%, var(--raise)); }
.cell.l3 { background: color-mix(in srgb, var(--c) 76%, var(--raise)); }
.cell.l4 { background: var(--c); }
.heat-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }

/* ---- goals list */
.goal-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 13px 0; }
.goal-row:last-child { border-bottom: 0; }
.goal-row:active { transform: none; opacity: 0.6; }
.goal-row strong { font-weight: 500; }
.chev { color: var(--faint); font-size: 16px; }
.cat-head { margin: 10px 0 0; }
.cat-head .more { margin-left: auto; background: none; }
/* categories as bold pills that open to show their goals */
.cat-group { margin-bottom: 10px; }
.cat-pill { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 58px; padding: 0 9px 0 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); }
/* the pill holds two taps: the category itself (opens and closes it) and a + that adds a goal to it */
.cat-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 8px 0 20px; border: 0; border-radius: 999px; background: none; color: inherit; text-align: left; }
.cat-toggle:active { transform: scale(0.985); }
.cat-add { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--raise); color: var(--text); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.cat-pill .dot { width: 10px; height: 10px; flex: 0 0 auto; }
.cat-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cat-arrow { display: inline-flex; color: var(--faint); font-size: 18px; transition: transform 0.2s ease; }
.cat-group.open .cat-arrow { transform: rotate(90deg); color: var(--text); }
.cat-body { margin-top: 8px; }
.cat-empty { margin: 12px 0 4px; }
.cat-foot { padding: 0 0 12px; }
/* who you're becoming, at the top of an open area: their own line, marked with the Dawn gradient */
.becoming { margin: 12px 0 6px; padding: 1px 0 1px 12px; border-left: 3px solid #e86aa6; border-image: var(--dawn) 1; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text); }
.becoming-add { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 14px; color: var(--muted); }
.becoming-add svg.i { font-size: 14px; }
.cat-group + .add-cat { margin-top: 18px; }
.goal-row.focus { background: var(--focus); border-radius: 12px; margin: 0 -10px; padding: 13px 10px; width: calc(100% + 20px); border-bottom-color: transparent; }
.moves, .sheet-hint { margin: 6px 0 0; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .cat-arrow { transition: none; } }
.add-cat { width: 100%; margin: 0 0 14px; }
.add-cat svg.i, .btn.ic svg.i { margin: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; background: var(--c); }
.swatch.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--text); }
.tag { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--raise); border-radius: 99px; padding: 3px 8px; color: var(--muted); }

/* ---- buttons and forms */
.btn { flex: 1; min-height: 48px; padding: 10px 18px; border-radius: 99px; border: 0; background: var(--raise); font-weight: 600; font-size: 15px; text-align: center; text-decoration: none; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn.danger { color: var(--bad); }
.btn.small { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; font-size: 14px; }
.row { display: flex; gap: 10px; margin-top: 14px; }

label, .field { display: block; font-size: 13px; color: var(--muted); margin-top: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: var(--raise); color: var(--text); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input:focus, select:focus, textarea:focus { border-color: var(--raise-2); background-color: var(--focus); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { padding: 9px 14px; border-radius: 99px; border: 0; background: var(--raise); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.chip.on { background: var(--primary); color: var(--on-primary); }

.seg { display: flex; gap: 4px; background: var(--raise); border-radius: 99px; padding: 4px; margin: 0 0 14px; }
.seg button { flex: 1; border: 0; background: transparent; padding: 9px 6px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg.many { overflow-x: auto; scrollbar-width: none; border-radius: 22px; }
.seg.many::-webkit-scrollbar { display: none; }
.seg.many button { flex: 0 0 auto; padding: 9px 14px; }
.rem.prog { padding-bottom: 12px; }
.rem label { margin-top: 8px; }
.rem select { background-color: var(--card); }
.seg button.on { background: var(--raise-2); color: var(--text); }
.tabs-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs-scroll button { flex: 0 0 auto; border: 0; background: var(--raise); padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tabs-scroll button.on { background: var(--primary); color: var(--on-primary); }
.tabs-scroll button.add { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); }
.session-bar { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 12px; }
.session-bar label { margin: 0; }
.session-bar input { width: auto; padding: 8px 12px; }
.notice { background: color-mix(in srgb, var(--warn) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 16px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }

/* ---- settings */
.opt > div { flex: 1; min-width: 0; }
.field .seg { margin: 10px 0 0; }
.seg.mini { margin: 0; flex: 0 0 auto; }
.seg.mini button { flex: 0 0 auto; padding: 7px 16px; }
select.mini { width: auto; margin: 0; flex: 0 0 auto; padding: 9px 34px 9px 14px; font-size: 15px; }
.card .mus-label { margin: 16px 0 2px; }
.card > .opt:last-child { border-bottom: 0; padding-bottom: 2px; }
.plain-row > .muted { white-space: nowrap; }
.add-cat svg.i { margin: 0; }

/* ---- reminders */
.opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.opt strong { font-weight: 500; }
.opt input[type=time] { width: auto; margin: 0; padding: 8px 12px; }
.note { color: var(--text); }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 99px; padding: 0; background: var(--raise-2); transition: background-color 0.2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
.switch.on { background: var(--aurora); }
.switch.on::after { transform: translateX(20px); }
.switch:active { transform: none; }
.switch:disabled { opacity: 0.4; }
.rem { background: var(--raise); border-radius: 16px; padding: 12px 14px 4px; margin-top: 10px; color: var(--text); font-size: 15px; }
.rem-top { display: flex; align-items: center; gap: 10px; }
.rem-top input { margin: 0; flex: 1; background: var(--card); }
.rem .more { background: var(--card); }
.rem .opt { border-bottom: 0; padding: 10px 0; }
.chips.days { flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
.chips.days .chip { width: 36px; height: 36px; padding: 0; letter-spacing: 0; font-size: 13px; background: var(--card); }
.chips.days .chip.on { background: var(--primary); }
.add-rem { margin-top: 10px; width: 100%; }
.add-rem svg.i { margin: 0; }

/* ---- workout */
.set { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 10px; }
.set.is-skipped { opacity: 0.6; }
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; }
.set-head .link { padding: 0; font-size: 16px; font-weight: 600; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: center; margin-top: 10px; }
.set-grid b { color: var(--text); font-weight: 600; }
.set-grid label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.set-grid input { margin: 0; padding: 8px 10px; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.rest { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.more { border: 0; background: var(--raise); color: var(--muted); border-radius: 50%; width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.clock { margin-left: auto; border: 0; background: var(--primary); color: var(--on-primary); border-radius: 99px; width: 50px; height: 36px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.hint { color: var(--financial); font-size: 13px; margin-top: 8px; }
.hint:empty { display: none; }
.last-note { background: var(--raise); border-radius: 12px; padding: 9px 12px; margin-top: 10px; font-size: 14px; }
.last-note .muted { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.set .memo { margin-top: 10px; font-size: 15px; resize: none; }
.set > .link svg.i { margin: 0; }
.slot-tools { display: flex; gap: 6px; }
.slot-tools button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--raise); color: var(--muted); font-size: 16px; }
.slot-tools button:disabled { opacity: 0.3; }
.cues { padding-left: 20px; margin: 12px 0; color: var(--cues); }
.cues li { margin-bottom: 8px; }
.sheet-sec { margin: 22px 0 8px; }
.mus-label { font-size: 13px; color: var(--muted); margin: 12px 0 8px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-m { font-size: 14px; padding: 7px 12px; border-radius: 99px; }
.tag-m.primary { background: var(--m-pri); color: #fff; font-weight: 500; }
.tag-m.secondary { background: var(--m-sec); color: var(--m-sec-text); }

/* ---- body diagrams: white figure with thin outlines, deep red for primary muscles, light pink for secondary */
:root { --m-pri: #9b1c22; --m-pri-line: #6e1015; --m-sec: #f5b8be; --m-sec-line: #d98a92; --m-sec-text: #5c1a20;
  --body-fill: #ffffff; --body-line: #9a9aa3; --body-edge: #6f6f78; --body-detail: #bdbdc5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --m-pri: #b3262d; --m-pri-line: #d8454c; --m-sec: #6b3439; --m-sec-line: #94515a; --m-sec-text: #ffd6da;
    --body-fill: #1d1d21; --body-line: #4a4a52; --body-edge: #7a7a84; --body-detail: #35353c; }
}
:root[data-theme="dark"] { --m-pri: #b3262d; --m-pri-line: #d8454c; --m-sec: #6b3439; --m-sec-line: #94515a; --m-sec-text: #ffd6da;
    --body-fill: #1d1d21; --body-line: #4a4a52; --body-edge: #7a7a84; --body-detail: #35353c; }
.bodies { display: flex; gap: 8px; background: var(--raise); border-radius: 16px; padding: 12px 8px 8px; margin-bottom: 4px; }
.bodies figure { margin: 0; flex: 1; text-align: center; }
.bodies figcaption { color: var(--muted); font-size: 12px; margin-top: 4px; }
svg.body { width: 100%; max-width: 170px; height: auto; display: block; margin: 0 auto; }
svg.body .skin { fill: var(--body-fill); }
svg.body .m { fill: var(--body-fill); stroke: var(--body-line); stroke-width: 0.8; stroke-linejoin: round; }
svg.body .m.pri { fill: var(--m-pri); stroke: var(--m-pri-line); }
svg.body .m.sec { fill: var(--m-sec); stroke: var(--m-sec-line); }
svg.body .ln { fill: none; stroke: var(--body-detail); stroke-width: 0.7; }
svg.body .edge { fill: none; stroke: var(--body-edge); stroke-width: 1.1; stroke-linejoin: round; }
.menu { display: flex; flex-direction: column; background: var(--raise); border-radius: 16px; overflow: hidden; margin-top: 12px; }
.menu button { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--raise-2); padding: 15px 16px; font-size: 16px; }
.menu button:active { transform: none; background: var(--raise-2); }
.menu button:last-child { border-bottom: 0; color: var(--muted); }

#timer { position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px); z-index: 20; display: flex; align-items: center; gap: 8px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--text); border: 1px solid var(--glass-line); border-radius: 99px; padding: 6px 6px 6px 20px; box-shadow: var(--shadow); }
.timer-num { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 52px; }
#timer button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--raise); color: var(--text); font-size: 16px; }

/* ---- floating tab bar */
/* the tab bar and the Assistant's sparkle button sit together, centered as a group */
#dock { position: fixed; z-index: 10; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 12px);
  display: flex; justify-content: center; align-items: center; gap: 12px; pointer-events: none; }
#dock > * { pointer-events: auto; }
#tabs {
  display: flex; gap: 4px; padding: 6px; border-radius: 99px;
  background: var(--glass); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
#tabs button { width: 62px; height: 46px; border: 0; border-radius: 99px; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 20px; transition: background-color 0.2s, color 0.2s; }
/* small labels under the icons, like TikTok's */
#tabs button span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; }
#tabs button.on { background: var(--glass-on); color: var(--glass-on-text); }

/* ---- bottom sheet */
#backdrop { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 30; }
#sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-width: 640px; margin: 0 auto; max-height: 88vh; max-height: 88dvh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; padding: 10px 20px calc(env(safe-area-inset-bottom) + 20px); box-shadow: var(--shadow); }
.sheet-grip { width: 38px; height: 5px; border-radius: 99px; background: var(--raise-2); margin: 0 auto 16px; }

/* ---- sign-in */
.gate { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; position: relative; isolation: isolate; }
.gate::before { content: ''; position: fixed; inset: 0 0 auto; height: 60vh; background: var(--dawn); opacity: 0.3; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); z-index: -1; }
.gate img { border-radius: 22px; box-shadow: var(--shadow); }
.gate h1 { font-size: 34px; margin-top: 8px; }
.gate .btn { flex: 0 0 auto; min-width: 250px; margin-top: 14px; }

/* ---- check-off animations (see fx in goals.js). Skipped entirely for reduced motion. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero > div { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .fx-done .act.yes { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .fx-done .act.yes::after { content: ''; position: absolute; inset: 0; border-radius: 50%; animation: ripple 0.7s ease-out forwards; }
  .fx-done .act.yes svg path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw 0.3s 0.12s ease-out forwards; }
  .fx-done .item-name { animation: dim 0.6s ease; }
  .fx-missed .act.no { animation: nudge 0.4s ease; }
  .ring .fill.grow { animation: ring-grow 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); }
  .wd.grow { animation: wd-grow 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); }
  .hero.fx-party::before { content: ''; position: absolute; inset: 0; background: var(--dawn); animation: fade-out 0.9s ease forwards; }
  .hero.fx-party .hero-head { animation: rise 0.6s 0.15s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .hero.fx-party .ring { animation: pop 0.6s 0.1s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
  .confetti i { position: absolute; top: -20px; left: var(--x); width: var(--w); height: var(--h); border-radius: 2px; background: var(--c); opacity: 0;
    animation: fall var(--t) var(--d) cubic-bezier(0.25, 0.4, 0.5, 1) forwards; }
}
@keyframes pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ripple { from { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55); } to { box-shadow: 0 0 0 16px rgba(20, 184, 166, 0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dim { from { color: var(--text); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes ring-grow { from { stroke-dashoffset: var(--from); } }
@keyframes wd-grow { from { --p: var(--p0); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), 105vh) rotate(var(--r)); }
}

/* ---- Minoru: the mark, the header lockup and the Today wash (brand book, Sep 29 2026) */
.rest { stroke: var(--mk-rest); }
.chk { stroke: url(#mk-check); }
.brandbar { display: flex; align-items: center; margin: 4px 0 18px; }
.lockup { display: inline-flex; align-items: center; gap: 9px; }
.lockup .mk { width: 32px; height: 32px; overflow: visible; transform-origin: 50% 50%; }
.lockup .word { font-size: 23px; font-weight: 650; letter-spacing: -0.035em; line-height: 1; }
body.wash::before { content: ''; position: absolute; inset: 0 0 auto; height: 360px; background: var(--dawn); opacity: var(--wash); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.gate-tag { margin: -2px 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

/* ---- the opening (intro in app.js): three gray checks fly in and twist or flip into the M and the K's leg, the colored
   check comes in last and settles with a small bounce, the mark pulses once and flies to the header, Today rises */
.mk .pc, .mk .all { transform-box: fill-box; transform-origin: 50% 50%; }
#veil { position: fixed; inset: 0; z-index: 50; background: var(--bg); pointer-events: auto; }
body.go .brandbar { position: relative; z-index: 51; }
body.go .brandbar .mk { animation: mk-land 0.6s 1.6s cubic-bezier(0.65, 0, 0.2, 1) both; }
body.go .pc.a { animation: mk-in-a 0.8s 0.05s linear both; }
body.go .pc.b { animation: mk-in-b 0.8s 0.22s linear both; }
body.go .pc.d { animation: mk-in-d 0.8s 0.34s linear both; }
body.go .pc.c { animation: mk-in-c 0.62s 0.56s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
body.go .brandbar .all { animation: mk-lock 0.3s 1.22s ease-in-out both; }
body.go #veil { animation: mk-veil 0.4s 2s ease both; }
body.go .brandbar .word { animation: mk-slide 0.4s 2.1s ease-out both; }
body.go #view > :not(.brandbar), body.go #dock { animation: mk-rise 0.55s 2.05s ease-out both; }
@keyframes mk-in-a { 0% { transform: translate(-260px, 190px) rotate(-150deg); animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1); }
  62% { transform: translate(-22px, 16px) rotate(-150deg); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); } 100% { transform: none; } }
@keyframes mk-in-b { 0% { transform: translate(150px, -320px) rotate(-150deg) scaleX(-1); animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1); }
  62% { transform: translate(14px, -28px) rotate(-150deg) scaleX(-1); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); } 100% { transform: none; } }
@keyframes mk-in-d { 0% { transform: translate(120px, 300px) rotate(-8deg) scaleX(-1); animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1); }
  62% { transform: translate(12px, 30px) rotate(-8deg) scaleX(-1); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); } 100% { transform: none; } }
@keyframes mk-in-c { from { transform: translate(260px, 140px) rotate(18deg); } to { transform: none; } }
@keyframes mk-lock { 50% { transform: scale(1.07); } }
@keyframes mk-land { from { transform: var(--from); } to { transform: none; } }
@keyframes mk-veil { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes mk-slide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- For You: "Ask" hands a card to the Assistant */
.fy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fy-ask { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 0 2px 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.fy-ask svg.i { font-size: 12px; }
.opt > .opt-btns { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* ---- the Assistant: a sparkle button beside the tab bar, and a full-screen chat */
#fab { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--glass-line); color: #e86aa6; font-size: 21px;
  background: var(--glass); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#fab > span { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
#fab svg.i { stroke-width: 1.8; margin: 0; }
body.chat #view { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
.chat-top { position: sticky; top: 0; z-index: 5; margin: calc(-14px - env(safe-area-inset-top)) -16px 8px; padding: calc(env(safe-area-inset-top) + 14px) 16px 10px;
  background: var(--bg); border-bottom: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; }
.chat-top.stuck { background: var(--glass); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-bottom-color: var(--glass-line); }
.chat-top h1 { transform-origin: left center; transition: transform 0.2s ease; }
.chat-top.stuck h1 { transform: scale(0.72); }
.chat { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.msg { max-width: 100%; font-size: 16px; line-height: 1.45; }
.msg.fresh { animation: rise 0.25s ease both; }
.msg p { margin: 0 0 10px; }
.msg p:last-child, .msg ul:last-child, .msg ol:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 10px; padding-left: 22px; }
.msg li { margin: 3px 0; }
.msg b { font-weight: 600; }
.msg.me { align-self: flex-end; max-width: 82%; background: var(--raise); border-radius: 20px 20px 6px 20px; padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me.pending { opacity: 0.7; }
.msg.bot { align-self: stretch; padding: 2px 2px 0; overflow-wrap: anywhere; }
.msg.bot .fy { margin: 12px 0 0; }
.msg.note-line { color: var(--muted); font-size: 14px; text-align: center; margin: 0; }
.as-card.is-no { opacity: 0.6; }
.as-status { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.as-card.is-yes .as-status { color: var(--text); }
.as-status svg.i { color: var(--green); }
.as-model, .msg.bot .muted { font-size: 12px; color: var(--faint); margin-top: 8px; }
/* the pages a reply cites (web search): small rows under the text that open in the browser */
.as-sources { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.as-sources-label { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.as-sources-label svg.i { font-size: 13px; }
.as-source { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 12px; background: var(--raise); color: var(--text); text-decoration: none; min-width: 0; }
.as-source:active { opacity: 0.7; }
/* titles wrap to two lines at most: a title that can't wrap would push the chat wider than the phone */
.as-source-title { font-size: 14px; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.as-source-host { font-size: 12px; color: var(--muted); }
.thinking { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite ease-in-out both; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: none; } }
.as-intro { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 6px 28px; }
.as-intro > p { max-width: 330px; }
.as-mark { color: #e86aa6; font-size: 44px; margin-bottom: 14px; }
.as-mark svg.i { stroke-width: 1.4; }
.as-hello { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 8px; }
/* the welcome's pills (assistant.js pillsFor): three rows drifting sideways, row 2 the other way, faded at the edges;
   a touch holds them still. Each row holds its pills twice, so moving by half loops without a seam. */
.as-pills { align-self: stretch; min-width: 0; margin: 28px -22px 0; display: flex; flex-direction: column; gap: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
/* contain: a row's width comes from the screen, never from its long track (which would widen the whole page) */
.as-row { overflow: hidden; contain: inline-size; min-width: 0; animation: as-rise 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.as-row.r2 { animation-delay: 0.12s; }
.as-row.r3 { animation-delay: 0.24s; }
.as-track { display: flex; width: max-content; animation: as-drift 70s linear infinite; }
.as-row.r2 .as-track { animation-duration: 84s; animation-direction: reverse; }
.as-row.r3 .as-track { animation-duration: 77s; }
.as-pills:active .as-track { animation-play-state: paused; }
.as-set { display: flex; gap: 8px; padding-right: 8px; }
.as-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; white-space: nowrap; }
.as-pill:active { transform: scale(0.97); }
.as-pill svg.i { flex: 0 0 auto; margin: 0; font-size: 15px; color: #e86aa6; }
@keyframes as-drift { to { transform: translateX(-50%); } }
@keyframes as-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .as-pills { margin: 24px 0 0; -webkit-mask-image: none; mask-image: none; }
  .as-row, .as-track { animation: none; }
  .as-row { overflow: visible; }
  .as-track { width: auto; }
  .as-set { flex-wrap: wrap; justify-content: center; padding: 0; }
  .as-set.dup, .as-set .as-pill:nth-child(n+3) { display: none; } /* still: the first two of each row */
}
.dawn-text { background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Kai's name with the Minoru mark's K (ui.js kaiName): drawn to the text's cap height, on its baseline */
.kai-name { white-space: nowrap; }
.kai-k { display: inline-block; height: 0.78em; width: auto; aspect-ratio: 48.5 / 57; vertical-align: -0.02em; margin-right: 0.03em; overflow: visible; }
.kai-k g { stroke-width: var(--kai-w, 8.5); }
h2 .kai-k, .fy-ask .kai-k { --kai-w: 12; height: 0.82em; }
h2 .kai-k path[stroke="currentColor"] { stroke: var(--text); } /* the muted label color is too faint for a hairline K */
#fab .kai-k { --kai-w: 11; height: 0.8em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.as-error { margin: 0; }
.composer { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; margin: 0 -16px; padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--bg); border-top: 1px solid var(--line); }
.composer textarea { margin: 0; flex: 1; resize: none; min-height: 44px; max-height: 160px; border-radius: 22px; padding: 11px 16px; line-height: 1.35; }
.composer .send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--primary); color: var(--on-primary);
  font-size: 20px; display: flex; align-items: center; justify-content: center; }
.composer .send:disabled { opacity: 0.35; }

/* ---- setup with Kai (setup.js): tap parts of life, then goals, then check the numbers */
.su { display: flex; flex-direction: column; gap: 12px; }
.su-mark { color: #e86aa6; font-size: 30px; margin: 4px 0 10px; }
.su-mark svg.i { stroke-width: 1.5; }
.msg .su-hello { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.su-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.su-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px; border-radius: 99px; border: 0; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--raise-2); font-size: 15px; font-weight: 500; line-height: 1.25; text-align: left; color: var(--text); }
.su-pill.on { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.su-pill svg.i { margin: 0; font-size: 15px; }
.msg .su-area { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.msg .su-plan .su-area { margin-top: 14px; }
.msg .su-plan .fy-label + .su-area { margin-top: 10px; }
.su-row { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.su-row strong { font-weight: 500; display: block; }
.msg.bot .su-row .muted { margin-top: 2px; font-size: 14px; color: var(--muted); }
.su-plan .su-area + .su-row { padding-top: 6px; }
.su-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.su-amount-name { color: var(--text); font-weight: 500; font-size: 15px; }
.su-num { width: 84px; margin: 0; padding: 8px 12px; text-align: center; font-variant-numeric: tabular-nums; }
.msg.bot .su-hint { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ---- Delete account (Settings): bold red, and a solid red button in the sheet to confirm */
.danger-zone { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.danger-zone .muted { margin: 8px 0 0; text-align: center; }
.btn.destroy { width: 100%; background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); font-weight: 700; }
.btn.destroy.solid { width: auto; background: #d63447; color: #fff; }
.btn.destroy:disabled { opacity: 0.6; }
.sheet-link { display: inline; padding: 0; font-size: inherit; }

/* the setup bar, pinned above the typing box while setup is open: the one next step, always in view */
.composer.has-bar { flex-wrap: wrap; }
/* keyboard up (assistant.js dock): the box is fixed and moved up onto the keyboard, with no home-bar gap under it */
body.chat.kb .composer { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 20; padding-bottom: 8px; }
.su-bar { flex: 0 0 100%; display: flex; flex-direction: column; gap: 8px; padding-bottom: 2px; }
.su-btns { display: flex; gap: 10px; }
.su-btns .btn { min-height: 48px; }
.su-btns .btn:disabled { opacity: 0.35; }
.su-btns .btn.ghost { flex: 0 0 auto; padding: 10px 20px; }
.su-over { margin: 0; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* Kai's header: a slow Dawn wash behind the title that drifts side to side and fades into the page */
.chat-top { isolation: isolate; }
.chat-top::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, #6d5df6 0%, #e86aa6 30%, #ffb07a 50%, #e86aa6 70%, #6d5df6 100%); background-size: 300% 100%;
  opacity: var(--kai-wash, 0.32); -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent);
  animation: kai-drift 14s ease-in-out infinite alternate; }
@keyframes kai-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kai-wash: 0.34; } }
:root[data-theme="dark"] { --kai-wash: 0.34; }
@media (prefers-reduced-motion: reduce) { .chat-top::before { animation: none; } }
.chat-top .icon-btn { background: var(--glass-on); }

/* past chats (the clock in Kai's header) */
.chat-list { margin-top: 6px; }
.chat-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 2px; border: 0;
  border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--text); }
.chat-row:last-child { border-bottom: 0; }
.chat-row-title { font-size: 15px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-row.is-open .chat-row-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e86aa6; margin: 0 7px 2px 0; }

/* Testers (owner only): one card per tester, a row per goal with its last 14 days as dots */
.t-head { display: block; }
.t-head strong { font-size: 17px; font-weight: 600; }
.t-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.t-tile { background: var(--raise); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.t-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-tile .muted { font-size: 11px; }
.t-cat { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.t-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.t-name { min-width: 0; font-size: 15px; }
.t-name strong { font-weight: 500; }
.t-name .muted { font-size: 13px; }
.t-strip { flex: 0 0 auto; display: grid; grid-template-columns: repeat(7, 9px); gap: 4px; }
.t-d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.t-d.done { background: var(--c); }
.t-d.missed { background: var(--bad); opacity: 0.85; }
.t-d.open { box-shadow: inset 0 0 0 1.5px var(--raise-2); }
.t-d.today { box-shadow: inset 0 0 0 1.5px var(--faint); }
.t-d.off { background: var(--raise); opacity: 0.5; transform: scale(0.55); }
.t-d.future { visibility: hidden; }
.t-key { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; margin: 12px 0 0; }
.t-key .t-d { margin-left: 4px; }
.t-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.t-reasons .tag { font-size: 11px; }
.t-foot { margin: 14px 0 0; font-size: 12px; }
.t-line { font-size: 14px; margin: 6px 0 0; }
.t-time { margin: 12px 0 0; background: var(--raise); border-radius: 14px; padding: 10px 12px; }
.t-time summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.t-ev { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.t-ev:last-child { border-bottom: 0; }
.t-chat { gap: 14px; }
.t-chat .msg.me { position: relative; }
.t-at { display: block; margin-top: 4px; font-size: 11px; color: var(--faint); }
.t-chat .msg.me .t-at { text-align: right; }
.t-chat-title { font-size: 20px; line-height: 1.25; }
.card.chat-list { padding: 4px 16px; }
/* setup: the questions under a picked Work out */
.su-fit { margin: 12px 0 0; padding: 12px 14px 14px; border-radius: 16px; background: var(--raise); }
.msg .su-q { margin: 8px 0 0; font-size: 14px; font-weight: 600; }
.su-fit .su-pills { margin-top: 8px; }
.su-pill.small { min-height: 36px; padding: 6px 13px; font-size: 14px; background: var(--card); }
.su-pill.small.on { background: var(--primary); }
.su-date { width: auto; margin: 0; padding: 8px 12px; }
.msg.bot .su-q-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
/* timers on Today, for goals counted in hours or minutes */
.act.tmr { color: var(--text); }
.act.tmr.on { background: var(--primary); color: var(--on-primary); }
.act.tmr svg.i { font-size: 15px; }
.tmr-line b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- the day plan (plan.js): the card on Today and the plan screen */
.fy-label svg.i[class] { stroke: #e86aa6; }
.plan-card .pl-now, .plan-card .pl-next { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; font-size: 15px; }
.plan-card .pl-now strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.plan-card .pl-now .muted, .plan-card .pl-next .muted { margin-left: auto; white-space: nowrap; font-size: 13px; }
.pl-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); min-width: 34px; }
.pl-now .pl-tag { color: #e86aa6; }
.pl-now.free strong { color: var(--muted); font-weight: 500; }
.pl-cal { display: flex; align-items: center; gap: 6px; color: var(--muted) !important; font-size: 13px !important; }
.pl-cal svg.i { flex: 0 0 auto; }
.pl-list { padding: 4px 0; }
.pl-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 2px 10px; width: 100%; padding: 13px 16px; border: 0;
  border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--text); font-size: 15px; }
.pl-row:last-child { border-bottom: 0; }
.pl-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.pl-title .pl-tag { margin-left: auto; min-width: 0; }
.pl-row.event { color: var(--muted); background: var(--raise); }
.pl-row.event .pl-title { font-weight: 400; }
.pl-row.event svg.i { flex: 0 0 auto; font-size: 14px; }
.pl-row.now { background: color-mix(in srgb, #e86aa6 10%, transparent); }
.pl-row.now .pl-tag { color: #e86aa6; }
.pl-row.past { opacity: 0.55; }
.pl-clash { grid-column: 2; font-size: 12px; color: var(--warn); }
.pl-allday { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pl-allday .tag { display: inline-flex; align-items: center; gap: 4px; }
.pl-empty { padding: 14px 16px; margin: 0; }
.pl-clear { display: block; margin: 12px auto 0; color: var(--bad); }
.pl-foot { margin-top: 14px; }
.row.two > label { flex: 1; margin-top: 0; }
.row.two { margin-top: 14px; }
.btn svg.i { font-size: 16px; }
.cal-help { margin-top: 12px; }
.cal-help summary { font-size: 14px; color: var(--accent); cursor: pointer; }
.cal-help p { margin: 8px 0 0; }

/* calendar setup (calsetup.js): numbered steps */
.card > h2 .step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 11px; letter-spacing: 0; margin-right: 8px; }
.steps { list-style: none; counter-reset: step; margin: 12px 0 4px; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 12px 34px; font-size: 15px; line-height: 1.4; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--raise); color: var(--text);
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps li b { font-weight: 650; }
.steps li .muted { font-size: 13px; margin-top: 3px; }
.cal-help .steps { margin-top: 10px; }
.step-q { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.note-box { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 4px 0 0; }
.cal-hint { font-size: 13px; margin: 8px 0 0; color: var(--green); }
.cal-hint.bad { color: var(--bad); }
.cal-ok { display: flex; align-items: flex-start; gap: 8px; background: color-mix(in srgb, var(--green) 14%, transparent); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; font-size: 14px; }
.cal-ok svg.i { flex: 0 0 auto; color: var(--green); margin-top: 2px; }
.cal-err { margin: 0 0 12px; }

/* ---- Updates (updates.js): what's new right after the app opens, and every update in Settings */
.up-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; margin: 0 0 14px; }
.up-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.up-badge { width: 48px; height: 48px; border-radius: 15px; background: var(--dawn); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto; }
.up-badge svg.i { stroke-width: 1.9; }
.up-badge.small { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.up-count { font-size: 13px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.up-text { font-size: 16px; line-height: 1.45; margin: 6px 0 4px; }
.up-foot { margin: 6px 0 0; }
.up-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.up-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--raise-2); transition: width 0.2s ease; }
.up-dots i.on { width: 18px; background: var(--primary); }
.card.up-list { padding: 4px 16px; }
.up-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 11px 0; }
.up-row:first-child { border-top: 0; }
.up-row > svg.i { margin: 0; color: var(--faint); }
.up-main { flex: 1; min-width: 0; }
.up-main strong { font-weight: 600; font-size: 15px; }
.up-new { color: var(--accent); font-weight: 600; }
.up-intro { margin: -6px 4px 12px; }
.up-ver { margin: 12px 4px 0; font-size: 13px; }
.card .up-ver { margin: 12px 0 0; }
.up-badge .up-mark { width: 1.25em; height: 1.25em; overflow: visible; }
.up-badge .up-mark path { stroke: #fff; }
.gate.moved .steps { text-align: left; max-width: 340px; margin: 8px auto 0; }

/* ---- Kai: photos and files with a message (assistant.js onPhoto), shown small above the typing box and in the chat */
.composer { flex-wrap: wrap; }
.composer textarea { flex: 1 1 0; min-width: 0; }
.as-photo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--raise); color: var(--text); font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center; }
.as-photo:disabled { opacity: 0.35; }
/* several photos and files wait in a row above the typing box, each with an x (scrolls sideways when they don't fit) */
.as-attach { flex: 1 0 100%; display: flex; gap: 12px; overflow-x: auto; padding: 6px 12px 2px 0; scrollbar-width: none; }
.as-attach::-webkit-scrollbar { display: none; }
.as-att { position: relative; flex: 0 0 auto; }
.as-att img { display: block; height: 76px; max-width: 150px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.as-att-name { display: flex; align-items: center; gap: 8px; height: 76px; max-width: 190px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--raise); font-size: 14px; font-weight: 500; color: var(--text); }
.as-att-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-att-name svg.i { flex: 0 0 auto; font-size: 18px; margin: 0; }
.as-attach-x { position: absolute; right: -8px; top: -6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--primary); color: var(--on-primary);
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.msg.me.with-photo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg-photos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.msg-photo { display: block; max-width: 220px; max-height: 260px; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--line); }
.msg-photo.small { width: 104px; height: 104px; }
.msg-photo-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: 0.8; max-width: 100%; overflow-wrap: anywhere; }
.msg-photo-tag svg.i { margin: 0; }

/* ---- shared workout programs (library.js): in Settings, Workout, and on setup's last step */
.lib-row .lib-sum { margin-top: 3px; }
.lib-row .btn.small, .lib-row .tag { flex: 0 0 auto; }
.su-lib { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 2px 14px; margin: 8px 0 10px; }
.su-lib .opt:last-child { border-bottom: 0; }

/* ---- help bubbles (ui.js toggleTip): a small (i) after a setting's title, and the bubble it opens */
.tip { display: inline-flex; vertical-align: -3px; margin-left: 4px; padding: 2px; border: 0; background: none; color: var(--faint); font-size: 16px; }
.tip svg.i { margin: 0; }
.tip:active { color: var(--text); }
#tip { position: fixed; z-index: 40; max-width: min(300px, calc(100vw - 32px)); padding: 10px 13px; border-radius: 14px;
  background: var(--primary); color: var(--on-primary); font-size: 14px; line-height: 1.4; box-shadow: var(--shadow); animation: tip-in 0.14s ease-out; }
#tip::before { content: ''; position: absolute; left: calc(var(--ax) - 7px); width: 14px; height: 14px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
#tip.below::before { top: -5px; }
#tip.above::before { bottom: -5px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #tip { animation: none; } }

/* ---- the daily check-in on Today (checkin.js): three rows of quick taps, then one line once answered */
.ci-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ci-head h2 { margin: 0; }
.ci-head .muted { font-size: 12px; text-align: right; }
.ci-q { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ci-ask { flex: 0 0 58px; font-size: 14px; font-weight: 500; }
.ci-seg { flex: 1; margin: 0; padding: 3px; }
.ci-seg button { padding: 7px 4px; }
.ci-seg button.on { background: var(--dawn); color: #fff; }
.ci-done { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 4px 12px; font-size: 13px; color: var(--muted); }
.ci-done .link { padding: 0; font-size: 13px; flex: 0 0 auto; }

/* ---- voice typing in Kai's box (voice.js): the send button is a mic while the box is empty, red while listening */
.composer .send.mic { background: var(--raise); color: var(--text); }
.composer .send.rec { background: #e5484d; color: #fff; animation: mic-pulse 1.4s ease-in-out infinite; }
.as-voice { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 2px 4px 0; }
.as-voice b { margin-left: auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.as-voice-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: mic-dot 1s ease-in-out infinite; }
.as-voice-dot.still { background: var(--faint); animation: none; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } }
@keyframes mic-dot { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .composer .send.rec, .as-voice-dot { animation: none; } }

/* ---- Send feedback (feedback.js): a small tab on the right edge during the beta, out of the way of taps and typing */
#fb { position: fixed; z-index: 9; right: 0; top: 56%; width: 30px; height: 96px; padding: 0 0 0 4px; border: 1px solid var(--glass-line); border-right: 0;
  border-radius: 14px 0 0 14px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow);
  color: var(--muted); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; font-size: 17px;
  touch-action: none; /* dragging it up and down (#152) scrolls the tab, not the page */ }
#fb .fb-word { writing-mode: vertical-rl; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
#fb[hidden], body.go #fb, body:has(textarea:focus, input:focus) #fb { display: none; }
#fb.busy { opacity: 0.5; }
#fb svg.i { margin: 0; }
body.chat #fb:not([style*="top"]) { top: 34%; }
.fb-shot { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.as-locked { margin: 0 auto; padding: 10px 6px; text-align: center; }
.fb-shot img { width: 72px; border-radius: 10px; border: 1px solid var(--line); flex: 0 0 auto; }
.fb-shot span { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.fb-shot input { width: auto; margin: 0; display: inline-block; -webkit-appearance: checkbox; appearance: auto; padding: 0; }
.t-problem { padding: 12px 0; border-top: 1px solid var(--line); }
.t-problem:first-of-type { border-top: 0; }
.t-problem p { margin: 0 0 4px; }
.t-shot { width: 100%; border-radius: 14px; border: 1px solid var(--line); margin-top: 8px; }

/* ---- what Kai knows (memory.js): the page's rows, and the small line under a reply when Kai saves something */
.mem-row { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line);
  padding: 12px 0; color: var(--text); font-size: 15px; }
.card h2 + .mem-row { border-top: 0; padding-top: 4px; }
.mem-row .muted { font-size: 12px; }
.as-mems { margin-top: 10px; }
.as-mem { display: flex; align-items: flex-start; gap: 7px; margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.as-mem svg.i { font-size: 14px; flex: 0 0 auto; margin: 1px 0 0; color: #2f9e62; }
.as-mem.off svg.i { color: var(--faint); }
.as-mem span { flex: 1 1 auto; min-width: 0; }
.as-mems .link { padding: 4px 0 0 21px; font-size: 13px; }

/* ---- win cards (wincard.js): the preview in the Share sheet */
.wc-img { display: block; width: min(62%, 260px); margin: 14px auto 6px; border-radius: 16px; box-shadow: var(--shadow); }
.wc-pick { flex-wrap: nowrap; overflow-x: auto; margin: 4px -20px 0; padding: 0 20px 4px; }
.wc-pick .chip { flex: 0 0 auto; text-transform: none; letter-spacing: 0; font-size: 13px; }

.row .btn svg.i { margin: 0; }

/* ---- bank accounts (bank.js): on Progress, and an account's transactions in a sheet */
.bank-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; border: 0;
  border-top: 1px solid var(--line); color: var(--text); text-align: left; font-size: 15px; }
.card h2 + .bank-row, .card h2 + .muted + .bank-row { border-top: 0; }
.bank-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bank-amt .muted { font-weight: 400; font-size: 12px; }
.bank-tx { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; font-variant-numeric: tabular-nums; }
.bank-tx .muted { font-size: 12px; }
.bank-in { color: #2f9e62; }

/* ---- Kai's ideas (ideas.js): one For You card on Today, an idea per block */
.fy.ideas .idea + .idea { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.fy.ideas .fy-actions { margin-top: 10px; }

/* ---- Kai while it works (assistant.js): a playful word, then the reply as it's written, with a soft caret */
.thinking .as-word, .as-doing .as-word { display: inline-block; }
.as-word.swap { animation: word-in 0.35s ease both; }
@keyframes word-in { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
.as-caret { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; border-radius: 2px; background: var(--dawn); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0.2; } }
.as-doing { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin-top: 12px !important; }

/* ---- the sign-in screen (app.js gate) */
.gate .btn.ghost { margin-top: 2px; }
.gate > .muted { max-width: 330px; }
.gate-invite { font-weight: 600; font-size: 15px; margin: 2px 0 0; padding: 6px 14px; border-radius: 99px; background: var(--raise); }
.gate-join { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; width: 100%; max-width: 330px; }
.gate-join label { font-weight: 600; font-size: 15px; }
.gate-join input { width: 100%; text-align: center; }
.gate-join .btn { margin-top: 4px; }

/* ---- the sample (sample.js): a bar on top of every screen */
.sample-bar { position: sticky; top: calc(env(safe-area-inset-top) + 6px); z-index: 30; display: flex; align-items: center; gap: 10px; margin: -4px 0 14px;
  padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 13px; line-height: 1.3; }
.sample-bar span { flex: 1; min-width: 0; }
body.chat .sample-bar { position: relative; top: 0; }

/* ---- the status line (firstrun.js banner): offline, or the cloud can't be reached */
.st-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--raise); font-size: 13px; line-height: 1.35; }
.st-line svg.i { flex: 0 0 auto; font-size: 16px; color: var(--muted); }
.st-line span { flex: 1; min-width: 0; }
.st-line.err svg.i { color: var(--warn); }
.st-line .link { padding: 0; flex: 0 0 auto; }

/* ---- Start here (firstrun.js): five first steps on Today */
.fr-head { display: flex; align-items: baseline; justify-content: space-between; }
.fr-head h2 { margin: 0; }
.fr-bar { height: 4px; border-radius: 99px; background: var(--raise); margin: 10px 0 4px; overflow: hidden; }
.fr-bar i { display: block; height: 100%; background: var(--dawn); border-radius: 99px; transition: width 0.4s ease; }
.fr-step { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; border: 0; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; text-align: left; }
.fr-bar + .fr-step { border-top: 0; }
.fr-step > span:nth-child(2) { flex: 1; }
.fr-step svg.i { color: var(--faint); margin: 0; }
.fr-check { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--raise-2); display: inline-flex; align-items: center; justify-content: center; }
.fr-step.done { color: var(--muted); }
.fr-step.done .fr-check { background: var(--dawn); box-shadow: none; color: #fff; font-size: 13px; }
.fr-step.done .fr-check svg.i { color: #fff; stroke-width: 3; }
.fr-foot { text-align: right; }
.fr-list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.fr-list li { margin: 6px 0; }
.fr-list b { font-weight: 600; }
.nudge { animation: nudge 0.4s ease 2, pulse-ring 1.6s ease; border-radius: 12px; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(232, 106, 166, 0.5); } 100% { box-shadow: 0 0 0 14px rgba(232, 106, 166, 0); } }

/* ---- the 30-day reset (reset.js) */
.rs { position: relative; overflow: hidden; }
.rs::before { content: ''; position: absolute; inset: 0 0 auto; height: 90px; background: var(--dawn); opacity: 0.1; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); pointer-events: none; }
.rs > * { position: relative; }
.rs-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rs-kicker svg.i { stroke: #e86aa6; font-size: 13px; }
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rs-head .pill { background: var(--raise); color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.rs-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 2px; }
.rs-title .muted { font-size: 16px; font-weight: 500; }
.rs-big { font-size: 17px; margin: 4px 0 8px; }
.rs-big .dawn-text { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.rs-dots { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; margin: 12px 0 10px; }
.rs-dot { aspect-ratio: 1; border-radius: 50%; background: var(--raise); }
.rs-dot.done { background: var(--dawn); }
.rs-dot.part { background: var(--raise-2); box-shadow: inset 0 0 0 2px #e86aa6; }
.rs-dot.missed { background: var(--raise); box-shadow: inset 0 0 0 1.5px var(--raise-2); }
.rs-dot.today { background: var(--card); box-shadow: inset 0 0 0 2px var(--text); }
.rs-dot.future { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.rs-focus { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.rs-focus-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.rs-sub { margin: 8px 0 0; font-size: 13px; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rs-actions .btn { flex: 0 0 auto; }
.rs-actions .btn svg.i { margin: 0; font-size: 15px; }
.rs-offer .rs-title { font-size: 21px; }
.rs-habits { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.rs-habit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--raise); color: var(--text); text-align: left; font-size: 15px; }
.rs-habit strong { font-weight: 600; }
.rs-habit .muted { font-size: 13px; }
.rs-check { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--raise-2); display: inline-flex; align-items: center; justify-content: center; }
.rs-habit.on { background: var(--card); box-shadow: inset 0 0 0 1.5px #e86aa6; }
.rs-habit.on .rs-check { background: var(--dawn); box-shadow: none; }
.rs-habit.on .rs-check svg.i { color: #fff; stroke-width: 3; font-size: 14px; }

/* ---- progress photos (photos.js) */
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.ph-thumb { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--raise); }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-thumb span { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.45); }
.ph-row { flex-wrap: wrap; }
.ph-row .btn svg.i, .rs-actions .btn svg.i { margin: 0; }
.ph-note { font-size: 12px; margin-top: 10px; }
.ph-big { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 16px; background: var(--raise); margin: 10px 0 4px; }
.ph-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.ph-pair figure { margin: 0; text-align: center; font-weight: 600; font-size: 14px; }
.ph-half { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--raise); display: block; margin-bottom: 6px; }

/* ---- invites (testers.js): the QR code and the open invites */
.inv-qr { width: min(78%, 300px); margin: 12px auto 6px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.inv-qr svg { display: block; width: 100%; height: auto; }
.inv-qr path, .inv-qr rect { shape-rendering: crispEdges; }
.inv-link { text-align: center; font-size: 15px; font-weight: 600; margin: 8px 0 2px; overflow-wrap: anywhere; }
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.inv-row > div:first-child { min-width: 0; }
.inv-btns { display: flex; gap: 6px; flex: 0 0 auto; }

/* ---- coaching (#154, coaching.js): a coach and a client, and the chat between them */
.cc-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--raise); color: var(--text); font-weight: 600; font-size: 15px; }
.cc-av.kai { color: #e86aa6; font-size: 17px; }
.cc-av.big { width: 64px; height: 64px; font-size: 26px; color: #fff; background: var(--dawn); }
.cc-card { cursor: pointer; }
.cc-head { display: flex; align-items: center; gap: 12px; }
.cc-who-t { flex: 1; min-width: 0; }
.cc-who-t .tag { margin-left: 6px; vertical-align: 2px; }
.cc-badge { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--dawn); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cc-badge.soft { background: var(--raise); color: var(--text); font-weight: 600; }
.cc-last { margin: 12px 0 0; font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cc-last.new { font-weight: 600; }
.cc-card > .muted { margin: 12px 0 0; }
.cc-row { margin-top: 12px; }
.kai-tag { font-weight: 600; }
/* the chat: the other person's bubbles on the left, mine on the right; reactions under a bubble */
.cc-top .cc-who { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cc-top .cc-who h1 { font-size: 20px; line-height: 1.15; }
.cc-top .cc-who .muted { font-size: 12px; }
.cc-top::before { opacity: 0.18; }
.cc-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 4px auto 6px; max-width: 320px; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: left; }
.cc-privacy svg.i { flex: 0 0 auto; margin-top: 1px; font-size: 14px; }
.cc-when { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--faint); }
.cc-m { display: flex; flex-direction: column; gap: 3px; }
.cc-m.me { align-items: flex-end; }
.cc-m.them { align-items: flex-start; }
.cc-m.pending { opacity: 0.6; }
.cc-m .msg.me { max-width: 82%; }
.msg.them { max-width: 82%; background: var(--card); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.unsent { font-style: italic; color: var(--muted); background: none; border: 1px dashed var(--line); }
.msg.with-photo { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
.msg.with-photo > span { padding: 2px 10px 6px; }
.cc-photo { max-width: 240px; max-height: 300px; width: auto; height: auto; border-radius: 16px; object-fit: cover; }
.cc-reacts { display: flex; gap: 4px; margin: -8px 10px 0; position: relative; }
.cc-react { font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; }
.cc-react.mine { border-color: #e86aa6; }
.cc-empty { text-align: center; margin: 24px 0; }
.cc-composer { flex-wrap: wrap; }
.cc-kai { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-kai-line { flex: 1 1 200px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.cc-draft { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.cc-draft svg.i { color: #e86aa6; }
.cc-err { flex: 0 0 100%; margin: 0; }
.cc-big { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 14px; margin: 4px 0 12px; }
.cc-quote { margin: 4px 0 12px; padding: 12px 14px; background: var(--raise); border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-emoji { display: flex; justify-content: space-between; gap: 6px; margin: 4px 0 12px; }
.cc-emoji button { flex: 1; height: 48px; border: 0; border-radius: 14px; background: var(--raise); font-size: 24px; }
.cc-emoji button.on { background: var(--raise-2); box-shadow: inset 0 0 0 2px #e86aa6; }
.cc-menu { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
/* "Mindy wants to coach you" */
.cc-offer { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 8px; }
.cc-offer h3 { margin: 10px 0 2px; }
.cc-asked { margin-left: 4px; vertical-align: 2px; }
.cc-never { margin-top: 8px; }
/* the coach's side */
.cc-week { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-week .mus-label { margin: 0 0 2px; }
.cc-big-n { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.cc-pct { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-pct small { font-size: 18px; }
.cc-brief-h { display: flex; align-items: center; gap: 2px; }
.cc-brief { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cc-brief:first-of-type { border-top: 0; }
.cc-brief p { flex: 1; margin: 0; font-size: 15px; line-height: 1.4; }
.cc-foot { margin: 6px 0 0; font-size: 13px; }
.cc-client { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; }
.card h2 + .cc-client { border-top: 0; }
.cc-client-t { flex: 1; min-width: 0; }
.cc-client-t .muted { font-size: 13px; margin-top: 2px; }
.tag.cc-st.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.tag.cc-st.good { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.cc-read p { margin: 12px 0; font-size: 16px; line-height: 1.4; }
.cc-read .cc-head { gap: 10px; }
.cc-set .opt-btns .btn { white-space: nowrap; }
.cc-brief-h svg.i, .cc-kai-line svg.i { color: #e86aa6; margin-right: 6px; vertical-align: -2px; }
/* a coach's suggested change: a card in the chat with Accept and Not now */
.cc-sug { max-width: 88%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px; position: relative; overflow: hidden; }
.cc-sug::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dawn); }
.cc-sug.accepted::before { background: var(--aurora); }
.cc-sug.declined { opacity: 0.7; }
.cc-sug.declined::before { background: var(--raise-2); }
.cc-sug-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.cc-sug-h svg.i { color: #e86aa6; }
.cc-sug-t { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.cc-sug-l { margin: 2px 0 0; font-size: 15px; }
.cc-sug-l s { color: var(--faint); margin-left: 4px; }
.cc-sug-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); white-space: pre-wrap; }
.cc-sug-st { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.cc-sug-st.ok { color: var(--text); }
.cc-sug-st.ok svg.i { color: var(--green); }
.cc-sug-btns { margin-top: 12px; }
.cc-sug-pick { margin: 4px 0 8px; }
.cc-sug-pick .chip, .cc-kai .cc-draft { text-transform: none; letter-spacing: 0; font-size: 13px; }
.cc-sug-pick .chip { display: inline-flex; align-items: center; gap: 4px; }
.cc-kai-line { flex: 0 0 100%; }
.cc-kai-line svg.i { display: inline-block; }
.cc-kai .cc-draft { display: inline-flex; }

/* ---- stay close to people (people.js): a card on Today, the People screen */
.pp-h svg.i { color: #e86aa6; margin-right: 6px; }
.pp-h .count .link { font-size: 13px; padding: 0; }
.pp-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.card h2 + .pp-row { border-top: 0; padding-top: 4px; }
.pp-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--raise); color: var(--text); font-weight: 600; font-size: 15px; }
.pp-av.bday { color: #e86aa6; font-size: 18px; }
.pp-av.big { width: 64px; height: 64px; font-size: 28px; color: #fff; background: var(--dawn); }
.pp-t { flex: 1; min-width: 0; }
.pp-t .muted { font-size: 13px; margin-top: 2px; line-height: 1.35; }
.pp-btns { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pp-c { width: 36px; height: 36px; font-size: 16px; text-decoration: none; }
.pp-more, .pp-foot { margin: 10px 0 0; font-size: 13px; }
.pp-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; }
.card h2 + .pp-person { border-top: 0; }
.tag.pp-st.late { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.pp-empty { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pp-empty-t { margin: 14px 0 4px; font-size: 20px; font-weight: 600; }
.pp-quick { justify-content: center; margin: 14px 0 6px; }
.pp-quick .chip, .pp-how .chip { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.pp-empty .row { width: 100%; }
.pp-log { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-how { margin: 4px 0 14px; }
.pp-row { flex-wrap: wrap; row-gap: 10px; }
.pp-row .pp-btns { flex: 1 0 100%; padding-left: 50px; }
.pp-row .pp-btns .btn.small { margin-left: auto; }

/* ---- female body figure (#134): the hair outline behind the head, drawn like the body's own outline */
svg.body .hair { fill: var(--body-fill); stroke: var(--body-edge); stroke-width: 1.1; stroke-linejoin: round; }
.seg.mini.body-pick button { padding: 7px 11px; }

/* ---- Privacy policy and terms (#140): the small links on the sign-in screen, in Settings (Account and data) and on
   the "wants to coach you" sheet. The pages themselves are privacy.html and terms.html with legal.css. */
.legal-links { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.legal-links a { color: inherit; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 2px; }
.gate .legal-links { max-width: 300px; margin-top: 18px; }
#sheet .legal-links { text-align: left; margin: 0 0 12px; }
/* the age question (js/age.js, #140) */
.age-btns { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 4px; }
.age-btns .link { align-self: center; padding-top: 4px; }
.age-line { margin-top: 2px; }

/* ==== ADOPT: adopt a creator's goal, and the group view (js/adopt.js). Neutral base, Dawn only on highlights. ==== */
.ad-av { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: var(--dawn); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; justify-content: center; }
.rs-kicker .ad-av { margin-right: 2px; }
.ad-tag { display: flex; align-items: center; gap: 6px; }
.ad-tag .ad-av { width: 15px; height: 15px; font-size: 8.5px; }
.ad-group { margin: 14px 0 4px; }
.ad-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.ad-stat { background: var(--raise); border-radius: 14px; padding: 10px 11px 9px; min-width: 0; }
.ad-stat b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ad-stat:first-child b { background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ad-stat span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 3px; }
.ad-track { position: relative; margin: 14px 20px 0 0; }
.ad-lane { display: flex; align-items: flex-end; min-height: 12px; }
.ad-wk { flex: 1; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 3px; padding: 0 2px; }
.ad-wk i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.ad-line { position: relative; height: 4px; margin-top: 6px; border-radius: 4px; background: var(--raise-2); }
.ad-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--dawn); }
.ad-you { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3.5px #e86aa6; }
.ad-you em { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 600; color: var(--text); }
.ad-flag { position: absolute; right: -21px; top: -14px; color: var(--muted); }
.ad-flag svg.i { font-size: 17px; }
.ad-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 7px; }
.ad-few { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 2px; padding: 10px 12px; border-radius: 14px; background: var(--raise); font-size: 13px; color: var(--muted); line-height: 1.4; }
.ad-few svg.i, .ad-count svg.i { color: #e86aa6; flex: 0 0 auto; font-size: 15px; margin-top: 1px; }
.ad-hero { margin: -4px -4px 4px; padding: 18px 18px 16px; border-radius: 20px; background: var(--dawn); color: #fff; }
.ad-hero h3 { color: #fff; font-size: 24px; letter-spacing: -0.02em; margin: 8px 0 4px; }
.ad-hero p { margin: 0; font-size: 14px; opacity: 0.92; }
.ad-hero .ad-why { margin-top: 10px; font-size: 15px; opacity: 1; }
.ad-hero-kicker { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ad-hero .ad-av { background: rgba(255,255,255,0.25); }
.ad-why { font-size: 15px; line-height: 1.45; }
.ad-list { display: flex; flex-direction: column; }
.ad-li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ad-li:last-child { border-bottom: 0; }
.ad-li > svg.i { color: #e86aa6; font-size: 17px; margin-top: 2px; flex: 0 0 auto; }
.ad-li strong { font-weight: 600; }
.ad-weeks { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-weeks .pill { background: var(--raise); color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 500; }
.ad-count { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font-size: 14px; font-weight: 500; }
.ad-private { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; margin: 14px 0 4px; }
.ad-private svg.i { flex: 0 0 auto; font-size: 15px; margin-top: 1px; }
.ad-kai { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #e86aa6; }
.ad-kai svg.i { font-size: 13px; }
.ad-days { display: flex; justify-content: space-between; gap: 6px; margin: 0 0 14px; }
.ad-days button { flex: 1; max-width: 44px; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--raise); color: var(--muted); font-size: 14px; font-weight: 600; }
.ad-days button.on { background: var(--text); color: var(--bg); }
.ad-version { margin: 16px 0 0; padding: 14px 14px 4px; border-radius: 16px; background: var(--raise); }
.ad-version-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--dawn); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; margin-bottom: 4px; }
.ad-version p { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 10px; font-size: 14px; line-height: 1.45; }
.ad-version p svg.i { color: #14b8a6; flex: 0 0 auto; font-size: 16px; margin-top: 2px; stroke-width: 2.4; }
.ad-version b { font-weight: 600; }
.ad-row .ad-row-main { display: flex; gap: 10px; align-items: flex-start; }
.ad-row .ad-row-main .ad-av { width: 28px; height: 28px; font-size: 13px; margin-top: 1px; }
.ad-row .btn.small, .ad-row .tag { flex: 0 0 auto; }
.ad-row .opt-btns .btn svg.i { margin-right: 4px; }
.ad-edit { padding: 12px; border-radius: 16px; background: var(--raise); margin: 0 0 10px; }
.ad-edit .seg { background: var(--card); margin: 0 0 10px; }
.ad-edit .seg:last-child { margin-bottom: 0; }
.ad-edit .seg button.on { background: var(--raise-2); }
.ad-edit-top { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.ad-edit-top input { flex: 1; margin: 0; }
.ad-edit-top .icon-btn { background: var(--card); width: 34px; height: 34px; }
.ad-step { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.ad-step .icon-btn { background: var(--card); width: 34px; height: 34px; font-size: 18px; }
.ad-amount { display: flex; gap: 8px; margin-top: 10px; }
.ad-amount input { margin: 0; }
.ad-amount input[type=number] { width: 96px; flex: 0 0 auto; }
.ad-tag { color: var(--muted); }
.ad-edit input, .ad-edit textarea { background: var(--card); }

/* ---- INSIGHTS (#35): patterns across areas on Progress (insights.js, insightsCard in goals.js) */
.ins > h2 svg.i { color: #e86aa6; stroke-width: 1.8; font-size: 13px; }
.ins-empty { margin: 0; }
.ins-row { padding: 14px 0; border-top: 1px solid var(--line); }
.ins > h2 + .ins-row { border-top: 0; padding-top: 2px; }
.ins-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 10px; }
.ins-bars { display: grid; gap: 6px; }
.ins-bar { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr 3.2em; align-items: center; gap: 10px; font-size: 13px; }
.ins-lab { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-track { height: 8px; border-radius: 4px; background: var(--raise); overflow: hidden; }
.ins-track i { display: block; height: 100%; border-radius: 4px; }
.ins-track i.hi { background: var(--aurora); }
.ins-track i.lo { background: var(--faint); opacity: 0.55; }
.ins-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ins-line { font-size: 14px; line-height: 1.4; margin: 10px 0 0; }
.ins-line b { font-weight: 600; }
.ins-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ins-actions .btn svg.i { margin: 0; font-size: 15px; color: #e86aa6; }
.ins-foot { margin: 4px 0 0; font-size: 12px; }