/* ===== Compass — Warm Clay design code (chosen 8 Sep 2026) ===== */
:root {
  --bg: #F3E9DD;
  --surface: #FBF6EF;
  --pill: #FFFDFA;
  --ink: #3D2B1F;
  --ink-2: #5C463A;
  --muted: #8A7364;
  --muted-2: #B39C88;
  --line: #E6D8C8;
  --line-2: #CDB9A4;
  --accent: #C9663E;
  --accent-soft: #F4DED2;
  --accent-2: #6B7A3A;
  --accent-2-soft: #E4E8D2;
  --hero: linear-gradient(135deg, #C9663E 0%, #E0925B 100%);
  --hero-fg: #FFF8F0;
  --good: #6B7A3A;
  --warn: #C48A2B;
  --bad: #B23A2E;
  --r: 20px;
  --r-s: 14px;
  --shadow: 0 2px 8px rgba(61,43,31,.06);
  --shadow-strong: 0 14px 30px rgba(61,43,31,.16);
  --tab-h: 64px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The strip behind the iPhone clock and battery is painted from the page background.
   Setting it on html, body AND the colour scheme stops iOS tinting it a different shade. */
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); color-scheme: light; }
html { background-color: #F3E9DD; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: 15px; line-height: 1.45; min-height: 100dvh; overflow-x: hidden; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; touch-action: manipulation; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:active { transform: scale(.98); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: -.01em; }
::selection { background: var(--accent-soft); }
input::placeholder { color: var(--muted-2); }
#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; width: 100%; height: 100%; }

/* ---- layout ---- */
#app { position: relative; z-index: 1; padding: calc(var(--sat) + 18px) 24px calc(var(--tab-h) + var(--sab) + 40px); max-width: 560px; margin: 0 auto; }
.view { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .5s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .02s } .stagger > *:nth-child(2) { animation-delay: .06s } .stagger > *:nth-child(3) { animation-delay: .10s }
.stagger > *:nth-child(4) { animation-delay: .14s } .stagger > *:nth-child(5) { animation-delay: .18s } .stagger > *:nth-child(n+6) { animation-delay: .22s }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 6px; }
.label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.wordmark { font-family: var(--font-display); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
h1.title { font-size: 30px; line-height: 1.15; margin: 4px 0 6px; }
.lead { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); min-height: 20px; text-wrap: pretty; }
.lead .caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.icon-btn { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 4px; }
.section-title h2 { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.section-title .link { font-size: 13px; color: var(--accent); font-weight: 600; }

/* ---- cards ---- */
.card { position: relative; background: var(--surface); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); overflow: hidden; }
.card + .card { margin-top: 12px; }
.card.tappable { transition: transform .25s var(--spring); text-align: left; width: 100%; }
.card.tappable:active { transform: scale(.985); }
.grid-2 > .card, .grid-3 > .card { margin-top: 0; }

/* ---- hero (primary quit counter) ---- */
.hero { background: var(--hero); color: var(--hero-fg); border-radius: var(--r); padding: 18px 18px 16px; position: relative; overflow: hidden; box-shadow: var(--shadow-strong); text-align: left; width: 100%; }
.hero .circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.hero .circle.a { width: 180px; height: 180px; right: -40px; top: -40px; }
.hero .circle.b { width: 160px; height: 160px; right: 30px; bottom: -70px; background: rgba(255,255,255,.09); }
.hero .head { display: flex; justify-content: space-between; align-items: center; position: relative; }
.hero .name { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.hero .badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.18); }
.hero .counter { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; position: relative; }
.hero .days { font-family: var(--font-display); font-size: 60px; line-height: 1; letter-spacing: -.03em; }
.hero .unit { font-size: 18px; font-weight: 600; opacity: .9; }
.hero .hms { font-size: 13px; opacity: .8; margin-left: 2px; white-space: nowrap; }
.hero .line { font-size: 13px; line-height: 1.4; margin-top: 8px; opacity: .95; max-width: 290px; position: relative; min-height: 18px; text-wrap: pretty; }
.hero .line .caret { display: inline-block; width: 2px; height: 1em; background: var(--hero-fg); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .stats { display: flex; gap: 18px; margin-top: 10px; font-size: 13px; position: relative; flex-wrap: wrap; }
.hero .stats b { font-weight: 800; }
.hero .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); margin-top: 10px; overflow: hidden; position: relative; }
.hero .bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: #fff; transition: width 1.2s var(--ease); }
.hero .next { font-size: 12px; margin-top: 6px; opacity: .9; position: relative; }

/* ---- compact quit row ---- */
.quit-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; margin-top: 10px; }
.quit-row .ring { flex: none; width: 52px; height: 52px; }
.quit-row .ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.quit-row .ring .track { fill: none; stroke: var(--line); stroke-width: 5; }
.quit-row .ring .prog { fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.quit-row .t { flex: 1; min-width: 0; }
.quit-row .t .k { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.quit-row .t .v { display: flex; align-items: baseline; gap: 6px; }
.quit-row .t .v b { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.quit-row .t .v span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.quit-row .r { font-size: 12px; font-weight: 700; color: var(--accent-2); text-align: right; line-height: 1.3; white-space: nowrap; }

/* ---- habit rows ---- */
.rows { display: flex; flex-direction: column; margin-top: 2px; }
.hrow { display: flex; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; position: relative; }
.hrow .check { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; transition: all .3s var(--spring); }
.hrow .check svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: all .25s var(--spring); }
.hrow.done .check { background: var(--accent); border-color: var(--accent); }
.hrow.done .check svg { opacity: 1; transform: scale(1); }
.hrow .name { flex: 1; font-size: 16px; font-weight: 600; }
.hrow.done .name { color: var(--muted); }
.hrow .meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hrow .ripple { position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; }
.hrow.just-done .ripple { animation: ripple .6s var(--ease) forwards; }
@keyframes ripple { from { opacity: .35; transform: scale(1); } to { opacity: 0; transform: scale(30); } }
.hrow.add { color: var(--accent); font-weight: 600; border-bottom: 0; }
.hrow.add .check { border-style: dashed; border-color: var(--accent); color: var(--accent); }
.hrow.add .check svg { opacity: 1; transform: none; }
.flame { color: var(--accent); font-weight: 700; }

/* ---- mini cards ---- */
.mini { padding: 10px 14px; text-align: left; width: 100%; }
.mini .k { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.mini .v { font-family: var(--font-display); font-size: 24px; margin-top: 2px; line-height: 1.2; }
/* The caption sits on its own line rather than wrapping mid-phrase — in a two-column grid
   "-0.8 kg / week" broke after the slash and left "week" stranded under the number. */
.mini .v small { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: var(--muted); margin: 2px 0 0; line-height: 1.3; }
.mini .v small.acc { color: var(--accent); font-weight: 700; }

/* ---- list rows (habits tab) ---- */
.row-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; width: 100%; text-align: left; }
.row-card .emoji { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--c, var(--accent)) 16%, var(--surface)); flex: none; }
.row-card .t { flex: 1; min-width: 0; }
.row-card .t b { display: block; font-weight: 600; font-size: 15px; }
.row-card .t span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.row-card .v { font-family: var(--font-display); font-size: 22px; white-space: nowrap; }
.row-card .v small { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-left: 3px; }
.chev { color: var(--muted-2); width: 18px; height: 18px; flex: none; }
.stat { background: var(--bg); border-radius: var(--r-s); padding: 10px 12px; }
.stat .v { font-family: var(--font-display); font-size: 20px; line-height: 1.15; }
.stat .k { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border-radius: 16px; font-weight: 700; font-size: 15px; width: 100%; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); transition: transform .2s var(--spring), filter .2s; }
.btn.primary { background: var(--hero); color: var(--hero-fg); box-shadow: 0 8px 22px rgba(201,102,62,.28); }
.btn.danger { background: #F3DAD6; color: var(--bad); box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; border: 1px solid var(--line-2); color: var(--ink-2); }
.btn.sm { padding: 10px 14px; font-size: 13px; width: auto; border-radius: 12px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-row .btn { flex: 1; }
.btn svg { width: 18px; height: 18px; }

/* ---- forms ---- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.input { width: 100%; padding: 14px 16px; border-radius: 14px; background: #FFFDFA; border: 1px solid var(--line); color: var(--ink); outline: none; font-size: 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[type="datetime-local"], .input[type="date"] { color-scheme: light; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 14px; border-radius: 999px; background: var(--bg); border: 1px solid transparent; font-size: 14px; font-weight: 500; transition: all .2s; }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.chip.emoji { font-size: 20px; padding: 6px 10px; }
.chip.color { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--c); border: 3px solid transparent; }
.chip.color.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--c); }
.seg { display: flex; background: var(--bg); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; padding: 10px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--muted); transition: all .25s var(--ease); }
.seg button.on { background: #FFFDFA; color: var(--ink); box-shadow: var(--shadow); }
.days { display: flex; gap: 6px; }
.days button { flex: 1; aspect-ratio: 1; border-radius: 12px; background: var(--bg); font-weight: 600; font-size: 13px; color: var(--muted); }
.days button.on { background: var(--accent); color: #fff; }
.error { color: var(--bad); font-size: 13px; margin-top: 8px; min-height: 18px; }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
.hint { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---- sheet ---- */
/* Starts BELOW the status bar on purpose. iOS Safari tints the strip behind the clock by
   sampling the colour at the top of the page; if a dark backdrop covers that strip, Safari
   goes dark and then fails to sample again when the backdrop is removed, leaving the strip
   stuck dark until a reload. Keeping the strip clear means it never changes at all. */
/* Transitions, not a pair of keyframe animations.
   Opening ran `up`, closing REPLACED it with `down` — so a sheet closed while it was still
   sliding in jumped to fully open and then slid away, which is what "not smooth, feels
   broken" was. A transition interpolates from wherever the sheet actually is, so an
   interrupted open reverses cleanly. */
.sheet-bg { position: fixed; top: var(--sat); left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(61,43,31,.35); opacity: 0; transition: opacity .3s var(--ease); }
.sheet-bg.open { opacity: 1; }
/* The mover: fixed, never scrolls, owns the transform and the shadow. translate3d and
   backface-visibility keep it on its own compositor layer for the whole slide; `contain`
   stops a relayout inside the sheet from touching the page behind it. */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-width: 600px; margin: 0 auto;
  background: var(--surface); border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px rgba(61,43,31,.18);
  transform: translate3d(0, 100%, 0); transition: transform .34s var(--ease);
  will-change: transform; backface-visibility: hidden; contain: layout paint; }
.sheet.open { transform: translate3d(0, 0, 0); }
/* The scroller: inside the mover, so momentum scrolling never has to slide. */
.sheet-inner { max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 20px calc(var(--sab) + 24px); overscroll-behavior: contain; }
.sheet .handle { width: 40px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 0 auto 16px; }
.sheet h2 { font-size: 26px; margin-bottom: 4px; }
.sheet .sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

/* ---- timeline ---- */
.timeline { position: relative; margin: 8px 0 0; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl { position: relative; padding: 0 0 18px; }
.tl .dot { position: absolute; left: -23px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-2); }
.tl.hit .dot { background: var(--accent); border-color: var(--accent); }
.tl.next .dot { border-color: var(--accent); animation: pulse-ring 1.6s ease-out infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(201,102,62,.5);} 100% { box-shadow: 0 0 0 10px transparent; } }
.tl b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tl.hit b { color: var(--ink); }
.tl p { margin: 3px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.tl.hit p { color: var(--ink-2); }
.tl.next p { color: var(--ink); }

/* ---- heatmap ---- */
/* One square per day, in whatever rectangle fits best. Column count and cell size are
   measured and set by views.js, so the block can never run off the side of the sheet. */
.hmap { display: grid; grid-template-columns: repeat(var(--cols, 7), var(--cell, 14px));
  gap: 4px; justify-content: center; max-width: 100%; }
.hmap i { display: block; width: var(--cell, 14px); height: var(--cell, 14px);
  border-radius: 3px; background: var(--line); }
.hmap i.off { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.hmap i.done { background: var(--accent); }
.hmap i.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.hmap-cap { text-align: center; margin: 10px 0 0; }

/* ---- focus ring ---- */
.ring-wrap { position: relative; width: min(70vw, 280px); margin: 8px auto 16px; aspect-ratio: 1; display: grid; place-items: center; }
.ring-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-wrap .track { fill: none; stroke: var(--line); stroke-width: 10; }
.ring-wrap .prog { fill: none; stroke: url(#ringGrad); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
/* Always taken out of flow. When it was only positioned while running, an idle timer
   left it as a grid item and the clock was pushed below the centre of the circle. */
.ring-wrap .halo { position: absolute; inset: 14%; border-radius: 50%; pointer-events: none; }
.ring-wrap.running .halo { background: radial-gradient(circle, rgba(201,102,62,.14), transparent 70%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(.94); opacity: .7 } 50% { transform: scale(1.06); opacity: 1 } }
.ring-wrap .time { font-family: var(--font-display); font-size: 56px; letter-spacing: -.03em; line-height: 1;
  display: block; font-variant-numeric: tabular-nums; }
/* The caption hangs below without pulling the number off centre: its own height is
   cancelled by the negative margin, so the digits sit on the circle's true centre. */
.ring-wrap .phase { text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 -24px; font-weight: 700; line-height: 16px; }
.ring-wrap .center { position: relative; text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.tomatoes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 26px; }
.tomatoes span { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); animation: pop .5s var(--spring) both; }
@keyframes pop { from { transform: scale(0); } to { transform: none; } }
.week-bars { display: flex; gap: 8px; align-items: flex-end; height: 70px; }
.week-bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.week-bars i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: var(--accent); min-height: 3px; transition: height .8s var(--ease); }
.week-bars i.empty { background: var(--line); }
.week-bars span { font-size: 11px; color: var(--muted); }
.week-bars .today span { color: var(--ink); font-weight: 700; }

/* ---- weight chart ---- */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .avg { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .raw { fill: var(--line-2); }
.chart .area { fill: url(#areaGrad); }
.chart .target { stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.chart text { fill: var(--muted); font-size: 10px; font-family: var(--font-body); }
.big { font-family: var(--font-display); font-size: 52px; letter-spacing: -.03em; line-height: 1; }
.big small { font-family: var(--font-body); font-size: 18px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.delta { font-weight: 700; font-size: 14px; } .delta.down { color: var(--good); } .delta.up { color: var(--warn); } .delta.flat { color: var(--muted); }

/* ---- tabs ---- */
.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 18px); z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: var(--tab-h); padding: 0 6px; border-radius: 32px; background: var(--pill); box-shadow: var(--shadow-strong); width: min(calc(100% - 40px), 420px); }
.tabs[hidden] { display: none; }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; color: var(--muted-2); font-size: 10.5px; font-weight: 700; transition: color .25s; }
.tabs button svg { width: 22px; height: 22px; transition: transform .3s var(--spring); }
.tabs button.on { color: var(--ink); }
.tabs button.on svg { transform: translateY(-1px) scale(1.06); }

/* ---- toast / sync ---- */
#toast-root { position: fixed; top: calc(var(--sat) + 12px); left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--ink); color: var(--surface); border-radius: 14px; padding: 10px 16px; font-size: 14px; font-weight: 500; animation: toast .35s var(--spring) both; box-shadow: var(--shadow-strong); }
.toast.out { animation: toast-out .3s var(--ease) both; }
@keyframes toast { from { opacity: 0; transform: translateY(-16px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
.sync { position: fixed; top: calc(var(--sat) + 8px); left: 50%; margin-left: -3.5px; width: 7px; height: 7px; border-radius: 50%; z-index: 20; background: var(--good); transition: all .3s; opacity: 0; }
.sync.dirty { background: var(--warn); opacity: 1; }
.sync.offline { background: var(--bad); opacity: 1; }

/* ---- auth ---- */
.auth { min-height: calc(100dvh - 60px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.auth .mark { width: 72px; height: 72px; border-radius: 50%; background: var(--hero); box-shadow: var(--shadow-strong); margin-bottom: 26px; display: grid; place-items: center; font-family: var(--font-display); font-size: 34px; color: var(--hero-fg); }
.auth h1 { font-size: 36px; margin-bottom: 8px; }
.auth p { color: var(--muted); margin: 0 0 28px; max-width: 320px; }
.auth form { width: 100%; max-width: 340px; }

/* ---- misc ---- */
.empty { text-align: center; color: var(--muted); padding: 24px 12px; font-size: 14px; line-height: 1.5; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.list-item:last-child { border-bottom: 0; }
.list-item .del { color: var(--muted-2); padding: 6px; }
.list-item .del svg { width: 18px; height: 18px; }
.count-in { animation: countin .7s var(--spring) both; }
@keyframes countin { from { opacity: 0; transform: translateY(8px) scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- log past days ---- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; }
.cal-nav .btn { width: auto; padding: 12px 14px; font-size: 14px; min-height: 44px; }
.cal-nav .btn[disabled] { opacity: .35; }
.cal-range { font-size: 13px; color: var(--muted); text-align: center; flex: 1; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-head span { text-align: center; font-size: 11px; letter-spacing: .1em; color: var(--muted-2); font-weight: 700; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-d { min-height: 44px; border-radius: var(--r-s); background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; display: grid; place-items: center; border: 1.5px solid transparent;
  transition: transform .2s var(--spring), background .2s var(--ease), color .2s var(--ease); }
.cal-d.off { color: var(--muted-2); background: var(--bg); }
.cal-d.before { opacity: .55; }
.cal-d.today { border-color: var(--ink); }
.cal-d.done { background: var(--accent); color: var(--hero-fg); opacity: 1; }
.cal-d.future { opacity: .25; }
.cal-d:not([disabled]):active { transform: scale(.92); }

/* ---- tasks: the sunrise ----
   One card that is the reward. The arc is a progress bar bent into a sky: the sun travels it
   left to right as the day's tasks close, the lit part of the arc trails behind it, and the
   whole card warms from pre-dawn to full sunrise. Legible first (it is a percentage), pretty
   second. --t is the completion ratio, set from JS. */
.sky {
  position: relative;
  border-radius: var(--r);
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(201, 102, 62, calc(.10 + var(--t) * .40)) 0%, rgba(201, 102, 62, 0) 62%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface), var(--accent) calc(var(--t) * 12%)), var(--surface));
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 12px 14px 14px;
  transition: background .7s var(--ease);
}
.sky.full { box-shadow: var(--shadow-strong); }
.sky svg { display: block; width: 100%; height: auto; }
.sky .track { fill: none; stroke: var(--line-2); stroke-width: 5; stroke-linecap: round; opacity: .5; }
.sky .lit { fill: none; stroke: url(#sungrad); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .75s var(--spring); }
.sky .horizon { stroke: var(--line-2); stroke-width: 1; opacity: .55; }
.sky .sun { transition: transform .75s var(--spring); transform-box: fill-box; transform-origin: center; }
.sky .sun-core { fill: url(#sungrad); }
.sky .sun-halo { fill: var(--accent); opacity: calc(.10 + var(--t) * .22); }
.sky.flare .sun { animation: sunflare .7s var(--spring); }
@keyframes sunflare {
  0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); }
}
/* Below the horizon, in normal flow. Nothing inside the arc is safe: the sun sweeps the
   middle of the bowl at half done and both corners at the ends. */
.sky-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 3px 0; }
.sky-count { font-family: var(--font-display); font-size: 27px; line-height: 1.05; }
.sky-count small { font-family: var(--font-text); font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 5px; }
.sky-note { font-size: 12px; color: var(--muted); text-align: right; }
.sky.full .sky-note { color: var(--accent); font-weight: 600; }

/* ---- task rows ----
   A task name is a sentence, so the time goes underneath it rather than beside it. The
   strike-through is a real text-decoration, which is the only thing that stays correct when
   a name wraps to two lines — a drawn bar crosses the middle line and misses the rest. */
.trow { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 9px 0;
  border-bottom: 1px solid var(--line); width: 100%; text-align: left; position: relative; }
.trow .check { width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line-2);
  display: grid; place-items: center; flex: none; transition: all .3s var(--spring); }
.trow .check svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: all .25s var(--spring); }
.trow.done .check { background: var(--accent); border-color: var(--accent); }
.trow.done .check svg { opacity: 1; transform: scale(1); }
.trow .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trow .name { font-size: 16px; font-weight: 600; line-height: 1.3;
  text-decoration: line-through solid transparent; text-decoration-thickness: 1.5px;
  transition: text-decoration-color .3s var(--ease), color .3s var(--ease); }
.trow.done .name { color: var(--muted); text-decoration-color: var(--muted); }
.trow.done.instant .name { transition: none; }
.trow .when { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.trow.done .when { color: var(--muted-2); }
.trow .ripple { position: absolute; left: 13px; top: 28px; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; }
.trow.just-done .ripple { animation: ripple .6s var(--ease) forwards; }
.trow.fixed { opacity: .82; }
.trow.fixed .check { border-style: dashed; }
.trow:not(.fixed):active .check { transform: scale(.88); }

/* the committed three sit slightly forward of the rest of the list */
.task-rest-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  font-weight: 600; margin: 14px 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .sky .lit, .sky .sun, .sky { transition: none; }
  .sky.flare .sun { animation: none; }
}

/* ---- the month ----
   One square per day. Four ways to draw a square, chosen in Settings, because which one reads
   best is taste — see docs/DESIGN.md. The grid is 7 equal columns whatever the phone width;
   a day square lands at about 39 px on a 390 px screen. */
.mhead { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
.mhead span { text-align: center; font-size: 10px; letter-spacing: .1em; color: var(--muted-2); font-weight: 700; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px 5px; }
.mday { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0;
  border-radius: 8px; transition: transform .2s var(--spring); }
.mday:active { transform: scale(.9); }
.mday[disabled] { opacity: .25; }
.mday .n { font-size: 9.5px; color: var(--muted-2); font-weight: 600; line-height: 1; }
.mday.today .n { color: var(--ink); font-weight: 700; }
.mday .sw { width: 100%; height: 26px; border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.mday.today .sw { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mday .sw i { display: block; flex: 1; }
.mday.lead { visibility: hidden; }

/* dots and rings float on the page rather than sitting in a swatch box */
.mgrid[data-style="dots"] .sw, .mgrid[data-style="ring"] .sw {
  background: transparent; box-shadow: none; align-items: center; justify-content: center; }
.mgrid[data-style="dots"] .sw { flex-direction: row; gap: 4px; }
.mgrid[data-style="dots"] .sw i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.mgrid[data-style="dots"] .mday.today .sw, .mgrid[data-style="ring"] .mday.today .sw { box-shadow: none; }
.mgrid[data-style="dots"] .mday.today .n,
.mgrid[data-style="ring"] .mday.today .n { text-decoration: underline; text-underline-offset: 2px; }

.mlegend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mchip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 500;
  padding: 7px 11px 7px 8px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  min-height: 32px; transition: opacity .2s var(--ease); }
.mchip b { display: block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mchip .c { color: var(--muted); font-weight: 700; margin-left: 2px; }
.mchip.off { opacity: .42; }
.mchip.off b { background: var(--muted-2) !important; }
/* The nav is 28 px tall and the heading is 11 px, so baseline alignment (the default for a
   .section-title) put them on visibly different lines and made the whole row tall enough to
   crowd the card underneath. Centre both, and give the card room. */
.section-title.month { align-items: center; margin-bottom: 10px; }
.mnav { display: flex; align-items: center; gap: 2px; }
.mnav .mo { font-size: 13px; color: var(--accent); font-weight: 600; min-width: 74px; text-align: center; }
.mnav button { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.mnav button svg { width: 17px; height: 17px; }
.mnav button[disabled] { opacity: .25; }
.mempty { text-align: center; padding: 22px 8px; color: var(--muted); font-size: 13px; }

/* the day sheet */
.dl { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.dl:last-of-type { border-bottom: 0; }
.dl b { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dl .nm { flex: 1; font-weight: 600; }
.dl .s { font-size: 12px; color: var(--muted); font-weight: 600; }
.dl .s.off { color: var(--muted-2); font-weight: 500; }

/* choosing the month's look: four tiles that draw themselves rather than name themselves */
.styletile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 10px;
  border-radius: var(--r-s); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  transition: all .25s var(--ease); }
.styletile.on { background: var(--pill); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow); }
.styletile .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.styletile.on .lbl { color: var(--ink); }
.mgrid.tiles { display: flex; gap: 5px; width: 100%; justify-content: center; }
/* 32, not 26: three dots plus their gaps need 29 px, and at 26 the three sample days ran
   together into one strip of dots with no day boundary. The real grid has 39 px to play with. */
.mgrid.tiles .mday { width: 32px; flex: none; }

/* a second heading inside a section (Tasks -> Tomorrow): same type as a section title, less air above */
.section-title.sub-section { margin-top: 16px; align-items: center; }

/* A field label that carries a control on its right (task rows: "1. What" + Remove).
   `.field > span` no longer reaches the label once it is wrapped, so it is restated here. */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.field-head > span { font-size: 11px; color: var(--muted); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; }
.field-del { display: flex; align-items: center; gap: 5px; color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 2px 7px 10px; min-height: 32px; }
.field-del svg { width: 14px; height: 14px; }
/* an explicit display:flex beats the browser's [hidden] rule, so say it again */
.field-del[hidden] { display: none; }
.field-del:active { color: var(--bad); }

/* ---- fuel ----
   Calories are a quantity, not a journey, so this is an honest meter rather than a metaphor.
   The bar can pass its target: the overshoot paints in warn and the track keeps its width,
   because a bar that runs off the card reads as catastrophe and one bad dinner is not. */
.fuel-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fuel-n { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.fuel-n small { font-family: var(--font-body); font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 5px; }
.fuel-left { font-size: 13px; color: var(--muted); font-weight: 600; text-align: right; }
.fuel-left.over { color: var(--warn); }
.meter { height: 8px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  margin-top: 12px; overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; background: var(--hero); transition: width .5s var(--ease); }
.meter i.over { background: var(--warn); }
.meter.thin { height: 5px; margin-top: 8px; }
.meter.thin i { background: var(--accent-2); }
.fuel-macros { display: flex; gap: 14px; margin-top: 9px; font-size: 12px; color: var(--muted); }
.fuel-macros b { color: var(--ink); font-weight: 700; }
.fuel-none { font-size: 13px; color: var(--muted); line-height: 1.5; }

.food-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.food-row:last-child { border-bottom: 0; }
.food-row .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.food-row .nm small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 1px; }
.food-row .kc { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.food-row .del { color: var(--muted-2); padding: 8px; display: grid; place-items: center; }
.food-row .del svg { width: 16px; height: 16px; }
.food-row .del:active { color: var(--bad); }

/* one tap to log something you have eaten before — the feature that decides week two */
.quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.quick button { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600;
  color: var(--ink); min-height: 38px; }
.quick button b { color: var(--muted); font-weight: 700; font-size: 12px; }
.quick button:active { background: var(--accent-soft); }

/* photo candidates: always confirmed, never logged silently */
.cand { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.cand:last-of-type { border-bottom: 0; }
.cand .t { flex: 1; min-width: 0; }
.cand .t b { display: block; font-size: 15px; }
.cand .t span { font-size: 12px; color: var(--muted); }
.cand .kc { font-weight: 700; font-variant-numeric: tabular-nums; }
.conf { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.conf.hi { background: var(--accent-2-soft); color: var(--accent-2); }
.conf.mid { background: #F6E7C7; color: #8C5F14; }
.conf.lo { background: var(--line); color: var(--muted); }
.shot { width: 100%; border-radius: var(--r-s); display: block; margin-bottom: 14px; max-height: 190px; object-fit: cover; }
.calib { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.calib b { color: var(--ink); }

/* ---- Run: the marathon duel ---- */
.run-seg { background: var(--line); margin: 0 0 14px; }
.run-seg button.on { background: var(--pill); }
.duel .duel-row { display: flex; align-items: center; gap: 6px; }
.duel .duel-side { width: 62px; display: flex; flex-direction: column; gap: 2px; }
.duel .duel-side.right { align-items: flex-end; }
.duel .k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.duel .k.me { color: var(--accent); } .duel .k.them { color: var(--accent-2); }
.duel .v { font-family: var(--font-display); font-size: 36px; line-height: 1; }
.duel .duel-track { position: relative; flex: 1; min-width: 0; }
.duel .track { display: block; width: 100%; height: auto; }
.duel .lane-fill { transition: stroke-dasharray 1.4s var(--ease); }
.duel .duel-mid { position: absolute; left: 0; right: 0; top: 37%; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.3; }
.duel .duel-mid b { display: block; color: var(--ink); font-size: 12px; }
.duel .duel-foot { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 8px; }
.duel .duel-foot b { color: var(--ink); }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border-radius: 12px; }
.wday.now { background: var(--bg); }
.wday .wd { font-size: 11px; font-weight: 700; color: var(--muted); }
.wdot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; }
.wdot.done { background: var(--accent); border-color: var(--accent); }
.wdot.them.done { background: var(--accent-2); border-color: var(--accent-2); }
.wdot.partial, .wdot.short { background: var(--accent-soft); border-color: var(--accent); }
.wdot.missed { border-style: dashed; }
.wdot.rested, .sdot.rested { background: transparent; border-color: var(--accent); border-style: dotted; }
.wdot.today { border-color: var(--accent); animation: pulse-ring 1.6s ease-out infinite; }
.wdot.rest { border-color: transparent; }
.session .session-title, .run .session-title { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 2px 0 8px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.steps .step-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.steps .rep { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--accent-soft); display: flex; flex-direction: column; gap: 4px; }
.steps em { color: var(--muted); font-style: normal; }
.cue { font-weight: 600; margin: 12px 0 4px; }
.run-done { border: 1.5px solid var(--accent-2); }
.week .week-head { display: flex; justify-content: space-between; align-items: baseline; width: 100%; text-align: left; gap: 8px; }
.week.now { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow); }
.week-rows { margin-top: 8px; }
.srow { display: grid; grid-template-columns: 34px 1fr auto 14px; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.srow .sday { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.srow .skm { color: var(--muted); font-size: 13px; }
.sdot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); box-sizing: border-box; }
.sdot.done { background: var(--accent); border-color: var(--accent); }
.sdot.partial, .sdot.short { background: var(--accent-soft); border-color: var(--accent); }
.sdot.missed { border-style: dashed; }
.coach .coach-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.coach .coach-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--hero); color: var(--hero-fg); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; flex: none; }
.coach-text { margin: 0; font-size: 15px; line-height: 1.55; min-height: 60px; }
.proposal { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-s); border: 1.5px solid var(--accent); background: #FFFDFA; }
.proposal .label { display: block; color: var(--accent); margin-bottom: 4px; }
.ask-row { display: flex; gap: 8px; }
.ask-row .input { flex: 1; min-width: 0; }
.qa { margin-top: 12px; font-size: 14px; } .qa p { margin: 4px 0 0; color: var(--ink-2); }
.rails { background: var(--ink); color: var(--surface); font-size: 13px; line-height: 1.5; } .rails p { margin: 0; }
.runrow { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.runrow .rr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.runrow .rr-note { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }   /* the run page has all of it */
.icon-btn.sm { width: 34px; height: 34px; flex: none; } .icon-btn.sm svg { width: 16px; height: 16px; }
.setup { padding-left: 20px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.keybox { display: block; font-size: 12px; word-break: break-all; background: var(--bg); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }

/* ---- Run: spacing (14 Oct 2026 review: blocks were touching) ---- */
.run .lead { min-height: 40px; }                                   /* the typed line no longer pushes the screen down as it grows */
.run > .stagger { display: flex; flex-direction: column; gap: 14px; }
.run > .stagger > * { margin: 0; }
.run .card { padding: 16px 18px; }
.run .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.run .input { width: 100%; min-width: 0; box-sizing: border-box; }
.run input[type=date].input { -webkit-appearance: none; appearance: none; min-height: 50px; }
.run .field { margin-bottom: 14px; }
.run .card .btn.primary { margin-top: 4px; }
.run .error:empty { display: none; }
.duel .duel-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
/* the friend's week and runs, one tap from the duel card (20 Oct 2026) */
.duel .duel-more { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-height: 28px; margin: 6px 0 -4px; font-size: 13px; font-weight: 700; color: var(--accent); }
.duel .duel-more svg { width: 16px; height: 16px; }
.friend-week { display: flex; flex-direction: column; }
.friend-week .fw-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--line); background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; text-align: left; width: 100%; }
.friend-week .fw-row:first-child { border-top: 0; }
.friend-week .fw-day { flex: none; width: 34px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.friend-week .fw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.friend-week .fw-row svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.fw-label { margin: 18px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* a run row that is a button (the friend's runs): left-aligned like the rest, a full-width tap target */
button.runrow.rr-main { width: 100%; min-height: 44px; text-align: left; align-items: flex-start; flex-direction: column; background: none; color: inherit; font: inherit; font-size: 14px; border-left: 0; border-right: 0; border-bottom: 0; }
.session .steps { margin-top: 4px; }
.session .cue { margin-top: 14px; }
.week-strip { margin-top: 4px; }
.plan-hero .counter .days { font-size: 46px; }
.plan-hero .zone-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.plan-hero .zone-grid div { background: rgba(255,255,255,.14); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.plan-hero .zone-grid span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.plan-hero .zone-grid b { font-size: 15px; }
.hr-missing b { display: block; } .hr-missing .hint { margin: 4px 0 12px; }   /* no heart rate on any best effort */
.plan-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plan-card .session-title { margin: 0; }
.plan-bars { display: flex; align-items: flex-end; gap: 3px; height: 124px; margin: 14px 0 12px; }
.pbar { flex: 1; min-width: 0; height: 100%; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.pbar i { display: block; width: 100%; border-radius: 4px 4px 2px 2px; background: var(--line); transition: height .9s var(--ease), background .2s; }
.pbar.past i { background: #E0925B; }
.pbar.key i { background: var(--accent-2); }
.pbar.sel i { background: var(--accent); }
.pbar span { font-size: 9px; font-weight: 700; color: var(--muted-2); height: 11px; line-height: 11px; white-space: nowrap; }
.pbar.sel span { color: var(--accent); }
.plan-phases { gap: 6px; flex-wrap: nowrap; }
.plan-phases .chip { font-size: 12.5px; padding: 7px 11px; white-space: nowrap; }
.week-nav { display: flex; align-items: center; gap: 12px; padding: 2px 2px 0; }
.week-nav-mid { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.week-nav .icon-btn:disabled { opacity: .35; }
.srow2 { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.srow2 .sq { width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; flex: none; }
.srow2 .sq svg { width: 18px; height: 18px; }
.srow2 .sq.done { background: var(--accent); color: var(--hero-fg); }
.srow2 .sq.missed { background: var(--bg); color: var(--muted); border: 1.5px dashed var(--line-2); }
.srow2 .s-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srow2 .s-mid b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.srow2 .s-mid span { font-size: 12px; color: var(--muted); }
.srow2 .s-km { font-family: var(--font-display); font-size: 22px; white-space: nowrap; }
.srow2 .s-km small { font-family: var(--font-body); font-size: 12px; color: var(--muted); margin-left: 3px; }
.rails-hint { text-align: center; padding: 4px 8px 0; }
.coach .proposal .btn-row { margin-top: 12px; }
.qa + .qa { padding-top: 12px; border-top: 1px solid var(--line); }
.runrow:first-of-type { border-top: 0; }

/* ---- Run: the race predictor, the coach chat, run comments (15 Oct 2026) ---- */
.chat-card .coach-head, .run-comment { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.chat-card .coach-mark, .run-comment .coach-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--hero); color: var(--hero-fg); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; flex: none; }
.run-comment { align-items: flex-start; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.run-comment .coach-text { min-height: 0; font-size: 14px; }
.run-comment .note-body { flex: 1; min-width: 0; }
.coach-text.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.more-link { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -12px; padding: 0 12px 0 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); }
.more-link[hidden] { display: none; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; margin: 0 -4px; padding: 2px 4px 6px; overscroll-behavior: contain; }
.bubble { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.coach { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; background: var(--accent); color: var(--hero-fg); border-bottom-right-radius: 6px; }
.bubble.typing { display: flex; gap: 5px; padding: 14px 16px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: typing 1.2s infinite ease-in-out; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; } .bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.att { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.22); white-space: nowrap; }
.bubble.coach .att, .drafts .att { background: var(--accent-soft); color: var(--accent); }
.drafts { margin: 10px 0 0; }
.att-x { min-width: 28px; min-height: 28px; margin: -6px -8px -6px -2px; font-size: 16px; line-height: 1; color: inherit; background: none; border: 0; }
.chat-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.chat-row .chat-input { flex: 1; min-width: 0; resize: none; min-height: 44px; }
.chat-row .chat-attach { width: 44px; height: 44px; flex: none; }
.chat-row .chat-send { min-height: 44px; margin: 0 !important; flex: none; }
.plist { margin: 8px 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; }
.plist li.off { color: var(--muted); text-decoration: line-through; }
.proposal .btn-row { margin-top: 10px; }
.predictor .pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-2-soft); color: var(--accent-2); }
.predictor.behind .pill { background: var(--accent-soft); color: var(--bad); }
.predictor.ahead .pill { background: var(--accent-2); color: var(--hero-fg); }
.pred-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pred-time { font-family: var(--font-display); font-size: 40px; line-height: 1.1; }
.pred-spark { display: block; width: 100%; height: 70px; margin: 8px 0 4px; color: var(--accent); overflow: visible; }
.predictor.on_target .pred-spark, .predictor.ahead .pred-spark { color: var(--accent-2); }
.pred-goal { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pred-goal-label { font-size: 10px; font-weight: 700; fill: var(--muted); font-family: var(--font-body); }
.pred-dot { fill: currentColor; }
.pred-line-text { font-weight: 600; margin: 6px 0 12px; }
.pred-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pred-stats div { background: var(--bg); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pred-stats span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.3; flex: 1; }
.pred-stats b { font-size: 15px; }
.runrow .rr-coach { font-size: 13px; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--accent-soft); margin-top: 4px; }
.srow2 .sq.before { background: var(--bg); color: var(--muted-2); }   /* a day before you confirmed the plan: never asked of you */
.srow2 .sq.rested { background: transparent; color: var(--accent); border: 1.5px dotted var(--accent); }   /* a pain hold kept by resting: as asked */
.wdot.before { border-color: var(--line); }

/* ---- Run: one run in full (15 Oct 2026) ---- */
.run-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.run-tiles div { background: var(--bg); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-tiles span { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.run-tiles b { font-size: 15px; overflow-wrap: anywhere; }
.runpage { display: flex; flex-direction: column; gap: 12px; }
.runpage .card { margin: 0; padding: 14px 16px; }
.rp-rows { display: flex; flex-direction: column; }
.rp-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 52px 34px; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rp-row.head { border-top: 0; padding-top: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rp-row b { font-size: 14px; }
.rp-row.on b { color: var(--good); } .rp-row.fast b { color: var(--warn); } .rp-row.slow b { color: var(--bad); } .rp-row.missed b { color: var(--muted); }
.rp-drift { margin: 0; }
.rp-charts { display: flex; flex-direction: column; gap: 12px; }
.rp-chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.rp-chart-head span { color: var(--muted); font-size: 12px; }
.rp-svg { display: block; width: 100%; height: 96px; background: var(--bg); border-radius: 10px; }
.rp-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-svg.pace .rp-line { stroke: var(--accent); }
.rp-svg.hr .rp-line { stroke: var(--ink); }
.rp-band.easy { fill: var(--accent-2-soft); } .rp-band.marathon { fill: #F3E3C2; } .rp-band.threshold { fill: var(--accent-soft); } .rp-band.interval { fill: #EBC7BC; }
.rp-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: -6px; }
.rp-split { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) 34px 34px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rp-split.head { border-top: 0; padding-top: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rp-split.best b { color: var(--accent); }
.rp-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; opacity: .75; }
.rp-split.best .rp-bar i { opacity: 1; }
.rp-note p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }   /* a dictated note keeps its paragraphs */
.rp-none { margin: 0; }
.runrow .rr-main { text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
button.runrow.rr-main { flex-direction: column; gap: 2px; width: 100%; align-items: stretch; min-height: 44px; font-size: 14px; }
.rr-detail { color: var(--accent); font-weight: 600; }
.run-done.tappable { cursor: pointer; }
.att.run { background: var(--accent-2-soft); color: var(--accent-2); border: 0; font: inherit; font-size: 12px; font-weight: 600; }
.bubble.me .att.run { background: rgba(255,255,255,.22); color: inherit; }

/* ---- Run: the run by segment, the change log, your body (15 Oct 2026) ---- */
.rp-verdict { font-weight: 600; margin: -6px 0 12px; }
.rp-verdict:empty { display: none; }
.rp-switch { margin: 0 0 2px; }
.rp-segs { display: flex; flex-direction: column; padding: 6px 16px; }
.rp-seg { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.rp-seg:first-child { border-top: 0; }
.rp-seg.recovery { padding: 6px 0 6px 12px; border-left: 2px solid var(--line); margin-left: 4px; }
.rp-seg.recovery b { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.rp-seg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rp-seg-top b { font-size: 15px; }
.rp-seg-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--ink-2); }
.rp-seg-nums small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rp-chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.rp-chip.on { background: var(--accent-2-soft); color: var(--accent-2); }
.rp-chip.fast, .rp-chip.short { background: #F6E7C8; color: #8A5A12; }
.rp-chip.slow, .rp-chip.long, .rp-chip.missed { background: var(--accent-soft); color: var(--bad); }
.rp-why { margin: 0; font-size: 12.5px; color: var(--muted); }
.rp-note-c { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
.coach-mark.sm { width: 22px; height: 22px; font-size: 11px; flex: none; border-radius: 50%; background: var(--hero); color: var(--hero-fg); display: grid; place-items: center; font-family: var(--font-display); }
.rp-work { fill: var(--accent-soft); opacity: .8; }
.rp-coach { margin-top: 12px; }
.rp-thread { max-height: none; }
.pred-why { margin: -6px 0 12px; }
.pred-stats.body { margin-top: 8px; }
.pred-foot { margin: 10px 0 0; font-size: 12px; }
.changes .chg { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.changes .chg:first-of-type { border-top: 0; }
.chg-top { display: flex; justify-content: space-between; align-items: baseline; }
.chg-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.changes .chg p { margin: 0; font-size: 13.5px; }
.changes .chg b { font-size: 14.5px; }
.rp-ask { display: block; margin: 16px 0 6px; }

/* ---- Run: the way back after a short week, the runner's choice (23 Oct 2026) ---- */
.comeback .cb-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 40px) 56px; align-items: center; column-gap: 6px; }
.comeback .cb-head { margin-top: 12px; padding: 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.comeback .cb-head span { text-align: right; white-space: nowrap; }
.comeback .cb-head span:first-child { text-align: left; }
.comeback .cb-opt { width: 100%; min-height: 52px; margin-top: 8px; padding: 6px 12px; border-radius: 14px; background: var(--bg); border: 1.5px solid transparent; font: inherit; color: inherit; text-align: left; transition: background .2s, border-color .2s; }
.comeback .cb-opt.on { background: var(--accent-soft); border-color: var(--accent); }
.comeback .cb-opt b { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.comeback .cb-opt i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--line-2); box-sizing: border-box; }
.comeback .cb-opt.on i { border: 5px solid var(--accent); }
.comeback .cb-opt .n { text-align: right; font-family: var(--font-display); font-size: 18px; }
.comeback .cb-opt .f { text-align: right; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.comeback .cb-opt.on .f { color: var(--accent); }
.comeback .cb-plain { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; }
.comeback .cb-why { margin: 10px 0 0; font-size: 12.5px; }

/* A session typed in part by part (2 Nov 2026): a grid, one row a part — the name and its plan, then
   time · km (· HR). Leonid: "a grid with all these segments … fill in the time of each split". */
.parts { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.parts-head, .part-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 60px; gap: 6px; align-items: center; }
.parts.with-hr .parts-head, .part-row.with-hr { grid-template-columns: minmax(0, 1fr) 68px 54px 52px; }
.parts-head { padding: 0 10px; font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.parts-head span[hidden] { display: none; }
.part-row { padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: #FFFDFA; }
.part-row.work { border-color: var(--accent); background: var(--accent-soft); }
.part-name { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.25; }
.part-name span { font-size: 12px; color: var(--muted); }
.part-row .input { padding: 10px 8px; min-height: 44px; font-size: 16px; text-align: center; }
.part-row .input[hidden] { display: none; }
.parts-tools { display: flex; gap: 8px; margin: 0 0 12px; }
.km-rows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.km-rows[hidden] { display: none; }
.km-rows .field { margin-bottom: 4px; }
.km-rows .input { padding: 11px 12px; min-height: 44px; }
.rp-part { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rp-part .hint { grid-column: 1 / -1; }
.field[hidden] { display: none; }