:root{
  --paper:#F6F2EA; --card:#FDFBF6; --ink:#241B15; --ink-soft:#6B5D52; --ink-faint:#A2958A;
  --thread:#A81F2D; --thread-soft:#E8C8CB; --em:#96650F; --em-soft:#E9D6AC;
  --sage:#5A6B4D; --sage-tint:#E7EAE0; --sage-line:#CBD3BE;
  --line:#E3DAD0; --line-strong:#CBBFB2;
  --field:#FFFFFF; --gig-tint:#F7E6E7; --on-thread:#FFFFFF;
  --shadow-1:0 1px 2px rgba(36,27,21,.05),0 4px 12px -6px rgba(36,27,21,.12);
  --shadow-2:0 2px 6px rgba(36,27,21,.10),0 14px 30px -12px rgba(36,27,21,.28);
  --glass:rgba(253,251,246,.86);
  --serif:'Fraunces',Georgia,serif; --sans:'Karla',system-ui,sans-serif; --mono:'Spline Sans Mono',ui-monospace,monospace;
}
/* dark theme: follows the phone unless the user picks Light/Dark in Settings */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#191310; --card:#231C16; --ink:#F0E8DD; --ink-soft:#B5A797; --ink-faint:#7E7164;
    --thread:#DB6570; --thread-soft:#5C2A30; --em:#D2A34E; --em-soft:#57421C;
    --sage:#9DB18A; --sage-tint:#272E1E; --sage-line:#3D4830;
    --line:#352C24; --line-strong:#4A3E33;
    --field:#2A211A; --gig-tint:#332024; --on-thread:#FFF6EE;
    --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 12px -6px rgba(0,0,0,.55);
    --shadow-2:0 2px 6px rgba(0,0,0,.4),0 14px 30px -12px rgba(0,0,0,.7);
    --glass:rgba(35,28,22,.86);
  }
}
:root[data-theme="dark"]{
  --paper:#191310; --card:#231C16; --ink:#F0E8DD; --ink-soft:#B5A797; --ink-faint:#7E7164;
  --thread:#DB6570; --thread-soft:#5C2A30; --em:#D2A34E; --em-soft:#57421C;
  --sage:#9DB18A; --sage-tint:#272E1E; --sage-line:#3D4830;
  --line:#352C24; --line-strong:#4A3E33;
  --field:#2A211A; --gig-tint:#332024; --on-thread:#FFF6EE;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 12px -6px rgba(0,0,0,.55);
  --shadow-2:0 2px 6px rgba(0,0,0,.4),0 14px 30px -12px rgba(0,0,0,.7);
  --glass:rgba(35,28,22,.86);
}
*{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation}
button,.tcard,.daychip,.sw,.tabbar,.trackhead,.stat,.logrow,.alrow{-webkit-user-select:none;user-select:none}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 14px calc(84px + env(safe-area-inset-bottom))}
.boot{color:var(--ink-faint);font-family:var(--mono);font-size:13px;padding:40px 10px;text-align:center}

.brand{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.knot{width:11px;height:11px;border-radius:50%;background:var(--paper);border:2.5px solid var(--thread);display:inline-block}
.wordmark{font-family:var(--serif);font-size:20px;font-weight:500}
.syncdot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--sage);opacity:.6}

/* gate */
.gate{padding-top:8vh;max-width:360px;margin:0 auto}
.gateh{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.1;margin:24px 0 10px}
.gateh em{font-style:italic;color:var(--thread)}
.gatesub{color:var(--ink-soft);font-size:14px;margin-bottom:22px}
.whopick{display:flex;gap:10px;margin-bottom:12px}
.whobtn{flex:1;appearance:none;border:1.5px solid var(--line-strong);background:var(--card);border-radius:12px;padding:14px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.whobtn.on{border-color:var(--thread);box-shadow:0 0 0 1px var(--thread)}
.pdot{width:9px;height:9px;border-radius:50%}
.passin{width:100%;border:1.5px solid var(--line-strong);background:var(--field);border-radius:12px;padding:13px 14px;font-family:var(--mono);font-size:16px;margin-bottom:12px}
.passin:focus{outline:2px solid var(--thread)}
.enterbtn{width:100%;appearance:none;border:none;background:var(--thread);color:var(--on-thread);font-family:var(--sans);font-weight:700;font-size:15px;padding:14px;border-radius:12px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px -3px color-mix(in srgb,var(--thread) 55%,transparent);transition:transform .12s ease}
.enterbtn:active{transform:scale(.98)}
.gateerr{color:var(--thread);font-size:13px;margin-top:10px;min-height:18px}

/* today */
.daterow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:2px 2px 8px}
.daychips{display:flex;gap:8px;margin-bottom:10px}
.daychip{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;text-align:left;font-family:var(--sans);color:var(--ink);box-shadow:var(--shadow-1)}
.daychip.tap{cursor:pointer}
.daychip .who{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.daychip .who i{width:7px;height:7px;border-radius:50%;display:inline-block}
.daychip .meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:2px;display:block}
.daychip .chev{font-size:11px;color:var(--thread);font-weight:700;margin-top:3px;display:block}
.planpop{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;box-shadow:var(--shadow-1)}
.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{appearance:none;border:none;background:none;flex:1;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-faint);padding:8px 4px;border-radius:8px;cursor:pointer;text-transform:capitalize}
.seg button.on{background:var(--thread);color:var(--on-thread)}
.anchorrow{display:flex;align-items:center;gap:10px;margin-top:10px}
.anchorrow label{font-weight:700;font-size:13px}
.anchorrow input[type=time]{margin-left:auto;font-family:var(--mono);font-size:15px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--field);color:var(--ink)}

.tracks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.track{position:relative;padding:0 0 0 12px}
.track::before{content:"";position:absolute;left:2px;top:26px;bottom:8px;width:2px;border-radius:2px}
.track.mine::before{background:linear-gradient(180deg,transparent,var(--me-col) 22px,var(--me-col) calc(100% - 22px),transparent)}
.track.theirs::before{background:linear-gradient(180deg,transparent,var(--pa-col) 22px,var(--pa-col) calc(100% - 22px),transparent)}
.trackhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px 2px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:7px;position:relative;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-1);transition:transform .12s ease,box-shadow .12s ease}
.minecard{cursor:pointer}
.minecard:active{transform:scale(.977)}
.tcard .dot{position:absolute;left:-15px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:2px solid var(--dc, var(--ink-faint))}
.track.mine .tcard .dot{--dc:var(--me-col)}
.track.theirs .tcard .dot{--dc:var(--pa-col)}
.tcard.done .dot{background:var(--dc)}
.tcard .tt{font-family:var(--mono);font-size:9.5px;color:var(--ink-faint)}
.tcard .bt{font-size:12.5px;font-weight:700;line-height:1.3;margin-top:1px}
.tcard .bn{font-size:10.5px;color:var(--ink-soft);margin-top:1px;line-height:1.3}
.tcard.done{border-style:dashed}
.tcard.done .bt{color:var(--ink-soft)}
.tcard .tick{font-family:var(--mono);font-size:9.5px;color:var(--sage);margin-top:2px}
.tcard.nowb{border-color:var(--thread);box-shadow:0 0 0 1px var(--thread),0 6px 18px -8px color-mix(in srgb,var(--thread) 50%,transparent)}
.tcard.t-shared{background:var(--sage-tint);border-color:var(--sage-line)}
.tcard.t-gig{background:var(--gig-tint);border-color:var(--thread-soft)}
.tcard.t-ritual{border-left:3px solid var(--thread);border-radius:0 10px 10px 0}
.tugbtn{position:absolute;right:6px;top:6px;appearance:none;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink-soft);font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 7px;cursor:pointer}
.tugbtn:hover{border-color:var(--thread);color:var(--thread)}

.foot{margin-top:14px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--ink-soft)}
.foot b{color:var(--ink)}

/* plan editor */
.planseg{margin-bottom:12px}
.anchor{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;box-shadow:var(--shadow-1)}
.anchor label{font-weight:700;font-size:13.5px}
.anchor input[type=time]{font-family:var(--mono);font-size:15px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--field);color:var(--ink)}
.anchor .hint{font-size:11.5px;color:var(--ink-faint);flex-basis:100%;font-family:var(--mono)}
.edrow{display:flex;gap:9px;margin-bottom:8px;align-items:flex-start}
.edtime{font-family:var(--mono);font-size:11px;color:var(--ink-soft);min-width:56px;text-align:right;padding-top:12px;font-variant-numeric:tabular-nums}
.edcard{flex:1;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 11px;box-shadow:var(--shadow-1)}
.edcard.t-shared{background:var(--sage-tint);border-color:var(--sage-line)}
.edcard.t-gig{background:var(--gig-tint);border-color:var(--thread-soft)}
.edcard.t-ritual{border-left:3px solid var(--thread);border-radius:0 10px 10px 0}
.row1{display:flex;align-items:center;gap:8px}
.edcard input.title{flex:1;border:none;background:transparent;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);padding:2px 0;min-width:0}
.edcard input.title:focus{outline:none;border-bottom:1px dashed var(--thread)}
.edcard input.note{width:100%;border:none;background:transparent;font-size:12px;color:var(--ink-soft);padding:1px 0;margin-top:1px}
.edcard input.note:focus{outline:none;border-bottom:1px dashed var(--line-strong)}
.dur{display:flex;align-items:center;gap:3px}
.dur input{width:52px;font-family:var(--mono);font-size:13px;text-align:right;border:1px solid transparent;background:transparent;color:var(--ink-soft);border-radius:6px;padding:3px 4px}
.dur input:focus{border-color:var(--line-strong);background:var(--field);outline:none}
.dur span{font-size:11px;color:var(--ink-faint);font-family:var(--mono)}
.row2{display:flex;align-items:center;justify-content:space-between;margin-top:3px}
.tagpick{border:none;background:transparent;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);-webkit-appearance:none;appearance:none;padding:4px 0}
.ctrl{display:flex;gap:2px}
.ctrl button{appearance:none;border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:14px;padding:5px 7px;border-radius:6px;line-height:1}
.ctrl button:active{background:var(--paper);color:var(--ink)}
.ctrl button.del:active{color:var(--thread)}
.addrow{margin:4px 0 0 65px}
.addrow button{appearance:none;border:1px dashed var(--line-strong);background:none;color:var(--ink-soft);font-family:var(--sans);font-size:13px;font-weight:700;padding:9px 16px;border-radius:8px;cursor:pointer}
.planhint{font-size:12px;color:var(--ink-faint);font-style:italic;font-family:var(--serif);margin-top:12px}
.planhint b{font-style:normal}

/* card */
.logintro{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:14px;margin-bottom:14px}
.streak{display:flex;gap:10px;margin-bottom:14px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-1)}
.stat .n{font-family:var(--serif);font-size:26px;font-weight:500}
.stat .l{font-size:10.5px;color:var(--ink-faint);font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.logtoday{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;box-shadow:var(--shadow-1)}
.logtoday .q{font-weight:700;font-size:13.5px}
.logtoday input[type=time]{font-family:var(--mono);font-size:15px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--field);color:var(--ink)}
.check{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none;font-size:13.5px}
.check input{width:18px;height:18px;accent-color:var(--thread)}
.save{appearance:none;border:none;background:var(--thread);color:var(--on-thread);font-family:var(--sans);font-weight:700;font-size:14px;padding:10px 18px;border-radius:9px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px -3px color-mix(in srgb,var(--thread) 55%,transparent);transition:transform .12s ease}
.save:active{transform:scale(.97)}
.pstatus{flex-basis:100%;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.logrows{border-top:1px solid var(--line)}
.logrow{display:flex;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:12.5px;align-items:center}
.logrow .d{font-family:var(--mono);font-size:11px;color:var(--ink-soft);min-width:84px}
.logrow .b{font-family:var(--mono);font-size:11px}
.logrow .yes{color:var(--sage);font-weight:700;margin-left:auto}
.logrow .no{color:var(--ink-faint);margin-left:auto}
.logrow button{appearance:none;border:none;background:none;color:var(--ink-faint);cursor:pointer;padding:2px 6px;font-size:12px}
.empty{color:var(--ink-faint);font-style:italic;padding:20px 4px}

/* alerts */
.pushbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-1)}
.pushwarn{font-size:12.5px;color:var(--ink-soft)}
.pushwarn b{color:var(--ink)}
.testbtn{appearance:none;border:1px dashed var(--line-strong);background:none;color:var(--ink-soft);font-family:var(--sans);font-size:13px;font-weight:700;padding:9px;border-radius:9px;cursor:pointer}
.pushstate{font-family:var(--mono);font-size:11px;color:var(--ink-faint);min-height:14px}
.alrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow-1)}
.alrow .at{font-size:13.5px;font-weight:700}
.alrow .an{font-size:11.5px;color:var(--ink-soft)}
.sw{margin-left:auto;width:42px;height:25px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw.on{background:var(--sage)}
.sw.on::after{left:20px}
/* settings */
.setbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-1)}
.seth{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.setnote{font-size:11.5px;color:var(--ink-soft)}
.seterr{color:var(--thread);font-size:12.5px;min-height:16px}
.setbox .passin{margin-bottom:0}

.signout{margin-top:22px;text-align:center}
.signout button{appearance:none;border:none;background:none;color:var(--ink-faint);font-size:12px;font-family:var(--mono);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* chrome */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:calc(86px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-2);max-width:86%;text-align:center;z-index:30}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;border-top:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 -8px 24px -16px rgba(0,0,0,.3);padding:6px 10px calc(6px + env(safe-area-inset-bottom));z-index:20}
.tabbar button{appearance:none;border:none;background:none;flex:1;font-family:var(--sans);font-size:10px;font-weight:700;color:var(--ink-faint);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;transition:transform .12s ease,color .15s ease}
.tabbar button:active{transform:scale(.92)}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.on{color:var(--thread)}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* day editor Set button */
.setbtn{appearance:none;border:none;background:var(--thread);color:var(--on-thread);font-family:var(--sans);font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px -3px color-mix(in srgb,var(--thread) 55%,transparent);transition:transform .12s ease}
.setbtn:active{transform:scale(.95)}

/* motion: entrances and tick feedback */
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.view-in{animation:viewin .24s ease}
@keyframes popdown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.planpop{animation:popdown .2s ease}
@keyframes dotpop{0%{transform:scale(.5)}55%{transform:scale(1.5)}100%{transform:scale(1)}}
.tcard.done .dot{animation:dotpop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes tickin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.tcard .tick{animation:tickin .25s ease}
@keyframes toastwake{from{opacity:0}}