/* twoLazy — the LazyList look (Orchard v4 + ink tabs + ghost→send dock) as a PWA. */
:root{
  --peach:#FFE3C4; --blush:#FFD7CC; --cream:#FFFBF4; --paper:#FFF7EC;
  --ink:#3A2E26; --ink-soft:#7A6A5C; --ink-faint:#A89685;
  --leaf:#5FAE7E; --leaf-deep:#3E8C63; --berry:#E2715A; --berry-deep:#CC5742;
  --amber:#E8A33D; --tint-shadow:rgba(120,82,46,.16);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --soft:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* `hidden` is only display:none in the UA stylesheet, so ANY author display rule (.nudge/.sheet
   are flex) silently beats it and the element stays on screen. Make hidden actually hide. */
[hidden]{display:none !important;}
html,body{height:100%;margin:0;overscroll-behavior:none;}
body{
  font-family:'Outfit',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:linear-gradient(150deg,#FFE6CE 0%,#FFD9C9 38%,#D8E8D4 100%);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* dvh so Safari's collapsing toolbar can't cut the dock off the bottom */
  height:100dvh;
  display:flex;            /* let the card flex to fill, margins included */
}
button{font-family:inherit;}

.card{
  position:relative;flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;
  margin:10px;border-radius:26px;
  background:radial-gradient(120% 70% at 50% -6%, var(--peach), transparent 55%),
    linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);
  box-shadow:0 18px 44px -26px rgba(90,66,46,.75), 0 0 0 1px rgba(90,66,46,.05);
}

/* ---------- header ---------- */
header{padding:18px 20px 0;flex:0 0 auto;}
.top{display:flex;align-items:flex-start;gap:12px;}
.titles{flex:1;min-width:0;}
.kicker{color:var(--ink-soft);font-size:12.5px;font-weight:600;margin-bottom:2px;}
.wordmark,.runtitle{font-weight:800;font-size:38px;line-height:.96;margin:0;letter-spacing:-1.5px;}
.runtitle{font-size:30px;letter-spacing:-1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wordmark .dot{color:var(--amber);}
.mark{
  position:relative;width:54px;height:54px;flex:0 0 auto;border-radius:18px;margin-top:4px;
  background:linear-gradient(160deg,#FFEFD8,#FFE0C2);display:grid;place-items:center;
  box-shadow:0 7px 16px -8px rgba(180,120,60,.6), inset 0 0 0 1.5px rgba(255,255,255,.65);
}
.mark svg{width:32px;height:32px;}
.mark .mz{position:absolute;top:-7px;right:-4px;font-family:'Fraunces',serif;font-style:italic;
  font-weight:600;font-size:15px;color:var(--amber);}
.track{height:9px;border-radius:99px;background:rgba(90,66,46,.10);overflow:hidden;margin-top:14px;}
.track i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--leaf),#BFE0CE);transition:width .55s var(--spring);}
.meta{font-size:12px;color:var(--ink-soft);font-weight:500;margin-top:7px;}

/* ---------- tabs: ink underline ---------- */
.tabs{position:relative;display:flex;gap:26px;padding-bottom:9px;margin-top:16px;}
.tab{border:0;background:none;padding:2px 0;cursor:pointer;font-size:16px;font-weight:600;
  color:var(--ink-faint);display:flex;align-items:baseline;gap:6px;transition:color .28s;}
.tab .c{font-size:12.5px;font-weight:700;color:var(--ink-faint);transition:color .28s;}
.tab.on{color:var(--ink);}
.tab.on .c{color:var(--amber);}
.tabs .rule{position:absolute;left:0;bottom:0;height:3px;border-radius:3px;background:var(--amber);
  width:0;transition:transform .38s var(--spring), width .38s var(--spring);}

/* ---------- list ---------- */
.scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px 6px;}
.scroll::-webkit-scrollbar{width:0;}
.section{font-family:'Fraunces',serif;font-weight:600;font-size:15px;color:var(--ink-soft);
  margin:10px 4px 10px;}

.wrap{position:relative;margin-bottom:11px;border-radius:22px;}
.actions{position:absolute;inset:0;border-radius:22px;display:flex;align-items:center;
  overflow:hidden;opacity:0;pointer-events:none;}
.actions.done{opacity:1;background:linear-gradient(90deg,var(--leaf-deep),var(--leaf));}
.actions.del{opacity:1;background:linear-gradient(90deg,var(--berry),var(--berry-deep));}
.act{display:none;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:15.5px;
  height:100%;padding:0 22px;}
.act .chip{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
  transition:transform .25s var(--spring);}
.act .chip svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.a-done{margin-left:auto;flex-direction:row-reverse;}
.a-del{margin-right:auto;}
.actions.done .a-done{display:flex;}
.actions.del  .a-del {display:flex;}
.actions.armed .chip{transform:scale(1.18);background:rgba(255,255,255,.4);}

.row{
  position:relative;display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:22px;
  background:linear-gradient(315deg,#fff,var(--cream));
  box-shadow:0 8px 20px -12px var(--tint-shadow), 0 0 0 1px rgba(90,66,46,.05);
  touch-action:pan-y;transition:transform .42s var(--spring);
}
.row.dragging{transition:none;}
.wrap.in{animation:pop .45s var(--spring) both;}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}
.wrap.out{animation:leave .34s var(--soft) forwards;}
@keyframes leave{to{opacity:0;transform:translateX(60px) scale(.9);max-height:0;margin-bottom:0;}}
.pad{width:50px;height:50px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;
  font-size:25px;box-shadow:0 4px 10px -5px var(--tint-shadow);}
.name{flex:1;font-size:16.5px;font-weight:600;letter-spacing:-.1px;}
.pin{font-size:15px;transform:rotate(8deg);opacity:.85;}
.grab{width:18px;opacity:.4;display:flex;flex-direction:column;gap:3px;}
.grab i{height:2px;border-radius:2px;background:var(--ink-faint);}

.wrap.pinned .row{background:linear-gradient(315deg,#FFF4E4,#FFE9D0);
  box-shadow:0 10px 24px -12px rgba(194,112,47,.42), 0 0 0 1.5px rgba(217,138,78,.32);}

/* picked rows */
.picked{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:22px;margin-bottom:9px;
  background:linear-gradient(315deg,rgba(255,255,255,.72),rgba(255,251,244,.55));
  box-shadow:0 0 0 1px rgba(90,66,46,.04);}
.picked .tick{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--leaf),var(--leaf-deep));color:#fff;font-size:15px;font-weight:800;}
.picked .em{font-size:21px;opacity:.85;}
.picked .name{font-size:15px;font-weight:500;color:var(--ink-soft);text-decoration:line-through;}
.picked .x{color:var(--ink-faint);font-size:16px;padding:6px;}

/* finished run cards */
.runcard{border-radius:26px;margin-bottom:11px;overflow:hidden;
  background:linear-gradient(315deg,#fff,var(--cream));
  box-shadow:0 10px 24px -14px var(--tint-shadow), 0 0 0 1px rgba(90,66,46,.05);}
.runhead{display:flex;align-items:center;gap:14px;padding:15px 16px;cursor:pointer;}
.runemoji{width:48px;height:48px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;
  font-size:23px;background:linear-gradient(160deg,var(--peach),var(--blush));}
.runinfo{flex:1;min-width:0;}
.rname{font-family:'Fraunces',serif;font-weight:600;font-size:17px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rmeta{font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:2px;}
.chev{width:22px;color:var(--ink-faint);transition:transform .35s var(--spring);}
.runcard.open .chev{transform:rotate(180deg);color:var(--leaf-deep);}
.runbody{max-height:0;overflow:hidden;transition:max-height .42s var(--soft);}
.runinner{padding:2px 16px 14px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px;}
.chipi{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.7);
  border-radius:99px;padding:6px 12px 6px 9px;font-size:13px;font-weight:600;color:var(--ink-soft);
  box-shadow:0 0 0 1px rgba(90,66,46,.05);}
.regrab{display:block;margin-left:auto;border:0;cursor:pointer;font-size:13px;font-weight:700;
  color:var(--leaf-deep);background:rgba(95,174,126,.16);padding:9px 15px;border-radius:99px;}

/* ---------- dock ---------- */
.dock{flex:0 0 auto;padding:8px 16px 16px;background:linear-gradient(180deg,transparent,var(--paper) 34%);}
.composer{position:relative;display:flex;align-items:center;border-radius:26px;padding:7px 7px 7px 18px;
  background:linear-gradient(315deg,#fff,var(--cream));
  box-shadow:0 16px 34px -18px rgba(120,82,46,.5), 0 0 0 1px rgba(90,66,46,.06);transition:box-shadow .3s;}
.composer.hot{box-shadow:0 16px 34px -18px rgba(62,140,99,.5), 0 0 0 1.5px rgba(95,174,126,.4);}
/* 16px minimum or iOS Safari zooms the whole page on focus and never zooms back */
.composer input{flex:1;border:0;outline:0;background:transparent;font-size:16px;font-weight:500;
  color:var(--ink);min-height:44px;font-family:inherit;}
.composer input::placeholder{color:var(--ink-faint);}

.send{width:0;height:48px;flex:0 0 auto;border:0;padding:0;overflow:hidden;cursor:pointer;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 25%, #6FC18F, var(--leaf-deep));
  box-shadow:0 8px 18px -8px rgba(62,140,99,.85);transform:scale(.2);opacity:0;
  transition:width .34s var(--spring), margin .34s var(--spring),
             transform .34s var(--spring), opacity .2s;}
.composer.hot .send{width:48px;margin-left:8px;transform:scale(1);opacity:1;}
.send svg{width:23px;height:23px;display:block;}
.eyes,.mouth{transform-box:fill-box;transform-origin:center;}
/* wobble starts AFTER it lands, or it merges with the spring-in and reads as one motion */
.composer.hot .send svg{animation:wobble .85s var(--spring) .26s both;}
@keyframes wobble{
  0%{transform:rotate(-15deg) scale(.9,1.08);}
  35%{transform:rotate(9deg) scale(1.08,.94);}
  65%{transform:rotate(-4deg) scale(.98,1.02);}
  100%{transform:none;}}
/* the 💤 sit OUTSIDE the button — inside they'd be clipped by its own bounds */
.zfx{position:absolute;right:14px;top:-10px;width:64px;height:58px;pointer-events:none;}
.zfx i{position:absolute;font-family:'Fraunces',serif;font-style:italic;font-weight:700;
  color:var(--amber);opacity:0;text-shadow:0 1px 2px rgba(255,255,255,.85);}
.zfx .z1{font-size:19px;left:16px;top:30px;}
.zfx .z2{font-size:26px;left:30px;top:6px;}
.composer.hot .zfx .z1{animation:drift 1.6s var(--soft) .34s both;}
.composer.hot .zfx .z2{animation:drift 1.6s var(--soft) .62s both;}
@keyframes drift{
  0%{opacity:0;transform:translate(0,6px) scale(.6) rotate(-10deg);}
  25%{opacity:1;}
  100%{opacity:0;transform:translate(16px,-30px) scale(1.15) rotate(14deg);}}
/* the wink plays to completion BEFORE the item is added */
.send.wink .eyes{animation:squint .42s var(--spring) both;}
.send.wink .mouth{animation:grin .42s var(--spring) both;}
@keyframes squint{0%{transform:scaleY(1);}40%{transform:scaleY(.18);}100%{transform:scaleY(1);}}
@keyframes grin{0%{transform:none;}45%{transform:scale(1.18,1.35);}100%{transform:none;}}

.finish{width:100%;border:0;cursor:pointer;font-weight:800;font-size:14px;color:var(--leaf-deep);
  padding:14px;border-radius:18px;margin-top:12px;background:rgba(255,255,255,.8);
  box-shadow:0 6px 16px -10px var(--tint-shadow), 0 0 0 1px rgba(95,174,126,.25);
  animation:riseIn .38s var(--spring) both;}
@keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- All done ---------- */
.alldone{position:absolute;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;opacity:0;transition:opacity .4s var(--soft);
  background:radial-gradient(120% 70% at 50% 38%, rgba(255,243,226,.94) 0%, transparent 62%),
    linear-gradient(170deg,rgba(251,241,227,.97),rgba(241,239,230,.97));}
.alldone.go{display:flex;opacity:1;}
.alldone .halo{position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle, rgba(232,163,61,.2) 0%, transparent 70%);}
.alldone .mascot{position:relative;width:150px;height:150px;}
.alldone.go .mascot{animation:adPop .72s var(--spring) both, adBob 1.5s .95s ease-in-out;}
@keyframes adPop{0%{transform:scale(0) rotate(-8deg);}60%{transform:scale(1.12) rotate(2deg);}100%{transform:none;}}
@keyframes adBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.alldone .face{position:absolute;inset:0;border-radius:42px;
  background:linear-gradient(158deg,#FFEFD8,#FFE0C2);
  box-shadow:0 18px 34px -16px rgba(180,120,60,.55), inset 0 0 0 1.5px rgba(255,255,255,.65);}
.alldone svg{position:absolute;inset:0;width:100%;height:100%;}
.alldone .eye,.alldone .smile{fill:none;stroke-linecap:round;stroke-width:5;}
.alldone .eye{stroke:var(--ink);} .alldone .smile{stroke:#D98A2E;}
.alldone .zzz span{position:absolute;font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  color:var(--amber);opacity:0;}
.alldone .zzz span:nth-child(1){font-size:18px;left:112px;top:44px;}
.alldone .zzz span:nth-child(2){font-size:24px;left:128px;top:20px;}
.alldone .zzz span:nth-child(3){font-size:32px;left:146px;top:-6px;}
.alldone.go .zzz span:nth-child(1){animation:adDrift 1.7s .85s ease-out forwards;}
.alldone.go .zzz span:nth-child(2){animation:adDrift 1.7s 1.08s ease-out forwards;}
.alldone.go .zzz span:nth-child(3){animation:adDrift 1.7s 1.34s ease-out forwards;}
@keyframes adDrift{0%{opacity:0;transform:translate(0,6px) scale(.7);}25%{opacity:1;}
  100%{opacity:0;transform:translate(14px,-46px) scale(1.1);}}
.alldone h2{margin:0;font-size:32px;font-weight:800;letter-spacing:-.8px;opacity:0;}
.alldone.go h2{animation:adRise .7s 1.25s var(--soft) forwards;}
@keyframes adRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- re-grab sheet ---------- */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(40,28,18,.42);}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;display:flex;flex-direction:column;
  max-height:82%;border-radius:30px 30px 0 0;
  background:linear-gradient(180deg,var(--cream),var(--paper));
  box-shadow:0 -18px 50px -18px rgba(58,30,8,.5);
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateY(101%);transition:transform .42s var(--spring);}
.sheet.up{transform:none;}
.sheet .grab{width:40px;height:5px;border-radius:99px;background:rgba(90,66,46,.2);margin:11px auto 4px;}
.sheetHead{padding:8px 20px 12px;}
.sheetHead .row1{display:flex;align-items:center;gap:9px;font-size:22px;}
.sheetHead input{flex:1;border:0;outline:0;background:transparent;font-family:'Fraunces',serif;
  font-weight:600;font-size:21px;color:var(--ink);min-width:0;}
.sheetHead .row2{display:flex;align-items:center;gap:8px;margin-top:6px;}
.sheetHead .row2 span{flex:1;font-size:12.5px;color:var(--ink-soft);font-weight:500;}
.sheetHead .row2 button{border:0;cursor:pointer;font-size:12px;font-weight:700;color:var(--leaf-deep);
  background:rgba(95,174,126,.16);padding:5px 11px;border-radius:99px;}
.sheetList{flex:1 1 auto;overflow-y:auto;padding:4px 18px 8px;}
.pick{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:16px;margin-bottom:8px;
  background:linear-gradient(315deg,#fff,var(--cream));box-shadow:0 0 0 1px rgba(90,66,46,.05);}
.pick.off{opacity:.5;}
.pick .pe{font-size:21px;width:30px;text-align:center;}
.pick .pn{flex:1;font-size:15.5px;font-weight:600;}
.pick.off .pn{text-decoration:line-through;color:var(--ink-faint);}
.pick .box{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;color:#fff;
  font-size:15px;font-weight:800;background:linear-gradient(160deg,var(--leaf),var(--leaf-deep));}
.pick.off .box{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(90,66,46,.2);color:transparent;}
.sheetFoot{display:flex;gap:11px;padding:12px 18px 0;}
.sheetFoot button{border:0;cursor:pointer;font-weight:700;font-size:14.5px;padding:15px;border-radius:18px;}
.sheetFoot .cancel{color:var(--ink-soft);background:rgba(90,66,46,.08);padding-left:20px;padding-right:20px;}
.sheetFoot .confirm{flex:1;color:#fff;background:linear-gradient(160deg,var(--leaf),var(--leaf-deep));}
.sheetFoot .confirm:disabled{opacity:.45;}

/* ---------- install nudge ---------- */
/* in the flow at the top of the card, so it pushes the header down instead of covering it */
.nudge{flex:0 0 auto;margin:14px 16px 0;display:flex;flex-direction:column;
  gap:6px;padding:14px 16px;border-radius:20px;background:linear-gradient(160deg,var(--ink),#2a211a);
  color:var(--paper);box-shadow:0 14px 30px -18px rgba(58,30,8,.7);font-size:13px;line-height:1.5;}
.nudge b{font-weight:700;}
.nudge button{align-self:flex-end;margin-top:4px;border:0;cursor:pointer;font-weight:700;font-size:13px;
  color:var(--ink);background:var(--paper);padding:8px 14px;border-radius:99px;}