/* Shared look. Layout from the Oomi task tracker, colours and type from the wedding page */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=DM+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');
:root{
  --bg:#F2ECE1;--bg2:#EFE7D8;--card:#F7F2E8;--card2:#EFE7D8;--line:#DDD3C2;--line2:#1A1614;--inkline:#1A1614;
  --ink:#1A1614;--muted:#7A6E63;--muted2:#A69A8C;--blue:#1A1614;--blue2:#9E2B25;--red:#9E2B25;--brown:#3E2F26;
  --surface:var(--card);--accent:var(--blue);--accent-ink:#fff;--warn:#8A6410;--warn-bg:#FBF1DA;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
button,input,select,textarea{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
::selection{background:rgba(0,114,162,.16)}
[hidden]{display:none!important}
.tt .wrap{max-width:760px;margin:0 auto;padding:0 16px 96px}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 2px}
.brand{font-family:'Instrument Serif',serif;font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--blue2);text-decoration:none}
.navtabs{display:flex;gap:6px}
.title{font-family:'Instrument Serif',serif;font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;flex:1}
.h{padding:22px 0 6px}.titlerow{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.sub{color:var(--muted);font-size:13px;margin-top:3px}.sub b{color:var(--ink)}
.minibtn{background:var(--card);border:1.5px solid var(--inkline);border-radius:9px;padding:7px 11px;font-size:12.5px;color:var(--ink);cursor:pointer;white-space:nowrap;box-shadow:2px 2px 0 var(--inkline);text-decoration:none;display:inline-block;transition:transform .1s,box-shadow .1s}
.minibtn.on{background:var(--blue);color:#fff;font-weight:600}
.minibtn:active{box-shadow:0 0 0 var(--inkline);transform:translate(2px,2px)}
.stats{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.stat{background:var(--card);border:1.5px solid var(--inkline);border-radius:12px;padding:9px 13px;flex:1;min-width:74px;text-align:left;color:var(--ink);box-shadow:2px 2px 0 var(--inkline);cursor:pointer;transition:box-shadow .15s,transform .12s}
.stat:hover{box-shadow:3px 3px 0 var(--inkline);transform:translate(-1px,-1px)}
.stat .n{font-size:18px;font-weight:700;font-family:'Instrument Serif',serif}.stat .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.quick{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.quick input{flex:1;min-width:150px;border:1.5px solid var(--inkline);background:var(--card);border-radius:10px;padding:10px 11px;font-size:16px;outline:0}
.quick input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,114,162,.10)}
.quick select{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px;font-size:13px;outline:0;max-width:170px}
.quick button{background:var(--blue);color:#fff;border:1.5px solid var(--inkline);border-radius:10px;padding:10px 15px;font-size:13.5px;font-weight:650;cursor:pointer;box-shadow:2px 2px 0 var(--inkline)}
.quick button:hover{background:var(--blue2)}.quick button:active{box-shadow:0 0 0 var(--inkline);transform:translate(2px,2px)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;cursor:pointer;text-align:left;color:var(--ink);transition:border-color .18s,box-shadow .18s,transform .18s;position:relative;overflow:hidden;text-decoration:none;display:block;font:inherit}
.cardx:hover{border-color:var(--line2);box-shadow:0 8px 20px rgba(50,49,56,.07);transform:translateY(-1px)}
.cardx .spine{position:absolute;left:0;top:0;bottom:0;width:4px}
.cardx .ct{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.cardx .cd{font-size:11.5px;color:var(--muted);margin-top:2px}
.cardx .cn{font-size:26px;font-weight:750;letter-spacing:-.02em;margin-top:8px;line-height:1;font-family:'Instrument Serif',serif}
.cardx .cl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cardx .bar{height:4px;border-radius:4px;background:var(--line);margin-top:11px;overflow:hidden}.cardx .bar>i{display:block;height:100%;border-radius:4px;transition:width .35s ease}
.cardx .nx{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cardx .nx b{color:var(--ink);font-weight:600}
.cardx.addcat{border-style:dashed;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600;min-height:96px}
.ovbadge{display:inline-block;background:#FADEDB;color:#8A2B20;border:1px solid #EEB6AE;border-radius:999px;font-size:10.5px;padding:2px 7px;margin-left:auto}
.back{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1.5px solid var(--inkline);border-radius:999px;color:var(--ink);font-size:12px;font-weight:700;cursor:pointer;padding:6px 12px;margin:14px 0 6px;box-shadow:2px 2px 0 var(--inkline);text-decoration:none}
.dh{display:flex;align-items:center;gap:10px}.dh .dot{width:11px;height:11px;border-radius:50%}.dh h2{font-size:21px;font-weight:750;margin:0;letter-spacing:-.02em;flex:1;font-family:'Instrument Serif',serif}
.ppl{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-top:13px;overflow:hidden}
.pplh{padding:11px 13px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.prow{display:flex;align-items:center;gap:10px;padding:9px 13px;border-top:1px solid var(--line);cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left}
.prow:hover{background:var(--card2)}
.av{width:32px;height:32px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.pinfo{flex:1;min-width:0}.pn{font-size:14px;font-weight:600}.pm{font-size:11.5px;color:var(--muted)}
.pcount{font-size:11px;color:var(--muted);background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.tb{display:flex;gap:7px;align-items:center;margin:14px 0 4px;flex-wrap:wrap}
.srch{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:6px 9px;width:170px}
.srch input{border:0;outline:0;background:transparent;width:100%;font-size:16px}
.chip{background:var(--card);border:1.5px solid var(--inkline);border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.chip.on{background:var(--blue);color:#fff;font-weight:600;box-shadow:2px 2px 0 var(--inkline)}
.add{margin-left:auto;background:var(--blue);color:#fff;border:0;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:650;cursor:pointer}
.grp{margin-top:11px;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.gh{display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer;user-select:none;width:100%;background:none;border:0;text-align:left}
.caret{color:var(--muted);font-size:11px;width:12px;transition:transform .15s}.caret.open{transform:rotate(90deg)}
.gname{font-weight:650;font-size:14.5px;flex:1}.gmeta{font-size:11.5px;color:var(--muted)}
.gprog{width:46px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}.gprog>i{display:block;height:100%}
.task{display:flex;gap:10px;padding:10px 13px;border-top:1px solid var(--line);position:relative;cursor:pointer}
.task:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dc)}.task.isdone{opacity:.6}
.ck{width:21px;height:21px;border-radius:6px;border:2px solid var(--line2);margin-top:1px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;background:transparent;padding:0;transition:background .15s,border-color .15s}
.ck:active{transform:scale(.88)}
.ck.on{background:var(--dc);border-color:var(--dc);animation:ckpop .2s ease}.ck svg{width:12px;height:12px;color:#fff;opacity:0}.ck.on svg{opacity:1}
@keyframes ckpop{0%{transform:scale(.75)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.tbody{flex:1;min-width:0}.tname{font-size:14px;line-height:1.35;word-break:break-word}.tname.done{color:var(--muted);text-decoration:line-through}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.tags:empty{display:none}
.tag{font-size:10.5px;padding:2px 7px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:var(--muted)}
.tag.pri{color:#fff;border:0;font-weight:600}.tag.over{background:#FADEDB;border-color:#EEB6AE;color:#8A2B20}
.empty{padding:24px;text-align:center;color:var(--muted);font-size:13.5px}
.ov{position:fixed;inset:0;background:rgba(30,35,40,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:ovin .18s ease both}
.modal{background:var(--bg2);width:100%;max-width:540px;border-radius:18px 18px 0 0;max-height:92vh;overflow:auto;border:1px solid var(--line);box-shadow:0 -14px 44px rgba(50,49,56,.16);animation:mup .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes ovin{from{opacity:0}to{opacity:1}}
@keyframes mup{from{transform:translateY(28px);opacity:.6}to{transform:none;opacity:1}}
.mh{display:flex;align-items:center;padding:17px 17px 4px;position:sticky;top:0;background:var(--bg2)}.mh h3{margin:0;font-size:17px;font-weight:700;flex:1;font-family:'Instrument Serif',serif}
.mb{padding:4px 17px 16px}.f{margin-top:12px}
.f label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.in,.ta{width:100%;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 11px;font-size:16px;outline:0}
.in:focus,.ta:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,114,162,.10)}
.in[type=date]{-webkit-appearance:none;appearance:none;min-height:44px}.ta{min-height:84px;resize:vertical}
.r2{display:flex;gap:9px}.r2>div{flex:1;min-width:0}
.prirow{display:flex;gap:5px}.prib{flex:1;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:8px;font-size:12.5px;cursor:pointer;text-align:center;color:var(--muted)}
.prib.on{color:#fff;border-color:transparent;font-weight:600}
.swatches{display:flex;gap:7px;flex-wrap:wrap}.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}.sw.on{border-color:var(--inkline);box-shadow:2px 2px 0 var(--inkline)}
.mf{display:flex;gap:9px;padding:13px 17px 20px;position:sticky;bottom:0;background:var(--bg2);border-top:1px solid var(--line)}
.btn{flex:1;border-radius:10px;padding:12px;font-size:14px;font-weight:650;cursor:pointer;border:1.5px solid var(--inkline);background:var(--card);color:var(--ink);box-shadow:2px 2px 0 var(--inkline)}
.btn.primary{background:var(--blue);color:#fff}.btn.danger{flex:none;color:#C0483F}
.btn:active{box-shadow:0 0 0 var(--inkline);transform:translate(2px,2px)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--card2);border:1.5px solid var(--inkline);box-shadow:2px 2px 0 var(--inkline);padding:11px 16px;border-radius:11px;font-size:13px;z-index:80}
@media(min-width:600px){.ov{align-items:center}.modal{border-radius:18px}}
@media(max-width:420px){.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.cardx .ct{flex-wrap:wrap}
@media(max-width:480px){.quick input{flex:1 1 100%}.quick select{flex:1;max-width:none}}

/* wedding theme */
*{border-radius:0!important}
.av,.dot,.sw,.track,.track i,.bar,.bar>i,.gprog,.gprog>i{border-radius:999px!important}
.minibtn,.stat,.quick button,.back,.chip.on,.btn,.toast,.sum,.sw.on{box-shadow:none!important}
.title,.dh h2,.mh h3,.cardx .cn,.stat .n,.cardx .ct{font-family:'Instrument Serif',serif;font-weight:400;letter-spacing:-.01em}
.title{font-size:40px;line-height:1}.dh h2{font-size:30px}.mh h3{font-size:24px}.cardx .ct{font-size:22px}.cardx .cn{font-size:34px}.stat .n{font-size:26px}
.brand,.minibtn,.chip,.back,.btn,.add,.quick button,.stat .l,.cardx .cl,.pplh,.f label,.gmeta,.pcount,.ovbadge,.tag{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em}
.brand{font-size:11px;color:var(--ink);font-weight:500}
.minibtn,.chip,.back,.btn,.add,.quick button{font-size:10.5px;font-weight:500}
.tag{font-size:9.5px;letter-spacing:.08em}
.minibtn,.chip,.back,.btn,.stat,.quick input{border-width:1px}
.minibtn.on,.chip.on,.btn.primary,.add,.quick button{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.minibtn.on:hover,.btn.primary:hover,.add:hover,.quick button:hover{background:var(--red);border-color:var(--red)}
.cardx{border-color:var(--line)}.cardx:hover{box-shadow:none;border-color:var(--ink)}
.btn.danger{color:var(--red)}
.in:focus,.ta:focus,.quick input:focus{border-color:var(--ink);box-shadow:none}
:focus-visible{outline-color:var(--red)}