:root{
  --bg:#f4f5f9; --card:#ffffff; --ink:#23262e; --muted:#646b78; --faint:#9aa0ad;
  --rule:#e7e9f0; --accent:#5566e6; --accent-deep:#4554d6; --accent-soft:#eceefb;
  --rest:#5566e6; --done:#aeb3bf;
  --f:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shadow:0 1px 2px rgba(40,45,70,.04); --shadow-lg:0 2px 12px rgba(60,70,120,.06);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f);
  font-size:15px; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.wrap{max-width:53rem; margin:0 auto;
  padding:max(clamp(1.3rem,4vw,2.4rem),env(safe-area-inset-top)) clamp(1rem,4vw,2rem) 6rem;}

.kicker{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; display:flex; align-items:center; gap:.4rem; margin:0;}
.kicker .sub{color:var(--faint); font-weight:500; text-transform:none; letter-spacing:0;}

/* ---- sign in ---- */
.signin{min-height:84vh; display:flex; flex-direction:column; justify-content:center; max-width:23rem; margin:0 auto;}
.signin h1{font-size:clamp(2.2rem,7vw,2.9rem); font-weight:700; letter-spacing:-0.03em; line-height:1.04; margin:1rem 0 .6rem;}
.signin p{color:var(--muted); margin:0 0 1.5rem; line-height:1.6;}
.signin form{display:flex; flex-direction:column; gap:.7rem;}
.signin input{font-family:var(--f); font-size:1rem; padding:.85rem 1rem; color:var(--ink); background:var(--card); border:1px solid var(--rule); border-radius:12px; outline:none; box-shadow:var(--shadow);}
.signin input:focus{border-color:var(--accent);}
.signin button{font-family:var(--f); font-size:.95rem; font-weight:700; cursor:pointer; background:var(--accent); color:#fff; border:none; border-radius:12px; padding:.85rem 1rem;}
.signin button:hover{background:var(--accent-deep);}
.signin .msg{font-size:.85rem; color:var(--muted); min-height:1.2rem;}
.signin .fine{font-size:.74rem; color:var(--faint); margin-top:1.5rem; line-height:1.6;}

/* ---- masthead ---- */
.mast{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem;}
.eyebrow{font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 .35rem;}
.date{font-size:clamp(2.1rem,6vw,3rem); font-weight:700; letter-spacing:-0.03em; line-height:1; margin:0;}
.controls{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; justify-content:flex-end;}
.ctl{font-family:var(--f); font-size:1.05rem; line-height:1; color:var(--muted); background:var(--card); border:1px solid var(--rule); cursor:pointer; padding:.35rem .55rem; border-radius:100px; box-shadow:var(--shadow);}
.ctl:hover{color:var(--ink); border-color:var(--accent);}
.ctl.txt{font-size:.7rem; letter-spacing:.02em; text-transform:none; font-weight:600; padding:.45rem .8rem;}

/* ---- capture ---- */
.capture{display:flex; align-items:center; gap:.7rem; padding:.95rem 1.1rem; margin-bottom:.6rem;
  background:var(--card); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow);}
.capture::before{content:"+"; color:var(--accent); font-size:1.3rem; line-height:1; font-weight:600;}
.capture input{flex:1 1 auto; border:none; background:none; outline:none; font-family:var(--f); font-size:.95rem; font-weight:500; color:var(--ink);}
.capture input::placeholder{color:var(--faint); font-weight:400;}
.toast{font-size:.72rem; color:var(--accent); font-weight:600; opacity:0; transition:opacity .3s; white-space:nowrap;}
.toast.show{opacity:1;}

/* ---- inbox ---- */
.inboxbar{margin-bottom:2rem;}
.inboxtoggle{font-size:.74rem; font-weight:600; color:var(--accent); background:var(--accent-soft); border:none; cursor:pointer; padding:.32rem .8rem; border-radius:100px;}
.inboxtoggle:hover{background:#e2e5fa;}
.inboxlist{margin-top:.7rem; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:.3rem 1rem; box-shadow:var(--shadow);}
.inrow{display:flex; align-items:center; gap:.6rem; padding:.55rem 0; border-bottom:1px solid var(--rule);}
.inrow:last-child{border-bottom:none;}
.inrow .it{flex:1 1 auto; min-width:0; font-size:.9rem; font-weight:500; color:var(--ink); outline:none; word-break:break-word;}
.inact{font-size:.66rem; font-weight:600; color:var(--accent); background:var(--accent-soft); border:none; border-radius:100px; cursor:pointer; padding:.28rem .65rem; white-space:nowrap;}
.inact:hover{background:#e2e5fa;}
.inact.x{background:none; color:var(--faint); padding:.28rem .4rem;}
.inact.x:hover{color:var(--ink);}

/* ---- routines (card) ---- */
.routines{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.15rem 1.3rem; margin-bottom:1rem; box-shadow:var(--shadow);}
.routines .rhead{margin-bottom:.7rem;}
.rcols{display:grid; grid-template-columns:1fr 1fr; gap:.1rem 2rem;}
.rgroup h5{font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:.1rem 0 .4rem;}
.ritem{display:flex; align-items:center; gap:.55rem; padding:.2rem 0; font-size:.88rem; color:var(--muted); font-weight:500;}
.ritem .rt{outline:none;}
.tick{width:1.1rem; height:1.1rem; border:2px solid var(--faint); border-radius:6px; flex:0 0 auto; background:none; cursor:pointer; padding:0; position:relative;}
.tick:hover{border-color:var(--accent);}
.tick.on{background:var(--accent); border-color:var(--accent);}
.tick.on::after{content:""; position:absolute; left:4px; top:1px; width:3px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);}
.ritem.done .rt{color:var(--done); text-decoration:line-through;}
.radd{font-size:.74rem; color:var(--faint); font-weight:600; background:none; border:none; cursor:pointer; padding:.25rem 0; margin-top:.2rem;}
.radd:hover{color:var(--accent);}

/* ---- DO hero (card) ---- */
.hero{background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:1.3rem 1.4rem; margin-bottom:1.4rem; box-shadow:var(--shadow-lg);}
.hero-head{display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem;}
.stat{display:flex; align-items:baseline; gap:.55rem; background:var(--accent-soft); border-radius:100px; padding:.42rem .95rem;}
.stat .balance{font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); font-weight:600;}
.stat .num{font-size:1.55rem; font-weight:700; color:var(--accent); line-height:1; letter-spacing:-0.02em;}
.stat .lab{display:none;}
.doitem{display:grid; grid-template-columns:1.5rem 1.4rem 1fr auto; align-items:center; gap:.7rem; padding:.65rem 0; border-bottom:1px solid var(--rule);}
.doitem .meta{display:flex; align-items:center; gap:.6rem;}
.doitem .n{font-size:.95rem; font-weight:700; color:var(--faint);}
.box{width:1.35rem; height:1.35rem; border:2px solid var(--accent); border-radius:7px; flex:0 0 auto; background:none; cursor:pointer; padding:0; position:relative;}
.box.on{background:var(--accent);}
.box.on::after{content:""; position:absolute; left:5px; top:2px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);}
.doitem .txt{font-size:1.04rem; font-weight:600; color:var(--ink); outline:none; min-width:0; word-break:break-word;}
.doitem.done .txt{color:var(--done); text-decoration:line-through;}
.doitem .step{grid-column:3 / -1; display:flex; gap:.5rem; align-items:baseline; margin-top:.3rem;}
.doitem .step .sl{font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); white-space:nowrap; font-weight:700;}
.doitem .step .sv{flex:1 1 auto; min-width:0; font-size:.85rem; color:var(--muted); font-weight:500; outline:none; word-break:break-word;}
.doitem .step .sv:empty::before{content:"name the first small step…"; color:var(--faint);}
.start{align-self:center; font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--accent);
  border:none; border-radius:100px; cursor:pointer; padding:.38rem .75rem; font-weight:700; white-space:nowrap; opacity:0; transition:opacity .15s, background .15s;}
.start.always{opacity:1;}
.doitem:hover .start, .doitem:focus-within .start{opacity:1;}
.start:hover{background:var(--accent-deep);}
@media (hover:none){ .start{opacity:.85;} }
.pill{font-size:.6rem; letter-spacing:.03em; text-transform:uppercase; padding:.32rem .65rem; border-radius:100px; font-weight:700; white-space:nowrap; align-self:center; cursor:pointer; user-select:none;}
.pill.need{background:var(--accent); color:#fff;}
.pill.want{background:var(--accent-soft); color:var(--accent);}
.doitem .t{font-size:.88rem; color:var(--muted); font-weight:600; min-width:2.5rem; text-align:right; align-self:center; outline:none; cursor:text; font-variant-numeric:tabular-nums;}
.ghost{display:grid; grid-template-columns:1.5rem 1fr; align-items:center; gap:.7rem; padding:.65rem 0; cursor:pointer;}
.ghost .n{font-size:.82rem; color:var(--faint); font-weight:700;}
.ghost .prompt{font-size:.92rem; color:var(--faint); font-weight:500;}
.ghost:hover .prompt{color:var(--accent);}

/* ---- lower tier (cards) ---- */
.tier{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem;}
.col{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:1.1rem 1.2rem; box-shadow:var(--shadow);}
.col .kicker{margin-bottom:.5rem;}
.col .body{margin-top:.4rem;}
.glabel{font-size:.64rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:.8rem 0 .35rem;}
.glabel:first-child{margin-top:0;}
.litem{display:flex; align-items:flex-start; gap:.5rem; padding:.22rem 0; font-size:.88rem; font-weight:500; color:var(--ink);}
.litem .tick{margin-top:.1rem;}
.litem .lt{flex:1 1 auto; min-width:0; outline:none; word-break:break-word;}
.litem.done .lt{color:var(--done); text-decoration:line-through;}
.litem .mv{opacity:0; font-size:.9rem; color:var(--accent); background:none; border:none; cursor:pointer; padding:0 .2rem;}
.litem:hover .mv, .litem:focus-within .mv{opacity:.7;}
.litem .mv:hover{opacity:1;}
@media (hover:none){ .litem .mv{opacity:.55;} }
.addline{font-size:.74rem; color:var(--faint); font-weight:600; background:none; border:none; cursor:pointer; margin-top:.4rem; padding:0;}
.addline:hover{color:var(--accent);}
.dump{margin-top:.6rem; min-height:5.5rem; width:100%; border:none; outline:none; resize:none; background:none;
  font-family:var(--f); font-size:.92rem; font-weight:500; line-height:1.6; color:var(--ink); padding:0;}
.dump::placeholder{color:var(--faint); font-weight:400;}

/* ---- focus mode ---- */
.focus{position:fixed; inset:0; z-index:50; background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:2rem; gap:1.3rem; padding-top:max(2rem,env(safe-area-inset-top));}
.focus .fk{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700;}
.focus .ftask{font-size:clamp(1.9rem,5vw,2.8rem); font-weight:700; letter-spacing:-0.03em; line-height:1.12; max-width:22ch; color:var(--ink); margin:0;}
.focus .fstep{font-size:1.05rem; color:var(--muted); max-width:30ch; font-weight:500;}
.focus .fstep b{font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:.3rem; font-weight:700;}
.focus .timer{font-size:clamp(3.6rem,12vw,5.6rem); font-weight:700; color:var(--accent); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1; margin:.3rem 0;}
.focus .fmsg{font-size:.92rem; color:var(--muted); min-height:1.2rem; font-weight:500;}
.focus .fbtns{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem;}
.fbtn{font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; cursor:pointer;
  border:1px solid var(--rule); background:var(--card); color:var(--muted); border-radius:100px; padding:.65rem 1.4rem; box-shadow:var(--shadow);}
.fbtn:hover{border-color:var(--accent); color:var(--ink);}
.fbtn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.fbtn.primary:hover{background:var(--accent-deep);}

.rise{opacity:0; transform:translateY(10px); animation:rise .6s cubic-bezier(.2,.6,.2,1) forwards;}
@keyframes rise{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.rise{animation:none; opacity:1; transform:none;}}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}

@media (max-width:720px){
  .tier{grid-template-columns:1fr; gap:1rem;}
  .date{font-size:clamp(2rem,9vw,2.6rem);}
}
@media (max-width:560px){
  .doitem{grid-template-columns:1.5rem 1.4rem 1fr;}
  .doitem .meta{grid-column:3; justify-content:flex-start; margin-top:.35rem;}
}