:root{--bg:#0f1117;--panel:#151822;--panel2:#1b1f2c;--line:#252a3a;--line2:#323952;--text:#e6e8f0;--muted:#98a0b8;--dim:#6b7390;--accent:#7c8cf8;--accent2:#5eead4;--ok:#5eead4;--warn:#fbbf24;--bad:#f87171;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--leftw:280px;--rightw:300px}
body.theme-light{--bg:#f7f7fa;--panel:#fff;--panel2:#f0f1f6;--line:#e3e5ee;--line2:#cfd3e1;--text:#1b1e2b;--muted:#5b6380;--dim:#8a91a8;--accent:#4f5fe0;--accent2:#0d9488}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none!important}
.muted{color:var(--muted)}.err{color:var(--bad);min-height:1.2em;margin:.4rem 0 0}.spacer{flex:1}
kbd{font:600 .72rem var(--mono);padding:.08rem .35rem;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;color:var(--muted);background:var(--panel2)}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.brand.big{font-size:1.4rem;justify-content:center;margin-bottom:.6rem}
.mark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-block}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:.38rem .75rem;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.ghost{background:transparent}.btn.danger{border-color:var(--bad);color:var(--bad)}
.icon{background:transparent;border:1px solid transparent;border-radius:8px;min-width:34px;height:34px;cursor:pointer;font-size:1rem;color:var(--muted)}
.icon:hover{background:var(--panel2);color:var(--text)}.icon.on{color:var(--warn)}
.link{background:none;border:0;color:var(--muted);cursor:pointer;padding:.15rem .3rem;font-size:.8rem}.link:hover{color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.25rem .65rem;font:.74rem var(--mono);color:var(--muted);cursor:pointer}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.dot.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}

.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:300;padding:1rem}
.gatebox{width:min(380px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:1.6rem;text-align:center;display:flex;flex-direction:column;gap:.6rem}
.gatebox input{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:.6rem .8rem;text-align:center;font-family:var(--mono);outline:none}
.gatebox input:focus{border-color:var(--accent)}

#app{height:100%;display:flex;flex-direction:column}
header.top{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border-bottom:1px solid var(--line);background:var(--panel);padding-top:max(.45rem,env(safe-area-inset-top))}
.search{display:flex;align-items:center;gap:.6rem;flex:0 1 340px;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:.38rem .7rem;color:var(--dim);cursor:pointer;text-align:left}
.search span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search:hover{border-color:var(--accent)}
.cols{flex:1;display:flex;min-height:0}
#left,#right{background:var(--panel);display:flex;flex-direction:column;min-height:0;flex:0 0 auto}
#left{width:var(--leftw);border-right:1px solid var(--line)}#right{width:var(--rightw);border-left:1px solid var(--line)}
body.noleft #left,body.noright #right{display:none}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 .3rem}
.tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:.55rem .2rem;color:var(--muted);cursor:pointer;font-size:.82rem}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.pane{flex:1;overflow:auto;padding:.5rem;min-height:0}
.panebar{display:flex;align-items:center;padding:0 .2rem .3rem}
.pane input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;outline:none;margin-bottom:.5rem}
.pane input:focus{border-color:var(--accent)}
.row{display:flex;align-items:center;gap:.35rem;padding:.22rem .4rem;border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;font-size:.9rem}
.row:hover{background:var(--panel2)}.row.on{background:rgba(124,140,248,.18);color:var(--text)}
.row .tw{width:1rem;color:var(--dim);flex:0 0 auto;text-align:center;font-size:.7rem}.row .nm{overflow:hidden;text-overflow:ellipsis}
.row.folder{color:var(--muted);font-weight:560}.row .count{margin-left:auto;color:var(--dim);font-size:.72rem}
.row.drop{outline:2px dashed var(--accent);outline-offset:-2px}
.kids{margin-left:.85rem;border-left:1px solid var(--line);padding-left:.2rem}
.hit{padding:.45rem .5rem;border-radius:8px;cursor:pointer;margin-bottom:.2rem}.hit:hover{background:var(--panel2)}
.hit .t{font-weight:600;font-size:.9rem}.hit .p{font-size:.72rem;color:var(--dim)}.hit .s{font-size:.8rem;color:var(--muted);margin-top:.15rem;overflow-wrap:anywhere}
.hit mark,.md mark{background:rgba(251,191,36,.3);color:inherit;border-radius:3px;padding:0 .1em}
h4.sec{margin:.9rem .3rem .3rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.tagrow{display:flex;justify-content:space-between;padding:.22rem .45rem;border-radius:7px;cursor:pointer;font-size:.88rem}.tagrow:hover{background:var(--panel2)}.tagrow span:last-child{color:var(--dim);font-size:.75rem}

#main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.empty{margin:auto;text-align:center;padding:2rem;max-width:520px}.empty h2{margin:.2rem 0}
#note{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.notehead{display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem .2rem;flex-wrap:wrap}
.crumb{font-size:.75rem;color:var(--dim);flex:1 0 100%;cursor:pointer}.crumb:hover{color:var(--accent)}
#title{flex:1;min-width:8rem;background:none;border:0;outline:none;font-size:1.45rem;font-weight:680;letter-spacing:-.015em;padding:.1rem 0}
.noteactions{display:flex;align-items:center;gap:.15rem}
.seg{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{background:none;border:0;border-radius:7px;padding:.22rem .6rem;cursor:pointer;color:var(--muted);font-size:.8rem}.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--line2)}
.toolbar{display:flex;gap:.15rem;padding:.1rem .8rem .35rem;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.toolbar button{background:none;border:0;border-radius:6px;padding:.2rem .5rem;cursor:pointer;color:var(--muted);white-space:nowrap;font-size:.85rem}.toolbar button:hover{background:var(--panel2);color:var(--text)}
.work{flex:1;display:flex;min-height:0}
.work.mode-edit #preview,.work.mode-read #editor{display:none}.work.mode-read~* {}.work.mode-split #editor{border-right:1px solid var(--line)}
#editor{flex:1;min-width:0;resize:none;border:0;outline:none;background:var(--bg);padding:1rem 1.2rem 40vh;font:14.5px/1.65 var(--mono);tab-size:2;color:var(--text)}
#preview{flex:1;min-width:0;overflow:auto;padding:1rem 1.4rem 40vh}
.work.mode-read #preview{max-width:820px;margin:0 auto;width:100%}

.md{overflow-wrap:anywhere}.md h1,.md h2,.md h3,.md h4{letter-spacing:-.012em;line-height:1.25;margin:1.3em 0 .45em}.md h1{font-size:1.65rem}.md h2{font-size:1.32rem;border-bottom:1px solid var(--line);padding-bottom:.2em}.md h3{font-size:1.12rem}
.md>*:first-child{margin-top:0}.md p{margin:.6em 0}.md a{color:var(--accent);text-decoration:none}.md a:hover{text-decoration:underline}
.md a.wl{border-bottom:1px dashed rgba(124,140,248,.5)}.md a.wl.missing{color:var(--dim);border-bottom-color:var(--dim)}
.md a.tag{background:rgba(94,234,212,.13);color:var(--accent2);border-radius:999px;padding:.02em .5em;font-size:.88em}
.md code{font:.88em var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:.08em .35em}
.md pre.code{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;overflow:auto}.md pre.code code{background:none;border:0;padding:0;font-size:.85rem}
.md blockquote{margin:.7em 0;padding:.1em 1em;border-left:3px solid var(--line2);color:var(--muted)}
.md ul,.md ol{padding-left:1.5em;margin:.5em 0}.md li{margin:.15em 0}.md li.task{list-style:none;margin-left:-1.3em}.md li.task.done>span{color:var(--dim);text-decoration:line-through}
.md li.task input{accent-color:var(--accent);cursor:pointer;transform:translateY(1px)}
.md hr{border:0;border-top:1px solid var(--line2);margin:1.4em 0}
.md img,.md video{max-width:100%;border-radius:8px}.md audio{width:100%;max-width:420px}
.tablewrap{overflow-x:auto}.md table{border-collapse:collapse;margin:.7em 0;font-size:.92rem}.md th,.md td{border:1px solid var(--line2);padding:.35em .7em}.md th{background:var(--panel2);text-align:left}
.callout{border:1px solid var(--line2);border-left:4px solid var(--accent);border-radius:10px;padding:.6rem .9rem;margin:.8em 0;background:var(--panel)}
.callout-title{font-weight:650;margin-bottom:.2rem}.callout-warning,.callout-caution{border-left-color:var(--warn)}.callout-danger,.callout-error,.callout-bug{border-left-color:var(--bad)}.callout-tip,.callout-success{border-left-color:var(--ok)}
.callout>*:last-child,.md blockquote>*:last-child{margin-bottom:0}
.embed{border:1px solid var(--line2);border-radius:10px;margin:.8em 0;background:var(--panel)}.embed-title{font-size:.78rem;color:var(--muted);padding:.35rem .8rem;border-bottom:1px solid var(--line);cursor:pointer}.embed-body{padding:.2rem .9rem .6rem;max-height:340px;overflow:auto}
details.props{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.35rem .7rem;margin-bottom:.8rem;font-size:.85rem;color:var(--muted)}details.props pre{margin:.4rem 0 0;font:.8rem var(--mono);white-space:pre-wrap}

.lk{padding:.4rem .45rem;border-radius:8px;cursor:pointer;margin-bottom:.15rem}.lk:hover{background:var(--panel2)}.lk .t{font-weight:600;font-size:.88rem}.lk .c{font-size:.78rem;color:var(--muted);margin-top:.1rem;overflow-wrap:anywhere}
.lk.missing .t{color:var(--dim)}.lk .mk{float:right}
.ol{display:block;padding:.18rem .4rem;border-radius:6px;cursor:pointer;font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ol:hover{background:var(--panel2);color:var(--text)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;font-size:.84rem;margin:.3rem .3rem}.kv dt{color:var(--dim)}.kv dd{margin:0;overflow-wrap:anywhere}
.ver{display:flex;gap:.5rem;align-items:baseline;padding:.3rem .4rem;border-radius:7px;cursor:pointer;font-size:.82rem}.ver:hover{background:var(--panel2)}.ver .w{color:var(--dim);font-size:.74rem}

.status{display:flex;align-items:center;gap:1rem;padding:.2rem .9rem;border-top:1px solid var(--line);background:var(--panel);font:.74rem var(--mono);color:var(--dim);padding-bottom:max(.2rem,env(safe-area-inset-bottom))}
#saveState.dirty{color:var(--warn)}#saveState.bad{color:var(--bad)}

.suggest{position:absolute;z-index:40;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.45);min-width:240px;max-width:420px;max-height:260px;overflow:auto;padding:.25rem}
.suggest .it{padding:.3rem .6rem;border-radius:7px;cursor:pointer;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggest .it.on{background:rgba(124,140,248,.22)}.suggest .it small{color:var(--dim);margin-left:.5rem}

.modal{position:fixed;inset:0;background:rgba(5,7,12,.62);backdrop-filter:blur(4px);display:grid;place-items:start center;padding:9vh 1rem 1rem;z-index:200}
.modalbox{width:min(640px,100%);max-height:80vh;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55);padding:1rem}
.modalbox.wide{width:min(1100px,100%);padding:.6rem}.modalbox h3{margin:.1rem 0 .6rem}
.modalbox input[type=text],.modalbox input[type=password],.modalbox select{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:.6rem .8rem;outline:none;font-size:1rem}
.modalbox input:focus{border-color:var(--accent)}.modalbox label{display:block;font-size:.76rem;color:var(--muted);margin:.7rem 0 .2rem}
.picklist{margin-top:.5rem;max-height:52vh;overflow:auto}.pick{display:flex;align-items:baseline;gap:.6rem;padding:.42rem .6rem;border-radius:8px;cursor:pointer}.pick.on{background:rgba(124,140,248,.22)}
.pick .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pick .p{color:var(--dim);font-size:.78rem;margin-left:auto;white-space:nowrap}.pick.make .t{color:var(--accent2)}
.rowbtns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
canvas.graph{width:100%;height:72vh;display:block;border-radius:12px;background:var(--bg);cursor:grab}
.graphbar{display:flex;align-items:center;gap:.6rem;padding:.3rem .5rem .5rem;flex-wrap:wrap}.graphbar input{flex:1;min-width:140px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.35rem .6rem;outline:none}
.diff{font:.8rem/1.5 var(--mono);white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem;max-height:46vh;overflow:auto}.diff .add{background:rgba(94,234,212,.14);display:block}.diff .del{background:rgba(248,113,113,.15);display:block;text-decoration:line-through;color:var(--muted)}
#toasts{position:fixed;right:1rem;bottom:2.2rem;display:flex;flex-direction:column;gap:.5rem;z-index:400;max-width:min(380px,calc(100vw - 2rem))}
.toast{background:var(--panel);border:1px solid var(--line2);border-left:4px solid var(--accent);border-radius:10px;padding:.6rem .8rem;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:.88rem}.toast.err{border-left-color:var(--bad)}.toast.ok{border-left-color:var(--ok)}.toast b{display:block}
.rec{color:var(--bad)!important;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.45}}

@media (max-width:1100px){body:not(.showright) #right{display:none}#right{position:absolute;right:0;top:0;bottom:0;z-index:30;box-shadow:-20px 0 50px rgba(0,0,0,.4)}.cols{position:relative}}
@media (max-width:760px){
  #left{position:absolute;left:0;top:0;bottom:0;z-index:35;width:min(86vw,320px);box-shadow:20px 0 50px rgba(0,0,0,.45)}body:not(.showleft) #left{display:none}
  .brandname,.search kbd,#openGraph,#dailyNote,#chainTxt{display:none}.search{flex:1 1 60px;min-width:60px}#openPalette{padding:.38rem .55rem}#chainChip{padding:.35rem .45rem}header.top{gap:.3rem;padding-left:.4rem;padding-right:.4rem}.work.mode-split #preview{display:none}#title{font-size:1.2rem}
  #editor,input,textarea{font-size:16px}#editor{padding:.8rem .9rem 40vh}#preview{padding:.8rem 1rem 40vh}.modal{padding:0;place-items:end center}.modalbox{border-radius:16px 16px 0 0;max-height:88dvh;width:100%}
  .noteactions{flex-wrap:wrap}canvas.graph{height:64dvh}
}
@media (pointer:coarse){.row{padding:.42rem .45rem}.icon{min-width:40px;height:40px}}
@media print{header,#left,#right,.status,.toolbar,.noteactions,#editor{display:none!important}body{overflow:visible;background:#fff;color:#000}#preview{display:block!important;padding:0}}

/* ------------------------------------------------------------------ the day-to-day side: today, log, journal, plan, ideas */
:root{--c0:#7c8cf8;--c1:#5eead4;--c2:#fbbf24;--c3:#f87171;--c4:#c084fc;--c5:#38bdf8;--c6:#fb923c;--c7:#a3e635;--m1:#f87171;--m2:#fb923c;--m3:#98a0b8;--m4:#5eead4;--m5:#7c8cf8;--navh:0px}
body.theme-light{--c0:#4f5fe0;--c1:#0d9488;--c2:#b45309;--c3:#dc2626;--c4:#9333ea;--c5:#0284c7;--c6:#c2410c;--c7:#4d7c0f;--m1:#dc2626;--m2:#c2410c;--m3:#8a91a8;--m4:#0d9488;--m5:#4f5fe0}
.c0{--c:var(--c0)}.c1{--c:var(--c1)}.c2{--c:var(--c2)}.c3{--c:var(--c3)}.c4{--c:var(--c4)}.c5{--c:var(--c5)}.c6{--c:var(--c6)}.c7{--c:var(--c7)}
.m1{--m:var(--m1)}.m2{--m:var(--m2)}.m3{--m:var(--m3)}.m4{--m:var(--m4)}.m5{--m:var(--m5)}
#nav{display:flex;gap:.1rem;align-items:center}
#nav button{background:none;border:0;border-radius:8px;padding:.36rem .7rem;cursor:pointer;color:var(--muted);font-weight:560;white-space:nowrap}
#nav button:hover{background:var(--panel2);color:var(--text)}#nav button.on{background:rgba(124,140,248,.18);color:var(--text)}#nav .more{display:none}
#captureBtn{min-width:38px;font-size:1.15rem;line-height:1;padding:.3rem .6rem}
body.life #left,body.life #right,body.life #toggleLeft,body.life #toggleRight,body.life footer.status{display:none}
.view{flex:1;overflow:auto;padding:1rem max(1rem,calc((100% - 860px)/2)) 6rem;-webkit-overflow-scrolling:touch}
.dayhead{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}.dayhead h2{margin:0;font-size:1.35rem;letter-spacing:-.015em}
.pills{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .7rem}.pill{display:inline-block;font-size:.76rem;border:1px solid var(--line2);border-radius:999px;padding:.12rem .6rem;color:var(--muted)}
.pill.good{color:var(--ok);border-color:currentColor}.pill.bad{color:var(--bad);border-color:currentColor}
.banner{display:flex;gap:.8rem;align-items:center;border:1px solid var(--warn);border-left-width:4px;border-radius:10px;padding:.7rem .9rem;margin:0 0 .8rem;font-size:.9rem;background:var(--panel)}.banner .btn{flex:none}
.fine{font-size:.78rem;color:var(--dim);margin:.5rem 0}
.capture{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:.55rem;margin:0 0 .8rem}.capture .seg{display:flex;margin-bottom:.45rem;overflow-x:auto;scrollbar-width:none}.capture .seg button{flex:1;padding:.35rem .5rem}
.capture .row2{display:flex;gap:.4rem;align-items:flex-end;flex-wrap:wrap}.capture textarea{flex:1 1 200px;min-width:0;resize:none;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;outline:none;font-size:1rem;line-height:1.4}
.capture textarea:focus,.view input:focus,.view select:focus,.view textarea:focus{border-color:var(--accent)}
.view input[type=text],.view input[type=search],.view input[type=date],.view input[type=time],.view select,.modalbox input[type=date],.modalbox input[type=time],.modalbox input[type=datetime-local],.modalbox textarea,.shape input[type=text],.shape textarea,.shape select{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:.45rem .6rem;outline:none;max-width:100%}
.modalbox textarea{width:100%;resize:vertical;font-size:1rem;line-height:1.5}.modalbox input.big{font-size:1.6rem;text-align:center;font-family:var(--mono)}
.buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.5rem;margin:0 0 .3rem}
.press{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-height:74px;text-align:left;background:color-mix(in srgb,var(--c) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 55%,var(--line2));border-left:4px solid var(--c);border-radius:12px;padding:.55rem .7rem;cursor:pointer;touch-action:manipulation;user-select:none}
.press:active{transform:scale(.97);background:color-mix(in srgb,var(--c) 30%,var(--panel))}.press b{font-size:.98rem}.press small{color:var(--muted);font-size:.74rem}
svg.spark{width:70px;height:16px;margin-top:auto}svg.spark rect{fill:var(--line2)}svg.spark rect.on{fill:var(--c,var(--accent))}
section.sec,details.sec{margin:1.1rem 0 0}section.sec>header{display:flex;align-items:baseline;gap:.6rem;border-bottom:1px solid var(--line);margin-bottom:.35rem;padding-bottom:.2rem}section.sec h3{margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);flex:1}
details.sec summary{cursor:pointer;color:var(--dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;padding:.3rem 0}
.logline{display:flex;gap:.6rem;align-items:baseline;padding:.42rem .2rem;border-bottom:1px solid var(--line)}.logline time{font:.8rem var(--mono);color:var(--dim);white-space:nowrap;flex:none}.logline .t{flex:1;min-width:0;overflow-wrap:anywhere}
.logline.void .t{text-decoration:line-through;color:var(--dim)}.logline a.tag{color:var(--accent2);cursor:pointer}.logline .link{flex:none}
.task{display:flex;gap:.6rem;align-items:center;padding:.4rem .2rem;border-bottom:1px solid var(--line)}.task input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex:none}.task .t{flex:1;min-width:0;overflow-wrap:anywhere}
.task.done .t,.task.done input[type=text]{color:var(--dim);text-decoration:line-through}.task small{color:var(--muted);font-size:.76rem;white-space:nowrap}.task small.late{color:var(--bad)}.task input[type=text]{flex:1;min-width:0}
.entry{display:flex;flex-direction:column;gap:.15rem;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--m,var(--line2));border-radius:12px;padding:.6rem .8rem;margin:0 0 .5rem;cursor:pointer}
.entry:hover{border-color:var(--accent);border-left-color:var(--m,var(--accent))}.entry small{color:var(--dim);font-size:.75rem}.entry span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.entry em{font-style:normal;color:var(--accent2);font-size:.78rem}
.prompts{display:grid;gap:.45rem}.prompt{display:flex;flex-direction:column;gap:.1rem;text-align:left;background:none;border:1px dashed var(--line2);border-radius:12px;padding:.6rem .8rem;cursor:pointer}.prompt:hover{border-color:var(--accent);border-style:solid}
.prompt small{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}.askbox{margin:0 0 .5rem}.askbox .q{font:1.05rem/1.4 Georgia,serif;margin:0 0 .1rem}
.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem}.mood{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.5rem .2rem;cursor:pointer}
.mood i{width:22px;height:22px;border-radius:50%;background:var(--m);opacity:.55}.mood small{font-size:.66rem;color:var(--muted);text-align:center;line-height:1.15}.mood.on{border-color:var(--m);box-shadow:0 0 0 1px var(--m)}.mood.on i{opacity:1}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.two input{width:100%}
.weeks{display:flex;align-items:flex-end;gap:3px;height:54px;border-bottom:1px solid var(--line);margin:.4rem 0 .8rem}.weeks i{flex:1;background:var(--m,var(--line2));border-radius:3px 3px 0 0;min-height:3px}
.filter,.addrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .8rem}.filter input,.addrow input[type=text]{flex:1 1 160px;min-width:0}.btn.on{border-color:var(--accent);color:var(--accent)}.btn.wide{display:block;width:100%;text-align:left;margin:0 0 .35rem}
.tagcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.45rem}.tagcard{display:flex;flex-direction:column;gap:.1rem;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;cursor:pointer}
.tagcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.tagcard.due{border-left:4px solid var(--warn)}.tagcard span{font-size:.84rem;color:var(--muted)}.tagcard small{font-size:.72rem;color:var(--dim);min-height:1em}
svg.chart{display:block;width:100%;height:150px;border-bottom:1px solid var(--line)}svg.chart polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}svg.chart .a{stroke:var(--accent)}svg.chart .b{stroke:var(--accent2)}
.ends{display:flex;justify-content:space-between;gap:.6rem;font-size:.74rem;color:var(--dim);margin:.2rem 0 .6rem}
.btnrow{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;padding:.4rem 0;border-bottom:1px solid var(--line)}.btnrow input{flex:1 1 130px;min-width:0}.btnrow select{flex:0 1 auto}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line2);background:var(--c);cursor:pointer;flex:none}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:.4rem 0}.month b{text-align:center;font-size:.7rem;color:var(--dim);font-weight:600}
.month .d{aspect-ratio:1/1;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:color-mix(in srgb,var(--m,transparent) 18%,var(--panel2));border:1px solid var(--line);border-radius:9px;cursor:pointer;padding:0}
.month .d.now{border-color:var(--accent)}.month .d.on{box-shadow:0 0 0 2px var(--accent)}.month .d i{font-style:normal;font-size:.86rem}.month .d em{display:flex;gap:3px;align-items:center;height:10px;font-style:normal}
.month u{text-decoration:none;font:.62rem var(--mono);color:var(--muted)}.month u.j{width:6px;height:6px;border-radius:50%;background:var(--accent)}.month u.k{width:6px;height:6px;background:var(--warn)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}.tile{display:flex;flex-direction:column;gap:.2rem;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;cursor:pointer}.tile:hover{border-color:var(--accent)}.tile small{color:var(--muted);font-size:.78rem;line-height:1.35}
.seg.wide{display:flex;margin:0 0 .8rem}.seg.wide button{flex:1;padding:.4rem .5rem}
details.lesson{border-bottom:1px solid var(--line);padding:.5rem 0}details.lesson summary{cursor:pointer;font-weight:600;display:flex;gap:.5rem;align-items:baseline}details.lesson summary i{font-style:normal;color:var(--dim);min-width:1.8rem;font-weight:400}details.lesson p{margin:.5rem 0 .5rem 2.3rem;font-size:.9rem}details.lesson .rowbtns{margin:.2rem 0 .4rem 2.3rem}

/* notes with a shape */
.work.mode-shape #editor,.work.mode-shape #preview{display:none}.work:not(.mode-shape) #shape{display:none}
#shape{flex:1;min-width:0;overflow:auto;padding:1rem max(1rem,calc((100% - 900px)/2)) 40vh}.shape.board{padding-left:1rem;padding-right:1rem}
.shape .box{margin:0 0 1.1rem}.shape .box h3{margin:0 0 .15rem;font-size:1.02rem}.shape .hint{margin:0 0 .35rem;color:var(--muted);font-size:.84rem}.shape .box>textarea{width:100%;resize:vertical;min-height:64px;font-size:1rem;line-height:1.5}
.shape .pre{color:var(--muted);margin-bottom:.8rem}table.grid{border-collapse:collapse;width:100%}table.grid th,table.grid td{border:1px solid var(--line);padding:3px;vertical-align:top}table.grid th{background:var(--panel2);white-space:nowrap}
table.grid input,table.grid textarea{width:100%;min-width:90px;border:0!important;background:transparent!important;padding:.35rem .4rem!important;border-radius:0!important}table.grid input.n{min-width:54px;text-align:right;font-family:var(--mono)}table.grid th input{font-weight:650;min-width:80px;width:calc(100% - 1.6rem)}
table.grid .tot{text-align:right;font:600 .9rem var(--mono);padding:.4rem .6rem;white-space:nowrap}table.grid tr.lead .tot{color:var(--ok)}
.cols-rail{display:flex;gap:.7rem;align-items:flex-start;overflow-x:auto;padding-bottom:.8rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.col{flex:0 0 min(300px,82vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.5rem;scroll-snap-align:start;max-height:100%}.col>header{display:flex;align-items:center;gap:.3rem;margin-bottom:.3rem}
.coltitle{flex:1;min-width:0;border:0!important;background:none!important;font-weight:650;padding:.2rem .3rem!important}.col .count{color:var(--dim);font-size:.75rem}
.cards{min-height:34px;display:flex;flex-direction:column;gap:.35rem}.card{display:flex;align-items:flex-start;gap:.25rem;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:.25rem .3rem .25rem .1rem}
.card textarea{flex:1;min-width:0;border:0!important;background:none!important;resize:none;padding:.3rem .2rem!important;line-height:1.35}.card.done textarea{text-decoration:line-through;color:var(--dim)}.card input[type=checkbox]{margin-top:.55rem;accent-color:var(--accent)}
.grip{flex:none;background:none;border:0;color:var(--dim);cursor:grab;padding:.4rem .3rem;font-size:.7rem;letter-spacing:1px;touch-action:none;border-radius:6px;min-height:34px}.grip:hover{background:var(--line);color:var(--text)}
.card.lifted{opacity:.35}.card.ghost{position:fixed;z-index:500;pointer-events:none;box-shadow:0 14px 40px rgba(0,0,0,.5);transform:rotate(1.5deg)}.dropmark{height:3px;border-radius:2px;background:var(--accent);margin:1px 0}
.addcard{display:flex;gap:.3rem;margin-top:.4rem;align-items:flex-end}.addcard textarea{flex:1;min-width:0;resize:none}
.board.notes .card{background:hsl(var(--h,50) 70% 82%);border-color:hsl(var(--h,50) 50% 60%);color:#1b1e2b}.board.notes .card textarea{color:#1b1e2b}.board.notes .grip{color:#1b1e2b88}
.board.grid .cols-rail{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.board.grid .col{flex:none;min-height:180px}

@media (max-width:1180px){#nav button{padding:.36rem .5rem}#newNote,#openGraph{display:none}}
@media (max-width:760px){
  :root{--navh:calc(58px + env(safe-area-inset-bottom))}
  #app{padding-bottom:var(--navh)}
  #nav{position:fixed;left:0;right:0;bottom:0;z-index:120;height:var(--navh);padding:0 .2rem env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line2);justify-content:space-around;gap:0}
  #nav button{flex:1;min-height:52px;padding:.2rem .1rem;font-size:.82rem;border-radius:10px}#nav .more{display:block}#nav .extra{display:none}
  body.navopen #nav .extra{display:block;position:fixed;right:.5rem;width:9.5rem;min-height:48px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.4);flex:none;text-align:left;padding-left:1rem}
  body.navopen #nav .extra[data-v=plan]{bottom:calc(var(--navh) + 58px)}body.navopen #nav .extra[data-v=ideas]{bottom:calc(var(--navh) + 6px)}
  #captureBtn{min-width:44px;min-height:40px}.view{padding:.8rem .8rem 5rem}.dayhead h2{font-size:1.15rem}.buttons{grid-template-columns:repeat(2,1fr)}.press{min-height:78px}
  .two{grid-template-columns:1fr}.moods{gap:.2rem}.mood small{font-size:.6rem}.tiles{grid-template-columns:1fr}.tagcards{grid-template-columns:1fr 1fr}.logline{flex-wrap:wrap}.logline .t{flex:1 1 60%}
  #toasts{bottom:calc(var(--navh) + .6rem)}.view input,.view select,.view textarea,.shape input,.shape textarea,.modalbox textarea,.modalbox input{font-size:16px}
  #shape{padding:.8rem .8rem 40vh}.board.grid .cols-rail{grid-template-columns:1fr}.work.mode-shape~*{}
  .btnrow input{flex:1 1 40%}
}
@media (pointer:coarse){.link{padding:.4rem .5rem;font-size:.84rem}.task input[type=checkbox]{width:24px;height:24px}.grip{min-height:44px;min-width:36px;font-size:.8rem}.seg button{padding:.45rem .6rem}}
@media print{#nav,#captureBtn,.view{display:none!important}}
body.theme-dark{color-scheme:dark}body.theme-light{color-scheme:light}