:root{
  --bg:#0d0e12; --surface:#16181f; --surface-2:#1e212b; --line:#272b37;
  --text:#e9ebf2; --muted:#8a90a2; --accent:#ff7a45; --ok:#46d19b;
  --warn:#ffc861; --danger:#ff5c68; --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",Segoe UI,Roboto,sans-serif;
  overscroll-behavior-y:none}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
h2{font-size:22px} h3{font-size:15px}
.muted{color:var(--muted)} .small{font-size:13px}
.err{color:var(--danger);font-size:13px;min-height:18px;margin:8px 0 0}

/* ---------- login ---------- */
.screen{min-height:100dvh;padding:24px}
.center{display:flex;align-items:center;justify-content:center}
.login-card{width:100%;max-width:340px;text-align:center}
.brand{font-size:40px;letter-spacing:-.03em;margin-bottom:2px}
.brand span{color:var(--accent)}
.who{display:flex;flex-direction:column;gap:10px;margin:18px 0 4px}
.who button{padding:18px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);color:var(--text);font-size:17px;font-weight:600}
.who button.sel{border-color:var(--accent);background:#2a1a13;color:var(--accent);
  opacity:.7}

/* ---------- layout ---------- */
.tab{padding:calc(12px + env(safe-area-inset-top)) 14px 20px}
.topbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:6px 2px 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:12px}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.two{display:flex;gap:10px;margin-bottom:10px}
.two label{flex:1;font-size:13px;color:var(--muted);display:block}

/* ---------- controls ---------- */
.btn{border:none;border-radius:11px;padding:12px 16px;font-size:15px;font-weight:600;
  color:var(--text);background:var(--surface-2)}
.btn.primary{background:var(--accent);color:#1a0d06}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.danger{background:transparent;border:1px solid var(--danger);color:var(--danger)}
.btn.small{padding:9px 13px;font-size:14px}
.btn.full{width:100%;margin-top:4px}
.btn:disabled{opacity:.45}
.input{width:100%;background:var(--surface-2);border:1px solid var(--line);
  border-radius:11px;padding:12px;color:var(--text);font-size:16px;margin-bottom:8px}
.input:focus{outline:none;border-color:var(--accent)}
select.input{appearance:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:9px 14px;font-size:14px;color:var(--text);font-weight:550}
.chip.subtle{color:var(--muted)}
.chip.accent{border-color:#3a2418;background:#1d1610;color:var(--accent)}
.icon-btn{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;font-size:17px;display:flex;align-items:center}
.pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:13px;color:var(--muted)}
.code{display:block;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:10px;font-size:11px;word-break:break-all;margin:8px 0;font-family:ui-monospace,monospace}

/* ---------- tasks ---------- */
.task{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:none}
.task .box{width:26px;height:26px;flex:0 0 26px;border-radius:8px;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:transparent}
.task.done .box{background:var(--ok);border-color:var(--ok);color:#08130e}
.task .label{flex:1;font-size:15px}
.task.done .label{color:var(--muted);text-decoration:line-through}
.task .src{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.ring{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;
  background:conic-gradient(var(--ok) var(--pct,0%),var(--surface-2) 0);position:relative}
.ring span{position:absolute;inset:5px;background:var(--bg);border-radius:50%;
  display:flex;align-items:center;justify-content:center}

.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-bottom:10px}
.bar-fill{height:100%;background:var(--accent);width:0;transition:width .25s}

/* ---------- evidence ---------- */
.evidence{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ev{width:78px;position:relative}
.ev img{width:78px;height:78px;object-fit:cover;border-radius:10px;display:block;
  border:2px solid var(--line)}
.ev.pass img{border-color:var(--ok)} .ev.fail img{border-color:var(--danger)}
.ev.unsure img{border-color:var(--warn)}
.ev .v{font-size:10px;text-align:center;margin-top:3px;color:var(--muted)}
.ev .x{position:absolute;top:-6px;right:-6px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:50%;width:22px;height:22px;font-size:12px;
  color:var(--muted);line-height:1}
.verdict{margin-top:10px;padding:11px;border-radius:11px;font-size:13px;
  background:var(--surface-2);border:1px solid var(--line)}
.verdict.fail{border-color:var(--danger)} .verdict.unsure{border-color:var(--warn)}
.verdict .btn{margin-top:9px}

/* ---------- food ---------- */
.food-actions{margin-bottom:12px}
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msg{padding:11px 13px;border-radius:14px;max-width:88%;font-size:15px;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--accent);color:#1a0d06;border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.msg.sys{align-self:center;font-size:12px;color:var(--muted);background:none;padding:2px}
.msg img{max-width:150px;border-radius:9px;display:block;margin-bottom:6px}
.typing{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

.opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px;margin-bottom:9px}
.opt .t{font-weight:650;margin-bottom:3px}
.opt .why{font-size:13px;color:var(--accent);margin-bottom:6px}
.opt .d{font-size:13px;color:var(--muted);margin-bottom:9px}
.opt .macros{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-bottom:10px}
.opt .macros b{color:var(--text);font-weight:650}

.composer{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.composer .input{margin-bottom:0}

.f-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.f-item:last-child{border-bottom:none}
.f-item .n{flex:1}
.f-item .n small{display:block;color:var(--muted);font-size:12px}
.f-item .k{font-variant-numeric:tabular-nums;font-weight:650}
.f-item .x{background:none;border:none;color:var(--muted);font-size:17px;padding:4px 6px}
.totals{display:flex;gap:14px;font-size:13px;margin-top:10px;flex-wrap:wrap}
.totals b{font-variant-numeric:tabular-nums}

/* ---------- grid ---------- */
.person{margin-bottom:18px}
.person-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.grid{display:grid;grid-template-columns:repeat(15,1fr);gap:3px}
.cell{aspect-ratio:1;border-radius:3px;background:var(--surface-2)}
.cell.complete{background:var(--ok)}
.cell.partial{background:linear-gradient(to top,var(--accent) var(--f,50%),var(--surface-2) 0)}
.cell.missed{background:#3a1d22}
.cell.today{box-shadow:0 0 0 2px var(--accent)}
.legend{display:flex;gap:12px;font-size:11px;color:var(--muted);margin-top:8px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:4px}

/* ---------- memory ---------- */
.mem{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.mem:last-child{border-bottom:none}
.mem .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mem .b{flex:1;font-size:14px}
.mem .x{background:none;border:none;color:var(--muted);font-size:16px}
.mem-add{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.danger-card{border-color:#3a2126}

/* ---------- tabbar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;
  background:rgba(13,14,18,.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:20}
.tab-btn{flex:1;background:none;border:none;color:var(--muted);font-size:11px;
  padding:9px 0 8px;display:flex;flex-direction:column;align-items:center;gap:2px}
.tab-btn span{font-size:19px;line-height:1}
.tab-btn.active{color:var(--accent)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom));
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:11px 16px;font-size:14px;z-index:40;max-width:90%;text-align:center}
.upload-row label{cursor:pointer}

/* ============================================================
   Motion
   Everything below is transform/opacity only so it stays on the
   compositor - this runs on phones, and the box has 2 vCPU.
   ============================================================ */

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

:root{ --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,.9,.28,1) }

@keyframes rise      { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes tabIn     { from{opacity:0;transform:translateY(8px) scale(.995)} to{opacity:1;transform:none} }
@keyframes popIn     { from{opacity:0;transform:scale(.86)} to{opacity:1;transform:scale(1)} }
@keyframes msgIn     { from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }
@keyframes cellPop   { from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }
@keyframes checkPop  { 0%{transform:scale(.4);opacity:0} 55%{transform:scale(1.25);opacity:1} 100%{transform:scale(1)} }
@keyframes boxPulse  { 0%{box-shadow:0 0 0 0 rgba(70,209,155,.55)} 100%{box-shadow:0 0 0 14px rgba(70,209,155,0)} }
@keyframes toastIn   { from{opacity:0;transform:translate(-50%,14px) scale(.96)} to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes dot       { 0%,80%,100%{transform:translateY(0);opacity:.35} 40%{transform:translateY(-5px);opacity:1} }
@keyframes shimmer   { from{transform:translateX(-100%)} to{transform:translateX(220%)} }
@keyframes ringPulse { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes brandIn   { from{opacity:0;transform:translateY(-10px) scale(.94)} to{opacity:1;transform:none} }

/* --- entrances --- */
.tab:not(.hidden){ animation:tabIn .3s var(--ease) both }
.tab:not(.hidden) > .card,
.tab:not(.hidden) > .chips,
.tab:not(.hidden) > .thread,
.tab:not(.hidden) > #people > .person{
  animation:rise .42s var(--ease) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
.brand{ animation:brandIn .5s var(--spring) both }
.who button{ animation:rise .45s var(--spring) both; animation-delay:calc(var(--i,0) * 80ms + 120ms) }
#picker p, #gate p{ animation:rise .4s var(--ease) both; animation-delay:80ms }

/* --- press feedback: the app should feel physical --- */
.btn, .chip, .tab-btn, .who button, .task, .icon-btn{
  transition:transform .13s var(--ease), background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.btn:active, .chip:active, .who button:active, .icon-btn:active{ transform:scale(.94) }
.task:active{ transform:scale(.985) }
.tab-btn:active span{ transform:scale(.86) }
.tab-btn span{ transition:transform .18s var(--spring) }
.tab-btn.active span{ transform:scale(1.14) }

/* --- task ticking --- */
.task .box{ transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .28s var(--spring) }
.task.done .box{ animation:checkPop .38s var(--spring) }
.task.just-done .box{ animation:checkPop .38s var(--spring), boxPulse .6s var(--ease) }
.task .label{ transition:color .25s var(--ease) }
/* animate the strikethrough drawing itself rather than snapping on */
.task .label{ text-decoration:none !important }
.task .label span{ position:relative; display:inline }
.task .label span::after{
  content:''; position:absolute; left:0; top:52%; height:1.5px; width:0;
  background:currentColor; opacity:.75; transition:width .32s var(--ease);
}
.task.done .label span::after{ width:100% }

/* --- progress ring: animate the sweep, not just the number --- */
@property --pct{ syntax:'<percentage>'; initial-value:0%; inherits:false }
.ring{ transition:--pct .65s var(--ease) }
.ring.celebrate{ animation:ringPulse .6s var(--spring) }

/* --- bars --- */
.bar-fill{ transition:width .45s var(--ease); position:relative; overflow:hidden }
.bar-fill::after{
  content:''; position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmer 2.4s var(--ease) infinite;
}
.bar-fill[style*="width: 100%"]{ background:var(--ok) }

/* --- chat --- */
.msg{ animation:msgIn .3s var(--spring) both }
.opt{ animation:popIn .34s var(--spring) both; animation-delay:calc(var(--i,0) * 70ms) }
.typing{
  width:auto;height:auto;background:none;animation:none;
  display:inline-flex;gap:4px;align-items:center
}
.typing i{
  width:6px;height:6px;border-radius:50%;background:var(--muted);display:block;
  animation:dot 1.15s infinite var(--ease);
}
.typing i:nth-child(2){ animation-delay:.15s }
.typing i:nth-child(3){ animation-delay:.3s }
/* a caret while text streams in, so it reads as live */
.msg.streaming::after{
  content:''; display:inline-block; width:2px; height:1em; margin-left:2px;
  background:currentColor; vertical-align:-2px; animation:dot .9s steps(1) infinite;
}

/* --- grid --- */
/* Capped: 75 cells at 7ms each took over half a second and replayed on
   every visit to the tab, which read as flicker rather than motion. */
.cell{ animation:cellPop .3s var(--spring) both;
  animation-delay:calc(min(var(--i,0), 25) * 6ms) }
.cell{ transition:background-color .3s var(--ease), box-shadow .3s var(--ease) }
.cell.today{ animation:cellPop .3s var(--spring) both, boxPulse 2.2s var(--ease) infinite 1s }

/* --- evidence + memory --- */
.ev{ animation:popIn .32s var(--spring) both }
.verdict{ animation:rise .32s var(--ease) both }
.mem, .f-item{ animation:rise .3s var(--ease) both }

/* --- toast --- */
.toast{ animation:toastIn .32s var(--spring) }

/* --- day-complete burst --- */
.burst{ position:fixed; inset:0; pointer-events:none; z-index:60 }
.burst i{
  position:absolute; width:8px; height:8px; border-radius:2px;
  animation:fly var(--d,900ms) var(--ease) forwards;
}
@keyframes fly{
  from{ transform:translate(0,0) scale(1) rotate(0); opacity:1 }
  to  { transform:translate(var(--x),var(--y)) scale(.2) rotate(var(--r)); opacity:0 }
}

/* --- number roll --- */
.k, .totals b, .ring span{ font-variant-numeric:tabular-nums }

/* ============================================================
   Food tab as a chat
   Full-height column: header, scrolling thread, pinned composer.
   The thread is the page here - the log lives in a sheet.
   ============================================================ */

#tab-food.chat:not(.hidden){
  position:fixed; left:0; right:0; top:0;
  bottom:calc(64px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.chat-head{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom:1px solid var(--line); background:var(--bg);
}
/* The bar is the way into the day's log, so it has to read as a button:
   a label, a chevron, and a fill that changes as you eat. */
.totals-bar{
  flex:1; display:grid; grid-template-columns:1fr auto; gap:2px 10px;
  text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:9px 12px 10px; color:var(--text);
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  transition:transform .13s var(--ease), border-color .2s, background-color .2s;
}
.totals-bar:active{ transform:scale(.98); background:var(--surface-2) }
.tb-nums{ display:flex; align-items:baseline; gap:8px; min-width:0 }
.tb-nums b{ font-weight:700 }
.tb-nums .muted{ font-size:12px; font-weight:600 }
.tb-cta{
  display:flex; align-items:center; gap:4px; justify-self:end;
  font-size:12px; font-weight:650; color:var(--accent); white-space:nowrap;
}
.tb-cta .chev{ font-size:15px; line-height:1; transform:translateY(-1px) }
.tb-bar{
  grid-column:1 / -1; height:4px; border-radius:99px;
  background:var(--surface-2); overflow:hidden; margin-top:5px;
}
.tb-bar i{
  display:block; height:100%; width:0; background:var(--accent);
  transition:width .45s var(--ease);
}
.tb-bar i.over{ background:var(--danger) }
.chat-head .icon-btn{ flex:0 0 auto }

#tab-food .thread{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 12px 4px; margin:0; gap:10px;
  display:flex; flex-direction:column; min-height:0;
}
/* short conversations sit on the composer instead of floating mid-screen */
#tab-food .thread > *:first-child{ margin-top:auto }

.starters{ flex:0 0 auto; padding:8px 12px; gap:8px }
.starters .chip{ font-size:13px }

.attached{
  flex:0 0 auto; padding:0 14px 6px; font-size:12px; color:var(--muted);
}
#tab-food .composer{
  flex:0 0 auto; margin:0; gap:8px; padding:8px 12px 10px;
  border-top:1px solid var(--line); background:var(--bg);
}
#tab-food .composer .input{ flex:1; border-radius:999px; padding:12px 16px }
.btn.send{
  flex:0 0 auto; width:42px; height:42px; padding:0; border-radius:50%;
  font-size:19px; line-height:1; display:flex; align-items:center;
  justify-content:center;
}

/* empty state */
.thread-empty{
  margin:auto 0 8px; text-align:center; color:var(--muted); font-size:14px;
  animation:rise .5s var(--ease) both;
}
.thread-empty b{ display:block; color:var(--text); font-size:17px; margin-bottom:6px }

/* logged receipt inside the thread */
.receipt{
  align-self:flex-start; max-width:88%; font-size:13px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:9px 12px; animation:msgIn .3s var(--spring) both;
}
.receipt b{ color:var(--ok) }
.receipt div{ color:var(--text) }

.opt.chosen{ border-color:var(--ok); background:#12211b }
.opt.chosen .btn{ display:none }
.opt .taken{ font-size:12px; color:var(--ok); font-weight:650 }

/* bottom sheet for the day's log */
.sheet{ position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end }
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  animation:fadeIn .22s var(--ease) both;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes sheetUp{ from{transform:translateY(100%)} to{transform:none} }
.sheet-card{
  position:relative; width:100%; max-height:78vh; overflow-y:auto;
  background:var(--surface); border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  padding:16px 14px calc(20px + env(safe-area-inset-bottom));
  animation:sheetUp .3s var(--ease) both;
}
.sheet-card .x{
  background:none; border:none; color:var(--muted); font-size:24px;
  line-height:1; padding:0 4px;
}

/* ============================================================
   Day header + the 75-day strip
   ============================================================ */

.dayhead{ padding:6px 2px 12px }
.dayhead-main{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.daynum{ display:flex; align-items:baseline; gap:7px }
.daynum b{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.1 }
.daynum span{ font-size:14px; color:var(--muted); font-weight:600 }
.dayhead-sub{ display:flex; align-items:center; gap:10px; margin-top:8px }
.chip.tiny{ padding:5px 11px; font-size:12px; border-color:var(--accent); color:var(--accent) }

.daystrip{
  display:flex; gap:7px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:2px 2px 12px; margin:0 -14px 4px; padding-left:14px; padding-right:14px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.daystrip::-webkit-scrollbar{ display:none }
.dpill{
  flex:0 0 auto; width:46px; scroll-snap-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:7px 0 6px; display:flex; flex-direction:column; align-items:center;
  gap:3px; color:var(--muted);
  transition:transform .15s var(--spring), border-color .2s, background-color .2s;
  animation:popIn .3s var(--spring) both; animation-delay:calc(var(--i,0) * 4ms);
}
.dpill:active{ transform:scale(.93) }
.dpill .dw{ font-size:10px; letter-spacing:.06em; opacity:.7 }
.dpill .dn{ font-size:15px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums }
.dpill .dbar{
  width:26px; height:3px; border-radius:99px; background:var(--surface-2);
  overflow:hidden; display:block;
}
.dpill .dbar i{ display:block; height:100%; background:var(--accent); transition:width .3s var(--ease) }
.dpill.complete .dbar i{ background:var(--ok) }
.dpill.complete{ border-color:rgba(70,209,155,.45) }
.dpill.missed{ border-color:rgba(255,92,104,.35) }
.dpill.missed .dn{ color:#ff8f97 }
.dpill.future .dn{ color:var(--muted); font-weight:600 }
.dpill.now{ border-color:var(--accent) }
.dpill.sel{ background:var(--surface-2); border-color:var(--accent); transform:scale(1.06) }
.dpill.sel .dn{ color:var(--accent) }

.future-note{
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; font-size:13px; color:var(--muted); margin-bottom:12px;
}
/* looking ahead is browsing, not editing */
#tab-today.readonly #tasks .task,
#tab-today.readonly .chips .chip,
#tab-today.readonly .upload-row label{ opacity:.4; pointer-events:none }

/* ============================================================
   Progress photo library
   ============================================================ */

.film{
  display:flex; gap:9px; overflow-x:auto; padding:2px 0 6px;
  margin:0 -14px; padding-left:14px; padding-right:14px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.film::-webkit-scrollbar{ display:none }
.frame{
  flex:0 0 auto; background:none; border:none; padding:0; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:5px; align-items:center;
  transition:transform .15s var(--spring);
}
.frame:active{ transform:scale(.95) }
.frame img{
  width:92px; height:122px; object-fit:cover; border-radius:11px; display:block;
  border:1px solid var(--line); background:var(--surface-2);
}
.frame .fday{ font-size:11px; color:var(--muted); font-weight:600 }

.viewer{
  position:fixed; inset:0; z-index:70; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:fadeIn .2s var(--ease) both;
}
.viewer-track{
  flex:1 1 auto; width:100%; display:flex; align-items:center; justify-content:center;
  padding:56px 10px 10px; min-height:0;
}
.viewer-track img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:10px;
  animation:popIn .28s var(--ease) both;
}
.viewer-cap{
  flex:0 0 auto; padding:12px 16px calc(20px + env(safe-area-inset-bottom));
  font-size:14px; color:var(--text); text-align:center; width:100%;
}
.viewer-cap .muted{ display:block; font-size:12px; margin-top:3px }
.viewer-close{
  position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px;
  z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:22px;
  line-height:1;
}
.learned-note{ margin:10px 0 0; opacity:.75 }

/* ---------- log sheet ---------- */
.grabber{
  width:38px; height:4px; border-radius:99px; background:var(--line);
  margin:-6px auto 12px;
}
.macros-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-bottom:16px;
}
.macro-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12px; color:var(--muted); margin-bottom:5px;
}
.macro-top b{ color:var(--text); font-size:14px; font-variant-numeric:tabular-nums }
.macro-top b .muted{ font-weight:500; font-size:12px }
.macro-bar{ height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden }
.macro-bar i{ display:block; height:100%; width:0; transition:width .5s var(--ease) }

.meal{ margin-bottom:14px }
.meal:last-child{ margin-bottom:0 }
.meal-head{
  display:flex; justify-content:space-between; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; font-weight:650;
  padding-bottom:4px; border-bottom:1px solid var(--line); margin-bottom:2px;
}

/* ---------- Us ---------- */
.us-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:6px 2px 16px;
}
.us-head p{ margin:3px 0 0 }
.together{
  display:flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:9px 13px;
}
.together b{ font-size:24px; font-weight:700; color:var(--ok); line-height:1 }
.together span{ font-size:10px; color:var(--muted); line-height:1.25; font-weight:600 }

.p-head{ display:flex; align-items:center; gap:11px; margin-bottom:13px }
.avatar{
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  background:hsl(var(--hue) 70% 22%); color:hsl(var(--hue) 85% 72%);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px;
}
.p-id{ flex:1; min-width:0 }
.p-id h3{ display:flex; align-items:center; gap:7px }
.p-id .you{
  font-size:10px; font-weight:650; color:var(--muted); border:1px solid var(--line);
  border-radius:99px; padding:1px 7px; letter-spacing:.03em;
}
.p-id p{ margin:2px 0 0 }
.p-streak{ text-align:right; flex:0 0 auto }
.p-streak b{
  display:block; font-size:20px; font-weight:700; line-height:1; color:var(--ok);
  font-variant-numeric:tabular-nums;
}
.p-streak span{ font-size:10px; color:var(--muted); font-weight:600 }
.p-streak.zero b{ color:var(--muted) }

.p-stats{
  display:flex; gap:8px; margin-top:13px; padding-top:13px;
  border-top:1px solid var(--line);
}
.p-stats > div{ flex:1; min-width:0 }
.p-stats b{
  display:block; font-size:17px; font-weight:700; line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.p-stats span{ font-size:11px; color:var(--muted); font-weight:600 }

.p-photos{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line) }
.p-photos-head{
  display:flex; justify-content:space-between; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; font-weight:650; margin-bottom:9px;
}
.empty-photos{ margin:0 }
#tab-us .legend{ margin:2px 4px 10px; justify-content:center }

/* Today's cell is outlined as "today" but should still show how far in you are */
.cell.today{
  background:linear-gradient(to top,var(--accent) var(--f,0%),var(--surface-2) 0);
}

/* ============================================================
   Apple activity rings
   ============================================================ */

.rings-card{ padding:16px 14px 14px }
.rings-main{ display:flex; align-items:center; gap:18px }
.rings{ width:118px; height:118px; flex:0 0 118px; transform:rotate(-90deg) }
.rings .trk, .rings .arc{
  fill:none; stroke-width:11; stroke-linecap:round;
}
.rings .trk{ stroke:var(--surface-2) }
.rings .arc{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .9s cubic-bezier(.22,.9,.28,1);
  filter:drop-shadow(0 0 5px currentColor);
}
.rings .move{ stroke:#fa1e4e; color:#fa1e4e }
.rings .exercise{ stroke:#a2f60a; color:#a2f60a }
.rings .stand{ stroke:#1ad5de; color:#1ad5de }

.ring-stats{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px }
.rs{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.rs span{
  flex:0 0 100%; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  font-weight:700; opacity:.85;
}
.rs b{ font-size:21px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums }
.rs i{ font-style:normal; font-size:12px; color:var(--muted); font-weight:600 }
.rs.move span, .rs.move b{ color:#ff4e73 }
.rs.exercise span, .rs.exercise b{ color:#b6ff3d }
.rs.stand span, .rs.stand b{ color:#43e3ea }

.ring-foot{
  display:flex; gap:10px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line);
}
.ring-foot > div{ flex:1 }
.ring-foot b{
  display:block; font-size:18px; font-weight:700; line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.ring-foot span{ font-size:11px; color:var(--muted); font-weight:600 }

/* ---------- Health sync status ---------- */
.hs-head{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line) }
.hs{
  display:flex; align-items:center; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:13px;
}
.hs:last-of-type{ border-bottom:none }
.hs-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px }
.hs.ok .hs-dot{ background:var(--ok) }
.hs.miss .hs-dot{ background:#4a3038; border:1px solid var(--danger) }
.hs-n{ flex:1; min-width:0 }
.hs.miss .hs-n{ color:var(--muted) }
.hs-v{ font-size:11px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums }
.hs.miss .hs-v{ color:var(--danger); opacity:.85 }
.hs-help{ margin:12px 0 0; line-height:1.5 }
.two label:nth-child(3){ flex:1 }

.rings-hint{
  margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line);
  text-align:center;
}
/* empty rings should look deliberate, not failed */
.rings-card:has(#rings-hint:not(.hidden)) .arc{ filter:none; opacity:.5 }