:root{--bg:#f2f4f3;--sf:#fff;--ink:#1d2733;--mut:#5d6b78;--line:#dbe1e0;--ac:#1f6f78;--onac:#fff;--acs:#d9ecee;--am:#b9791f;--pl:#7a4e7e;--m1:#8a5a8f;--m2:#6f7fb0;--m3:#8fa5a8;--m4:#5f9f84;--m5:#d4a43a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141a20;--sf:#1c242c;--ink:#e6ecef;--mut:#9aa8b3;--line:#2c3742;--ac:#5cb8c2;--onac:#10262a;--acs:#1f3a3f;--am:#e0a850;--pl:#c496c8;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#141a20;--sf:#1c242c;--ink:#e6ecef;--mut:#9aa8b3;--line:#2c3742;--ac:#5cb8c2;--onac:#10262a;--acs:#1f3a3f;--am:#e0a850;--pl:#c496c8;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Figtree,system-ui,"Segoe UI",sans-serif}
#app{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
nav{position:sticky;top:0;align-self:start;height:100vh;padding:28px 16px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}
.logo{font:700 30px Literata,Georgia,serif;letter-spacing:-.01em;margin:0 0 20px 10px}
nav button{all:unset;cursor:pointer;padding:9px 12px;border-radius:8px;color:var(--mut);font-weight:500}
nav button:hover{background:var(--acs)}
nav button.on{background:var(--acs);color:var(--ink);font-weight:700}
nav button:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
main{padding:32px clamp(16px,4vw,48px) 64px;max-width:820px;width:100%}
h1{font:600 32px/1.2 Literata,Georgia,serif;margin:0}
h2{font-size:15px;margin:0 0 10px;font-weight:700}
.sub{color:var(--mut);margin:4px 0 24px}
section{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.q{font:italic 400 19px/1.5 Literata,Georgia,serif;margin:0 0 12px}
textarea,input{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
textarea{min-height:110px;resize:vertical;font-family:Literata,Georgia,serif;line-height:1.6}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.row input{flex:1;min-width:140px;width:auto}
button.b{font:inherit;font-weight:700;cursor:pointer;background:var(--ac);color:var(--onac);border:0;border-radius:8px;padding:9px 16px}
button.g{font:inherit;font-weight:500;cursor:pointer;background:none;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:8px 14px}
button.x{all:unset;cursor:pointer;color:var(--mut);font-size:13px;padding:2px 6px;border-radius:6px}
button.x:hover{color:var(--ink);background:var(--acs)}
.moods{display:flex;gap:8px;flex-wrap:wrap}
.moods button{font:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 8px}
.moods button.on{border-color:var(--ink);font-weight:700}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;flex:none}
.item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0}
.item .t{flex:1;min-width:0}
.item .t b,.item .t .tt{display:block}
.meta{color:var(--mut);font-size:13px}
.body{white-space:pre-wrap;font-family:Literata,Georgia,serif;line-height:1.6;margin:4px 0 0}
.done .tt{text-decoration:line-through;color:var(--mut)}
input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--ac);padding:0;flex:none}
.empty{color:var(--mut);margin:0}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .h{text-align:center;color:var(--mut);font-size:13px;padding:4px 0}
.cal button{font:inherit;cursor:pointer;aspect-ratio:1/0.9;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px 2px}
.cal button.td{border-color:var(--ac);font-weight:700}
.cal button.sel{background:var(--acs);border-color:var(--ink)}
.cal button.o{opacity:.35}
.dots{display:flex;gap:3px;height:7px}.dots i{width:6px;height:6px;border-radius:50%}
.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.head b{font:600 20px Literata,Georgia,serif}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.chips span{background:var(--acs);border-radius:999px;padding:2px 12px}
.bars{display:flex;gap:8px;align-items:flex-end;height:110px}
.bars div{flex:1;text-align:center;font-size:12px;color:var(--mut);display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars i{display:block;background:var(--ac);border-radius:4px 4px 0 0;min-height:2px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stats div{border:1px solid var(--line);border-radius:10px;padding:12px}
.stats b{display:block;font:600 26px Literata,Georgia,serif}
svg{width:100%;height:auto;display:block}
@media (max-width:760px){
#app{grid-template-columns:1fr}
nav{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--sf);border-right:0;border-top:1px solid var(--line);z-index:10;gap:0}
nav button{padding:8px 2px;font-size:12px;text-align:center}#toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
.logo{display:none}
main{padding-bottom:96px}
h1{font-size:26px}
}
.md{font-family:Literata,Georgia,serif;line-height:1.6}
.md h3{font:600 21px/1.3 Literata,Georgia,serif;margin:0 0 6px}.md h4{font:600 16px Figtree,system-ui,sans-serif;margin:14px 0 4px}.md h5{font:600 15px Figtree,system-ui,sans-serif;margin:10px 0 2px}
.md p{margin:4px 0}.md ul{padding-left:20px;margin:4px 0}.md li.c{list-style:none;margin-left:-20px}
.md code{background:var(--bg);padding:1px 5px;border-radius:4px}
.mono{font-family:ui-monospace,"DejaVu Sans Mono",Menlo,monospace;font-size:14px;min-height:200px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:8px;z-index:20;max-width:90vw}
#toast[hidden]{display:none}
.moods.seg button{padding:6px 14px}
@media (max-width:760px){nav{overflow-x:auto;justify-content:flex-start;gap:2px}nav button{flex:none;padding:8px 10px}}
#rem{position:fixed;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top,0px));width:min(560px,94vw);background:var(--sf);border:1px solid var(--ac);border-radius:12px;padding:8px 16px;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#rem[hidden]{display:none}
.rm{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:8px 0}.rm b{display:block}
select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}
.row select{flex:1;min-width:140px}
.sub{display:flex;gap:10px;align-items:center;padding:3px 0 3px 4px}
.sub input:not([type=checkbox]){flex:1;width:auto;min-width:0;padding:6px 10px}
.sub input[type=checkbox]{width:16px;height:16px;margin:0}
.notes{display:flex;gap:14px;align-items:flex-start}
.ncol{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.ncard{margin:0;padding:14px}

.ncard:hover{border-color:var(--ac)}
.ncard .md{max-height:260px;overflow:hidden;cursor:pointer}
.ncard .md.open{max-height:none}
.ncard .md.clip{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.ncard .md h3{font-size:18px}
.lab{display:flex;gap:8px;align-items:center;flex:1;min-width:180px}
.hs{display:flex;gap:6px;margin:12px 0 6px}
.hd{width:14px;height:14px;border-radius:50%;background:var(--line);display:inline-block}
.hd.ok{background:var(--m4)}.hd.no{background:#c4564f}
.hgrid{display:flex;gap:16px;align-items:flex-start}
.hcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.hgrid section{margin:0;min-width:0}
.bar{height:6px;border-radius:3px;background:var(--line);margin:6px 0}
.bar i{display:block;height:100%;border-radius:3px;background:var(--ac)}
.drow{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--bg);cursor:grab}
.drow .dl{flex:1}
.grip{color:var(--mut);cursor:grab;user-select:none}

.dragcard{cursor:grab}
.hbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pill{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:999px;padding:3px 14px;min-width:56px}
.pill.on{background:var(--ac);color:var(--onac);border-color:var(--ac);font-weight:700}
.ni{margin-right:8px}.ni:empty{display:none}.nc{display:none}
.ico{font-size:18px;line-height:1;padding:2px 6px}
.epick{display:flex;flex-wrap:wrap;gap:4px;padding:8px;margin:-2px 0 8px;border:1px solid var(--line);border-radius:8px;background:var(--sf)}
.epick>button{all:unset;cursor:pointer;font-size:20px;padding:4px 6px;border-radius:6px}
.epick>button:hover{background:var(--acs)}
#app.nav-top{grid-template-columns:1fr}
.nav-top nav{height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:10px clamp(12px,3vw,32px);border-right:0;border-bottom:1px solid var(--line);z-index:5;background:var(--bg);gap:4px}
.nav-top .logo{margin:0 16px 0 0;white-space:nowrap}
.nav-top nav .navb{white-space:nowrap;flex:none}
#app.nav-cards{grid-template-columns:300px 1fr}
.nav-cards nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;overflow-y:auto;padding:24px 14px}
.nav-cards .logo{grid-column:1/-1;margin:0 0 6px 4px}
.nav-cards nav .navb{display:grid;grid-template-columns:1fr auto;grid-template-areas:"i c" "n n";align-items:start;min-height:88px;padding:12px 14px;border-radius:16px;color:var(--ink);font-weight:700;background:var(--acs);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 40%,var(--sf)),color-mix(in srgb,var(--tc) 20%,var(--sf)))}
.nav-cards nav .navb:hover{filter:brightness(1.08)}
.nav-cards nav .navb.wide{grid-column:1/-1}
.nav-cards nav .navb.on{box-shadow:inset 0 0 0 2px var(--ink)}
.nav-cards .ni{grid-area:i;font-size:26px;line-height:1;margin:0}
.nav-cards .nc{display:block;grid-area:c;align-self:center;font-size:24px;line-height:1.1}
.nav-cards .nl{grid-area:n;align-self:end;margin-top:14px;font-size:14px}
@media (max-width:760px){
#app:not(.nav-top) nav .navb{display:flex;flex-direction:column;align-items:center}
#app:not(.nav-top) .ni{margin:0 0 2px}
.nav-cards nav{display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));overflow-y:visible}
.nav-cards nav .navb{min-height:0;padding:6px 10px;border-radius:8px;background:none;font-weight:500;font-size:12px;color:var(--mut)}
.nav-cards nav .navb.on{background:var(--acs);box-shadow:none;color:var(--ink);font-weight:700}
.nav-cards .nc{display:none}
#app.nav-top nav{position:sticky;top:0;bottom:auto;left:auto;right:auto;justify-content:flex-start;padding:8px 12px;border-top:0;border-bottom:1px solid var(--line);background:var(--bg)}
#app.nav-top .logo{display:none}
.nav-top main{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.sym{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;flex:none}
.nav-cards .ni>.sym{width:44px;height:44px;padding:10px;border-radius:50%;background:color-mix(in srgb,var(--sf) 45%,transparent);color:var(--ink)}
.sympick{gap:8px;padding:12px}
.sympick .pgrid>button{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 14%,var(--sf));color:var(--ink)}
.sympick .pgrid>button:hover{background:var(--ac);color:var(--onac)}
.sympick .pgrid>button.on{background:var(--ac);color:var(--onac)}
.sympick .sym{width:24px;height:24px}
@media (max-width:760px){.nav-cards .ni>.sym{width:1.15em;height:1.15em;padding:0;background:none;color:inherit}}
.pcats{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin:8px 0 4px}
.pcats button{font:inherit;font-size:13px;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--mut);border-radius:999px;padding:3px 12px}
.pcats button.on{background:var(--ac);color:var(--onac);border-color:var(--ac);font-weight:700}
.pgrid{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;width:100%;max-height:340px;overflow-y:auto;padding:4px 2px}
.pgrid>button{all:unset;cursor:pointer;font-size:24px;line-height:1.2;padding:4px 6px;border-radius:8px}
.pgrid>button:hover,.pgrid>button.on{background:var(--acs)}
.pgrid>button:focus-visible{outline:2px solid var(--ac)}
.sympick .pgrid{gap:8px}

.npanel{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;align-items:start}
.nlist{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px}
.nlist>input{margin-bottom:6px}.nlist>button.g{margin-bottom:6px}
.nlab{margin:10px 6px 2px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.nli{all:unset;cursor:pointer;display:block;padding:8px 10px;border-radius:8px;min-width:0}
.nli:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nli b,.nli .meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nedit section{margin:0}
.nedit textarea{min-height:60vh}
#nb,#nb:focus,#nb:focus-visible{border:0;outline:none;box-shadow:none;background:none;border-radius:0;padding:6px 0;width:100%;box-sizing:border-box;resize:none}
@media (max-width:760px){.npanel{grid-template-columns:1fr}.nlist{position:static;max-height:50vh}}
.ctx{position:fixed;z-index:40;min-width:190px;background:var(--sf);border:1px solid var(--line);border-radius:10px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;flex-direction:column}
.ctx[hidden]{display:none}
.ctx button{all:unset;cursor:pointer;padding:8px 12px;border-radius:6px;color:var(--ink)}
.ctx button:hover,.ctx button:focus-visible{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ctx button.danger{color:#d0574f}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tcard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:6px;border:2px solid var(--line);border-radius:12px;background:var(--bg)}
.tcard:hover{border-color:var(--mut)}
.tcard.on{border-color:var(--ac)}
.tcard:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.tprev{display:flex;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.tp{flex:1;position:relative;padding:8px}
.tp i{display:flex;flex-direction:column;gap:4px;height:100%;border:1px solid;border-radius:5px;padding:6px}
.tp em{display:block;height:4px;border-radius:2px;width:85%}
.tp b{position:absolute;right:12px;bottom:12px;width:14px;height:14px;border-radius:50%}
.tname{font-weight:700;padding:0 4px 2px}
.tcard.on .tname{color:var(--ac)}
/* Note properties (Obsidian-style) */
.props{margin:0 0 14px}
.propcard{padding:4px 12px;border-radius:16px;background:color-mix(in srgb,var(--ink) 5%,var(--sf));border:1px solid var(--line)}
.propcard .padd{margin:4px 0 6px}
.ptitle{font-size:15px;font-weight:700;margin:0 0 6px}
.prow{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:10px;align-items:center;min-height:34px;padding:2px 0}
.pname{display:flex;align-items:center;gap:8px;color:var(--mut);min-width:0}
.pname .sym{width:16px;height:16px;flex:none;vertical-align:0}
.pname>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname .prm{margin-left:auto;opacity:0}
.prow:hover .pname .prm,.pname .prm:focus-visible{opacity:1}
.pval{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
input.pinp{flex:1;min-width:90px;width:auto;background:none;border:1px solid transparent;padding:4px 8px}
input.pinp:hover,input.pinp:focus{border-color:var(--line);background:var(--bg)}
.pval input[type=checkbox]{margin:0}
.chip{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:1px 2px 1px 10px;background:color-mix(in srgb,var(--ink) 10%,transparent)}
.chip.tagc{background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ink)}
.chip.cat{background:none;padding-left:0}
.clink{all:unset;cursor:pointer;color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.chip.tagc.clink,.chip.tagc .clink{color:var(--ink);text-decoration:none}
button.chip.tagc{padding:2px 10px}
.clink:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.cx{all:unset;cursor:pointer;color:var(--mut);padding:0 6px;border-radius:999px;line-height:1.5}
.cx:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent)}
.padd{margin-top:4px}
.nchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:14px}
.cath{font-size:28px;margin:16px 0 2px}
.clist{margin:0;padding-left:20px}
.clist li{padding:4px 0}
.catrow{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:9px 10px;border-radius:8px}
.catrow:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
@media (max-width:760px){.prow{grid-template-columns:minmax(112px,38%) minmax(0,1fr);gap:8px;min-height:40px}.prow.pnew{grid-template-columns:1fr;gap:4px;padding:6px 0}.propcard{padding:2px 10px}}
@media (max-width:760px){body.kbedit .mdbar{position:fixed;left:0;right:0;top:auto;bottom:var(--kb,0px);margin:0;border-radius:0;border-width:1px 0 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:5px 8px;z-index:60;background:var(--sf)}body.kbedit .mdbar::-webkit-scrollbar{display:none}body.kbedit .mdbar button{flex:none}body.kbedit #mtabs{display:none!important}body.kbedit #nb{padding-bottom:64px}}
.ntitle{flex:1;min-width:0;width:auto;font:600 28px/1.25 Literata,Georgia,serif;color:var(--ink);background:none;border:0;border-radius:0;padding:2px 0;border-bottom:1px solid transparent}
.ntitle:hover{border-bottom-color:var(--line)}
.ntitle:focus{outline:none;border-bottom-color:var(--ac)}
.ntitle::placeholder{color:var(--mut);opacity:.7}
.ntools{display:flex;align-items:center;gap:2px;flex:none;padding-top:6px}
.ntools .ico .sym{width:18px;height:18px}
.ntools button:disabled{opacity:.35;cursor:default;background:none}
#nstat{min-width:56px;margin-left:6px}
.nsort{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nlist .nsort{padding:2px 4px 4px}
.nsort .moods.seg button{padding:3px 10px;font-size:13px}
/* Notes view tiles: same look as the section cards in the sidebar */
.ntabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 16px}
.ntab{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-width:150px;flex:1 1 150px;max-width:220px;padding:10px 14px 10px 10px;border-radius:14px;color:var(--ink);font-weight:700;background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 40%,var(--sf)),color-mix(in srgb,var(--tc) 20%,var(--sf)))}
.ntab:hover{filter:brightness(1.08)}
.ntab.on{box-shadow:inset 0 0 0 2px var(--ink)}
.ntab:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.nti{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--sf) 45%,transparent);font-size:18px;line-height:1}
.nti .sym{width:18px;height:18px;vertical-align:0}
.ntl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntc{font-size:18px;line-height:1}
@media (max-width:760px){.ntab{min-width:0;flex:1 1 calc(50% - 10px);max-width:none}}
/* Task lists: pinned cards and "My lists" rows */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:16px 0 26px}
.lcard{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;grid-template-areas:"i n" "l l";min-height:108px;padding:14px 16px;border-radius:18px;color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 55%,var(--sf)),color-mix(in srgb,var(--tc) 28%,var(--sf)))}
.lcard:hover{filter:brightness(1.08)}
.lcard:focus-visible,.lrow:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.lci{grid-area:i;font-size:30px;line-height:1}
.lci .sym{width:34px;height:34px;vertical-align:0}
.lcn{grid-area:n;font-size:34px;font-weight:700;line-height:1}
.lcl{grid-area:l;align-self:end;font-size:18px;font-weight:700;margin-top:16px}
.lhead{font-size:22px;margin:4px 0 10px}
section.lrows{padding:0;overflow:hidden}
.lrow{all:unset;cursor:pointer;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px}
.lrow:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* inset divider: starts where the text starts (16 px padding + 36 px icon + 14 px gap), stops 16 px before the edge */
.lrow+.lrow::before{content:"";position:absolute;top:0;left:66px;right:16px;height:1px;background:var(--line)}
.lrow:hover::before,.lrow:hover+.lrow::before,.lrow.dragph::before,.lrow.dragph+.lrow::before{opacity:0}
.lri{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;flex:none;font-size:18px;line-height:1}
.lri .sym{width:20px;height:20px;vertical-align:0}
.lri.big{width:46px;height:46px;font-size:24px}
.lri.big .sym{width:26px;height:26px}
.lrl{flex:1;font-size:17px;min-width:0}
.lrc{font-size:16px}
.lrch{color:var(--mut);font-size:22px}
.lhdr{display:flex;align-items:center;gap:12px;margin:16px 0}
.lhdr h1{color:color-mix(in srgb,var(--tc) 65%,var(--ink))}
.lsw{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 2px transparent}
.lsw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.lsw:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.dragghost{position:fixed!important;margin:0!important;pointer-events:none!important;z-index:60;opacity:.9;box-shadow:0 10px 28px rgba(0,0,0,.35);list-style:none}
.dragph{background:color-mix(in srgb,var(--ink) 9%,transparent)!important;box-shadow:inset 0 2px 12px rgba(0,0,0,.35)!important;border-color:transparent!important;filter:none!important;outline:none!important}
.dragph>*{visibility:hidden}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none!important}
nav .navb,.drow,.dragcard,.lcard,.lrow,.ccard,.ntab[data-dnd]{touch-action:none}
/* Home search and command bar */
.hsearch{display:flex;align-items:center;gap:10px;background:var(--sf);border:1px solid var(--line);border-radius:14px;padding:2px 12px 2px 14px;margin:2px 0 18px}
.hsearch:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}
.hsearch>.sym{width:20px;height:20px;color:var(--mut);flex:none;vertical-align:0}
.hsearch input{flex:1;min-width:0;width:auto;border:0;background:none;padding:12px 0;font-size:17px}
.hsearch input:focus-visible{outline:none}
kbd{font:inherit;font-size:12px;line-height:1.4;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--mut);white-space:nowrap}
.hres{max-width:900px}
.sgroup h2 .meta{font-weight:400;margin-left:4px}
.sres{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:8px 10px;border-radius:8px}
.sres:hover,.sres:focus-visible{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.sres:focus-visible{outline:2px solid var(--ac)}
.sres b{display:block}
.sres .meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdrow{display:flex;align-items:center;gap:12px}
.cmdrow kbd{font-size:14px;min-width:28px;text-align:center}
mark{background:color-mix(in srgb,var(--ac) 32%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.setrow{padding:12px 0;border-top:1px solid var(--line)}
.sgroup .head+.setrow{border-top:0;padding-top:4px}
.setlab{margin:0 0 6px}
/* Tasks inside a list: checklist rows */
.rlist{padding-bottom:80px}
.lnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.circ{all:unset;cursor:pointer;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--sf);border:1px solid var(--line);color:var(--ink)}
.circ:hover{background:color-mix(in srgb,var(--ink) 10%,var(--sf))}
.circ[aria-pressed="true"]{background:color-mix(in srgb,var(--tc) 30%,var(--sf))}
.circ:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.circ .sym{width:22px;height:22px;vertical-align:0}
.ltitle{font-size:40px;line-height:1.1;margin:6px 0 14px;color:var(--tc)}
.rrow{position:relative;display:flex;gap:14px;align-items:flex-start;padding:12px 2px}
.rchk{all:unset;cursor:pointer;box-sizing:border-box;flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;border:2px solid color-mix(in srgb,var(--mut) 75%,transparent)}
.rchk:hover{border-color:var(--tc)}
.rchk:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.rrow.done .rchk{border-color:var(--tc);background:radial-gradient(circle,var(--tc) 0 5.5px,transparent 6.5px)}
.rchk.ghost{cursor:default;opacity:.45}
.rt{flex:1;min-width:0}
.rtt{display:block;font-size:18px;line-height:1.35;overflow-wrap:anywhere}
.rrow.done .rtt{color:var(--mut)}
.rdue{display:block;font-size:15px;color:var(--mut);margin-top:2px}
.rdue.late{color:#e5534b}
.rex{display:block;margin-top:2px}
.ract{display:flex;gap:2px;opacity:0;flex:none}
.rrow:hover .ract,.ract:focus-within{opacity:1}
.rin{background:none;border:0;padding:2px 0;font-size:18px}
.rin:focus-visible{outline:none}
.rnew .rt{padding-top:0}
.rdet{margin-top:8px}
.rshow{display:block;margin:14px 0 4px}
.rday{font-size:20px;margin:22px 0 4px}
.redit{display:block}
.redit .item{border:0;padding:0}
.fab{all:unset;cursor:pointer;position:fixed;right:28px;bottom:28px;z-index:15;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--tc);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.fab:hover{filter:brightness(1.1)}
.fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fab .sym{width:28px;height:28px;vertical-align:0}
@media (max-width:760px){.fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}.ract{opacity:1}}
.rdet[hidden]{display:none}
/* new-task row: input, Add and Details on one centred line; the circle lines up with it */
.rnline{display:flex;align-items:center;gap:8px;min-height:40px}
.rnline .rin{flex:1;min-width:0;width:auto}
.rnew .rchk{margin-top:8px}
/* Journal photos: mosaic */
.mosaic{display:grid;gap:4px;height:300px;max-width:680px;margin:10px 0 12px;border-radius:16px;overflow:hidden}
.mimg{all:unset;cursor:zoom-in;position:relative;overflow:hidden;min-width:0;min-height:0;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mimg img{display:block;width:100%;height:100%;object-fit:cover}
.mimg:focus-visible{outline:3px solid var(--ac);outline-offset:-3px}
.mimg.missing::after{content:"Photo not found";position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13px}
.m1{grid-template-columns:1fr}
.m2{grid-template-columns:1fr 1fr}
.m3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.m3 .mimg:first-child{grid-row:1/3}
.m4{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.m4 .mimg:nth-child(1){grid-row:1/3}
.m4 .mimg:nth-child(2){grid-column:2;grid-row:1}
.m4 .mimg:nth-child(3){grid-column:2;grid-row:2}
.m4 .mimg:nth-child(4){grid-column:3;grid-row:1/3}
.m5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.m5 .mimg:first-child{grid-row:1/3}
.more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-size:26px;font-weight:700}
.jpend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.jth{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden}
.jth img{width:100%;height:100%;object-fit:cover;display:block}
.jth .cx{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:#fff;padding:0 6px}
.lbox{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.88)}
.lbox img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lbox .circ{position:absolute;font-size:26px;line-height:1}
.lbp{left:20px;top:50%;transform:translateY(-50%)}
.lbx{right:20px;top:50%;transform:translateY(-50%)}
.lbc{top:20px;right:20px}
.lbn{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#ddd;font-size:14px}
@media (max-width:760px){.mosaic{height:220px}}
/* Journal location */
.jloc{display:flex;align-items:center;gap:6px;color:var(--mut);font-family:Figtree,system-ui,sans-serif;font-size:14px;margin:-4px 0 10px}
.jloc .sym{width:16px;height:16px;color:var(--ac);vertical-align:0}
.jlocin{display:flex;align-items:center;gap:8px;margin-top:10px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);max-width:360px}
.jlocin .sym{width:16px;height:16px;color:var(--mut);flex:none;vertical-align:0}
.jlocin input{border:0;background:none;padding:8px 0;flex:1;min-width:0;width:auto}
.jlocin input:focus-visible{outline:none}
.jlocin:focus-within{border-color:var(--ac)}
/* Settings → Storage */
.path{font-family:ui-monospace,"DejaVu Sans Mono",monospace;font-size:14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin:0 0 12px;overflow-wrap:anywhere}
.path.inline{display:inline;padding:1px 6px;margin:0}
.callout{border:1px solid var(--ac);border-radius:10px;padding:12px 14px;background:color-mix(in srgb,var(--ac) 8%,transparent)}
/* Settings → Commands */
.cmdset{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:4px 14px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cmdset:first-of-type{border-top:0}
.cmdset label{display:flex;flex-direction:column}
.cmdset input{max-width:320px}
.cmderr{grid-column:2;color:#e5534b}
.cmderr:empty{display:none}
@media (max-width:760px){.cmdset{grid-template-columns:1fr}.cmderr{grid-column:1}}
.cmdwarn{color:#e5534b}
/* Collections */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 16px;margin-top:6px}
.ccard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0}
.ccard:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:10px}
.ccov{position:relative;display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .15s}
.ccard:hover .ccov{transform:translateY(-3px)}
.ccov img,.cbig img,.cthumb img{display:block;width:100%;height:100%;object-fit:cover}
.ccard b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
.ccard .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cph{display:grid;place-items:center;width:100%;height:100%;font-size:42px;color:var(--mut)}
.cph .sym{width:46px;height:46px}
.cbadge{position:absolute;right:6px;top:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.7);color:#fff}
.cbadge.s-want{background:#e8b923;color:#2b2204}.cbadge.s-doing{background:#2f72c4}.cbadge.s-done{background:#2f8a57}.cbadge.s-dropped{background:#c4392f}
.stars{display:inline-flex;gap:1px;font-size:13px}
.star{color:color-mix(in srgb,var(--mut) 45%,transparent)}
.star.on{color:#e3b341}
button.star{all:unset;cursor:pointer;font-size:28px;line-height:1;padding:0 2px}
button.star:focus-visible{outline:2px solid var(--ac);border-radius:4px}
.colbar{gap:10px 14px;align-items:center;margin:2px 0 16px}
.colbar>input{flex:1;min-width:220px;width:auto}
.cres{display:flex;flex-direction:column;gap:4px;margin-top:12px;max-height:460px;overflow-y:auto}
.crow{display:flex;gap:12px;align-items:center;padding:6px;border-radius:10px}
.crow:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.cthumb{width:46px;height:68px;flex:none;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.crow .t{flex:1;min-width:0}
.crow .t b{display:block}
.cdetail{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:28px;align-items:start;margin-top:8px}
.cbig{aspect-ratio:2/3;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.35);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.cbig .cph{font-size:72px}.cbig .cph .sym{width:80px;height:80px}
.cinfo .ntitle{width:100%;margin-top:4px}
.cnotes{min-height:180px}
@media (max-width:760px){.cdetail{grid-template-columns:1fr}.cbig{max-width:220px}}
.cfields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;margin-top:10px}
.cfields>label{display:flex;flex-direction:column;gap:4px}
.cfields .cwide{grid-column:1/-1}
.cdetail .cbig+.row{margin-top:10px}
.ctxlab{margin:6px 12px 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.ctxchk{display:inline-block;width:18px;color:var(--ac)}
.ctxstars{display:flex;gap:2px;padding:2px 10px 6px}
.ctx .ctxstars .star{all:unset;cursor:pointer;font-size:22px;line-height:1;padding:2px;color:color-mix(in srgb,var(--mut) 45%,transparent)}
.ctx .ctxstars .star.on{color:#e3b341}
.ctx .ctxstars .star:hover,.ctx .ctxstars .star:focus-visible{background:none;color:#e3b341}
.ctxhr{border:0;border-top:1px solid var(--line);margin:4px 6px}
.ccard.dragph{border-radius:10px}
.ccard.dragghost .ccov{transform:none}
[data-dnd] img{-webkit-user-drag:none;user-select:none}
/* Shine on hover (Settings → Appearance), collection covers only: tilt toward the pointer + a slow diagonal light sweep */
body.shine .ccov{transition:transform .45s ease-out,box-shadow .45s ease-out}
body.shine .ccov.tilt{transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);transition:transform .12s linear,box-shadow .3s;box-shadow:0 18px 36px rgba(0,0,0,.45)}
body.shine .ccov::after{content:"";position:absolute;inset:-50%;pointer-events:none;z-index:1;
 background:linear-gradient(135deg,transparent 38%,color-mix(in srgb,var(--shc) 14%,transparent) 44%,color-mix(in srgb,var(--shc) 55%,transparent) 50%,color-mix(in srgb,var(--shc) 14%,transparent) 56%,transparent 62%);transform:translate(-100%,-100%)}
/* shine tint follows the status badge colour */
body.shine-plain .ccov::after{background:linear-gradient(135deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.36) 50%,rgba(255,255,255,.08) 56%,transparent 62%)}
.ccov{--shc:#fff}.ccov.s-want{--shc:#ffd84a}.ccov.s-doing{--shc:#6fb0ff}.ccov.s-done{--shc:#62e09a}.ccov.s-dropped{--shc:#ff6b5e}
/* the sweep is started by app.js on hover (class .shining) and always plays to the end */
body.shine .ccov.shining::after{animation:shine-sweep .9s ease-out}
/* starts just outside the top-left corner so the band shows almost at once */
@keyframes shine-sweep{from{transform:translate(-31%,-31%)}to{transform:translate(31%,31%)}}
.dragghost .ccov::after,.dragph .ccov::after{display:none}
@media (prefers-reduced-motion:reduce){body.shine .ccov.tilt{transform:none}body.shine .ccov::after{animation:none!important}}
.cfrow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 14px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cfrow:first-of-type{border-top:0}
.cfrow .pill{min-width:0}
@media (max-width:760px){.cfrow{grid-template-columns:1fr}}
/* Home: collection items in progress */
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:16px 12px}
.mini{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.mini:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
.mcov{display:block;aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 4px 10px rgba(0,0,0,.25);transition:transform .15s}
.mini:hover .mcov{transform:translateY(-2px)}
.mcov img{display:block;width:100%;height:100%;object-fit:cover}
.mcov .cph{font-size:34px}.mcov .cph .sym{width:38px;height:38px}
.mini b{font-size:14px;line-height:1.3;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .meta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Habit icons */
.hname{display:inline-flex;align-items:center;gap:10px;min-width:0}
.hico{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ink);font-size:17px;line-height:1}
.hico .sym{width:18px;height:18px;vertical-align:0}
button.hbtn{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ink);font-size:17px;line-height:1}
button.hbtn:hover{background:color-mix(in srgb,var(--ac) 35%,transparent)}
button.hbtn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.item .hname .hico{width:26px;height:26px;font-size:14px}.item .hname .hico .sym{width:15px;height:15px}
.hd.fut{opacity:.35}
/* Weekly habits */
.hsec{font-size:20px;margin:22px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hsec .meta{font-weight:400;font-size:13px}
.hweek.complete{border-color:color-mix(in srgb,#2f8a57 55%,var(--line))}
.wbadge{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--mut);white-space:nowrap}
.wbadge.ok{background:#2f8a57;color:#fff}
.wbadge.bad{background:#c4392f;color:#fff}
.wdays{display:flex;gap:8px;flex-wrap:wrap}
.wday{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;width:48px;padding:6px 0 8px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--mut);font-size:12px;cursor:pointer}
.wday i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid color-mix(in srgb,var(--mut) 60%,transparent);font-style:normal;font-size:14px;color:transparent;min-width:26px}
span.wday{cursor:default}span.wday i{width:auto;min-width:26px;padding:0 4px;border-radius:13px;color:var(--ink);font-size:12px}
.wday.on i{background:#2f8a57;border-color:#2f8a57;color:#fff}
.wday.sel{border-color:var(--ac);color:var(--ink);font-weight:700}
.wday:hover:not(:disabled){border-color:var(--mut)}
.wday:disabled,.wday.fut{opacity:.4;cursor:default}
.wday:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.hcheck{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;border:1px solid var(--line);color:var(--ink)}
.hcheck i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid color-mix(in srgb,var(--mut) 60%,transparent);font-style:normal;font-size:12px;color:transparent}
.hcheck.on{border-color:#2f8a57}.hcheck.on i{background:#2f8a57;border-color:#2f8a57;color:#fff}
.hcheck:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* Health */
.hlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px;align-items:start;margin-bottom:16px}
.hlgrid section{margin:0}
.hlrow{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;padding:8px 6px;border-radius:10px}
.hlrow+.hlrow{border-top:1px solid var(--line)}
.hlrow:hover:not(.static){background:color-mix(in srgb,var(--ink) 6%,transparent)}
.hlrow.static{cursor:default}
.hlrow .t{flex:1;min-width:0}.hlrow .t b,.hlrow .t .meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hlst{font-weight:700;white-space:nowrap}.hlst.ok{color:#2f8a57}.hlst.bad{color:#c4392f}
.mbars{display:flex;gap:6px;align-items:flex-end;height:110px}
.mbars span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.mbars i{display:block;width:100%;max-width:22px;border-radius:5px 5px 2px 2px;min-height:3px;background:var(--line)}
.mbars em{font-style:normal;font-size:11px;color:var(--mut)}
.wked{border-color:color-mix(in srgb,#5fa57f 50%,var(--line))}
.wkex{padding:10px 0;border-top:1px solid var(--line)}
.wkex:first-of-type{border-top:0}
.wksets{display:flex;flex-direction:column;gap:6px}
.wkset{display:flex;align-items:center;gap:8px}
.wkset>.meta:first-child{width:18px;text-align:right}
.wkset input{width:84px;flex:none;padding:6px 8px}
.wked .lab input{min-width:0;width:auto;flex:1}
.hlname{color:var(--ink);text-decoration:none;font-weight:700}
.hlname:hover{text-decoration:underline}
.hlrow .t .meta{white-space:normal}
.hlnum{display:flex;gap:6px;align-items:center;flex:none}.hlnum input{width:90px;padding:6px 8px}
.hlrow .moods.seg button{padding:4px 12px}
/* exercise catalogue: suggestions, details, sets per muscle */
.exsug{position:fixed;z-index:60;background:var(--sf);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:4px;max-height:60vh;overflow:auto}
.exo{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;cursor:pointer}
.exo:hover,.exo.on{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.exo .t{flex:1;min-width:0}.exo .t b{display:block;font-weight:500}.exo .t .meta{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exo em{font-style:normal;font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:1px 8px}
.wkname{color:var(--ink);font-weight:600;text-decoration:none}.wkname:hover{text-decoration:underline}
.hlrow .meta .clink{color:inherit}
.exgrid{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:18px;align-items:start;margin-bottom:6px}
.exgrid:not(:has(.eximgw)){grid-template-columns:1fr}
.eximgw{border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line)}.eximg{display:block;width:100%;height:auto}
.exchips{display:flex;flex-wrap:wrap;gap:8px}.exchips div{border:1px solid var(--line);border-radius:10px;padding:6px 12px}.exchips .meta{display:block;font-size:12px}.exchips b{font-weight:500}
.exdet h3{font-size:15px;margin:16px 0 6px}.exins{margin:0;padding-left:20px}.exins li{margin:0 0 6px}
.musrow{display:grid;grid-template-columns:110px 1fr 32px;align-items:center;gap:10px;padding:4px 0}
.musrow i{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}.musrow i b{display:block;height:100%;background:var(--ac);border-radius:99px}
.musrow em{font-style:normal;text-align:right;color:var(--mut)}
@media (max-width:640px){.exgrid{grid-template-columns:1fr}}
/* resizable sidebar */
#navgrip{display:none}
@media (min-width:761px){
#app.nav-side,#app.nav-cards{grid-template-columns:var(--navw,200px) 1fr}
#app.nav-side #navgrip,#app.nav-cards #navgrip,#app.nav-grid #navgrip{display:block;position:fixed;top:50%;height:44px;margin-top:-22px;left:calc(var(--navw,200px) + (clamp(16px,4vw,48px) - var(--navpad,16px)) / 2 - 5px);width:10px;cursor:col-resize;z-index:20;touch-action:none;transition:height .15s,margin .15s}
#app.nav-side nav,#app.nav-cards nav,#app.nav-grid nav{border-right:0}
#app.nav-cards #navgrip,#app.nav-grid #navgrip{--navpad:14px}
#app.nav-side #navgrip::before,#app.nav-cards #navgrip::before,#app.nav-grid #navgrip::before{content:'';position:absolute;left:3px;top:0;bottom:0;width:4px;border-radius:99px;background:var(--line);transition:background .15s}
#navgrip:hover,#navgrip:focus-visible,.navsizing #navgrip{height:64px;margin-top:-32px}
#navgrip:hover::before,#navgrip:focus-visible::before,.navsizing #navgrip::before{background:var(--ac)}
#navgrip:focus-visible{outline:0}
.navsizing,.navsizing *{cursor:col-resize!important;user-select:none}}
/* OLED theme: grouped look. Sections are lighter, rounded and borderless; controls inside them use the field grey. */
:root[data-pal="oled"] section,:root[data-pal="oled"] .nlist,:root[data-pal="oled"] .hsearch,:root[data-pal="oled"] .exsug,:root[data-pal="oled"] .ctx,:root[data-pal="oled"] #rem{border-color:transparent;--bg:var(--fld)}
:root[data-pal="oled"] section,:root[data-pal="oled"] .nlist{border-radius:22px}
:root[data-pal="oled"] .hsearch{border-radius:16px}
:root[data-pal="oled"] .circ{border-color:transparent}
/* Toggle switches */

.sw{all:unset;-webkit-appearance:none;appearance:none;flex:none;box-sizing:border-box;position:relative;display:inline-block;width:50px;height:30px;border-radius:99px;cursor:pointer;background:color-mix(in srgb,var(--mut) 38%,transparent);transition:background .2s;vertical-align:middle;margin:0;padding:0;border:0}
.sw i,input.sw::after{content:'';position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.3,.5,1)}
.sw.on,input.sw:checked{background:var(--ac)}
.sw.on i,input.sw:checked::after{transform:translateX(20px)}
.sw:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;cursor:default}
.swrow>span{flex:1;min-width:0}.swrow>span .meta{display:block;font-size:13px}
.swrow+.swrow{border-top:1px solid var(--line)}
input.sw{width:50px;height:30px;margin:0;padding:0;border:0;accent-color:auto}
/* New list page (sheet style) */
.sheet{width:100%}
.ldpick .epick{border:0;background:none;padding:0;margin:0}
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.shead h2{margin:0;font-size:18px;font-weight:600}
.shead .circ{width:44px;height:44px;background:var(--sf);border:0}.shead .circ.ok{background:var(--tc);color:#fff}
.sbody{display:flex;flex-direction:column;gap:14px}
.scard{background:var(--sf);border-radius:22px;padding:16px}
.ldhero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 16px 16px}
.ldbig{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:44px;color:#fff;background:var(--tc)}
.ldbig .sym{width:50px;height:50px}
.ldhero input{text-align:center;font-size:22px;font-weight:600;padding:14px;border:0;border-radius:14px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ldhero input::placeholder{color:var(--mut);opacity:.8}
.scard .swrow{padding:0}.scard .swrow>span{display:flex;align-items:center;gap:12px}
.scard .swrow .lri{width:30px;height:30px;border-radius:8px;display:inline-grid;place-items:center;color:#fff;font-size:16px}.scard .swrow .lri .sym{width:18px;height:18px}
.ldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:12px;justify-items:center}
.ldsw{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--sf),0 0 0 3px transparent;transition:box-shadow .15s}
.ldsw.on{box-shadow:0 0 0 3px var(--sf),0 0 0 6px color-mix(in srgb,var(--ink) 45%,transparent)}
.ldic{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:0 0 0 3px var(--sf),0 0 0 3px transparent;transition:box-shadow .15s}
.ldic .sym{width:22px;height:22px}
.ldic.on{box-shadow:0 0 0 3px var(--sf),0 0 0 6px color-mix(in srgb,var(--ink) 45%,transparent)}
.ldic.more{color:var(--tc);background:color-mix(in srgb,var(--tc) 22%,transparent)}
.ldsw:focus-visible,.ldic:focus-visible{outline:2px solid var(--ac);outline-offset:4px}
@media (max-width:520px){.ldgrid{gap:10px}}
/* note view / edit modes */
.nmodes{flex-wrap:nowrap;margin-right:6px}.nmodes button{padding:4px 12px 4px 10px;font-size:14px}.nmodes .sym{width:16px;height:16px}
.nview h1.ntitle{margin:0;padding:2px 0;border:0}
.mdview{line-height:1.7;min-height:120px;cursor:text}
.mdview h3,.mdview h4,.mdview h5{margin:18px 0 6px}.mdview p{margin:0 0 10px}.mdview ul{margin:0 0 10px;padding-left:22px}
.nview .props .pval{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.setrow.swrow{padding:10px 0}
/* sidebar scrolls without showing a scrollbar */
nav{scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none;width:0;height:0}
@media (min-width:761px){#app.nav-side nav{overflow-y:auto}}
.setsearch+section>.setrow:first-child{border-top:0;padding-top:0}
.setrow>.drow{border:0;padding:0;background:none;margin:0;cursor:default}
/* note categories as neutral tiles */
.ntab.cattile{background:color-mix(in srgb,var(--ink) 7%,var(--sf));font-weight:600}
.ntab.cattile .nti{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.ntab.cattile:hover{filter:none;background:color-mix(in srgb,var(--ink) 12%,var(--sf))}
.ntabs.cattiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.ntabs.cattiles .ntab{max-width:none;min-width:0}
.cattiles .ntc{color:var(--mut);font-size:16px}
.ntab.cattile.sm{flex:none;min-width:0;max-width:none;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;font-size:14px}
.ntab.cattile.sm .nti{width:28px;height:28px;font-size:15px}.ntab.cattile.sm .nti .sym{width:15px;height:15px}
.pval .cattiles{display:flex;flex-wrap:wrap;gap:6px}
.cath{display:flex;align-items:center;gap:12px}.cathi{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--ink) 9%,transparent);font-size:22px}.cathi .sym{width:22px;height:22px}
/* categories: toolbar, list view, editor */
.catbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 14px}
.catbar .nsort{display:flex;align-items:center;gap:8px;margin:0}
.catlist{padding:6px}
.catlist .catrow{align-items:center;padding:8px 10px}.catlist .catrow+.catrow{border-top:1px solid var(--line);border-radius:0}
.catri{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--ink) 9%,transparent);font-size:16px}.catri .sym{width:16px;height:16px}
.catrn{flex:1;min-width:0;font-weight:600}
.cated h2{margin:0 0 10px}
.catico{all:unset;cursor:pointer;flex:none;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--ink) 9%,transparent);font-size:22px}.catico .sym{width:22px;height:22px}.catico:hover{background:color-mix(in srgb,var(--ink) 16%,transparent)}
/* One segmented style for every choice of two or more options (.moods groups and .pseg):
   a rounded track with the chosen option as a raised pill. */
:root{--segtr:color-mix(in srgb,var(--ink) 7%,var(--sf));--segon:var(--sf);--segsh:0 1px 3px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--segon:color-mix(in srgb,var(--ink) 16%,var(--sf));--segsh:0 1px 3px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--segon:color-mix(in srgb,var(--ink) 16%,var(--sf));--segsh:0 1px 3px rgba(0,0,0,.35)}
:root[data-pal="oled"]{--segtr:var(--sf);--segon:var(--fld)}
:root[data-pal="oled"] section,:root[data-pal="oled"] .nlist,:root[data-pal="oled"] .ctx{--segtr:var(--fld);--segon:color-mix(in srgb,var(--ink) 20%,var(--sf))}
.moods,.pseg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px;background:var(--segtr);max-width:100%;box-sizing:border-box}
.moods button,.pseg button,.nsort .moods.seg button,.hlrow .moods.seg button,.nmodes button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;font-weight:600;font-size:15px;line-height:1.2;color:var(--mut);transition:background .15s,color .15s,box-shadow .15s}
.moods button .sym,.pseg button .sym{width:18px;height:18px}
.moods button:hover,.pseg button:hover{color:var(--ink)}
.moods button.on,.pseg button.on{background:var(--segon);color:var(--ink);font-weight:600;box-shadow:var(--segsh)}
.moods button:focus-visible,.pseg button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.moods button:disabled{opacity:.4;cursor:default}
.lab0{margin:0 0 6px}.hsegs{align-items:flex-start;gap:14px 18px}
/* compact segmented control (inside rows) and multi-select tracks (several options can be on) */
.moods.sm{padding:3px;border-radius:11px;gap:2px;flex-wrap:nowrap}
.moods.sm button,.drow .moods.sm button{padding:5px 11px;font-size:13px;border-radius:8px}
.moods.multi button.on::before{content:"✓";font-size:12px;margin-right:-2px}
/* meditation */
.medwrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.medface{position:relative;width:220px;height:220px;flex:none;margin:0 auto}
.medface svg{width:100%;height:100%;transform:rotate(-90deg)}
.medtrack{fill:none;stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:12}
.medprog{fill:none;stroke:var(--ac);stroke-width:12;stroke-linecap:round;stroke-dasharray:603;transition:stroke-dashoffset .25s linear}
.medmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.medclock{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.medside{flex:1 1 300px;min-width:0}
.medbtns{margin-top:14px}.medbtns button{display:inline-flex;align-items:center;gap:8px}.medbtns .sym{width:16px;height:16px}
.medstats{grid-template-columns:repeat(2,1fr)}
.medday{padding:8px 0}.medday+.medday{border-top:1px solid var(--line)}
.medrow{display:grid;grid-template-columns:60px 1fr auto 28px;gap:10px;align-items:center;padding:2px 0}
/* keep the chosen option visible where a more specific rule resets the buttons */
.nsort .moods.seg button.on,.hlrow .moods.seg button.on,.nmodes button.on,.drow .moods.sm button.on{background:var(--segon);color:var(--ink);box-shadow:var(--segsh)}
.hlsub{margin:10px 0 2px;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
/* custom colour swatch: rainbow ring until a custom colour is picked; the colour input fills it invisibly */
.swcustom{position:relative;cursor:pointer;display:inline-block;overflow:hidden;background:conic-gradient(#e0566f,#e08a3f,#d4a43a,#5fa57f,#3f9aa5,#5b9bd5,#9a7fd0,#c9629b,#e0566f)}
.swcustom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.ldgrid .ldsw.swcustom{width:40px;height:40px;border-radius:50%}
/* Vibrant card colours: brighter, fuller gradients with white text */
body.vivid .nav-cards nav .navb,body.vivid .ntab:not(.cattile){background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 72%,#000));color:#fff}
body.vivid .ntab:not(.cattile) .nti,body.vivid .nav-cards .ni>.sym{background:rgba(255,255,255,.2);color:#fff}
body.vivid .nav-cards nav .navb .nc,body.vivid .ntab:not(.cattile) .ntc{color:#fff}
@media (max-width:760px){body.vivid .nav-cards nav .navb{background:none;color:var(--mut)}body.vivid .nav-cards nav .navb.on{background:var(--acs);color:var(--ink)}body.vivid .nav-cards .ni>.sym{background:none;color:inherit}}
/* colour swatches inside the side card menu */
.ctxsw{display:grid;grid-template-columns:repeat(7,22px);gap:7px;padding:4px 12px 8px}
.ctx .ctxsw .lsw{padding:0;width:22px;height:22px;border-radius:50%;box-sizing:border-box}
.ctx .ctxsw .lsw.on{box-shadow:0 0 0 2px var(--sf),0 0 0 4px var(--ink)}
body.vivid .lcard{background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 72%,#000));color:#fff}
body.vivid .lcard .lci,body.vivid .lcard .lcn{color:#fff}
/* other covers picker */
.calt{margin-bottom:16px}
.caltgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;max-height:440px;overflow-y:auto;padding:2px}
.caltc{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0}
.caltc img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .15s,box-shadow .15s}
.caltc:hover img,.caltc:focus-visible img{transform:translateY(-2px);box-shadow:0 0 0 2px var(--ac)}
.caltc .meta{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caltc.busy img{opacity:.5}
.caltup .caltbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;aspect-ratio:2/3;border-radius:10px;border:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);color:var(--mut);text-align:center;font-size:13px;padding:8px;box-sizing:border-box;transition:border-color .15s,color .15s}
.caltup .caltbox .sym{width:28px;height:28px}
.caltup:hover .caltbox,.caltup:focus-visible .caltbox{border-color:var(--ac);color:var(--ink)}
.calt .head .g{display:inline-flex;align-items:center;gap:6px}.calt .head .g .sym{width:16px;height:16px}
/* styled dropdowns (replace the system menu of every select) */
select.dsel-src{display:none!important}
.dsel{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:120px;max-width:100%;padding:8px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}
.dsel .dsl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsel svg{width:16px;height:16px;flex:none;color:var(--mut);transition:transform .15s}
.dsel:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.dsel.open,.dsel:focus-visible{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent);outline:0}
.dsel.open svg{transform:rotate(180deg)}
.dsel:disabled{opacity:.5;cursor:default}
label .dsel,.cfields .dsel{display:flex;width:100%;margin-top:4px}
.dmenu{position:fixed;z-index:80;max-height:min(360px,60vh);overflow-y:auto;max-width:min(420px,90vw);padding:6px;border-radius:14px;background:var(--sf);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.35);animation:dmin .12s ease-out;scrollbar-width:thin}
@keyframes dmin{from{opacity:0;transform:translateY(-4px)}}
.dmo{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:9px;cursor:pointer;color:var(--ink);font-size:14px;white-space:nowrap}
.dmo:hover,.dmo.act{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.dmo.on{font-weight:700}.dmo .dmc{width:16px;flex:none;text-align:center;color:var(--ac);font-weight:700}
.dmo.off{opacity:.45;cursor:default}
.dmlab{margin:8px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
:root[data-pal="oled"] .dmenu{background:var(--fld)}
/* auto-hide sidebar: the page takes the full width; the sidebar floats in from the left on hover */
#navedge{display:none}
@media (min-width:761px){
#app.navauto{grid-template-columns:1fr}
#app.navauto #navedge{display:block;position:fixed;left:0;top:0;bottom:0;width:10px;z-index:34}
#app.navauto nav{position:fixed;left:8px;top:8px;bottom:8px;height:auto;width:var(--navw,200px);box-sizing:border-box;z-index:35;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.45);transform:translateX(calc(-100% - 24px));transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s;opacity:0;overflow-y:auto}
#app.navauto.navshow nav{transform:none;opacity:1}
/* the resize pill stays as a hint at the left edge while the sidebar is hidden, and rides along with it when it slides in */
#app.navauto #navgrip{left:5px;transition:left .24s cubic-bezier(.2,.8,.2,1),height .15s,margin .15s;z-index:36}
#app.navauto:not(.navshow) #navgrip{cursor:pointer}
#app.navauto.navshow #navgrip{left:calc(var(--navw,200px) + 14px)}
#app.navauto main{grid-column:1}
}
/* sidebar hide / keep button next to the app name */
@media (min-width:761px){#app:not(.nav-top) .logo{display:flex;align-items:center;justify-content:space-between;gap:8px}}
.navpin{all:unset;cursor:pointer;display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;color:var(--mut);transition:background .15s,color .15s}
.navpin .sym{width:18px;height:18px}
.navpin:hover,.navpin:focus-visible{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.navpin:focus-visible{outline:2px solid var(--ac)}
/* one icon; when auto-hide is on the button stays pressed in the accent colour */
.navpin.on{background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ac)}
.navpin.on:hover{background:color-mix(in srgb,var(--ac) 32%,transparent);color:var(--ac)}
/* "Home" back button on pages opened from Home */
.backhome{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin:0 0 12px -4px;padding:6px 14px 6px 8px;border-radius:999px;font-weight:600;font-size:14px;color:var(--mut);background:var(--sf);border:1px solid var(--line);transition:color .15s,border-color .15s}
.backhome .sym{width:16px;height:16px}.backhome{line-height:21px}
.backhome:hover,.backhome:focus-visible{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
/* Checklist task rows inside cards and lists outside the Tasks section */
.rhost .rrow{padding:9px 2px;gap:12px}
.rhost+.rhost{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.rhost .rtt{font-size:16px}.rhost .rdue{font-size:13px}.rhost .rchk{width:22px;height:22px}
.rhost .rrow.done .rchk{background:radial-gradient(circle,var(--tc) 0 5px,transparent 6px)}
.rhost .rrow{position:relative}
.rhost .ract{position:absolute;right:0;top:5px;background:var(--sf);border-radius:8px;box-shadow:-10px 0 12px var(--sf)}
/* ---------- Buttons (app-wide) ----------
   Same look as the round + buttons (.circ): the surface colour with a thin outline and light text, as pills.
   .b is the main action of a group (bolder, slightly brighter); .g the secondary one; .x a small text action. */
button.b,button.g{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;box-sizing:border-box;padding:0 18px;border-radius:999px;font:inherit;font-size:15px;line-height:1;cursor:pointer;white-space:nowrap;
 background:var(--sf);color:var(--ink);border:1px solid var(--line);box-shadow:none;filter:none;transition:background .15s,border-color .15s,color .15s,transform .08s}
button.b{font-weight:700;background:color-mix(in srgb,var(--ink) 6%,var(--sf));border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
button.g{font-weight:600;color:color-mix(in srgb,var(--ink) 85%,var(--mut))}
button.b:hover,button.g:hover{background:color-mix(in srgb,var(--ink) 10%,var(--sf));color:var(--ink)}
button.b:active,button.g:active{transform:scale(.97)}
button.b:disabled,button.g:disabled{opacity:.5;cursor:default;transform:none}
button.b:focus-visible,button.g:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
button.b .sym,button.g .sym{width:17px;height:17px}
button.x{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);transition:background .15s,color .15s}
button.x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
button.x:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
/* inputs match the buttons: same height and rounding */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not(.ntitle):not(.pinp):not(.rin),textarea{border-radius:12px}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not(.ntitle):not(.pinp):not(.rin):not([type=date]):not([type=time]):not([type=datetime-local]){min-height:40px;box-sizing:border-box}
input:focus-visible,textarea:focus-visible{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
/* Home cards: header links as small pills, add rows as one joined control */
.hgrid section>.head>button.x{background:var(--sf);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:12px;color:var(--ink)}
.hgrid section>.head>button.x:hover{background:color-mix(in srgb,var(--ink) 10%,var(--sf))}
.hgrid section>.row:has(>input+button.b){gap:0;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 8px;transition:border-color .15s,box-shadow .15s}
.hgrid section>.row:has(>input+button.b):focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.hgrid section>.row>input:has(+button.b){border:0;background:none;box-shadow:none;min-height:36px;padding:6px 10px}
.hgrid section>.row>input+button.b{min-height:34px;border-radius:999px;padding:0 16px}
/* icon-only confirm button (tick) */
button.b.tick{width:34px;min-height:34px;height:34px;padding:0;border-radius:50%}
button.b.tick .sym{width:18px;height:18px}
.hgrid section>.row>input+button.b.tick{padding:0}
/* subtasks: small round checks like tasks, actions on hover, and joined pill inputs with a tick */
.srow{position:relative;gap:10px;padding:5px 0 5px 2px}
.srow .tt{flex:1;min-width:0;overflow-wrap:anywhere}
.srow.done .tt{color:var(--mut);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mut) 60%,transparent)}
.rchk.sm{width:18px;height:18px;border-width:2px;margin-top:0}
.srow.done .rchk.sm{border-color:var(--tc,var(--ac));background:radial-gradient(circle,var(--tc,var(--ac)) 0 4px,transparent 5px)}
.srow .rchk.sm:hover{border-color:var(--tc,var(--ac))}
.sact{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.srow:hover .sact,.sact:focus-within{opacity:1}
@media (max-width:760px){.sact{opacity:1}}
.sub.sjoin{gap:0;margin:6px 0 2px;padding:3px 3px 3px 10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;transition:border-color .15s,box-shadow .15s}
.sub.sjoin:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.sub.sjoin input{border:0!important;background:none!important;box-shadow:none!important;min-height:30px!important;padding:4px 6px}
.sub.sjoin button.b.tick{width:30px;height:30px;min-height:30px}
.sub.sjoin .scx{padding:6px;margin-left:2px}.sub.sjoin .scx .sym{width:16px;height:16px}
/* Icons layout: a slim rail with just the coloured card icons */
@media (min-width:761px){
#app.nav-icons{grid-template-columns:var(--navw,84px) 1fr}
#app.nav-icons nav{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;border-right:0;overflow-y:auto}
#app.nav-icons .logo{margin:0 0 6px;justify-content:center}
#app.nav-icons .logo>span{display:none}
#app.nav-icons nav .navb{position:relative;display:grid;place-items:center;width:58px;height:58px;padding:0;border-radius:18px;color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 45%,var(--sf)),color-mix(in srgb,var(--tc) 22%,var(--sf)));transition:filter .15s,transform .1s}
#app.nav-icons nav .navb:hover{filter:brightness(1.12)}
#app.nav-icons nav .navb:active{transform:scale(.96)}
#app.nav-icons nav .navb.on{box-shadow:inset 0 0 0 2px var(--ink)}
#app.nav-icons .nl{display:none}
#app.nav-icons .ni{margin:0;font-size:24px;line-height:1}
#app.nav-icons .ni>.sym{width:26px;height:26px}
#app.nav-icons .nc{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--ink);color:var(--bg)}
#app.nav-icons:not(.navauto) #navgrip{display:none!important}
body.vivid #app.nav-icons nav .navb{background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 72%,#000));color:#fff}
}
/* Icon grid layout: the cards as square icon tiles without names (like an app drawer) */
@media (min-width:761px){
#app.nav-grid{grid-template-columns:var(--navw,250px) 1fr}
#app.nav-grid nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px;align-content:start;padding:24px 14px;border-right:0;overflow-y:auto}
#app.nav-grid .logo{grid-column:1/-1;margin:0 0 6px 4px}
#app.nav-grid nav .navb{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border-radius:18px;color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 45%,var(--sf)),color-mix(in srgb,var(--tc) 22%,var(--sf)));transition:filter .15s,transform .1s}
#app.nav-grid nav .navb:hover{filter:brightness(1.12)}
#app.nav-grid nav .navb:active{transform:scale(.96)}
#app.nav-grid nav .navb.on{box-shadow:inset 0 0 0 2px var(--ink)}
#app.nav-grid .nl{display:none}
#app.nav-grid .ni{margin:0;font-size:26px;line-height:1}
#app.nav-grid .ni>.sym{width:28px;height:28px}
#app.nav-grid .nc{position:absolute;top:5px;right:6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--ink);color:var(--bg)}
body.vivid #app.nav-grid nav .navb{background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 72%,#000));color:#fff}
}
/* note formatting toolbar */
.mdbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 8px;padding:5px;border-radius:14px;background:color-mix(in srgb,var(--ink) 5%,var(--sf));border:1px solid var(--line);position:sticky;top:8px;z-index:5}
.mdgrp{display:flex;gap:2px}
.mdgrp+.mdgrp{padding-left:6px;border-left:1px solid var(--line)}
.mdbar button{all:unset;cursor:pointer;display:grid;place-items:center;width:34px;height:32px;border-radius:9px;color:var(--mut);transition:background .12s,color .12s}
.mdbar button .sym{width:18px;height:18px}
.mdbar button:hover{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}
.mdbar button:active{transform:scale(.94)}
.mdbar button:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.mdbar+textarea{margin-top:0}
/* richer Markdown in notes, cards and the journal */
.md a.mdlink{color:var(--ac);text-decoration:underline;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere}
.md mark{background:color-mix(in srgb,#f7d74a 45%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.md s{color:var(--mut)}
.md blockquote{margin:8px 0;padding:2px 0 2px 14px;border-left:3px solid color-mix(in srgb,var(--ac) 60%,var(--line));color:color-mix(in srgb,var(--ink) 85%,var(--mut))}
.md blockquote p{margin:4px 0}
.md ol{padding-left:22px;margin:4px 0}
.md hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.md pre.mdcode{margin:8px 0;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--ink) 7%,var(--bg));overflow-x:auto;font:13px/1.5 ui-monospace,"JetBrains Mono",monospace}
.md pre.mdcode code{background:none;padding:0}
/* toolbar icons: letter glyphs and line icons at one optical size */
.mdbar button{width:36px;height:34px}
.mdbar .mdi{width:20px;height:20px}
.mdg{font:700 17px/1 Georgia,"Times New Roman",serif;letter-spacing:0}
.mdg.mdit{font-style:italic;font-weight:600}
.mdg.mds{font-weight:600;text-decoration:line-through;text-decoration-thickness:2px}
.mdg.mdh{font-family:inherit;font-weight:800;font-size:16px}
.mdbar button:disabled{opacity:.3;cursor:default;background:none;transform:none}
/* category / tag suggestion menu */
.csug{position:fixed;z-index:80;width:260px;max-height:min(340px,55vh);overflow-y:auto;padding:6px;border-radius:14px;background:var(--sf);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.35);animation:dmin .12s ease-out}
:root[data-pal="oled"] .csug{background:var(--fld)}
.cslab{margin:4px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.cso{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:9px;cursor:pointer;font-size:14px}
.cso.on,.cso:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.csi{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--ink) 9%,transparent);font-size:14px;color:var(--mut);font-weight:700}
.csi .sym{width:14px;height:14px}
.csn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.csn b{color:var(--ac)}
.cso .meta{font-size:12px}
.cso.new .csi{background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ac)}
.cso.new .csn{color:var(--ac);font-weight:600}
.csug{scrollbar-width:none}.csug::-webkit-scrollbar{display:none;width:0;height:0}
/* edit mode: categories look like in view mode (small tiles) with a remove button on the tile */
.catedit{position:relative;display:inline-flex}
.catedit .ntab.cattile.sm{padding-right:30px}
.catedit .cx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:var(--mut);opacity:.6}
.catedit:hover .cx,.catedit .cx:focus-visible{opacity:1}
.catedit .cx:hover{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.pval:has(.catedit){display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* journal categories: filter tiles under the tabs, pickers in the composer and on each day */
.jcatbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.jcatbar .ntab.cattile.sm .ntc{font-size:12px;margin-left:2px}
.ntab.cattile.on{box-shadow:inset 0 0 0 2px var(--ink);background:color-mix(in srgb,var(--ink) 14%,var(--sf))}
.jcatadd{all:unset;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--ink) 25%,transparent);color:var(--mut)}
.jcatadd .sym{width:16px;height:16px}
.jcatadd:hover{border-color:var(--ac);color:var(--ink)}
.jcatpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
.jcatpick .pinp{flex:1;min-width:140px;width:auto;border:0;background:none;padding:6px 4px;min-height:32px}
.jcatpick .pinp:focus-visible{box-shadow:none}
section>.head+.jcatpick{margin:8px 0 4px}
.jcatpick .pinp{flex:0 1 220px;min-width:150px;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:6px 14px}
.jcatpick .pinp:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
/* auto-hide wins over every layout's column setup: the page always takes the full width */
@media (min-width:761px){
#app.navauto.nav-icons,#app.navauto.nav-grid,#app.navauto.nav-cards,#app.navauto.nav-side{grid-template-columns:1fr}
#app.navauto.nav-icons nav{width:84px}
#app.navauto.nav-grid nav{display:grid}
#app.navauto.nav-icons nav{display:flex}
}
/* collection favourites */
.cfav{position:absolute;left:6px;top:6px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;opacity:0;transition:opacity .15s,transform .12s,background .15s;cursor:pointer}
.cfav .sym{width:17px;height:17px}
.ccard:hover .cfav,.cfav:focus-visible{opacity:1}
.cfav:hover{transform:scale(1.1);background:rgba(0,0,0,.7)}
.cfav.on{opacity:1;color:#ff5a7a}
.dragghost .cfav,.dragph .cfav{display:none}
.cfavbig{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;margin:6px 0 4px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--sf);font-size:14px;font-weight:600;color:var(--mut);transition:color .15s,border-color .15s}
.cfavbig .sym{width:18px;height:18px}
.cfavbig:hover{color:var(--ink)}
.cfavbig.on{color:#ff5a7a;border-color:color-mix(in srgb,#ff5a7a 45%,var(--line))}
.favf .sym{width:16px;height:16px}
.favf.on{color:#ff5a7a!important}
/* heart and status badge share one line: same top, same height, centred contents */
.ccov .cbadge{top:7px;right:7px;height:24px;box-sizing:border-box;display:flex;align-items:center;padding:0 10px;line-height:1}
.ccov .cfav{top:7px;left:7px;width:24px;height:24px}
.ccov .cfav .sym{width:14px;height:14px}
/* a whole search result row adds (or opens) the item */
.crow[data-act]{cursor:pointer}
.crow[data-act]:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.crow[data-act]:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
/* add panel: type switch on the left, select-several and confirm on the right */
.caddhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.caddtools{display:flex;gap:8px;align-items:center}
.caddtools button .sym{width:17px;height:17px}
button.g.msel.on{background:color-mix(in srgb,var(--ac) 20%,var(--sf));border-color:color-mix(in srgb,var(--ac) 50%,var(--line));color:var(--ink)}
.crow.picked{background:color-mix(in srgb,var(--ac) 14%,transparent)}
.crow.picked:hover{background:color-mix(in srgb,var(--ac) 20%,transparent)}
.pickchk{display:grid;place-items:center;width:26px;height:26px;margin-right:10px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,var(--mut) 75%,transparent);color:var(--onac);transition:background .12s,border-color .12s}
.pickchk.on{background:var(--ac);border-color:var(--ac)}
.pickchk .sym{width:15px;height:15px}
.caddtools .cclose{width:40px;height:40px}.caddtools .cclose .sym{width:18px;height:18px}
.crow button.b.tick{width:38px;height:38px;min-height:38px;margin-right:6px}
/* a field whose control is a segmented switch: label above, switch below, like the other fields */
.cfseg{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cfseg .moods.seg{margin:0}
/* scrollbars hidden everywhere unless Settings → Show scrollbars is on (scrolling still works) */
html.noscroll,html.noscroll *{scrollbar-width:none}
html.noscroll ::-webkit-scrollbar,html.noscroll::-webkit-scrollbar{display:none;width:0;height:0}
/* search fields with a clear (×) button inside */
.sbox{position:relative;display:flex;flex:1;min-width:0;width:100%}
.sbox>input{flex:1;min-width:0;width:100%;padding-right:40px}
.sclr{all:unset;cursor:pointer;position:absolute;right:8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--mut);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.sclr .sym{width:14px;height:14px}
.sclr:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 14%,transparent)}
.sclr:focus-visible{outline:2px solid var(--ac)}
.colbar .sbox{flex:1 1 220px}
/* journal: mood of the moment in the composer and on each entry */
.jmood{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.jemood{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--segtr)}
.jemood button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);transition:background .12s}
.jemood button .dot{width:10px;height:10px;margin:0;opacity:.55}
.jemood button:hover .dot,.jemood button.on .dot{opacity:1}
.jemood button.on{background:var(--segon);color:var(--ink);box-shadow:var(--segsh)}
.jemood button:focus-visible{outline:2px solid var(--ac)}
.jent .md{margin-top:6px}
/* inputs that sit inside a field-shaped wrapper (search bars, location): no inner border or glow — the wrapper shows focus */
.hsearch input,.hsearch input:focus,.hsearch input:focus-visible,.jlocin input,.jlocin input:focus,.jlocin input:focus-visible{border:0!important;box-shadow:none!important;background:none!important;outline:none!important;border-radius:0}
.jlocin{border-radius:12px;transition:border-color .15s,box-shadow .15s}
.jlocin:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.jemoodro{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;background:var(--segtr);font-size:13px;font-weight:600}
.jemoodro .dot{width:10px;height:10px;margin:0}
.jcatro{margin:10px 0 4px}
.jent.editing{border-color:color-mix(in srgb,var(--ac) 45%,var(--line))}
.cattiles.jcatro{display:flex;flex-wrap:wrap;gap:6px}
/* Home "In progress" covers: favorite heart and status badge, like the Collections cards (scaled down) */
.mcov{position:relative}
.mcov .cbadge{top:5px;right:5px;height:20px;padding:0 7px;font-size:10px}
.mcov .cfav{top:5px;left:5px;width:20px;height:20px}
.mcov .cfav .sym{width:12px;height:12px}
.mini:hover .cfav,.mini .cfav:focus-visible{opacity:1}
/* In progress covers on Home: three to a row in a usual column, with a slightly smaller heart and status badge */
.minis{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 10px}
.mcov .cbadge{top:6px;right:6px;height:20px;padding:0 8px;font-size:10px}
.mcov .cfav{top:6px;left:6px;width:22px;height:22px}
.mcov .cfav .sym{width:13px;height:13px}
.mini b{font-size:13.5px}.mini .meta{font-size:12px}

/* Collection card editor (Home → Customize) */
.cced{max-width:none;margin:0 0 16px}
.cced .moods.seg{flex-wrap:wrap;max-width:100%}
.cced .swrow{margin-top:14px}
.tcdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.tchead{display:flex;align-items:center;gap:8px;min-width:0}
.tchead{gap:10px}
.tchead .lri{width:26px;height:26px;flex:none;font-size:14px;display:inline-grid;place-items:center;border-radius:50%;color:#fff;
 background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 3px rgba(0,0,0,.25)}
.tchead .lri .sym{width:15px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.circ[data-act="homeEdit"][aria-pressed="true"]{background:color-mix(in srgb,var(--ac) 30%,var(--sf));border-color:color-mix(in srgb,var(--ac) 45%,var(--ln,transparent))}

/* Notes on a category page: grouped rows like the task lists */
.cnrows .cnrow{padding:12px 16px}
.cnrows .lrow+.lrow::before{left:16px}
.cnt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cnt b{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.cnt .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnpin{color:var(--ac);display:inline-grid}.cnpin .sym{width:14px;height:14px}
.cnd{flex:none;white-space:nowrap}
.cntag{flex:none;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;color:var(--ac);background:color-mix(in srgb,var(--ac) 15%,transparent)}

/* Gym routines: start rows, routine cards, the editor and checking off exercises */
.rtstart{display:flex;flex-direction:column}
.rtsrow{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap}
.rtsrow+.rtsrow{border-top:1px solid var(--line)}
.rtsrow .t{flex:1;min-width:160px}.rtsrow .t b{display:block;font-size:16px}
.rtdays{display:flex;flex-wrap:wrap;gap:8px}
.rtgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rtcard{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.rtcard b{font-size:16px}
.rtday{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.rtdn{flex:0 0 72px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.rtex{flex:1;min-width:0}.rtex .clink{color:inherit;text-decoration:none}.rtex .clink:hover{text-decoration:underline}
.rted{border-color:color-mix(in srgb,#5fa57f 50%,var(--line))}
.reday{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.redhead{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.redhead input{flex:1;font-weight:600}
.rednum{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:#5fa57f}
.redtools{display:flex;gap:4px}
.redtools .cx .sym{width:14px;height:14px}
.rerow{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.rerow .rename{flex:1;min-width:0}
.rerow .renum{width:64px;flex:none;text-align:center;padding:6px 8px}
.wkexh{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.wkchk{--tc:#5fa57f;display:grid;place-items:center;color:#fff;margin-top:0}
.wkchk.on{background:#5fa57f;border-color:#5fa57f}
.wkchk .sym{width:14px;height:14px}
.wktg{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;color:#5fa57f;background:color-mix(in srgb,#5fa57f 15%,transparent)}
.wkex.done .wkname{opacity:.55;text-decoration:line-through}
.wkex.done .wksets,.wkex.done>.x{display:none}
.wkprog{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#5fa57f 10%,transparent)}
.wkprog .bar i{background:#5fa57f}
.wkrt{display:block;font-size:13px;font-weight:500;margin-top:2px}
.wkprog b{font:600 14px/1.3 inherit;font-family:inherit}
.rthead{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.rthead .t{flex:1;min-width:0}.rthead .t b{display:block;font-size:17px;font-family:inherit}
.rtico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#6fbf8f,#4a8f6a);font-size:18px}
.rtico .sym{width:20px;height:20px}
.rtcard .rtday{align-items:center;padding:10px 0}
.rtcard .rtday .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rtcard .rtdn{display:flex;align-items:center;gap:8px;font-size:15px}
.rtcard .rtday .meta{line-height:1.45}
.rtnext{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;color:#5fa57f;background:color-mix(in srgb,#5fa57f 16%,transparent)}
.rtplay{width:36px;height:36px;flex:none}
.rtplay .sym{width:15px;height:15px;margin-left:2px}
.rtplay.on{background:#5fa57f;border-color:#5fa57f;color:#fff}
.rtplay:not(.on):hover{border-color:#5fa57f;color:#5fa57f}
.rtcard .rtdn{flex:none;overflow:visible}

/* Exercise progress chart */
.exch{margin:16px 0 6px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,#5fa57f 5%,transparent)}
.exch .head{flex-wrap:wrap;gap:8px}
.exch .moods.seg{flex-wrap:wrap}
.exstat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 10px}
.exstat>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.exstat b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exchg.up{color:#5fa57f}.exchg.down{color:#e0566f}
.exsvg{display:block;width:100%;height:auto;overflow:visible}
.exgl{stroke:var(--line);stroke-width:1}
.exax{fill:var(--mut);font-size:11px;font-family:inherit}
.exln{fill:none;stroke:#5fa57f;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.exdot{cursor:pointer;outline:none}
.exdot circle:not(.exhit){fill:var(--sf);stroke:#5fa57f;stroke-width:2.5;transition:r .15s}
.exdot.best circle:not(.exhit){fill:#5fa57f}
.exdot .exhit{fill:transparent;stroke:none}
.exdot:hover circle:not(.exhit),.exdot:focus-visible circle:not(.exhit){r:6;fill:#5fa57f}
@media (max-width:600px){.exstat{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Calendar: toolbar, month cells with events, week/day time grid, event form */
.calbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.calnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.caltitle{font-size:18px;margin-left:6px;text-transform:capitalize}
.calnav .moods.seg{margin:0}
.cal button{aspect-ratio:auto;min-height:92px;align-items:stretch;justify-content:flex-start;gap:3px;padding:6px;text-align:left;overflow:hidden;min-width:0}
.cal .cdn{font-size:13px;font-weight:600;padding:0 2px}
.cal button.td .cdn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#fff;padding:0}
.cal .cev{display:block;font-size:11.5px;line-height:1.3;padding:2px 5px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--am) 18%,transparent);color:var(--ink)}
.cal .cev.ad{background:var(--am);color:#1b1b1b;font-weight:600}
.cal .cev em{font-style:normal;color:var(--mut);font-size:10.5px}
.cal .cev.more{background:none;color:var(--mut);padding:0 5px}
.cal .dots{margin-top:auto;justify-content:flex-start;padding:0 2px}
@media (max-width:700px){.cal button{min-height:58px;padding:4px}.cal .cev{font-size:0;height:4px;padding:0;background:var(--am)}.cal .cev.more{display:none}}
.tgsec{padding:0;overflow:hidden}
.tg{--tgl:56px}
.tghead,.tgall{display:grid;grid-template-columns:var(--tgl) repeat(var(--days),minmax(0,1fr));border-bottom:1px solid var(--line)}
.tgday{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;border-left:1px solid var(--line)}
.tgday span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.tgday b{font-size:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.tgday.td b{background:var(--ac);color:#fff}
.tgday.sel:not(.td) b{background:var(--acs)}
.tgday:hover b{box-shadow:0 0 0 2px var(--line)}
.tglab{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;font-size:11px;text-align:right}
.tgad{border-left:1px solid var(--line);padding:4px;min-height:30px;display:flex;flex-direction:column;gap:3px;cursor:copy;min-width:0}
.tgchip{all:unset;cursor:pointer;box-sizing:border-box;font-size:12px;font-weight:600;padding:3px 7px;border-radius:6px;background:var(--am);color:#1b1b1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgchip.task{cursor:default;background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ink);font-weight:500}
.tgscroll{height:min(620px,62vh);overflow-y:auto;position:relative}
.tgbody{position:relative;display:grid;grid-template-columns:var(--tgl) repeat(var(--days),minmax(0,1fr));background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 48px)}
.tghours{position:relative}
.tgh{position:absolute;right:8px;transform:translateY(-50%);font-size:11px;color:var(--mut);white-space:nowrap}
.tgcol{position:relative;border-left:1px solid var(--line);cursor:copy;background:repeating-linear-gradient(to bottom,transparent 0 23.5px,color-mix(in srgb,var(--line) 45%,transparent) 23.5px 24px,transparent 24px 48px)}
.tgcol.td{background-color:color-mix(in srgb,var(--ac) 4%,transparent)}
.tgev{all:unset;cursor:pointer;box-sizing:border-box;position:absolute;display:flex;flex-direction:column;gap:1px;padding:4px 7px;border-radius:7px;overflow:hidden;font-size:12px;line-height:1.25;
 background:color-mix(in srgb,var(--am) 34%,var(--sf));color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:1}
.tgev:hover,.tgev:focus-visible{background:color-mix(in srgb,var(--am) 45%,var(--sf));z-index:2}
.tgev b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgev span{color:var(--mut);font-size:11px;white-space:nowrap}
.tgev.short{flex-direction:row;align-items:center;gap:6px;padding:1px 7px}
.tgrem{position:absolute;left:2px;right:2px;transform:translateY(-50%);font-size:11px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--ac) 18%,var(--sf));border:1px solid color-mix(in srgb,var(--ac) 50%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:1}
.tgnow{position:absolute;left:0;right:0;height:2px;background:#e0566f;z-index:3;pointer-events:none}
.tgnow::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#e0566f}
.evform{border-color:color-mix(in srgb,var(--am) 55%,var(--line))}
.evrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:12px}
.evrow .lab{display:flex;flex-direction:column;gap:4px}
.evrow input{width:auto}
.evall{margin:0 0 4px auto;gap:12px;border:0;padding:0}
.evlink{color:inherit;text-decoration:none;text-align:left}.evlink:hover{text-decoration:underline}
@media (max-width:700px){.tg{--tgl:40px}.tgday b{font-size:15px;width:26px;height:26px}.tgev span{display:none}}
/* The calendar uses the full width of the window */
main:has(.calbar){max-width:1400px}

/* Home: a "Want to" suggestion when nothing is in progress */
.csugg{display:flex;gap:16px;align-items:center}
.csmini{flex:0 0 120px}.csmini .mini{width:100%}
.cstext{min-width:0;display:flex;flex-direction:column;gap:2px}.cstext b{font-size:18px}

/* Note categories as covers, like Collections */
.catgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.catcov{aspect-ratio:3/4;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--cc) 85%,#fff 0%),color-mix(in srgb,var(--cc) 45%,#000));color:#fff}
.catcov::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18) 0 7%,rgba(255,255,255,.08) 7% 8.5%,transparent 8.5%);pointer-events:none}
.catcovi{font-size:46px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.catcovi .sym{width:52px;height:52px}
.catcov .cbadge{background:rgba(0,0,0,.45)}
.catdhead{display:flex;gap:20px;align-items:flex-end;margin:0 0 20px}
.catcov.big{flex:0 0 130px;width:130px;border-radius:12px}
.catcov.big .catcovi .sym{width:58px;height:58px}
.catdinfo{min-width:0;flex:1}.catdinfo h1{margin:4px 0 2px}
.catdinfo .row{gap:10px;flex-wrap:wrap}
.ncgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.ncvp{position:relative;display:flex;flex-direction:column;gap:6px;aspect-ratio:3/4;padding:14px;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,var(--sf));border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .15s,border-color .15s}
.ncv:hover .ncvp{transform:translateY(-3px);border-color:var(--ac)}
.ncvp b{font-size:15px;margin:0;-webkit-line-clamp:3}
.ncvp>span:not(.cnpin){font-size:12.5px;line-height:1.45;color:var(--mut);overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.ncvp .cnpin{position:absolute;right:10px;top:10px}
@media (max-width:600px){.catdhead{align-items:flex-start}.catcov.big{flex-basis:96px;width:96px}}

/* Projects in the Tasks style */
.pcard .lcl{display:flex;flex-direction:column;gap:8px;min-width:0}
.pcard .lcl>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcbar{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.pcbar i{display:block;height:100%;background:rgba(255,255,255,.85);border-radius:inherit}
.pinfo{margin:-6px 0 14px;display:flex;flex-direction:column;gap:8px;max-width:520px}
.pbar{max-width:520px;margin:0}
.pdesc{margin:0 0 16px}
.psettings{margin:0 0 18px}
.rnline .pdue{flex:0 0 150px;width:150px;padding:6px 8px}
.pdonet{margin:8px 0 0 -6px}
.plink{margin:12px 0 0}.plink select{flex:1;min-width:0}
.pnrow{position:relative;display:flex;align-items:center}
.pnrow+.pnrow::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--line)}
.pnrow .lrow{flex:1;min-width:0}.pnrow .lrow::before{display:none}
.pnun{position:absolute;right:46px;opacity:0;transition:opacity .15s}
.pnrow:hover .pnun,.pnun:focus-visible{opacity:1}
.pnun .sym{width:14px;height:14px}

/* Habits ↔ Health links */
.hlinks{display:flex;flex-wrap:wrap;gap:6px}
.hlink{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--hc,var(--ac)) 16%,transparent);color:var(--hc,var(--ac))}
.hlink:hover{background:color-mix(in srgb,var(--hc,var(--ac)) 26%,transparent)}
.hlink[disabled]{cursor:default}
.hlink .sym{width:13px;height:13px}
.hlink.healthy{--hc:#4f9d7c}.hlink.unhealthy{--hc:#d4605a}.hlink.gym{--hc:#5fa57f}.hlink.med{--hc:#8a7fd0}
.hhbar{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;margin:0 0 16px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,#e0566f 16%,var(--sf)),var(--sf))}
.hhbar:hover{border-color:#e0566f}
.hhbar .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hhico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:#e0566f;font-size:18px}.hhico .sym{width:20px;height:20px}
.hltip{margin:8px 0 0}.hltip.row{gap:10px;align-items:center;flex-wrap:wrap}
section.flash{animation:flashsec 1.6s ease}
@keyframes flashsec{0%,40%{box-shadow:0 0 0 2px var(--ac)}100%{box-shadow:0 0 0 2px transparent}}
.csmini .mini>b,.csmini .mini>.meta{display:none}

/* Daily recap card */
.rcnav{display:flex;align-items:center;gap:6px}.rcnav .cx .sym{width:14px;height:14px}.rcnav .cx[disabled]{opacity:.35;cursor:default}
.rctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:0 0 8px}
.rctile{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--rc) 14%,transparent);min-width:0}
.rctile b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rctile .meta{font-size:12px}
.rcico{color:var(--rc);font-size:16px;line-height:1}.rcico .sym{width:18px;height:18px}
.rcl{margin:6px 0 0;font-size:14px;line-height:1.45}
.rcl>b{font-weight:600;color:var(--mut)}

/* Sets: type toggle (1/W/D), done check, PR badge, last time; rest timer pill */
.wkst{all:unset;cursor:pointer;flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--mut);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.wkst:hover{color:var(--ink)}
.wkset.t-w .wkst{background:color-mix(in srgb,#e0a33f 22%,transparent);color:#e0a33f}
.wkset.t-d .wkst{background:color-mix(in srgb,#8a7fd0 22%,transparent);color:#8a7fd0}
.wkset.ok input{opacity:.6}
.wksok{--tc:#5fa57f;display:grid;place-items:center;color:#fff}
.wksok.on{background:#5fa57f;border-color:#5fa57f}.wksok .sym{width:11px;height:11px}
.wkpr{font-size:11px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:#e8b923;color:#2b2204}
.wklast{margin:-2px 0 8px;font-size:12.5px}
.wkrest{align-items:center;gap:10px;flex-wrap:wrap}.wkrest .moods.seg button{padding:4px 10px}
.restpill{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:999px;background:var(--sf);border:1px solid color-mix(in srgb,#5fa57f 60%,var(--line));box-shadow:0 10px 30px rgba(0,0,0,.35)}
.restpill b{font-size:18px;font-variant-numeric:tabular-nums;min-width:44px}
.restpill .cx{width:auto;padding:0 10px;height:28px;border-radius:999px;font-size:12px;font-weight:600}
.rpring{width:22px;height:22px;border-radius:50%;background:conic-gradient(#5fa57f var(--p),color-mix(in srgb,var(--ink) 12%,transparent) 0)}

/* Storage: links, images, PDFs */
.stsearch{margin:0 0 12px}
.strow{position:relative;display:flex;align-items:center}
.strow+.strow::before,.strow+.stframe+.strow::before{content:"";position:absolute;top:0;left:66px;right:16px;height:1px;background:var(--line)}
.strow .lrow{flex:1;min-width:0;padding-right:52px}.strow .lrow::before{display:none}
.stdel{position:absolute;right:12px;opacity:0;transition:opacity .15s}.stdel .sym{width:14px;height:14px}
.strow:hover .stdel,.stimg:hover .stdel,.stdel:focus-visible{opacity:1}
.stfav{position:relative;flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.stfav img{position:absolute;width:20px;height:20px;z-index:1}
.stfav i{font-style:normal;font-weight:700;color:var(--mut)}
.stpdf{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:#d4605a}
.stprev{flex:none;margin-right:4px}.stprev .sym{width:16px;height:16px}.stprev.on{background:var(--acs)}
.stframe{padding:0 16px 14px}.stframe iframe{width:100%;height:min(70vh,640px);border:1px solid var(--line);border-radius:10px;background:#fff}
.stimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.stimg{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.stimg .mimg{all:unset;cursor:zoom-in;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.stimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.stimg .mimg:hover img{transform:scale(1.03)}
.stimg .meta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stimg .stdel{top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff}

/* Timers & alarms card */
.tmpre{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}.tmpre .g{padding:0 12px;min-height:32px;font-size:13px}
.tmnew{margin:0 0 8px;gap:8px}.tmnew #tmmin{flex:0 0 72px;width:72px}.tmnew #altime{flex:0 0 120px;width:120px}.tmnew input{min-width:0}
.tmrow{display:flex;align-items:center;gap:12px;padding:8px 2px;border-top:1px solid var(--line)}
.tmrow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tmrow .t b{font-size:20px;font-variant-numeric:tabular-nums}
.tmrow.fin .t b{color:#e0566f}
.tmrow .cx .sym{width:14px;height:14px}
.tmrow.al.off .t b{color:var(--mut)}
.aldays{display:flex;gap:4px;margin-top:4px}
.aldays button{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--mut);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.aldays button.on{background:var(--ac);color:#fff}
.tmcard .head{flex-wrap:wrap;gap:8px}.tmcard .head .moods.seg button{padding:4px 12px;font-size:13px}
.tmnew{flex-wrap:wrap}.tmnew #tmlab,.tmnew #allab{flex:1 1 120px}

/* Kanban boards */
.kbtog{display:flex;justify-content:flex-end;margin:0 0 10px}.lhead+.kbtog,.head .kbtog{margin:0}
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 20px;align-items:start}
.kcol{border-radius:14px;padding:10px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line);min-height:120px;transition:border-color .15s,background .15s}
.kcol.over{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,transparent)}
.khead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px}
.khead b{font-size:14px;display:flex;align-items:center;gap:8px}
.khead b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mut)}
.k-doing .khead b::before{background:#e0a33f}.k-done .khead b::before{background:#5fa57f}
.kdrop{display:flex;flex-direction:column;gap:8px}
.kcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:10px;background:var(--sf);border:1px solid var(--line);cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.kcard:hover{border-color:color-mix(in srgb,var(--kc) 60%,var(--line))}
.kcard .kt::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--kc);margin-right:7px;vertical-align:1px}
.kcard.dragging{opacity:.4}
.k-done .kcard .kt{text-decoration:line-through;color:var(--mut)}
.kt{font-size:14px;line-height:1.35;word-break:break-word}
.kmeta{display:flex;gap:8px;align-items:center;font-size:12px}
.kmv{position:absolute;right:6px;bottom:6px;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.kcard:hover .kmv,.kmv:focus-within{opacity:1}.kmv .cx{width:24px;height:24px}.kmv .sym{width:13px;height:13px}
.kempty{text-align:center;margin:14px 0;font-size:12px}
@media (max-width:700px){.kanban{grid-template-columns:1fr}}
main:has(.kanban){max-width:1400px}
.kghost{position:fixed;z-index:80;pointer-events:none;box-shadow:0 14px 30px rgba(0,0,0,.35);opacity:.95}
body.kdragging,body.kdragging *{cursor:grabbing!important;user-select:none}
.kcard{touch-action:none}

/* Custom theme editor */
.tnew .tprev{display:grid;place-items:center;border:2px dashed var(--line);color:var(--mut);background:none}
.tnew .tprev .sym{width:24px;height:24px}
.thed{margin-top:14px;border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.thed .head{flex-wrap:wrap;gap:8px}
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:12px 0}
.thcol{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;min-width:0}
.thcol input[type=color]{flex:none;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.thcol span{flex:1;font-size:13px;min-width:0}.thcol code{font-size:11px;color:var(--mut)}
.thprev{padding:16px;border-radius:14px;border:1px solid var(--line)}
.thpc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px;border-radius:12px;border:1px solid}
.thpc b{flex-basis:100%}.thpb{padding:6px 14px;border-radius:999px;font-weight:600;font-size:13px}.thpt{padding:6px 12px;border-radius:8px;font-size:13px}
.thpc i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}

/* Wiki-link capsules, backlinks and the [[ menu */
.wl{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;vertical-align:baseline;max-width:100%;padding:1px 9px 1px 7px;margin:0 1px;border-radius:999px;font-size:.88em;font-weight:600;line-height:1.5;color:var(--wc,var(--ac));background:color-mix(in srgb,var(--wc,var(--ac)) 14%,transparent);border:1px solid color-mix(in srgb,var(--wc,var(--ac)) 28%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl:hover{background:color-mix(in srgb,var(--wc,var(--ac)) 24%,transparent)}
.wl .sym{width:.95em;height:.95em;flex:none}
.wl-note{--wc:#d4a43a}.wl-journal{--wc:#9a5fa0}.wl-project{--wc:#6f7fb0}.wl-col{--wc:#b0794a}.wl-list{--wc:#5fa57f}
.wl.missing{--wc:var(--mut);border-style:dashed}
.wlback{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.wlback .meta{margin:0 6px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.wlsug{position:fixed;z-index:90;min-width:240px;max-width:320px;padding:6px;border-radius:12px;background:var(--sf);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:2px}
.wlsug button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:14px}
.wlsug button.on,.wlsug button:hover{background:var(--acs)}
.wlsug button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wlsug button em{font-style:normal;font-size:11px;color:var(--mut)}
.wlsug .sym{width:15px;height:15px;color:var(--mut)}

/* AI tools on notes and the API key setting */
.aiwrap{position:relative;display:inline-flex}
.aibtn{gap:6px;min-height:34px;padding:0 14px}.aibtn .sym{width:15px;height:15px;color:#9a7fd0}
.aimenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;min-width:200px;padding:6px;border-radius:12px;background:var(--sf);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.aimenu button{all:unset;cursor:pointer;padding:8px 10px;border-radius:8px;font-size:14px}.aimenu button:hover{background:var(--acs)}
.ntools{display:flex;align-items:center;gap:8px}
.aipanel{margin:0 0 14px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,#9a7fd0 45%,var(--line));background:color-mix(in srgb,#9a7fd0 8%,transparent)}
.aihead{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}.aihead b{display:flex;align-items:center;gap:6px;font-size:14px}.aihead .sym{width:15px;height:15px;color:#9a7fd0}
.aipanel .md{font-size:15px}.aipanel .row{margin:8px 0 0}
.aitasks{margin:4px 0 0;padding-left:20px}.aitasks li{margin:2px 0}
.aithink{margin:0;animation:aipulse 1.2s ease-in-out infinite}
@keyframes aipulse{50%{opacity:.4}}
.aikey{margin-top:10px}.aikey input{flex:1;min-width:0;max-width:420px}

/* Password lock screen */
body.locked #app{visibility:hidden}
.lockscr{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg)}
.lockbox{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,90vw);text-align:center}
.lockbox h2{margin:4px 0 6px;font-size:20px}
.lockico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--acs);color:var(--ac)}.lockico .sym{width:30px;height:30px}
.lockbox input{width:100%;text-align:center}.lockbox .b{width:100%;justify-content:center}
.lockbox .meta{min-height:1.2em;margin:0;color:#e0566f}
.lockbox .biobtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}.biobtn .sym{width:20px;height:20px}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lockfields{max-width:360px}.lockfields input{width:100%}

/* ---------- Design styles (Settings → Appearance → Design style) ----------
   Colorful: Home cards tinted with their section's color, colored titles, filled buttons (rules at the end).
   Material: Roboto-style type, elevated cards, outlined fields, tonal buttons and rounded-square FAB. */

:root[data-style="material"] body{font-family:Roboto,"Noto Sans","Segoe UI",Figtree,sans-serif;letter-spacing:.01em}
:root[data-style="material"] h1{font-family:Roboto,"Noto Sans","Segoe UI",Figtree,sans-serif;font-weight:400;font-size:34px;letter-spacing:0}
:root[data-style="material"] h2{font-weight:500;letter-spacing:.01em}
:root[data-style="material"] section{border:0;border-radius:12px;background:color-mix(in srgb,var(--ac) 4%,var(--sf));box-shadow:0 1px 2px rgba(0,0,0,.18),0 1px 3px 1px rgba(0,0,0,.1)}
:root[data-style="material"] button.b{background:var(--ac);color:var(--onac);border:0;border-radius:20px;font-weight:500;letter-spacing:.02em;box-shadow:0 1px 2px rgba(0,0,0,.25)}
:root[data-style="material"] button.b:hover{background:color-mix(in srgb,var(--ac) 90%,#fff);color:var(--onac);box-shadow:0 2px 4px rgba(0,0,0,.25)}
:root[data-style="material"] button.g{background:var(--acs);color:color-mix(in srgb,var(--ac) 70%,var(--ink));border:0;border-radius:20px;font-weight:500;letter-spacing:.02em}
:root[data-style="material"] button.g:hover{background:color-mix(in srgb,var(--acs) 80%,var(--ink));color:var(--ink)}
:root[data-style="material"] input:not([type=checkbox]):not([type=color]):not([type=range]),:root[data-style="material"] textarea,:root[data-style="material"] select{border-radius:4px;border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);background:transparent}
:root[data-style="material"] input:focus,:root[data-style="material"] textarea:focus{outline:0;border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}
:root[data-style="material"] .moods.seg{border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);border-radius:20px;padding:0;background:transparent;gap:0;overflow:hidden}
:root[data-style="material"] .moods.seg button{border-radius:0;box-shadow:none}
:root[data-style="material"] .moods.seg button+button{border-left:1px solid color-mix(in srgb,var(--ink) 38%,transparent)}
:root[data-style="material"] .moods.seg button.on{background:var(--acs);color:var(--ink)}
:root[data-style="material"] .ntab,:root[data-style="material"] .lcard{border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
:root[data-style="material"] .fab{border-radius:16px;box-shadow:0 3px 6px rgba(0,0,0,.3)}
:root[data-style="material"] nav{border-right:0;background:color-mix(in srgb,var(--ac) 5%,var(--bg))}
/* Suggestion cover: no status badge (it's always "Want to"), more room between cover and text */
.csmini .cbadge{display:none}
.csugg{gap:18px;align-items:center}
.csmini{flex:0 0 112px}
.cstext{gap:4px}.cstext .row{flex-wrap:wrap;gap:8px}
/* Kanban cards without borders: a slightly raised fill instead */
.kcard{border:0;background:color-mix(in srgb,var(--ink) 5%,var(--sf));box-shadow:0 1px 2px rgba(0,0,0,.14)}
.kcard:hover{border:0;background:color-mix(in srgb,var(--ink) 9%,var(--sf))}
/* Timer/alarm entry: one pill with a divider, no boxes inside it */
.tmcard .tmnew{flex-wrap:nowrap;gap:0;padding:4px 4px 4px 6px}
.tmcard .tmnew input{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0;min-width:0;padding:8px 10px}
.tmcard .tmnew input:focus{outline:none}
.tmcard .tmnew #tmmin,.tmcard .tmnew #altime{flex:0 0 auto;width:62px;text-align:center;border-right:1px solid var(--line)!important}
.tmcard .tmnew #altime{width:auto}
.tmcard .tmnew #tmlab,.tmcard .tmnew #allab{flex:1 1 auto}
.tmcard .tmnew:focus-within{border-color:var(--ac)}
.tmcard .tmnew .b.tick{flex:none}
.stthumb{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.stthumb img{width:100%;height:100%;object-fit:cover;display:block}
.stadd{gap:8px;flex-wrap:wrap}
.sttabs .ntabs{flex-wrap:nowrap}.sttabs .ntab{min-width:0;flex:1 1 0;max-width:none}@media (max-width:760px){.sttabs .ntabs{flex-wrap:wrap}.sttabs .ntab{flex:1 1 calc(50% - 10px)}}
main:has(.sttabs){max-width:1040px}

/* Storage: pins, favorites, favorites filter, rename bar */
.stsrow{display:flex;gap:8px;align-items:center;margin:0 0 12px}.stsrow .stsearch{flex:1;margin:0}
.stfavf{flex:none}.stfavf .sym{width:15px;height:15px}.stfavf.on{color:#e0566f;border-color:color-mix(in srgb,#e0566f 50%,var(--line))}
.stfavf.on .sym path{fill:#e0566f}
.stmk{display:inline-grid;vertical-align:-2px;margin-left:6px}.stmk .sym{width:13px;height:13px}
.stmk.pin{color:var(--ac)}.stmk.fav{color:#e0566f}.stmk.fav .sym path{fill:#e0566f}
.cnt b{display:flex;align-items:center;min-width:0}.cnt b>span[data-notr]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stimk{position:absolute;left:8px;top:8px;z-index:1;display:flex;gap:4px;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.stimk .stmk{margin:0}.stimk .stmk.pin{color:#fff}
.strename{gap:8px;margin:0 0 12px;align-items:center}.strename input{flex:1;min-width:0}

/* Storage: view and sort bar, card layout */
.stbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 12px}
.stcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px 14px}
.stcard{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0}
.stcard>b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.stcard>.meta{font-size:12px}
.stcov{all:unset;cursor:pointer;position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,var(--sf));border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.stcard:hover .stcov{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.stcov img{width:100%;height:100%;object-fit:cover;display:block}
.stcov-links{background:linear-gradient(150deg,color-mix(in srgb,#4a8fd9 22%,var(--sf)),var(--sf));align-content:center;gap:8px}
.stcfav{position:relative;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--sf);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.stcfav img{position:absolute;width:30px;height:30px;z-index:1}.stcfav i{font-style:normal;font-weight:700;font-size:20px;color:var(--mut)}
.stchost{font-size:12px;color:var(--mut);max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stcov-pdfs{background:linear-gradient(150deg,color-mix(in srgb,#d4605a 24%,var(--sf)),var(--sf))}
.stcpdf{padding:10px 14px;border-radius:10px;background:#d4605a;color:#fff;font-weight:800;letter-spacing:.06em;font-size:15px}
.stcard .stdel{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;z-index:2}
.stcard:hover .stdel,.stcard .stdel:focus-visible{opacity:1}
.sthint{display:flex;align-items:center;gap:6px;margin:-6px 0 12px 4px}.sthint .sym{width:14px;height:14px}
/* Card delete button: a proper round button inside the cover's corner */
.stcard .stdel,.stimg .stdel{width:28px;height:28px;min-width:28px;padding:0;display:grid;place-items:center;border-radius:50%;top:8px;right:8px;backdrop-filter:blur(4px)}
.stcard .stdel .sym,.stimg .stdel .sym{width:13px;height:13px}
.stcards{margin-top:4px}
.stbar{margin-bottom:16px}
/* Pasted files waiting in the search bar */
.stsearch.haspend{display:flex;align-items:center;gap:6px;padding-left:6px}
.stsearch.haspend input{flex:1;min-width:80px}
.stchip{position:relative;flex:none;width:32px;height:32px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 0 0 1px var(--line)}
.stchip img{width:100%;height:100%;object-fit:cover}
.stchip b{font-size:9px;font-weight:800;color:#fff;background:#d4605a;padding:2px 4px;border-radius:4px}
.stchx{all:unset;cursor:pointer;position:absolute;top:-1px;right:-1px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:11px;line-height:1;background:rgba(0,0,0,.7);color:#fff;opacity:0;transition:opacity .15s}
.stchip:hover .stchx,.stchx:focus-visible{opacity:1}
/* Staging tray for pasted files */
.stpendico{position:relative;flex:none;width:26px;height:26px;margin-left:8px;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.stsearch:has(.stpendico){display:flex;align-items:center}.stsearch:has(.stpendico) input{flex:1}
.stpendico img{width:100%;height:100%;object-fit:cover}.stpendico b{font-size:8px;font-weight:800;color:#fff;background:#d4605a;padding:1px 3px;border-radius:3px}
.stpendico em{position:absolute;right:-1px;bottom:-1px;font-style:normal;font-size:10px;font-weight:700;min-width:14px;height:14px;border-radius:7px;display:grid;place-items:center;background:var(--ac);color:var(--onac)}
.sttray{padding:14px;margin:0 0 14px;border:1px dashed color-mix(in srgb,var(--ac) 55%,var(--line));background:color-mix(in srgb,var(--ac) 6%,var(--sf))}
.sttitems{display:flex;flex-wrap:wrap;gap:14px}
.sttitem{display:flex;flex-direction:column;gap:3px;width:120px;min-width:0}
.sttitem .meta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sttsize{font-size:11px!important;opacity:.8}
.sttthumb{position:relative;width:120px;height:120px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,#d4605a 22%,var(--sf)),var(--sf));box-shadow:0 4px 14px rgba(0,0,0,.22)}
.sttthumb img{width:100%;height:100%;object-fit:cover}
.sttthumb b{padding:8px 12px;border-radius:9px;background:#d4605a;color:#fff;font-weight:800;letter-spacing:.06em}
.sttthumb .stchx{top:6px;right:6px;width:24px;height:24px;opacity:1}.sttthumb .stchx .sym{width:12px;height:12px}
.sttbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px}
.sttbar>.meta{display:flex;align-items:center;gap:6px}.sttbar .sym{width:14px;height:14px}
.gorow{display:flex;flex-wrap:wrap;gap:8px}.gorow .g{gap:6px}.gorow .g .meta{font-size:12px;font-weight:500}
/* Search results with a thumbnail (Storage) */
.sres.sresi{display:flex;align-items:center;gap:12px}
.sresi .srt{display:flex;flex-direction:column;min-width:0}.sresi .srt b,.sresi .srt .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sresi .stthumb,.sresi .stfav,.sresi .stpdf{width:44px;height:44px;border-radius:10px}
/* Link capsules styled like the section tiles, in neutral gray */
.wl{--wc:var(--ink);gap:7px;padding:3px 12px 3px 3px;margin:1px 2px;border:0;border-radius:12px;font:700 14px/1.2 Figtree,system-ui,sans-serif;letter-spacing:0;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,var(--sf));vertical-align:middle;transition:background .15s}
.wl:hover{background:color-mix(in srgb,var(--ink) 13%,var(--sf))}
.wli{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 10%,var(--sf));font-size:13px}
.wli .sym{width:14px;height:14px}
.wlt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl.missing{color:var(--mut);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent)}
.wl.missing .wli{background:transparent}
.backhome span{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* every back button is the same small pill as Home's */
.circ.backnote{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;max-width:300px;box-sizing:content-box;padding:6px 14px 6px 8px;border-radius:999px;font-weight:600;font-size:14px;line-height:21px;color:var(--mut);background:var(--sf);border:1px solid var(--line);transition:color .15s,border-color .15s}.circ.backnote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.circ.backnote .sym{flex:none;width:16px;height:16px}
.circ.backnote:hover,.circ.backnote:focus-visible{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
/* Image results in search: big tiles */
.srimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:4px 0 10px}
.srimg{all:unset;cursor:zoom-in;display:flex;flex-direction:column;gap:3px;min-width:0}
.srimgc{display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--ink) 8%,transparent);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.srimgc img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.srimg:hover .srimgc img{transform:scale(1.04)}
.srimg b{font-size:14px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srimg .meta{font-size:12px}
.srimg:focus-visible .srimgc{outline:2px solid var(--ac);outline-offset:2px}
.hsearch .hqclr{position:static;transform:none;flex:none;margin-left:6px}
/* Task row actions: round icon buttons; delete asks with a short red pill */
.ract{gap:4px;align-items:center}
.ract.armed{opacity:1}
.rbtn{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;color:var(--mut);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.rbtn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.rbtn .sym{width:15px;height:15px}
.rbtn[data-act="delT"]:hover{color:#e0566f;background:color-mix(in srgb,#e0566f 14%,transparent)}
.rdel{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px 0 9px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;background:#e0566f;white-space:nowrap}
.rdel .sym{width:14px;height:14px}.rdel:hover{background:#c94a61}

/* Setup (onboarding) */
body.onboarding #app{filter:blur(6px);pointer-events:none}
.onb{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:color-mix(in srgb,var(--bg) 70%,transparent);overflow-y:auto}
.onbcard{width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;background:var(--sf);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:18px 26px 26px}
.onbtop{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;margin:0 0 8px}
.onbback{width:36px;height:36px}
.onbdots{display:flex;justify-content:center;gap:6px}
.onbdots i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:width .2s,background .2s}
.onbdots i.past{background:color-mix(in srgb,var(--ac) 55%,transparent)}
.onbdots i.on{width:22px;border-radius:999px;background:var(--ac)}
.onbskip{font-size:13px;min-width:80px;text-align:right}
.onbbody{display:flex;flex-direction:column;align-items:stretch}
.onbbody h1{margin:10px 0 6px;font-size:28px}
.onbhero{display:flex;flex-direction:column;align-items:center;text-align:center;margin:6px 0 8px}
.onbhero .sub{margin:0 0 6px}
.onblogo{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;font:700 38px Literata,Georgia,serif;color:var(--onac);background:linear-gradient(150deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#000))}
.onblogo.done .sym{width:36px;height:36px}
.onbico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:32px;color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--tc) 85%,#fff 0%),color-mix(in srgb,var(--tc) 55%,#000));margin-top:6px}
.onbico .sym{width:34px;height:34px}
.onbcount{margin:4px 0 2px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}
.onbdesc{font-size:17px;line-height:1.5;margin:0 0 12px}
.onbpts{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.onbpts li{display:flex;align-items:center;gap:10px}
.onbpts .sym{flex:none;width:16px;height:16px;color:var(--ac)}
.onbnav{display:flex;justify-content:flex-end;margin-top:20px}
.onbnav.two{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:8px}
.onbbig{min-height:48px!important;font-size:16px!important;justify-content:center}
.onbbig .sym{width:17px;height:17px}
.onbnav .b.onbbig{background:var(--ac)!important;color:var(--onac)!important;border-color:transparent!important}
.onbbig.chosen{box-shadow:0 0 0 2px var(--ac)}
.onbbody input#onbname{max-width:none}
.onbthemes{grid-template-columns:repeat(3,1fr)}
.onbsum{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 0}
.onbchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ink)}
.onbchip .sym{width:15px;height:15px}
.onbchip.off{background:none;color:var(--mut);text-decoration:line-through;box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:520px){.onbcard{padding:14px 16px 20px}.onbthemes{grid-template-columns:repeat(2,1fr)}.onbnav.two{grid-template-columns:1fr}}

/* Project files */
.pfbtn{min-height:34px!important;padding:0 12px!important;font-size:13px!important;gap:5px}.pfbtn .sym{width:14px;height:14px}
.pfbtn[aria-pressed="true"]{background:var(--acs)}
.pflink,.pfpicker{margin:0 0 14px}
.pfpicker .sbox{display:block;margin:0 0 10px}
.pfpool{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}
.pfopt{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px}
.pfopt:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pfopt.on{background:color-mix(in srgb,var(--ac) 12%,transparent)}
.pfopt .cnt{flex:1;min-width:0}
.pfchk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--mut) 70%,transparent);color:#fff}
.pfopt.on .pfchk{background:var(--ac);border-color:var(--ac)}.pfchk .sym{width:12px;height:12px}
.pfcards{margin-bottom:10px}

/* Today's focus */
.focusbar{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0 0 16px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--ac) 45%,var(--line));background:color-mix(in srgb,var(--ac) 5%,transparent)}
.focusbar .t{flex:1;color:var(--mut)}.fico{display:grid;place-items:center;color:var(--ac)}.fico .sym{width:20px;height:20px}
.focuscard{border-color:color-mix(in srgb,var(--ac) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 9%,var(--sf)),var(--sf))}
.focuscard.alldone{border-color:color-mix(in srgb,#5fa57f 55%,var(--line))}
.frow{display:flex;align-items:center;gap:14px;padding:10px 4px}.frow+.frow{border-top:1px solid var(--line)}
.fchk{all:unset;cursor:pointer;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2.5px solid color-mix(in srgb,var(--ac) 70%,transparent);color:#fff}
.fchk:hover{background:color-mix(in srgb,var(--ac) 15%,transparent)}.fchk.on{background:var(--ac);border-color:var(--ac)}.fchk .sym{width:16px;height:16px}
.ft{flex:1;font-size:18px;font-weight:600;min-width:0}.frow.done .ft{text-decoration:line-through;color:var(--mut)}
.fmode{min-height:32px!important;padding:0 12px!important;font-size:13px!important}.fmode.on{background:var(--acs)}
.prioopts{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto}.prioopts .pfopt[disabled]{opacity:.45;cursor:default}
.fmhint{text-align:center;margin:8px 0 0}
/* Quick capture */
.qcbtn{all:unset;cursor:pointer;position:fixed;right:22px;bottom:22px;z-index:70;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ac);color:var(--onac);transition:transform .15s}
.qcbtn:hover{transform:scale(1.06)}.qcbtn .sym{width:24px;height:24px}.qcbtn[hidden]{display:none}
.qcap{position:fixed;right:22px;bottom:86px;z-index:75;width:min(440px,calc(100vw - 32px));padding:14px;border-radius:16px;background:var(--sf);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.qchead{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}.qchead .sym{width:14px;height:14px}
.qcap textarea{width:100%;min-height:80px;resize:vertical}
.qcfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}.qcfoot .qcwill{flex:1;font-size:12px;min-width:120px}
.qctypes{flex-wrap:wrap}.qctypes button{padding:4px 10px;font-size:12px}

/* Version history and daily notes */
.rbtn.on{background:var(--acs);color:var(--ink)}
.histpanel{margin:0 0 14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--sf))}
.histpanel .aihead .sym{color:var(--ac)}
.histlist{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.histlist button{all:unset;cursor:pointer;flex:none;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--mut);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.histlist button.on{background:var(--ac);color:var(--onac)}
.histdiff{max-height:280px;overflow:auto;border-radius:8px;border:1px solid var(--line);font:12.5px/1.55 "JetBrains Mono",ui-monospace,monospace}
.histdiff>div{padding:0 10px;white-space:pre-wrap;word-break:break-word}.histdiff span{display:inline-block;width:14px;color:var(--mut)}
.hl-add{background:color-mix(in srgb,#5fa57f 16%,transparent)}.hl-del{background:color-mix(in srgb,#e0566f 14%,transparent);text-decoration:line-through;color:var(--mut)}.hl-same{color:var(--mut)}
.hadd{color:#5fa57f;font-weight:700}.hdel{color:#e0566f;font-weight:700}
.dailynav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px 0 12px}
.dailynav .g{min-height:32px!important;padding:0 12px!important;font-size:13px!important;gap:4px}.dailynav .g .sym{width:14px;height:14px}
.dailybtn{gap:6px}.dailybtn .sym{width:16px;height:16px}
/* Journal extras */
.jstreak{display:inline-flex;align-items:center;gap:4px;margin-left:12px;padding:3px 10px;border-radius:999px;font:700 13px Figtree,system-ui,sans-serif;vertical-align:middle;color:#e08a3f;background:color-mix(in srgb,#e08a3f 14%,transparent)}
.otd{border-color:color-mix(in srgb,#9a5fa0 40%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,#9a5fa0 8%,var(--sf)),var(--sf))}
.otdrow+.otdrow{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}.otdtxt{margin:0;white-space:pre-wrap}
.moodq{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--ac) 8%,transparent)}
.moodq>.meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}.moodq .sym{flex:none;width:16px;height:16px;color:var(--ac)}
/* Task priority, repeat and the natural-language hint */
.tpri{font-weight:800;margin-right:6px;letter-spacing:-.04em}.tpri.p-high{color:#e0566f}.tpri.p-medium{color:#e0a33f}.tpri.p-low{color:#5b9bd5}
.trep{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;color:var(--mut)}.trep .sym{width:12px;height:12px}
.nlhint{margin:4px 0 6px 36px;font-size:12px;color:var(--ac)}
.row+.nlhint{margin-left:2px}
/* Project milestones timeline */
.mstl{margin:4px 0 14px}
.mstrack{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin:14px 8px 6px}
.msfill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:color-mix(in srgb,var(--tc,var(--ac)) 55%,transparent)}
.msdot{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--sf);border:3px solid var(--tc,var(--ac));box-shadow:0 1px 3px rgba(0,0,0,.3)}
.msdot.done{background:var(--tc,var(--ac))}.msdot.late{border-color:#e0566f}
.mstoday{position:absolute;top:-8px;bottom:-8px;width:2px;margin-left:-1px;background:#e0566f;border-radius:2px}
.msends{display:flex;justify-content:space-between;font-size:12px}
.mslist{display:flex;flex-direction:column}
.msrow{display:flex;align-items:center;gap:12px;padding:8px 4px}.msrow+.msrow{border-top:1px solid var(--line)}
.msrow .t{flex:1;font-weight:600;min-width:0}.msrow.done .t{text-decoration:line-through;color:var(--mut)}.msrow .late{color:#e0566f}
.msrow .rchk{--tc:var(--ac)}.msrow .rchk.on{background:var(--tc,var(--ac));border-color:var(--tc,var(--ac))}
.msrow .rbtn{opacity:0}.msrow:hover .rbtn{opacity:1}
/* Habit routines (stacking) and year heatmap */
.hchains{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.hchains.sm{margin:0 0 10px}
.hchain{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--ac) 6%,var(--sf));border:1px solid var(--line)}
.hchains.sm .hchain{padding:8px 10px}
.hchl{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.hcar{color:var(--mut);display:grid}.hcar .sym{width:12px;height:12px}
.hstep{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 8px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--mut)}
.hstep .sym{width:14px;height:14px}
.hstep.next{background:var(--ac);color:var(--onac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}
.hstep.ok{background:color-mix(in srgb,#5fa57f 20%,transparent);color:var(--ink)}.hstep.ok span{text-decoration:line-through;opacity:.7}
.hheat{margin:10px 0 4px;overflow-x:auto}
.hhgrid{display:flex;gap:3px}.hhgrid>span{display:flex;flex-direction:column;gap:3px}
.hhgrid i{width:10px;height:10px;border-radius:3px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
.hhgrid i.fut{background:none}
.hhgrid i.ok.l1{background:color-mix(in srgb,#5fa57f 35%,transparent)}.hhgrid i.ok.l2{background:color-mix(in srgb,#5fa57f 55%,transparent)}.hhgrid i.ok.l3{background:color-mix(in srgb,#5fa57f 75%,transparent)}.hhgrid i.ok.l4{background:#5fa57f}
.hhgrid i.no{background:color-mix(in srgb,#e0566f 35%,transparent)}
/* Body tracking */
.bodyin{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.bodyin .lab{display:flex;flex-direction:column;gap:4px;flex:1 1 120px}.bodyin input{width:100%}
.bodycard h2{display:flex;align-items:center;gap:8px}.bodycard h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bc)}.bodyv{font-size:30px;color:var(--bc)}
.spark{display:block;width:100%;height:60px;margin-top:8px}
.bodymini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bodymini>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--bc) 10%,transparent);min-width:0}
.bodymini b{font-size:18px}.bodymini small{font-size:11px;color:var(--mut);font-weight:500}.bodymini .spark{height:28px;margin-top:4px}
/* Workout calendar */
.wcgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wch{font-style:normal;text-align:center;font-size:11px;color:var(--mut)}
.wcd{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;aspect-ratio:1/0.8;border-radius:8px;font-size:12px;color:var(--mut);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.wcd.on{cursor:pointer;color:var(--ink);font-weight:700;background:color-mix(in srgb,#5fa57f 16%,transparent)}.wcd.on:hover{background:color-mix(in srgb,#5fa57f 28%,transparent)}
.wcd.td{box-shadow:inset 0 0 0 2px var(--ac)}
.wcd em{display:flex;gap:2px}.wcd em i{width:6px;height:6px;border-radius:50%}
.wcbars{margin-top:12px}.wcdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.wcd{aspect-ratio:auto;height:48px}.wcal .wcgrid{max-width:640px}.wcbars{max-width:640px}
/* Collections goals, stats and quotes */
.cextra{gap:8px;margin:0 0 12px}.cextra .g{gap:6px}.cextra .g .sym{width:15px;height:15px}.cextra .g[aria-pressed="true"]{background:var(--acs)}
.cgoals{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:0 0 12px}
.cgoal{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--gc) 10%,var(--sf));border:1px solid var(--line)}
.cgico{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--gc)}.cgico .sym{width:20px;height:20px}
.cgt{flex:1;min-width:0}.cgt b{display:flex;justify-content:space-between;gap:6px;font-size:14px}.cgt .bar{margin:6px 0 4px}.cgt .bar i{background:var(--gc)}
.cgst{font-size:12px}.cgst.ok{color:#5fa57f}.cgst.late{color:#e0a33f}
.cmonths{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;height:90px;align-items:end}
.cmonths span{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.cmonths i{display:block;width:100%;min-height:2px;border-radius:5px 5px 2px 2px;background:var(--ac)}.cmonths em{font-style:normal;font-size:11px;color:var(--mut)}
.cgoalset{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}.cgoalset .lab{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:0 0 88px;width:88px;min-width:0;text-align:left}.cgoalset input{width:100%;box-sizing:border-box;text-align:center}.cgoalset .tick{margin-bottom:4px}
.qcard{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--sf));border:1px solid var(--line);margin:0 0 8px}
.qtext{margin:0 0 8px;font:italic 16px/1.55 Literata,Georgia,serif;white-space:pre-wrap}
.qmeta{display:flex;align-items:center;gap:10px}.qmeta .meta{flex:1}.qmeta .rbtn{opacity:0}.qcard:hover .rbtn{opacity:1}
.qitem{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px}.qitem:hover{text-decoration:underline}
.qcov{width:22px;height:32px;border-radius:4px;overflow:hidden;display:inline-block}.qcov img{width:100%;height:100%;object-fit:cover}.qcov .cph{font-size:10px}
.qgrid{columns:2 320px;column-gap:12px}.qgrid .qcard{break-inside:avoid}
.qadd{margin-top:6px}
/* Birthdays and .ics import */
.calx{gap:6px}.calx .sym{width:16px;height:16px}.calx.on{background:var(--acs)}
@media (max-width:900px){.calx span{display:none}}
.bdpanel{border-color:color-mix(in srgb,#e0a33f 45%,var(--line))}
.bdpanel .row input#bdname{flex:1;min-width:0}
/* Insights: mood correlations and monthly review */
.mcrow{display:grid;grid-template-columns:minmax(120px,200px) 1fr 44px 80px;align-items:center;gap:10px;padding:6px 0}
.mcl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.mcbar{position:relative;height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mcbar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line)}
.mcbar i{position:absolute;top:0;bottom:0;border-radius:999px}.mcbar i.up{background:#5fa57f}.mcbar i.down{background:#e0566f}
.mcv{font-weight:700;text-align:right}.mcv.up{color:#5fa57f}.mcv.down{color:#e0566f}.mcd{font-size:12px}
@media (max-width:600px){.mcrow{grid-template-columns:1fr 60px}.mcbar,.mcd{display:none}}
.mreview{background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 7%,var(--sf)),var(--sf))}
.mrmoods{display:flex;height:10px;border-radius:999px;overflow:hidden;margin:12px 0}
.mrlist p{margin:6px 0}.mrhi{padding:8px 0;border-top:1px solid var(--line)}.mrhi p{margin:2px 0 0}
/* Storage folders and read later */
.stfolders{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
.stfchip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.stfchip .sym{width:14px;height:14px}.stfchip em{font-style:normal;font-size:11px;opacity:.8}
.stfchip.on{background:var(--ac);color:var(--onac)}
.stmk.later{font-size:12px}.stmk.fold{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--mut)}
.rlrow{display:flex;align-items:center;gap:10px;padding:6px 0}.rlrow+.rlrow{border-top:1px solid var(--line)}
.rlt{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;flex-direction:column}.rlt b,.rlt .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rlt:hover b{text-decoration:underline}
.rlrow .stfav{width:32px;height:32px}
/* Keyboard shortcuts panel */
.kbcard{width:min(520px,100%)}
.kbh{margin:14px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.kbrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:14px}
.kbgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
kbd{display:inline-block;min-width:20px;padding:2px 7px;border-radius:6px;border:1px solid var(--line);border-bottom-width:2px;background:color-mix(in srgb,var(--ink) 5%,var(--sf));font:600 12px "JetBrains Mono",ui-monospace,monospace;text-align:center}
@media (max-width:520px){.kbgrid{grid-template-columns:1fr}}
/* Home card updates */
.hcms{display:flex;align-items:center;gap:6px;margin-top:4px}.hcms .sym{width:13px;height:13px;color:var(--ac)}
.hcdaily{width:100%;justify-content:center;gap:6px;margin:0 0 6px;min-height:36px!important}.hcdaily .sym{width:16px;height:16px}
.hcgoals{display:flex;flex-direction:column;gap:6px;margin-top:10px}.hcgoals .bar{margin:2px 0 0}.hcgoals .bar i{background:var(--gc)}
.focuscard h2{display:flex;align-items:center;gap:8px}.focuscard h2 .fico .sym{width:18px;height:18px}
.focuscard.fempty{border-style:dashed}
/* Emotions on journal entries */
.emowrap{margin:0 0 10px}.emowrap>.meta{display:block;margin:0 0 6px}
.emos{display:flex;flex-wrap:wrap;gap:6px}
.emos.ro{margin:8px 0 2px}
.emo{all:unset;cursor:pointer;padding:4px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--mut);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .12s}
.emo:hover{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.emo.pos.on{color:#1f5e3c;background:color-mix(in srgb,#5fa57f 45%,var(--sf))}
.emo.neg.on{color:#6b2a3a;background:color-mix(in srgb,#e0566f 38%,var(--sf))}
:root[data-theme="dark"] .emo.pos.on{color:#d9f2e3}:root[data-theme="dark"] .emo.neg.on{color:#fbe0e6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .emo.pos.on{color:#d9f2e3}:root:not([data-theme="light"]) .emo.neg.on{color:#fbe0e6}}
.emos.ro .emo{cursor:default;font-size:12px;padding:3px 10px}.emo em{font-style:normal;opacity:.7;margin-left:3px}
.emoadd{margin:-4px 0 8px -6px}
/* Toast with Open / Undo buttons */
#toast.withact{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;z-index:90}
#toast.withact[hidden]{display:none}
#toast .tact{all:unset;cursor:pointer;padding:5px 12px;border-radius:6px;font-weight:700;font-size:14px;color:var(--bg);background:color-mix(in srgb,var(--bg) 18%,transparent)}
#toast .tact:hover{background:color-mix(in srgb,var(--bg) 30%,transparent)}
/* Timers card, cleaner */
.tmlab0{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.tmcard .tmpre{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 12px}
.tmcard .tmpre button{all:unset;cursor:pointer;text-align:center;padding:7px 0;border-radius:10px;font-weight:700;font-size:14px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);transition:background .12s}
.tmcard .tmpre button:hover{background:color-mix(in srgb,var(--ac) 18%,transparent);color:var(--ac)}
.tmcard .tmnew{border:0!important;background:color-mix(in srgb,var(--ink) 6%,transparent)!important;padding:4px 4px 4px 12px!important;align-items:center}
.tmcard .tmnew:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 55%,transparent)}
.tmico{display:grid;place-items:center;color:var(--mut);margin-right:2px}.tmico .sym{width:16px;height:16px}
.tmcard .tmnew #tmmin{width:48px!important;padding:8px 6px!important;font-weight:700}
.tmcard .tmnew #altime{padding:8px 8px!important;font-weight:700}
.tmcard .tmnew #tmmin,.tmcard .tmnew #altime{border-right:1px solid color-mix(in srgb,var(--ink) 14%,transparent)!important}
.tmcard .tmnew .b.tick{width:36px;height:36px;min-height:36px}
.tmcard .tmnew #tmmin,.tmcard .tmnew #altime{border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;margin-right:4px}
/* In progress: finder */
.ipfind{margin:0 0 12px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.ipfind .sbox{display:block;margin:0 0 6px}
.iplist{display:flex;flex-direction:column;gap:2px}
.ipitem{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px}
.ipitem:hover{background:color-mix(in srgb,var(--ac) 10%,transparent)}
.ipitem .cnt{flex:1;min-width:0}.ipitem .qcov{width:26px;height:38px;flex:none}
.ipgo{flex:none;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent);opacity:0;transition:opacity .12s}
.ipitem:hover .ipgo,.ipitem:focus-visible .ipgo{opacity:1}
.ipweb{width:100%;justify-content:center;margin-top:6px;gap:6px}.ipweb .sym{width:15px;height:15px}
/* Mood check-ins (Home) */
.mcemo{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.mcemo>.meta{display:block;margin:0 0 6px}
.mclist{margin-top:12px;display:flex;flex-direction:column}
.mcrow{display:flex;align-items:center;gap:8px;padding:6px 0;min-width:0}.mcrow+.mcrow{border-top:1px solid var(--line)}
.mct{flex:none;width:48px;font-variant-numeric:tabular-nums}.mcrow b{font-size:14px}
.mce{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcrow .mcdel{margin-left:auto;opacity:0;width:26px;height:26px}.mcrow:hover .mcdel{opacity:1}
/* In progress: a suggestion looks like one */
.csnone{margin:0 0 8px}
.csugg{position:relative;padding:28px 12px 12px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--ac) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 8%,transparent),transparent)}
.cstag{position:absolute;left:10px;top:8px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.csugg .csmini .mcov{opacity:.82;filter:saturate(.8)}
.csugg .csmini .cfav{display:none}
.csfrom{font-size:12px}
.csugg .row .g{gap:6px}.csugg .row .g .sym{width:14px;height:14px}

/* Meditation Home card */
.medcard{background:linear-gradient(135deg,color-mix(in srgb,#5fa57f 12%,var(--sf)),color-mix(in srgb,#e0c34f 8%,var(--sf)))}
.medstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.medstats>div{display:flex;flex-direction:column;gap:2px}.medstats b{font-size:20px}
.medpick{display:flex;align-items:center;gap:6px;margin:12px 0 10px}
.medpick button{all:unset;cursor:pointer;flex:1;text-align:center;padding:6px 0;border-radius:10px;font-weight:700;font-size:14px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.medpick button.on{background:#5fa57f;color:#fff}.medpick button:hover:not(.on){background:color-mix(in srgb,#5fa57f 20%,transparent)}
.medgo{width:100%;justify-content:center;gap:8px;background:#5fa57f!important;color:#fff!important;border-color:transparent!important}.medgo .sym{width:16px;height:16px}
/* Full-screen meditation */
body.medfs-on{overflow:hidden}
.medfs{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:#08120d;overflow:hidden;cursor:none}
.medfs.show,.medfs.paused{cursor:default}
.mfbg{position:absolute;inset:-20%;filter:blur(90px) saturate(1.15);opacity:.9}
.mfbg i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:mfdrift 24s ease-in-out infinite alternate}
.mfbg .b1{width:55vmax;height:55vmax;left:5%;top:10%;background:radial-gradient(circle,#2f9e5c 0,transparent 65%);animation-duration:26s}
.mfbg .b2{width:48vmax;height:48vmax;right:0;top:0;background:radial-gradient(circle,#e8c547 0,transparent 62%);animation-duration:31s;animation-delay:-8s}
.mfbg .b3{width:50vmax;height:50vmax;left:25%;bottom:-10%;background:radial-gradient(circle,#7cc96b 0,transparent 64%);animation-duration:22s;animation-delay:-4s}
.mfbg .b4{width:36vmax;height:36vmax;right:15%;bottom:5%;background:radial-gradient(circle,#c9d84a 0,transparent 60%);animation-duration:28s;animation-delay:-12s}
.mfbg .b5{width:30vmax;height:30vmax;left:40%;top:30%;background:radial-gradient(circle,#1f7a4a 0,transparent 60%);animation-duration:35s;animation-delay:-16s}
@keyframes mfdrift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(8vw,-6vh) scale(1.15)}66%{transform:translate(-6vw,7vh) scale(.9)}100%{transform:translate(4vw,4vh) scale(1.1)}}
.medfs.paused .mfbg i{animation-play-state:paused}
.mfcenter{position:relative;text-align:center;color:#f4f9ee}
.mfclock{font:300 clamp(72px,16vw,180px)/1 Figtree,system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 4px 40px rgba(0,0,0,.25)}
.mfhint{margin:14px 0 0;font:400 16px Figtree,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.55;animation:mfbreath 10s ease-in-out infinite}
@keyframes mfbreath{0%,100%{opacity:.25}50%{opacity:.7}}
.medfs.paused .mfhint{animation:none;opacity:.6}
.medfs.paused .mfhint::before{content:"Paused · "}
.mfctl{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;gap:10px;opacity:0;transition:opacity .4s}
.medfs.show .mfctl,.medfs.paused .mfctl{opacity:1}
.mfbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:48px;min-width:48px;padding:0 16px;box-sizing:border-box;justify-content:center;border-radius:999px;color:#f4f9ee;font:600 15px Figtree,system-ui,sans-serif;background:rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.mfbtn:hover{background:rgba(255,255,255,.22)}.mfbtn .sym{width:18px;height:18px}
.mfplay{display:none}.medfs.paused .mfplay{display:inline-grid}.medfs.paused .mfpause{display:none}
@media (prefers-reduced-motion:reduce){.mfbg i,.mfhint{animation:none}}
/* Mood check-ins in the Journal timeline: emotions shown in full */
.jmoods .mclist{margin-top:8px}.jmoods .mce{white-space:normal}

/* Setup: the language switch sits centered under its label, sized to its buttons */
.onblang{display:flex;flex-direction:column;align-items:center;margin-top:4px}
.onblang .seg{width:auto;display:inline-flex}.onblang .seg button{flex:none;min-width:96px;padding-left:16px;padding-right:16px}

/* Settings: the column is centered in the space beside the sidebar */
#main.mcenter{margin-left:auto;margin-right:auto}

/* How are you feeling? (mood + emotions + optional writing) */
.feelbox .jmood{margin-top:0}.feelbox .mclist{margin-top:14px;padding-top:4px;border-top:1px solid var(--line)}
/* Journal → Emotions */
.emorng{width:max-content;max-width:100%;margin:0 0 14px}
.emostats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.emostats>div{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:var(--sf);border:1px solid var(--line)}
.emostats b{font-size:22px}.emoavg{display:inline-flex;align-items:center;gap:8px}.emoavg .dot{width:12px;height:12px}
.emochart{display:block;width:100%;height:auto;overflow:visible}
.emochart .egrid{stroke:var(--line);stroke-width:1}.emochart .elab{fill:var(--mut);font-size:11px;font-family:inherit}
.emochart .eline{fill:none;stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.emogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start}.emogrid>section{margin:0 0 16px}
.emobars{display:flex;flex-direction:column;gap:8px}
.emobar{display:grid;grid-template-columns:110px 1fr 28px;align-items:center;gap:10px}.emobar .emo{cursor:default;justify-self:start;font-size:12px;padding:3px 10px}
.emobar b{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.ebar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.ebar i{display:block;height:100%;border-radius:99px}.ebar i.pos{background:#5fa57f}.ebar i.neg{background:#e0566f}
.emodist{display:flex;height:14px;border-radius:99px;overflow:hidden;gap:2px}.emodist i{display:block;min-width:6px}
.emoleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}.emoleg>span{display:inline-flex;align-items:center;gap:6px}
.emologh{margin:8px 0 10px}
@media (max-width:600px){.emostats{grid-template-columns:1fr}}
/* Journal: four tabs fit on one row */
.ntabs:has(>[data-act="jtab"]) .ntab{gap:8px;padding-right:12px}
/* Event repeat: every N weeks on chosen days */
.evevery{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:14px}.evevery input{width:64px!important}
.evdays{display:flex;gap:4px;flex-wrap:wrap}
.evdays button{all:unset;cursor:pointer;width:38px;height:36px;display:grid;place-items:center;border-radius:10px;font-size:13px;font-weight:700;color:var(--mut);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.evdays button:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.evdays button.on{background:var(--ac);color:var(--onac)}
.evhint{margin:10px 0 0}
.evweeks{justify-content:flex-start}.evweeks .lab{flex:none;align-items:flex-start;text-align:left}
/* Symbol icons in card titles, the journal streak and Read later markers */
h2.h2i{display:inline-flex;align-items:center;gap:8px}.h2i .sym{width:18px;height:18px;color:var(--ac);flex:none}
.jstreak .sym{width:14px;height:14px}
.stmk.later{color:var(--ac)}
/* Home bar: save what was pasted */
.hqsave{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--ac) 55%,var(--line));background:color-mix(in srgb,var(--ac) 6%,var(--sf))}
.hqsico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}.hqsico .sym{width:18px;height:18px}
.hqstxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.hqstxt .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hqsenter{display:inline-flex;align-items:center;gap:5px}.hqsenter .sym{width:14px;height:14px}
.hqsave .b .sym{width:16px;height:16px}
.hqtray{margin-top:-6px}
@media (max-width:600px){.hqsenter{display:none}}
/* Task right-click menu: due date and priority as small pills */
.ctxpills{display:flex;flex-wrap:wrap;gap:4px;padding:2px 8px 6px;max-width:260px}
.ctx .ctxpills button{padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ctx .ctxpills button:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)}
.ctx .ctxpills button.on{background:var(--ac);color:var(--onac)}
.ctx button[disabled]{opacity:.45;cursor:default}
.ctx:focus{outline:none}
/* Eisenhower matrix */
.emx{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:10px 12px;margin:8px 0 10px}
.emxax{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);text-align:center;align-self:end}
.emxu{grid-row:1;grid-column:2}.emxn{grid-row:1;grid-column:3}
.emxi,.emxl{grid-column:1;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;justify-self:center}.emxi{grid-row:2}.emxl{grid-row:3}
.emq{margin:0;min-height:180px;padding:12px 12px 8px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--qc) 7%,var(--sf));transition:border-color .15s,background .15s;min-width:0}
.emq.q1{grid-row:2;grid-column:2}.emq.q2{grid-row:2;grid-column:3}.emq.q3{grid-row:3;grid-column:2}.emq.q4{grid-row:3;grid-column:3}
.emq.over{border-color:var(--qc);background:color-mix(in srgb,var(--qc) 14%,var(--sf))}
.emqh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}.emqh b{font-size:15px}
.emqd{width:10px;height:10px;border-radius:50%;background:var(--qc);flex:none}
.emqs{flex-basis:100%;margin:-2px 0 0 18px;font-size:12px}
.emq .rrow{cursor:grab}.emq .kempty{margin:14px 0;text-align:center}
.emq .rrow.dragging{opacity:.4}
.emxhint{margin:0 0 20px}
@media (max-width:700px){.emx{grid-template-columns:minmax(0,1fr)}.emxax{display:none}.emq.q1,.emq.q2,.emq.q3,.emq.q4{grid-row:auto;grid-column:1}}
/* Design style: Accent is the Prodify look with Colorful's filled buttons and accent tints (the :is() rules below).
   Design style: Colorful. Home cards are tinted with their section's color, page titles and headings take the
   section's color, and selected and main buttons are filled. No glows or stripes. */
:root[data-style="colorful"] section[data-dnd="home"]{background:color-mix(in srgb,var(--cc) 14%,var(--sf));border-color:color-mix(in srgb,var(--cc) 30%,var(--line))}
:root[data-style="colorful"] section[data-dnd="home"] h2{color:color-mix(in srgb,var(--cc) 72%,var(--ink))}
:root[data-style="colorful"] #main>h1,:root[data-style="colorful"] #main .lnav h1,:root[data-style="colorful"] #main .hhead h1{color:color-mix(in srgb,var(--pc,var(--ac)) 78%,var(--ink))}
:root[data-style="colorful"] #main section:not([data-dnd]) h2{color:color-mix(in srgb,var(--pc,var(--ac)) 70%,var(--ink))}
:root:is([data-style="colorful"],[data-style="accent"]) button.b{background:var(--ac);color:var(--onac);border-color:transparent}
:root:is([data-style="colorful"],[data-style="accent"]) button.b:hover{background:color-mix(in srgb,var(--ac) 88%,#000);color:var(--onac)}
:root:is([data-style="colorful"],[data-style="accent"]) button.g{background:color-mix(in srgb,var(--ac) 14%,transparent);color:color-mix(in srgb,var(--ac) 80%,var(--ink));border-color:transparent}
:root:is([data-style="colorful"],[data-style="accent"]) button.g:hover{background:color-mix(in srgb,var(--ac) 22%,transparent)}
:root:is([data-style="colorful"],[data-style="accent"]) .moods.seg button.on,:root:is([data-style="colorful"],[data-style="accent"]) .pseg button.on{background:var(--ac);color:var(--onac)}
:root:is([data-style="colorful"],[data-style="accent"]) .moods.seg{background:color-mix(in srgb,var(--ac) 10%,var(--sf))}
:root:is([data-style="colorful"],[data-style="accent"]) .emo:not(.on){background:color-mix(in srgb,var(--ac) 10%,transparent)}
/* Home card with its own color (any design style) */
section.hcolored{background:color-mix(in srgb,var(--cc) 14%,var(--sf));border-color:color-mix(in srgb,var(--cc) 30%,var(--line))}
section.hcolored>h2,section.hcolored>.head h2{color:color-mix(in srgb,var(--cc) 72%,var(--ink))}
.hccol{display:inline-flex;align-items:center;gap:6px}.hccol .dot{width:10px;height:10px}
/* Design style: Black & gray. The Prodify look in black, white and grays: page, surfaces and accent turn neutral, and
   section, list, card and mood colors become grays (photos and covers keep their color). The html:root selectors
   outrank the theme colors written by apply(). */
html:root[data-style="mono"]{--bg:#f1f1f1;--sf:#fff;--ink:#141414;--mut:#666;--line:#dcdcdc;--ac:#1a1a1a;--onac:#fff;--acs:#e6e6e6;--am:#707070;--pl:#5a5a5a;--m1:#2e2e2e;--m2:#555;--m3:#7d7d7d;--m4:#a3a3a3;--m5:#c9c9c9;--gr1:#e3e3e3;--gr2:#8a8a8a}
@media (prefers-color-scheme:dark){html:root[data-style="mono"]:not([data-theme="light"]){--bg:#000;--sf:#141414;--ink:#ededed;--mut:#8f8f8f;--line:#262626;--ac:#e8e8e8;--onac:#0a0a0a;--acs:#262626;--am:#9a9a9a;--pl:#b0b0b0;--m1:#4a4a4a;--m2:#6e6e6e;--m3:#939393;--m4:#b8b8b8;--m5:#e0e0e0;--gr1:#2e2e2e;--gr2:#5a5a5a}}
html:root[data-style="mono"][data-theme="dark"]{--bg:#000;--sf:#141414;--ink:#ededed;--mut:#8f8f8f;--line:#262626;--ac:#e8e8e8;--onac:#0a0a0a;--acs:#262626;--am:#9a9a9a;--pl:#b0b0b0;--m1:#4a4a4a;--m2:#6e6e6e;--m3:#939393;--m4:#b8b8b8;--m5:#e0e0e0;--gr1:#2e2e2e;--gr2:#5a5a5a}
:root[data-style="mono"] *{--tc:var(--gr2)!important;--kc:var(--gr2)!important;--cc:var(--gr2)!important;--qc:var(--gr2)!important;--bc:var(--ink)!important;--pc:var(--ink)!important}
:root[data-style="mono"] #nav .navb,:root[data-style="mono"] .ntab:not(.cattile),:root[data-style="mono"] .lcard{background:var(--gr1)!important;color:var(--ink)!important}
:root[data-style="mono"] .tpri,:root[data-style="mono"] .emo.on,:root[data-style="mono"] .ebar i,:root[data-style="mono"] .jstreak,:root[data-style="mono"] .stmk,:root[data-style="mono"] .medcard,:root[data-style="mono"] .medgo,:root[data-style="mono"] .medpick button.on,:root[data-style="mono"] .ctx button.danger,:root[data-style="mono"] .rdel{filter:grayscale(1)}
:root[data-style="mono"] .lsw,:root[data-style="mono"] .swcustom{filter:none}
/* Storage: drop overlay while dragging files over the window */
.stdrop{position:fixed;inset:12px;z-index:150;display:grid;place-items:center;border-radius:20px;border:2px dashed var(--ac);background:color-mix(in srgb,var(--bg) 82%,transparent);pointer-events:none}
.stdropin{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.stdropin .sym{width:44px;height:44px;color:var(--ac)}.stdropin b{font-size:20px}
/* Storage image cards show the whole image at its own shape (very tall ones are capped and shown whole) */
.stcards{align-items:start}
.stcov.stcov-images{aspect-ratio:auto;min-height:90px}
.stcov.stcov-images img{height:auto;max-height:340px;object-fit:contain}
/* Storage cards: masonry (row spans set by stMasonry in app.js) */
.stcards{grid-auto-rows:4px;row-gap:0;column-gap:14px;align-items:start}
.stcards>.stcard{gap:4px}
/* Shine on hover on Storage cards: the same tilt and light sweep as collection covers, in white */
body.shine .stcov{--shc:#fff;transition:transform .45s ease-out,box-shadow .45s ease-out}
body.shine .stcard:hover .stcov{transform:none;box-shadow:none}
body.shine .stcard .stcov.tilt{transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);transition:transform .12s linear,box-shadow .3s;box-shadow:0 18px 36px rgba(0,0,0,.45)}
body.shine .stcov::after{content:"";position:absolute;inset:-50%;pointer-events:none;z-index:1;background:linear-gradient(135deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.36) 50%,rgba(255,255,255,.08) 56%,transparent 62%);transform:translate(-100%,-100%)}
body.shine .stcov.shining::after{animation:shine-sweep .9s ease-out}
body.shine .stcard:hover{z-index:3}
@media (prefers-reduced-motion:reduce){body.shine .stcard .stcov.tilt{transform:none}body.shine .stcov::after{animation:none!important}}
/* App images are not native drag sources */
img{-webkit-user-drag:none;user-drag:none}
/* Confirmation pop-up (askConfirm) */
.cfm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.45);animation:cfmin .12s ease-out}
.cfmbox{width:min(400px,100%);padding:22px;border-radius:16px;background:var(--sf);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4);text-align:center}
.cfmbox h2{margin:0 0 6px;font-size:18px}.cfmbox .meta{margin:0;overflow-wrap:anywhere}
.cfmimg{display:block;max-width:100%;max-height:160px;margin:0 auto 14px;border-radius:10px;object-fit:contain}
.cfmbtns{display:flex;gap:10px;margin-top:18px}.cfmbtns button{flex:1;justify-content:center}
.cfmbox .cfmok{background:#d0574f!important;color:#fff!important;border-color:transparent!important}.cfmbox .cfmok:hover{background:#b8473f!important}
@keyframes cfmin{from{opacity:0}to{opacity:1}}
/* Focus session timer (Today's focus) */
.ftimer{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:32px;border-radius:999px;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);font-variant-numeric:tabular-nums}
.ftimer .sym{width:15px;height:15px}.ftimer b{font-size:14px;min-width:42px}
.ftimer.paused{color:var(--mut);background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* Insights → Focus */
.fins .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.fbars{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:16px}
.fbars>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.fbars i{display:block;width:100%;max-width:28px;border-radius:6px 6px 2px 2px;background:var(--ac)}
.fbars span{font-size:10px;color:var(--mut)}
.frec{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);flex-wrap:wrap}.frec b{font-size:14px}
.frect{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Time & weather (Home) */
.wxclock{display:flex;flex-direction:column;gap:2px}.wxclock b{font-size:44px;line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wxset{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.wxload{margin:14px 0 0}
.wxnow{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.wxico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);flex:none}.wxico .sym{width:30px;height:30px}
.wxtemp{display:flex;flex-direction:column}.wxtemp b{font-size:30px;line-height:1}.wxtemp span{font-size:14px;color:var(--mut)}
.wxmeta{display:flex;flex-direction:column;gap:2px;margin-left:auto;text-align:right;font-size:12px}.wxmeta span{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}.wxmeta .sym{width:12px;height:12px}
.wxdays{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.wxdays>div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
.wxdays .sym{width:20px;height:20px;color:var(--ac)}.wxdays b{font-size:15px}.wxrain{font-size:11px;font-weight:700;color:#5b9bd5}
/* Small collection covers (Home suggestion, In progress, collection cards): tilt and shine instead of the lift */
body.shine .mini:hover .mcov{transform:none}
body.shine .mcov{--shc:#fff;transition:transform .45s ease-out,box-shadow .45s ease-out}
body.shine .mini .mcov.tilt{transform:perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);transition:transform .12s linear,box-shadow .3s;box-shadow:0 14px 28px rgba(0,0,0,.45)}
body.shine .mcov::after{content:"";position:absolute;inset:-50%;pointer-events:none;z-index:1;background:linear-gradient(135deg,transparent 38%,color-mix(in srgb,var(--shc) 14%,transparent) 44%,color-mix(in srgb,var(--shc) 55%,transparent) 50%,color-mix(in srgb,var(--shc) 14%,transparent) 56%,transparent 62%);transform:translate(-100%,-100%)}
body.shine-plain .mcov::after{background:linear-gradient(135deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.36) 50%,rgba(255,255,255,.08) 56%,transparent 62%)}
body.shine .mcov:has(.s-want){--shc:#ffd84a}body.shine .mcov:has(.s-doing){--shc:#6fb0ff}body.shine .mcov:has(.s-done){--shc:#62e09a}body.shine .mcov:has(.s-dropped){--shc:#ff6b5e}
body.shine .mcov.shining::after{animation:shine-sweep .9s ease-out}
.mcov .cbadge,.mcov .cfav{z-index:2}
@media (prefers-reduced-motion:reduce){body.shine .mini .mcov.tilt{transform:none}body.shine .mcov::after{animation:none!important}}
/* Home Board: cards, sticky notes, pinned messages and images placed anywhere */
.hbtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}.hbtools .g{display:inline-flex;align-items:center;gap:6px}.hbtools .sym{width:16px;height:16px}
.hbhint{font-size:12px}
.hboard{position:relative;isolation:isolate;min-height:420px;margin:0 -8px;border-radius:18px;background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1.2px);background-size:24px 24px;background-position:8px 8px}
.bitem{position:absolute;box-sizing:border-box}
.bitem>section{margin:0!important;width:100%!important;flex:none!important}
.bitem.moving{opacity:.92;cursor:grabbing}
.bitem.moving>*{box-shadow:0 18px 40px rgba(0,0,0,.35)}
body.hbmoving,body.hbmoving *{user-select:none;cursor:grabbing!important}
.bres{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;opacity:0;transition:opacity .15s;z-index:3;
 background:linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--ink) 35%,transparent) 50%,color-mix(in srgb,var(--ink) 35%,transparent) 58%,transparent 58%,transparent 70%,color-mix(in srgb,var(--ink) 35%,transparent) 70%,color-mix(in srgb,var(--ink) 35%,transparent) 78%,transparent 78%);border-radius:0 0 12px 0}
.bitem:hover .bres{opacity:1}
/* sticky notes */
.sticky{position:relative;background:var(--sc);color:var(--sink,#2a2a24);border-radius:6px 6px 14px 6px;padding:22px 14px 14px;box-shadow:0 6px 16px rgba(0,0,0,.22);transform:rotate(-.6deg)}
.bnote:nth-child(even) .sticky{transform:rotate(.7deg)}
.sticky textarea{all:unset;display:block;width:100%;min-height:90px;font:500 16px/1.45 inherit;color:inherit;white-space:pre-wrap;overflow:hidden;cursor:text}
.sticky textarea::placeholder{color:currentColor;opacity:.45}
.bgrip{position:absolute;left:0;right:0;top:0;height:18px;cursor:grab;border-radius:6px 6px 0 0}
.sticky .bgrip{background:rgba(0,0,0,.06)}
/* pinned messages */
.pinmsg{position:relative;display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--sf);border:1px solid var(--line)}
.pinmsg .bpin{position:static;height:auto;flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#d0574f;background:color-mix(in srgb,#d0574f 14%,transparent)}.pinmsg .bpin .sym{width:15px;height:15px}
.pinmsg textarea{all:unset;flex:1;min-width:0;font:700 20px/1.3 inherit;color:var(--ink);white-space:pre-wrap;overflow:hidden;cursor:text}
.pinmsg textarea::placeholder{color:var(--mut)}
/* images */
.bimg{cursor:grab}.bimg img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.3);pointer-events:none}
/* image picker */
.bpickbox{width:min(640px,100%);text-align:left}.bpickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-height:min(60vh,520px);overflow:auto;margin-top:12px}
.bpickgrid button{all:unset;cursor:pointer;border-radius:10px;overflow:hidden;aspect-ratio:1;background:color-mix(in srgb,var(--ink) 7%,transparent)}.bpickgrid button:hover{outline:2px solid var(--ac)}
.bpickgrid img{width:100%;height:100%;object-fit:cover;display:block}
/* Board items resized to a fixed height: content scrolls inside, images fill the box */
.bitem.fixh>section{height:100%;overflow:auto;box-sizing:border-box}
.bitem.fixh .sticky{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.bitem.fixh .sticky textarea{flex:1;min-height:0;overflow:auto}
.bitem.fixh .pinmsg{height:100%;box-sizing:border-box}.bitem.fixh .pinmsg textarea{height:100%;overflow:auto}
.bitem.fixh.bimg img{height:100%;object-fit:cover}
/* Resized cards: the content is scaled to fill the box (app.js hbScale) instead of scrolling */
.bitem.bcard.fixh{overflow:hidden;border-radius:12px}
.bitem.bcard.fixh>section{height:auto!important;overflow:visible!important}
/* Sounds (Home) */
.sndplay{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ac);color:var(--onac);flex:none}.sndplay .sym{width:18px;height:18px}
.sndmaster{display:inline-flex;align-items:center;gap:6px;color:var(--mut)}.sndmaster .sym{width:16px;height:16px}.sndmaster input{width:90px}
.sndgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.sndt{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);transition:background .2s}
.sndt.on{background:color-mix(in srgb,var(--ac) 16%,transparent)}
.sndb{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--mut)}.sndt.on .sndb{color:var(--ink)}
.sndb .sym{width:20px;height:20px;flex:none}.sndt.on .sndb .sym{color:var(--ac)}
.sndt input[type=range],.sndmaster input[type=range]{margin:0}
.sndt:not(.on) input[type=range]{opacity:.45}
.sndcard.playing .sndt.on .sndb .sym{animation:sndpulse 2.4s ease-in-out infinite}
@keyframes sndpulse{0%,100%{opacity:1}50%{opacity:.55}}
.sndhint{margin:10px 0 0;font-size:12px}
@media (prefers-reduced-motion:reduce){.sndcard.playing .sndt.on .sndb .sym{animation:none}}
/* Sounds: loading and error states, radio stations */
.sndlab{margin:0 0 6px}
.sndt.loading .sndb .sym{animation:sndpulse 1s ease-in-out infinite}
.sndt.err{background:color-mix(in srgb,#d0574f 14%,transparent)}.sndt.err .sndb .sym{color:#d0574f}
.radhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px}.radhead .sndlab{margin:0}
.radlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.radst{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,transparent);min-width:0}
.radst b{font-size:13px}.radst span{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radst:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}.radst.on{background:color-mix(in srgb,var(--ac) 18%,transparent)}.radst.on b{color:var(--ac)}
.radnow{margin:8px 0 0;font-size:12px;min-height:1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sndhint a{color:inherit;text-decoration:underline}
/* Habit form: goal tiles, details and a live summary */
.hgoals{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.hgoal{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.hgoal b{font-size:15px}.hgoal span{font-size:12px;color:var(--mut)}
.hgoal:hover:not([disabled]){border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.hgoal.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}.hgoal.on b{color:var(--ac)}
.hgoal[disabled]{opacity:.4;cursor:not-allowed}
.hgdet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.hgdet .hgnum{width:84px!important;text-align:center;font-size:18px;font-weight:700}
.hgdet .hgunit{width:220px!important;max-width:100%}
.hgsum{margin:14px 0 4px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--ac) 8%,transparent);font-weight:700}
.hmoret{margin:4px 0 0}.hmore{margin:8px 0 4px;display:flex;flex-direction:column;gap:6px}
/* Linked habits: quick-add presets and the "Linked to" chip */
.hpresets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.hpre{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.hpre:hover{border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.hpre>.sym{width:22px;height:22px;color:var(--ac);flex:none}.hpre>span{display:flex;flex-direction:column;gap:1px;min-width:0}.hpre b{font-size:14px}.hpre .meta{font-size:11.5px}
.hlink.hlinked{--hc:var(--ac)}
.hpre.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}
/* Music section */
.mhero{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mhart{width:96px;height:96px;border-radius:16px;overflow:hidden;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}.mhart img{width:100%;height:100%;object-fit:cover}.mhart .sym{width:44px;height:44px}
.mhtxt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px}.mhtxt b{font-size:24px;line-height:1.2}.mhsub{min-height:1.2em}
.mhctl{display:flex;align-items:center;gap:12px}.mhplay{width:54px;height:54px}.mhplay .sym{width:24px;height:24px}
.mstations{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.mst{flex-direction:row!important;align-items:center;gap:12px!important;padding:10px!important;position:relative}
.mst img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.mst>span:not(.mstbadge){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.mst b{font-size:15px}.mst>span>span{white-space:normal!important}
.mstbadge{flex:none;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--mut);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mst.on .mstbadge{color:var(--onac);background:var(--ac)}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
/* Mini player */
.mplayer{position:fixed;z-index:60;bottom:12px;left:12px;width:300px;max-width:calc(100vw - 24px);display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--sf);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.25);box-sizing:border-box}
.mplayer.mpside{bottom:14px}
.mpart{all:unset;cursor:pointer;width:42px;height:42px;border-radius:10px;overflow:hidden;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}.mpart img{width:100%;height:100%;object-fit:cover}.mpart .sym{width:20px;height:20px}
.mptxt{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.mptxt b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mptxt span{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpbtn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--ac);color:var(--onac)}.mpbtn .sym{width:16px;height:16px}
.mplayer.playing .mpart{animation:sndpulse 3s ease-in-out infinite}
body.mpon nav{padding-bottom:84px!important}
@media (max-width:760px){.mplayer{bottom:72px;left:8px;right:8px;width:auto}}
@media (prefers-reduced-motion:reduce){.mplayer.playing .mpart{animation:none}}
/* Notification center: bell (top right) and panel (slides in from the right) */
.nbell{position:fixed!important;top:18px;right:18px;z-index:65}
@media (min-width:761px){.nbell{right:auto}}
.nbell.on{background:color-mix(in srgb,var(--ink) 8%,var(--sf))}
.nbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:800;background:#d0574f;color:#fff}
@media (min-width:761px){#main{padding-right:calc(clamp(16px,4vw,48px) + 52px)}}
.ncenter{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(400px,100vw);display:flex;flex-direction:column;background:var(--sf);border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(0,0,0,.25);transform:translateX(100%);transition:transform .2s ease-out}
.ncenter.open{transform:none}
.nphead{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 10px}.nphead h2{margin:0;font-size:18px}
.npbody{flex:1;overflow-y:auto;padding:0 12px 24px}
.nplab{margin:8px 6px 6px}.nplab2{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.nplab2 .nplab{margin:0 6px}
.npempty{margin:4px 6px 10px}
.nitem{position:relative;display:flex;align-items:flex-start;border-radius:12px}.nitem:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.nmain{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;gap:10px;padding:10px 8px}
.nico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}.nico .sym{width:17px;height:17px}
.ntx{display:flex;flex-direction:column;gap:2px;min-width:0}.ntx b{font-size:14px}.ntx .meta{font-size:12.5px;overflow-wrap:anywhere}.nwhen{font-size:11px!important}
.nitem.new .ntx b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ac);margin-left:6px;vertical-align:2px}
.ndel{opacity:0;margin:8px 6px 0 0;width:26px;height:26px;flex:none}.nitem:hover .ndel{opacity:1}
.nphead .cx{margin-left:auto;flex:none}
.ncenter>.nphead,.ncenter>.npbody{align-self:stretch;width:100%;box-sizing:border-box}
/* Home layout toggle (Columns | Board) next to Customize */
.hlay button{display:inline-flex;align-items:center;gap:6px}.hlay .sym{width:15px;height:15px}
.head .row:has(>.hlay){align-items:center}
.ctxsw.ctxsw8{grid-template-columns:repeat(8,22px)}
/* Notification panel floats like the auto-hide sidebar: inset from the edges, rounded, bordered */
.ncenter{top:8px!important;right:8px!important;bottom:8px!important;width:min(400px,calc(100vw - 16px))!important;background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.45)!important;overflow:hidden;transform:translateX(calc(100% + 24px))!important;opacity:0;transition:transform .22s ease-out,opacity .22s ease-out!important}
.ncenter.open{transform:none!important;opacity:1}
/* Board: note picker */
.bpnew{display:inline-flex;align-items:center;gap:6px;margin:10px 0 12px}.bpnew .sym{width:16px;height:16px}
.bpsearch{display:block;margin:0 0 8px}
.bpnotes{display:flex;flex-direction:column;gap:2px;max-height:min(50vh,420px);overflow:auto}
.bpnote{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px}.bpnote:hover:not([disabled]){background:color-mix(in srgb,var(--ink) 7%,transparent)}
.bpnote b{font-size:14px}.bpnote .meta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpnote[disabled]{opacity:.5;cursor:default}.bpnote[hidden]{display:none}
/* Notes → Trash */
.trow{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--line)}.trow .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trow .tprev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trdel{color:#d0574f!important}
@media (max-width:600px){.trow{flex-wrap:wrap}}
/* Project page title with its icon */
.ptitle{display:flex;align-items:center;gap:12px}.pti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;font-size:22px}.pti .sym{width:22px;height:22px}
/* Home: keep cards in their column */
.hfixrow{max-width:520px;margin:0 0 10px}
body.dragging .hgrid.hfixed>.hcol{min-height:140px;border-radius:14px;outline:2px dashed color-mix(in srgb,var(--ac) 35%,transparent);outline-offset:4px}
.hgrid.hfixed{align-items:stretch}
body.dragging .hgrid.hfixed>.hcol{padding-bottom:140px;box-sizing:border-box}
/* Small cover badges: text centered like the big covers */
.mcov .cbadge{box-sizing:border-box;display:flex;align-items:center;line-height:1}
.pnico{flex:none}.pnico .sym{width:20px;height:20px}
/* Meditation card: length picker laid out like the Timers quick start (label above, six equal buttons) */
.medlab0{margin:14px 0 6px}
.medcard .medpick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 12px}
.medcard .medpick button{padding:7px 0;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);transition:background .12s}
.medcard .medpick button.on{background:#5fa57f;color:#fff}
/* Time boxes that follow Settings → Time format */
.tfield{display:inline-flex;align-items:center;gap:2px;padding:0 6px;min-height:40px;box-sizing:border-box;border-radius:10px;border:1px solid var(--line);background:var(--bg);flex:none}
.tfield select{all:unset;cursor:pointer;padding:6px 2px;font:inherit;font-variant-numeric:tabular-nums;text-align:center;color:var(--ink);border-radius:6px}
.tfield select:focus-visible{outline:2px solid var(--ac)}.tfield select option{background:var(--sf);color:var(--ink)}
.tfsep{color:var(--mut);font-weight:700}
.dtfield{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.dtfield input[type=date]{width:auto}
.tmnew .tfield,.alnew .tfield{border:0;background:none;min-height:0;padding:0}
/* Time picker: the app's dropdowns, compact (no arrow, no box) */
.tfield .dsel{display:inline-flex!important;width:auto!important;min-width:0!important;margin:0!important;padding:5px 6px!important;gap:0;border:0!important;background:none!important;border-radius:6px;font-variant-numeric:tabular-nums;justify-content:center}
.tfield .dsel:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)!important}
.tfield .dsel svg{display:none}
/* Board: remove button on messages and images (shows on hover) */
.bitem .bdel{position:absolute;top:-10px;right:-10px;z-index:4;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--sf);border:1px solid var(--line);color:var(--mut);opacity:0;transition:opacity .15s}
.bitem:hover .bdel,.bitem .bdel:focus-visible{opacity:1}.bitem .bdel:hover{color:#d0574f}.bitem .bdel .sym{width:12px;height:12px}
/* Focus session: task titles show in full (wrap instead of being cut off). */
.pfopt .cnt b{display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.35}
.pfopt .cnt .meta{white-space:normal}
.ft{overflow-wrap:anywhere;line-height:1.35}
/* Focus mode: the focus card alone, centered in the page. */
.fmfocus{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding-bottom:40px}
.fmfocus>.focuscard{width:min(560px,100%);box-sizing:border-box;margin:0}
/* Focus mode card: tasks on the left; a big timer with the buttons under it on the right. */
.fmfocus>.focuscard{width:min(720px,100%);display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:32px;row-gap:0;align-items:start;padding:22px 24px}
.fmfocus .focuscard>.head{display:contents}
.fmfocus .focuscard>.head>h2{grid-column:1;grid-row:1;margin:0 0 6px!important}
.fmfocus .focuscard>.head>.row{grid-column:2;grid-row:1/span 20;align-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:10px!important}
.fmfocus .focuscard>.frow{grid-column:1}
.fmfocus .ftimer{flex-basis:100%;justify-content:center;height:auto;padding:12px 22px;border-radius:16px;box-sizing:border-box;gap:10px}
.fmfocus .ftimer .sym{width:24px;height:24px}.fmfocus .ftimer b{font-size:36px;min-width:0}
.fmfocus .focuscard .rbtn{width:44px;height:44px}.fmfocus .focuscard .rbtn .sym{width:18px;height:18px}
.fmfocus .fmode{min-height:44px!important;padding:0 20px!important;font-size:15px!important}
@media (max-width:620px){.fmfocus>.focuscard{grid-template-columns:minmax(0,1fr)}.fmfocus .focuscard>.head>.row{grid-column:1;grid-row:auto;margin:6px 0 10px!important}}
/* ===== Phones: a bottom tab bar (Home, 3 picks, More) replaces the sidebar ===== */
.mtabs,.msheet{display:none}
@media (max-width:760px){
#app,#app[class]{grid-template-columns:minmax(0,1fr)!important}
#app nav#nav,#navgrip,#navedge{display:none!important}
#main{padding:16px 16px calc(96px + env(safe-area-inset-bottom,0px))!important;max-width:none!important;min-width:0}
#main>:first-child{margin-right:48px!important}
.nbell{position:absolute!important;top:12px!important;right:12px!important;left:auto!important}
.mtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:66;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--sf);border-top:1px solid var(--line)}
.mtabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;color:var(--mut);min-width:0;-webkit-tap-highlight-color:transparent}
.mtabs .ni{display:grid;place-items:center;width:44px;height:28px;border-radius:999px;font-size:18px;line-height:1;transition:background .15s,color .15s}
.mtabs .ni .sym{width:21px;height:21px}
.mtabs .nl{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtabs button.on{color:var(--ink)}
.mtabs button[data-dnd]{touch-action:none}.mtabs .dragph{opacity:.35}.mtabs .dragghost{display:flex;flex-direction:column;align-items:center;color:var(--ink);background:var(--sf);border-radius:12px}
.mtabs button.on .ni{background:color-mix(in srgb,var(--tc,var(--ac)) 22%,transparent);color:var(--tc,var(--ac))}
.mtabs button[data-act="mMore"].on .ni{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.msheet{display:block;position:fixed;inset:0;z-index:64}
.msback{position:absolute;inset:0;background:rgba(0,0,0,.4);animation:cfmin .15s ease-out}
.mspanel{position:absolute;left:0;right:0;bottom:0;max-height:75vh;overflow-y:auto;box-sizing:border-box;padding:16px 16px calc(84px + env(safe-area-inset-bottom,0px));background:var(--sf);border-radius:20px 20px 0 0;border-top:1px solid var(--line);animation:msup .2s ease-out}
@keyframes msup{from{transform:translateY(30px);opacity:0}}
.mshead{display:flex;align-items:center;gap:10px;margin:0 0 12px}.mshead h2{margin:0;flex:1}
.msgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.msgrid button{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border-radius:14px;background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink);text-align:center;min-width:0}
.msgrid .ni{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:20px;background:color-mix(in srgb,var(--tc) 20%,transparent);color:var(--tc)}
.msgrid .ni .sym{width:21px;height:21px}
body.msopen .qcbtn,body.msopen .qcap,body.msopen .fab{display:none!important}
.msgrid .nl{font-size:11px;letter-spacing:-.02em;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgrid button.cur{background:color-mix(in srgb,var(--tc) 14%,transparent)}
.msgrid button.on{background:color-mix(in srgb,var(--ac) 16%,transparent)}
.mschk{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--mut) 60%,transparent);box-sizing:border-box}
.msgrid button.on .mschk{background:var(--ac);border-color:var(--ac);color:var(--onac)}.mschk .sym{width:12px;height:12px}
.qcbtn{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;right:16px!important}
.qcap{bottom:calc(142px + env(safe-area-inset-bottom,0px))!important;right:16px!important}
.fab{bottom:calc(144px + env(safe-area-inset-bottom,0px))!important;right:16px!important}
#toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
.mplayer{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
.restpill{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
.npanel{grid-template-columns:minmax(0,1fr)!important}.npanel>*{min-width:0}
.drow .seg[aria-label="Card width in the Cards layout"]{display:none}
.lgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.head:has(>.ntitle){flex-wrap:wrap}.head>.ntitle{flex:1 1 100%;min-width:0}
#main p.sub:has(>.dot){display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:2px}
}
/* Quick capture: the type picker on top, then a form shaped like that type's form elsewhere in the app. */
.qcap{--qk:var(--ac);border-color:color-mix(in srgb,var(--qk) 40%,var(--line));transition:border-color .2s}
.qcap .qctypes{display:flex;width:100%;box-sizing:border-box;margin:0 0 12px}.qcap .qctypes button{flex:1 1 auto;text-align:center}
.qcfoot{justify-content:space-between}
.qcform{display:flex;flex-direction:column;gap:10px}
.qcform input:focus,.qcform textarea:focus,.qcap #qctext:focus{border-color:var(--qk);outline:none}
.qctask .rrow{padding:4px 2px 6px;border-bottom:1px solid var(--line)}.qctask .rt{flex:1;min-width:0}.qctask .rin{width:100%;box-sizing:border-box}.qctask .rnew .rchk{margin-top:4px;border-color:var(--qk)}
.qcrow{display:flex;gap:10px;flex-wrap:wrap}.qcrow .lab{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1 1 140px;min-width:0}.qcrow input,.qcrow .dsel{width:100%;box-sizing:border-box}
.qcnote .ntitle{font-size:24px;width:100%}.qcnote .ntitle:focus{border-bottom-color:var(--qk)}.qcnote textarea{min-height:110px;resize:vertical}
.qcevent .evrow{margin-top:0;gap:10px}.qcevent .evrow .lab{flex:1 1 120px;min-width:0}.qcevent .evrow input[type=date]{width:100%;box-sizing:border-box}
.qclin{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--fld,var(--bg))}.qclin .sym{width:18px;height:18px;color:var(--qk);flex:none}.qclin input{flex:1;min-width:0;border:0;background:none;padding:10px 0}.qclin:focus-within{border-color:var(--qk)}
.qclprev{display:flex;align-items:center;gap:8px;min-height:24px}.qclprev .stfav{flex:none}
.qcjournal .moods{display:flex;flex-wrap:wrap}.qcjournal .moods button{flex:1 1 auto}.qcjournal textarea{min-height:110px;resize:vertical}
@media (max-width:520px){.qcap .qctypes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
.qcevent .evrow .lab{align-items:flex-start;text-align:left}.qcevent .evrow .lab:first-child{flex-basis:100%}
/* Phones, "Search bar above the tab bar": Home's search bar sits just above the bottom icons. */
@media (max-width:760px){
body.sblow #main .hsearch{position:fixed;left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:63;margin:0;box-shadow:0 6px 20px rgba(0,0,0,.25)}
body.sblow #main .hqtray{position:fixed;left:12px;right:12px;bottom:calc(138px + env(safe-area-inset-bottom,0px));z-index:63;margin:0}
body.sblow #main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
body.sblow .qcbtn{bottom:calc(142px + env(safe-area-inset-bottom,0px))!important}
body.sblow .qcap{bottom:calc(204px + env(safe-area-inset-bottom,0px))!important}
body.sblow #toast{bottom:calc(140px + env(safe-area-inset-bottom,0px))!important}
}
/* Phones: denser grids so more fits on screen, and section tabs show their full names. */
@media (max-width:760px){
.ntab{gap:8px;padding:8px 10px 8px 8px}.nti{width:30px;height:30px;font-size:15px}.nti .sym{width:16px;height:16px}
.ntl{font-size:14px;letter-spacing:-.02em;overflow:visible;text-overflow:clip}.ntc{font-size:15px}
.cgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
.cgrid .ccov{border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.cgrid .ccard b{font-size:12px;line-height:1.3;margin-top:2px}.cgrid .ccard .meta{font-size:10.5px}
.cgrid .cbadge{font-size:9px;padding:1px 5px;right:3px;top:3px}.cgrid .cph{font-size:24px}.cgrid .cph .sym{width:24px;height:24px}
.cgrid .catcovi{font-size:26px}.cgrid .catcovi .sym{width:30px;height:30px}
.minis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
.srimgs,.thgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#main .row>button.g,#main .row>button.b:not(.tick){max-width:100%;white-space:normal}
}
/* Button rows that turn into a dropdown on phones (Collections: Show, Sort). */
.segsel>select,.segsel>.dsel,.segsel>.msl{display:none}
@media (max-width:760px){
.segsel{display:flex;align-items:center;gap:8px;flex:1 1 140px;min-width:0}
.segsel>.seg{display:none}.segsel>.msl{display:inline}.segsel>.dsel{display:inline-flex;flex:1;min-width:0}
.colbar{flex-wrap:wrap}.colbar>.nsort.segsel{margin:0}
}
/* Phones show Home in one column, so "Keep cards in the column you put them" does nothing there. */
@media (max-width:760px){.hfixrow{display:none}}
/* Shortcuts card (Home): section tiles like the Grid sidebar, with the name under each. */
.shgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:12px 10px}
.shtile{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;touch-action:none;-webkit-tap-highlight-color:transparent}
.shico{position:relative;display:grid;place-items:center;width:100%;max-width:72px;aspect-ratio:1;border-radius:18px;font-size:26px;line-height:1;color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 45%,var(--sf)),color-mix(in srgb,var(--tc) 22%,var(--sf)));transition:filter .15s,transform .1s,opacity .15s}
.shico>.sym{width:28px;height:28px}
.shtile:hover .shico{filter:brightness(1.12)}.shtile:active .shico{transform:scale(.96)}
.shtile:focus-visible .shico{outline:2px solid var(--ac);outline-offset:2px}
.shico .shnc{position:absolute;top:5px;right:6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--ink);color:var(--bg)}
.shico .mschk{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-sizing:border-box;border:2px solid color-mix(in srgb,var(--ink) 50%,transparent);background:var(--sf)}
.shtile[aria-pressed="true"] .mschk{background:var(--ac);border-color:var(--ac);color:var(--onac)}.shico .mschk .sym{width:12px;height:12px}
.shtile.off .shico{opacity:.4}.shtile.off .shl{opacity:.6}
.shl{font-size:12px;font-weight:600;color:var(--mut);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shgrid .dragph{opacity:.35}
body.vivid .shico{background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 72%,#000));color:#fff}
@media (max-width:760px){.shgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Backup folder settings */
.mirwhat{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:24px}.mirwhat .swrow{padding:6px 0}
.mirerr{color:#d0574f}
/* Settings → Account */
.acchead{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.accav{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;font-weight:800;font-size:18px;background:color-mix(in srgb,var(--ac) 22%,var(--sf));color:var(--ac)}
.accwho{flex:1;min-width:0;display:flex;flex-direction:column}.accwho b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accpanel{margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 5%,var(--sf));border:1px solid var(--line)}.accpanel .row{margin-top:10px}
.accsec input[type=password],.accsec input[type=text]{width:100%;max-width:360px;box-sizing:border-box}
.rkey{font:700 20px/1.5 ui-monospace,"JetBrains Mono",monospace;letter-spacing:.06em;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--ac) 10%,var(--sf));border:1px dashed color-mix(in srgb,var(--ac) 50%,var(--line));user-select:all;overflow-wrap:anywhere;margin:0 0 4px}
.lockbox .x{margin-top:4px}
.lockbox .lockinfo{margin:-6px 0 0;font-size:13px;color:var(--mut)}
/* Users: "Who's using Prodify?", the switch on the lock screen and Settings → Users */
.whoscr{z-index:210}
.whobox{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(560px,92vw);text-align:center}.whobox h2{margin:0;font-size:24px}
.whogrid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.whotile{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;-webkit-tap-highlight-color:transparent}
.whotile .whoav{width:84px;height:84px;font-size:34px;border-radius:24px;transition:transform .12s,filter .15s}
.whotile:hover .whoav{filter:brightness(1.1)}.whotile:active .whoav{transform:scale(.96)}.whotile:focus-visible .whoav{outline:2px solid var(--ac);outline-offset:3px}
.whonm{font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoav{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font-weight:800;font-size:17px;background:color-mix(in srgb,var(--uc,var(--ac)) 24%,var(--sf));color:var(--uc,var(--ac))}
.lockusers{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);width:100%}
.whogrid.sm{gap:12px}.whogrid.sm .whotile{width:70px}.whogrid.sm .whoav{width:52px;height:52px;font-size:22px;border-radius:16px}.whogrid.sm .whonm{font-size:13px}
.ulist{display:flex;flex-direction:column;gap:2px}
.urow{display:flex;align-items:center;gap:12px;padding:8px 0}.urow+.urow{border-top:1px solid var(--line)}
.uwho{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}.uwho .meta{flex-basis:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.ubadge{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--ac) 18%,transparent);color:var(--ac)}
.usersec input#uname{width:100%;max-width:360px;box-sizing:border-box}
/* Settings: group tiles on the Settings page */
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.settile{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--sf);border:1px solid var(--line);transition:border-color .15s,background .15s}
.settile:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--line));background:color-mix(in srgb,var(--ac) 5%,var(--sf))}.settile:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.setico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;font-size:22px;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}.setico .sym{width:22px;height:22px}
.settxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.settxt b{font-size:16px}.settxt .meta{font-size:12.5px;line-height:1.35}
.settile>.sym{width:16px;height:16px;color:var(--mut);flex:none}
.h1i{display:flex;align-items:center;gap:12px;margin-bottom:22px}.h1i .sym{width:28px;height:28px;color:var(--ac)}
@media (max-width:760px){.setgrid{grid-template-columns:minmax(0,1fr);gap:8px}.settile{padding:12px 14px}}
/* Phones: theme cards three to a row */
@media (max-width:760px){
.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tcard{padding:4px;gap:4px;border-radius:10px}
.tprev{height:42px;border-radius:6px}.tp{padding:5px}.tp i{padding:4px;gap:3px;border-radius:4px}.tp em{height:3px}.tp b{right:7px;bottom:7px;width:9px;height:9px}
.tname{font-size:12px;padding:0 2px 1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnew .tprev .sym{width:18px;height:18px}
}
/* ===== Phones: tighter, denser layout across the app ===== */
@media (max-width:760px){
#main section{padding:14px;margin-bottom:12px;border-radius:14px}
#main h2{font-size:16px}
#main p.sub{font-size:13.5px;margin-bottom:12px}
/* stat tiles (Insights, Health, Collections): smaller numbers, less padding */
.stats{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}.stats div{padding:10px}.stats b{font-size:22px}
/* button groups with three or more options fill each row evenly instead of leaving ragged gaps */
.moods.seg:has(>button:nth-child(3))>button{flex:1 1 auto;justify-content:center;text-align:center}
/* Journal categories: one row you swipe sideways instead of a wall of chips */
.jcatbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:0 16px 2px}.jcatbar::-webkit-scrollbar{display:none}.jcatbar>*{flex:none}
/* Music: the player card as one compact row */
.mhero{gap:12px}.mhart{width:64px;height:64px;border-radius:12px}.mhart .sym{width:30px;height:30px}
.mhtxt{min-width:0}.mhtxt b{font-size:18px}.mhctl{flex-basis:100%}.mhplay{width:48px;height:48px}
}
/* Prodify Cloud */
.cplans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 12px}
.cplan{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--sf))}
.cplan b{font-size:15px}.cplan>span:not(.meta){font-weight:700;color:var(--ac)}.cplan .meta{font-size:12px}
.cplan.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,var(--sf))}
.cuse{height:8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}.cuse span{display:block;height:100%;background:var(--ac);border-radius:999px}
.cadv{margin-top:10px}.cadv summary{cursor:pointer}.cadv input{flex:1;min-width:0}
.accsec #cloudemail{flex:1;min-width:0}.accsec #cloudcode{width:160px;letter-spacing:.3em;font-size:18px;text-align:center}
.accav.cloudav .sym{width:22px;height:22px}.acckind{display:inline-flex;align-items:center;gap:4px}.acckind .sym{width:14px;height:14px}
.accsec .onbacc{margin:0 0 4px}
.accsec .accbtns{gap:14px;margin:18px 0 20px}
.cloudin{display:flex;flex-direction:column;gap:8px;max-width:420px}.cloudin input{width:100%;box-sizing:border-box}
.accsec #cloudmfa,#mfacode,#onbmfa{width:180px;letter-spacing:.2em;font-size:18px;text-align:center}
.mfaqr{display:inline-grid;padding:10px;border-radius:14px;background:#fff;line-height:0}.mfaqr svg{width:184px;height:184px}
.mfaopen{display:inline-flex;margin:10px 0 0;text-decoration:none}
.mfakey{font:600 14px/1.4 ui-monospace,monospace;letter-spacing:.06em;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--ink) 7%,transparent);word-break:break-all}
.mfacodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:340px;margin:4px 0 0}.mfacodes code{font:600 15px/1.4 ui-monospace,monospace;text-align:center;padding:6px;border-radius:10px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* Settings: the app version, bottom right */
.appver{margin:18px 2px 4px;text-align:right;font-size:12px;color:var(--mut);opacity:.8}
@media (max-width:760px){.appver{margin-bottom:8px}}
/* Setup: local account or Prodify Cloud */
.onbacc{display:flex;flex-direction:column;gap:10px;margin:4px 0 6px}
.onbopt{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:16px;border:2px solid var(--line);background:var(--bg);transition:border-color .15s,background .15s}
.onbopt:hover{border-color:color-mix(in srgb,var(--ac) 45%,var(--line))}
.onbopt.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--sf))}
.onbopt:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.onboptico{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ac)}.onboptico .sym{width:22px;height:22px}
.onbopttx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}.onbopttx b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:16px}
.onbtag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--mut)}
.onbtag.plus{background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ac)}
.onbradio{width:20px;height:20px;flex:none;margin-top:2px;border-radius:50%;border:2px solid color-mix(in srgb,var(--mut) 70%,transparent);box-sizing:border-box}
.onbopt.on .onbradio{border-color:var(--ac);background:radial-gradient(circle,var(--ac) 0 4.5px,transparent 5.5px)}
.onbplans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.onbplans>span{display:flex;flex-direction:column;padding:6px 8px;border-radius:10px;background:color-mix(in srgb,var(--ink) 6%,transparent);font-size:13px;font-weight:700;color:var(--ac)}
.onbplans>span b{font-size:12px;color:var(--ink);font-weight:700}.onbplans em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--mut)}
.onbfields{display:flex;flex-direction:column;margin-top:8px}.onbfields input{width:100%;box-sizing:border-box}
.onbpwrow{margin-top:8px}
.onbok{flex-direction:row;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ac) 10%,transparent)}.onbok .sym{width:18px;height:18px;color:var(--ac);flex:none}
.onbkey{width:44px;height:44px;color:var(--ac);align-self:center;margin:4px 0}
.onbbody>h1+.onbdesc{margin-bottom:10px}
.accchoice{margin:0 0 6px}.accsec .accchoice .onbopt{padding:12px 14px}
.setfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.sethelp{display:flex;flex-wrap:wrap;gap:4px 16px}.sethelp a{color:var(--ac);font-weight:600;text-decoration:none}.sethelp a:hover{text-decoration:underline}.setfoot .appver{margin:0}
/* Storage: link tags */
.stmk.tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}.stmk.tag.on{background:var(--ac);color:var(--onac)}
.sttags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 14px}.sttags>.meta{display:inline-flex;align-items:center;gap:4px;margin-right:2px}.sttags>.meta .sym{width:14px;height:14px}
.sttagedit{display:flex;flex-direction:column;align-items:stretch;gap:8px}.sttagedit #sttags{flex:1;min-width:0}
.sttagsugg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* RetroAchievements: progress on game covers, and the achievements on a game's page */
.raprog{position:absolute;left:6px;right:6px;bottom:6px;height:5px;border-radius:999px;background:rgba(0,0,0,.55);overflow:hidden;z-index:2}.raprog i{display:block;height:100%;background:#e3b341;border-radius:999px}
.raprog.mast i{background:#f2c94c}
.ramedal{position:absolute;left:6px;top:6px;z-index:2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#f2c94c;font-size:13px}.ramedal .sym{width:14px;height:14px}
.ccov .cfav~.ramedal{top:40px}
.rabox{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--sf))}
.rahead{display:flex;align-items:center;gap:10px;margin:0 0 8px}.rahead>div{flex:1;min-width:0;display:flex;flex-direction:column}
.rabox .cuse span{background:#e3b341}
.ralist{display:flex;flex-direction:column;gap:2px;margin-top:10px;max-height:420px;overflow-y:auto}
.raach{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:8px}.raach+.raach{border-top:1px solid var(--line)}
.raach img{width:40px;height:40px;border-radius:6px;flex:none;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.raach:not(.got) img{opacity:.55}.raach:not(.got) .raat b{color:var(--mut)}
.raat{flex:1;min-width:0;display:flex;flex-direction:column}.raat .meta{font-size:12px}
.raap{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}.raap b{color:#e3b341}.raap .meta{font-size:11px}
.rasettings .lab input{width:100%;max-width:360px;box-sizing:border-box}
.conh{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--ink)}
.consec+.consec{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.consec .lab{flex-direction:column;align-items:stretch;gap:6px;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:12px!important}
.consec .lab input{width:100%;max-width:360px;box-sizing:border-box;font-weight:400}
.onbconnbody .conh{display:none}.onbconnbody .consec+.consec{margin-top:0;padding-top:0;border-top:0}
.raimg{width:40px;height:40px;border-radius:6px;flex:none;background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* Setup: Connect your accounts */
.onbconn{display:flex;flex-direction:column}.onbconn>.onbopt{align-items:center}.onbconn>.onbopt>.sym{width:16px;height:16px;color:var(--mut);flex:none}
.onbconn.open>.onbopt{border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.onbconnbody{margin:6px 0 2px;padding:10px 14px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 3%,var(--sf))}
.onbconnbody .rasettings>p:first-child{margin-top:0!important}.onbconnbody .lab input{max-width:none}
/* Collection cards: the same masonry flow and card look as Storage (row spans set by stMasonry in app.js).
   Game covers keep their own shape so the whole cover shows. */
.cgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-rows:4px;row-gap:0;column-gap:14px;align-items:start}
.ccov{border-radius:12px;border:1px solid var(--line);box-shadow:none;transition:transform .15s,box-shadow .15s}
.ccard:hover .ccov{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.ccard b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard .meta{font-size:12px}
.ccov.c-game{aspect-ratio:4/3}
.ccov.c-game.hasc{aspect-ratio:auto;min-height:90px}
.ccov.c-game.hasc img{height:auto;max-height:340px;object-fit:contain}
body.shine .ccard:hover .ccov:not(.tilt){transform:none;box-shadow:none}
@media (max-width:760px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0;column-gap:8px}.cgrid .ccard b{font-size:12px}.cgrid .ccard .meta{font-size:10.5px}.cgrid .ccov{border-radius:8px;box-shadow:none}}
/* Other covers: a source filter, and game covers shown whole at their own shape */
.caltsrc{margin:0 0 10px;flex-wrap:wrap}
.caltgame{align-items:start;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.caltgame .caltc img{aspect-ratio:auto;height:auto;max-height:200px;object-fit:contain}
.caltgame .caltup .caltbox{aspect-ratio:4/3}
/* Card size slider (--csz is a percentage of the normal card width) */
.cardsz{display:inline-flex;align-items:center;gap:6px;margin-left:auto;color:var(--mut)}
.cardsz .sym{width:14px;height:14px;flex:none}.cardsz .sym:last-child{width:18px;height:18px}
.cardsz input[type=range]{width:110px;margin:0}
.cgrid,.stcards{grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(170px * var(--csz,100) / 100)),1fr))}
@media (max-width:760px){.cgrid{grid-template-columns:repeat(auto-fill,minmax(calc(76px * var(--csz,100) / 100),1fr))}.cardsz input[type=range]{width:90px}}
/* Touch screens: a press that lingers before a swipe or scroll shouldn't start selecting text. Buttons, cards and
   labels aren't selectable there; what you type and what you read (an open note, journal entries, the recovery key) still is. */
@media (hover:none) and (pointer:coarse){
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"],.mdview,.jent .md,.rkey,pre,code{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
}
/* Settings → Sections: the eye that hides a section from the sidebar */
.drow .navhidb{color:var(--ink)}.drow .navhidb.off{color:var(--mut);opacity:.7}.drow .navhidb .sym{width:17px;height:17px}
/* Cards sidebar with 3 columns: smaller cards so three fit side by side */
@media (min-width:761px){
#app.navc3 nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#app.navc3 nav .navb{min-height:78px;padding:10px;border-radius:14px}
#app.navc3 .ni>.sym{width:34px;height:34px;padding:8px}
#app.navc3 .nc{font-size:19px}
#app.navc3 .nl{margin-top:10px;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Right-click menus: clearer group titles, each group set off by a line */
.ctxlab{margin:10px 12px 4px;font-size:13.5px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink)}
.ctxlab:first-child{margin-top:6px}
.ctxlab:not(:first-child){border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
.ctxhr+.ctxlab{border-top:0;padding-top:0;margin-top:8px}
/* Settings → Appearance: app icon picker */
.appicos{display:flex;flex-wrap:wrap;gap:10px}
.appico{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;padding:6px 4px;border-radius:12px;font-size:12px;color:var(--mut)}
.appico svg{width:46px;height:46px;display:block;transition:transform .15s}
.appico:hover svg{transform:scale(1.06)}
.appico.on{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ink);font-weight:700}
.appico:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.hlsw{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-2px}
/* Home board zoom control */
.hbzoom{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px}
.hbzoom .x{min-width:28px;height:28px;padding:0;border-radius:50%;font-size:16px}
.hbzoom b{min-width:44px;text-align:center;font-size:12.5px;cursor:pointer}
/* Customize Home: the "Keep cards in their column" switch and the Reset button share a row */
.hresetrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px}.hresetrow .hfixrow{margin:0;flex:1;min-width:260px}
.hreset{flex:none}
/* Game page: the cover keeps its own shape (box art, wide store art, square screens) in a wider column */
.cdetail.cd-game{grid-template-columns:minmax(200px,380px) minmax(0,1fr)}
.cd-game .cbig{aspect-ratio:4/3}
.cd-game .cbig.hasc{aspect-ratio:auto;background:none}
.cd-game .cbig.hasc img{height:auto;max-height:520px;object-fit:contain}
@media (max-width:760px){.cdetail.cd-game{grid-template-columns:1fr}.cd-game .cbig{max-width:380px}}
/* Quick capture keeps one size whatever the type: the form area has a fixed height and text boxes fill it */
.qcbody{height:208px;display:flex;flex-direction:column;overflow-y:auto}
.qcbody>.qcform,.qcbody>#qctext{flex:1 1 auto;min-height:0}
.qcbody>.qcform{display:flex;flex-direction:column}
.qcbody>#qctext,.qcbody .qcnote textarea,.qcbody .qcjournal textarea{flex:1 1 auto;min-height:60px;resize:none}
/* Notes list: search, New note and Sort sit apart evenly (the search is wrapped in .sbox now) */
.nlist>.sbox{margin:0 0 8px;display:flex}.nlist>.sbox input{flex:1;width:100%}
.nlist>button.g{margin:0 0 10px}
.nlist .nsort{padding:0 4px 6px}
/* Home pages (virtual desktops): tabs above the cards */
.hpages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.hpages>button[data-hp]{all:unset;cursor:pointer;padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--mut);background:color-mix(in srgb,var(--ink) 6%,transparent);transition:background .15s,color .15s}
.hpages>button[data-hp]:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent)}
.hpages>button[data-hp].on{color:var(--onac,#fff);background:var(--ac)}
.hpages>button[data-hp]:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.hpages .hpname{width:140px;padding:5px 12px;border-radius:999px;font-size:13.5px}
.hpages .hpadd{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--mut);border:1px dashed var(--line)}
.hpages .hpadd:hover{color:var(--ink);border-color:var(--ac)}.hpages .hpadd .sym{width:14px;height:14px}
/* Home search → new note: the notes page eases in */
@keyframes hq2note{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#main.hq2note{animation:hq2note .32s ease-out}
@media (prefers-reduced-motion:reduce){#main.hq2note{animation:none}}
/* Section tabs (Notes, Journal, Storage…): the title always shows in full. Each tab is at least as wide as its
   title and count, tabs still grow to fill the row, and the row wraps when they don't fit. */
.ntab:not(.cattile){min-width:max-content;max-width:none;flex:0 0 auto}
.ntab:not(.cattile) .ntl{overflow:visible;text-overflow:clip;white-space:nowrap;flex:0 0 auto}
.ntab:not(.cattile) .ntc{margin-left:6px}
.sttabs .ntabs{flex-wrap:wrap}.sttabs .ntab:not(.cattile){flex:0 0 auto;min-width:max-content;max-width:none}
@media (max-width:760px){.ntab:not(.cattile){flex:1 1 calc(50% - 10px);min-width:max-content;max-width:none}}
@media (min-width:761px){.ntab:not(.cattile){gap:8px;padding:8px 12px 8px 8px}.ntab:not(.cattile) .nti{width:32px;height:32px}.ntab:not(.cattile) .nti .sym{width:17px;height:17px}.ntab:not(.cattile) .ntc{font-size:16px}}
/* Keyboard shortcuts sheet: a filter box and the groups in two balanced columns */
.kbcard{width:min(780px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column}
.kbsearch{display:flex;margin:0 0 6px}.kbsearch input{flex:1}
.kbcols{columns:2 300px;column-gap:28px;overflow-y:auto;padding-right:4px;margin-right:-4px}
.kbgrp{break-inside:avoid;margin:0 0 6px}
.kbgrp .kbh{margin:12px 0 4px}
.kbkeys{flex:none;display:inline-flex;align-items:center;gap:3px}
.kbthen{font-size:11px;color:var(--mut);margin:0 2px}
.kbfoot{margin:10px 0 0;font-size:12px}
/* Journal search → new entry: the entry box eases in */
@keyframes jq2new{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jnew.jq2new{animation:jq2new .3s ease-out}
@media (prefers-reduced-motion:reduce){.jnew.jq2new{animation:none}}
.moods.seg .hshowall{color:var(--ac);font-weight:700}
/* Task list and collection card editors: label + control pairs in two columns, one on narrow screens */
.cced .ccgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start}
.cced .ccgrid>div>p.meta:first-child{margin-top:12px}
.cced .ccgrid input{width:100%;box-sizing:border-box}
.cced .ccsw{align-self:end}.cced .ccsw .swrow{margin-top:8px}.cced .ccsw .swrow+.swrow{margin-top:4px}
@media (max-width:760px){.cced .ccgrid{grid-template-columns:1fr}}
/* Task details sheet: grouped rounded cards with icon rows, like a phone's reminder details */
.item.tdetwrap{display:block;padding:0;background:none;border:0}
.tdet{max-width:620px;margin:6px 0 12px;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--ink) 4%,var(--sf));border:1px solid var(--line)}
.tdhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.tdhead b{font-size:16px}
.tdhead .tdx,.tdhead .tdok{width:40px;height:40px;min-width:40px;padding:0;border-radius:50%;display:grid;place-items:center}.tdhead .sym{width:18px;height:18px}
.tdg{border-radius:16px;background:color-mix(in srgb,var(--ink) 6%,var(--sf));overflow:hidden}
.tdtitle{padding:4px 6px}.tdtitle input{width:100%;box-sizing:border-box;border:0;background:none;font-size:20px;font-weight:700;padding:10px 10px;outline:none}
.tdh{margin:18px 6px 8px;font-size:14px;font-weight:700;color:var(--mut)}
.tdr+.tdr{border-top:1px solid var(--line);margin-left:52px}.tdr+.tdr .tdrow{margin-left:-52px}.tdr+.tdr .tdin{margin-left:-52px}
.tdrow{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:44px}
.tdico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--mut)}
.tdico[style]{background:var(--ic);color:#fff}.tdico .sym{width:17px;height:17px}
.tdl{flex:1;min-width:0;display:flex;flex-direction:column}.tdl b{font-weight:600;font-size:15px}
.tdv{font-size:13px;color:var(--ac)}.tdv:empty{display:none}
.tdin{padding:0 14px 12px 54px}.tdin input[type=date]{max-width:220px}
.tdsel{display:inline-flex;align-items:center;gap:2px;color:var(--mut);position:relative}
.tdsel select{appearance:none;-webkit-appearance:none;border:0;background:none;color:var(--mut);font:inherit;font-size:14px;text-align:right;text-align-last:right;padding:4px 18px 4px 4px;cursor:pointer;max-width:200px}
.tdsel select:focus-visible{outline:2px solid var(--ac);border-radius:6px}
.tdsel .sym{position:absolute;right:0;width:14px;height:14px;pointer-events:none}
@media (max-width:760px){.tdet{padding:10px;border-radius:16px}.tdsel select{max-width:140px}}
/* Task details: full width; the two groups side by side when there's room; a round ✓; one arrow on the selects */
.tdet{max-width:none}
.tdcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));column-gap:16px;align-items:start}
.tdet .tdhead button.tdok,.tdet .tdhead button.tdx{width:40px;height:40px;min-width:40px;max-width:40px;min-height:40px;padding:0;border-radius:50%;aspect-ratio:1;flex:none}
.tdet .tdsel select{border:0!important;background:none!important;box-shadow:none!important;border-radius:6px;min-width:0;flex:none}
/* Task rows: bigger Edit / Subtask / Delete buttons */
.rrow .ract{gap:6px}
.rrow .ract .rbtn{width:38px;height:38px;min-width:38px}.rrow .ract .rbtn .sym{width:18px;height:18px}
/* Customize Home: each card's bar is one line — a grip on the left, round Color / Edit / Hide buttons on the right */
.hbar{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
.hbgrip{cursor:grab;font-size:18px;line-height:1;color:var(--mut);padding:4px 6px;border-radius:8px;user-select:none}
.hbgrip:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.hbbtns{display:inline-flex;gap:6px;flex:none}
.hbb{all:unset;cursor:pointer;box-sizing:border-box;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--mut);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hbb:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 13%,transparent)}
.hbb:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.hbb .sym{width:16px;height:16px}.hbb .dot{width:14px;height:14px;border-radius:50%;margin:0}
.hbb[data-act="tgl"]:hover{color:#e0566f;background:color-mix(in srgb,#e0566f 14%,transparent)}
/* Customize Home: one panel — add / reset / hide all on one row, the column switch, then the hidden cards */
.hcust{margin:0 0 16px;padding:14px 16px}
.hctool{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.hcgrp{display:flex;flex-wrap:wrap;gap:8px}
.hcb{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:14px}.hcb .sym{width:15px;height:15px}
.hcfix{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);max-width:none}.hcfix .swrow{margin:0}
.hclab{margin:12px 0 8px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700}.hclab .meta{font-weight:400}
p.meta.hclab{font-weight:400}
.hchid{display:flex;flex-wrap:wrap;gap:6px}
.hchid>button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:999px;font-size:13px;color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--line)}
.hchid>button:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,transparent)}
.hchid>button .sym{width:12px;height:12px;color:var(--mut)}
.hchid>.hshowall{color:var(--ac);font-weight:700;border-style:dashed;padding-left:11px}
@media (max-width:760px){.hcfix{display:none}}
/* UI consistency pass: in-page group headings at the standard heading size; a disabled round button looks it */
.lhead,.hsec{font-size:15px;font-weight:700;margin:18px 0 10px}
.circ:disabled{opacity:.35;cursor:default;filter:none}
/* Settings: search box the same size as the other search boxes */
.hsearch.setsearch{padding:0 0 0 14px;border-radius:12px}.hsearch.setsearch input{padding:10px 12px 10px 4px;font-size:16px}
/* Home cards: "View all" in the same text size as other small buttons */
.hgrid section>.head>button.x{font-size:13px}
/* Setting headings: clear, bold labels above each control (sub-labels keep the small gray .meta style) */
.slab,.setrow .setlab{margin:22px 0 8px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.01em}
section>h2+.slab,section>.slab:first-child{margin-top:8px}
.cced .ccgrid>div>.slab:first-child{margin-top:12px}
/* Date picker: the field (a button showing the date) and Prodify's own calendar */
.dpbtn{display:inline-flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;text-align:left;white-space:nowrap}
.dpbtn:hover{border-color:color-mix(in srgb,var(--ac) 50%,var(--line))}
.dpbtn:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.dpbtn .sym{width:16px;height:16px;color:var(--mut);flex:none}.dpbtn .dpt{overflow:hidden;text-overflow:ellipsis}
.dpbtn.empty .dpt{color:var(--mut)}.dpbtn:disabled{opacity:.5;cursor:default}
.row .dpbtn{flex:1;min-width:140px;width:auto}
.dpop{position:fixed;z-index:400;width:296px;padding:12px;border-radius:16px;background:var(--sf);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.dphead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}.dphead b{font-size:15px;text-transform:capitalize}
.dphead .dpnav{width:32px;height:32px;min-width:32px}.dphead .dpnav .sym{width:16px;height:16px}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpwd{text-align:center;font-size:11.5px;font-weight:700;color:var(--mut);padding:4px 0;text-transform:uppercase}
.dpd{all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center;height:36px;border-radius:50%;font-size:14px;color:var(--ink)}
.dpd:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.dpd:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
.dpd.out{color:var(--mut);opacity:.55}
.dpd.today{box-shadow:inset 0 0 0 1.5px var(--ac);color:var(--ac);font-weight:700}
.dpd.on{background:var(--ac);color:var(--onac,#fff);font-weight:700;box-shadow:none}
.dpd:disabled{opacity:.25;cursor:default;background:none}
.dpfoot{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
/* inline date properties (notes) look like the other property values next to them */
.dpbtn.pinp{width:auto;min-width:0;flex:none;background:none;border:1px solid transparent;padding:4px 8px;border-radius:8px}
.dpbtn.pinp:hover{border-color:var(--line)}.dpbtn.pinp .sym{width:14px;height:14px}
/* Users: the one-time "move into a folder with your name" offer under the first user's path */
.umove{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:8px}.umove .meta{font-size:12.5px}
.umove .g{display:inline-flex;align-items:center;gap:6px}.umove .sym{width:15px;height:15px}
/* Users: rename a user in place; the cloud email under your name */
.urenb{width:26px;height:26px;padding:0;display:inline-grid;place-items:center;border-radius:50%;margin-left:2px;opacity:.6}.urenb:hover{opacity:1}.urenb .sym{width:13px;height:13px}
.urename{display:flex;gap:8px;align-items:center;width:100%}.urename input{max-width:240px;padding:6px 10px}
.uemail{display:inline-flex;align-items:center;gap:5px}.uemail .sym{width:13px;height:13px}
/* Backups: automatic backups and the backup folder in one section, the folder part set off by a line */
.bksec>.slab:first-of-type{margin-top:6px}
.bkmir{margin-top:18px;padding-top:4px;border-top:1px solid var(--line)}
/* Rainbow shine: a holographic band of bright colors sweeps across collection covers, lightening the art like foil */
body.shine-rainbow .ccov::after{
 background:linear-gradient(135deg,transparent 38%,rgba(255,61,127,.16) 42%,rgba(255,177,61,.34) 45%,rgba(255,233,77,.38) 48%,rgba(77,255,154,.36) 51%,rgba(61,201,255,.34) 54%,rgba(138,92,255,.16) 58%,transparent 62%)}
/* Collections toolbar: search + Favorites on one row; Show, Sort and card size on the next, card size at the end */
.colbar{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:2px 0 16px}
.coltop{display:flex;align-items:center;gap:10px}.coltop .sbox{flex:1 1 auto;min-width:0}
.coltop .favf{flex:none;display:inline-flex;align-items:center;gap:6px}
.coltop .favf.on{background:color-mix(in srgb,#e0566f 18%,transparent);color:var(--ink);border-color:color-mix(in srgb,#e0566f 45%,var(--line))}
.coltop .favf.on .sym{color:#e0566f}.favn{font-size:12px;color:var(--mut);font-weight:600}
.colctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.colctl .segsel{display:flex;align-items:center;gap:8px;flex:none;margin:0}.colctl .segsel>.msl{display:inline}
.colctl .nsort{padding:0}
.colctl .cardsz{margin-left:auto}
@media (max-width:760px){.colctl{gap:8px}.colctl .segsel{flex:1 1 140px}.colctl .cardsz{margin-left:0}}
/* Collections toolbar, compact: a narrower search with the Show toggles beside it, Sort and card size after;
   Favorites sits with Goals & stats and Quotes */
.colbar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px}
.colbar .coltop{flex:0 1 300px;min-width:200px}
.colbar .colctl{flex:1 1 auto;gap:10px 14px;flex-wrap:wrap}
@media (max-width:760px){.colctl .segsel>.dsel{display:inline-flex;min-width:0}}
.colctl .segsel>.msl,.colctl .nsort>.meta{display:inline;font-size:13px}
.cextra .favf{display:inline-flex;align-items:center;gap:6px}
.cextra .favf.on{background:color-mix(in srgb,#e0566f 18%,transparent);color:var(--ink);border-color:color-mix(in srgb,#e0566f 45%,var(--line))}
.cextra .favf.on .sym{color:#e0566f}
@media (max-width:760px){.colbar .coltop{flex:1 1 100%}.colctl .segsel{flex:1 1 130px}.colctl .segsel>.dsel{flex:1}}
/* desktop: search, Show, Sort and card size flow as separate pieces, so Show fits beside the search */
@media (min-width:761px){.colbar .colctl{display:contents}}
/* Collections on wide screens: type tabs with Goals / Quotes / Favorites at the right end of the same row, and the
   whole toolbar (search, Show, Sort, card size) on one line; both wrap neatly when narrower */
/* the buttons sit at the end of the tabs' row when they fit; when they wrap to the next line (.stacked, set by
   app.js) they start at the left, under the tabs */
.colhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:14px 0 14px}
.colhead>.ntabs{margin:0}
.colhead>.cextra{margin:0 0 0 auto;flex-wrap:wrap}
.colhead.stacked>.cextra{margin-left:0}
.colbar .coltop{flex:1 1 220px;max-width:300px}
.colctl .cardsz input[type=range]{width:96px}
.colctl .moods.seg button{padding:5px 11px;font-size:14px}
/* Boards with any number of columns: a row that scrolls sideways when it gets long, "Add column" at its end */
.kanban{display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:4px}
.kanban>.kcol{flex:1 0 240px;min-width:240px}
.k-custom .khead b::before{background:#5b9bd5}
.khead{gap:6px}.khead .kname{flex:1;min-width:0;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khead>.meta{flex:none}
.kcolm{width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:50%;opacity:.55;flex:none}.kcolm:hover,.kcolm:focus-visible{opacity:1}.kcolm .sym{width:16px;height:16px}
.kren{flex:1;min-width:0;padding:4px 8px;font-size:14px;font-weight:700;border-radius:8px}
.kaddcol{all:unset;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;gap:6px;align-self:stretch;min-height:120px;padding:0 14px;border-radius:14px;border:1px dashed var(--line);color:var(--mut);font-size:14px;writing-mode:horizontal-tb}
.kaddcol:hover{color:var(--ink);border-color:var(--ac)}.kaddcol .sym{width:16px;height:16px}
@media (max-width:700px){.kanban{flex-direction:column;align-items:stretch;overflow-x:visible}.kanban>.kcol{flex:none;min-width:0}.kaddcol{min-height:0;padding:12px 14px;justify-content:center}}
/* the main area may shrink below wide content (a long board), which then scrolls inside itself */
#main{min-width:0}
.kanban>.kcol{flex:1 0 210px;min-width:210px}
.kaddcol{padding:0;width:44px;justify-content:center}.kaddcol span{display:none}
@media (max-width:700px){.kaddcol{width:auto;padding:12px 14px}.kaddcol span{display:inline}}
/* Series: seasons watched */
.szsec{margin:0}
.szhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.szhead .meta{font-size:13px}
.szbar{height:6px;border-radius:99px;background:var(--segtr);overflow:hidden;margin:0 0 8px}
.szbar i{display:block;height:100%;border-radius:inherit;background:var(--ac);transition:width .25s}
.moods.szgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));width:100%}
.moods.szgrid button{padding:9px 12px;gap:10px}
.szck{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--mut) 60%,transparent);box-sizing:border-box}
.szck .sym{width:12px;height:12px}
.moods.szgrid button.on .szck{background:var(--ac);border-color:var(--ac);color:var(--onac,#fff)}
:root:is([data-style="colorful"],[data-style="accent"]) .moods.szgrid button.on .szck{background:var(--onac);border-color:var(--onac);color:var(--ac)}
:root:is([data-style="colorful"],[data-style="accent"]) .moods.szgrid button.on .meta{color:inherit;opacity:.8}
.szt{display:flex;flex-direction:column;min-width:0}.szt b{font-size:14px}.szt .meta{font-size:12px;font-weight:400}
.szfoot{align-items:center;gap:12px}
.szman{display:inline-flex;align-items:center;gap:8px}.szman .cx{width:30px;height:30px;padding:0;border-radius:50%;font-size:17px}.szman b{min-width:20px;text-align:center}
/* Collection item title: wraps onto as many lines as it needs, a little smaller on phones */
textarea.ctitle{display:block;width:100%;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;min-height:0;box-sizing:border-box}
@media (max-width:760px){textarea.ctitle{font-size:23px;line-height:1.25}}
/* Adding to collections. Desktop: types, then Select several · Add by hand · close; the search row below.
   Phones: the types swipe sideways on one line with close at its end, then the search, then the two small buttons. */
.caddtools .caddhand{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){
.cadd{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.cadd>*{grid-column:1/-1;margin:0!important}
.caddhead,.caddtools{display:contents}
.caddhead>.moods.seg{grid-column:1;grid-row:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;min-width:0}
.caddhead>.moods.seg::-webkit-scrollbar{display:none}
.caddhead>.moods.seg button{flex:none;white-space:nowrap}
.caddtools .cclose{grid-column:2;grid-row:1;width:36px;height:36px;align-self:center}
.cadd>.row:first-of-type{grid-row:2;flex-wrap:nowrap}.cadd>.row:first-of-type input{min-width:0;flex:1}
.caddtools .msel,.caddtools .caddhand{grid-row:3;font-size:13px;padding:6px 12px;min-height:0;align-self:center}
.caddtools .msel{grid-column:1;justify-self:start}.caddtools .caddhand{grid-column:2;justify-self:end}
}
/* Phones: Show and Sort dropdowns are as wide as their text (Show stays short, Sort gets the room it needs) */
@media (max-width:760px){
.colctl .segsel{flex:0 1 auto;min-width:0}
.colctl .segsel>.dsel{flex:none;min-width:max-content;max-width:none}
.colctl .segsel>.dsel .dsl{overflow:visible;text-overflow:clip}
}
/* Phones, "Search bar above the tab bar": each section's own search bar (Notes, Journal, Collections, Storage, Settings)
   sits just above the bottom icons too, like Home's. */
@media (max-width:760px){
body.sblow2 #main .secsearch{position:fixed;left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:63;margin:0!important;max-width:none;width:auto;box-shadow:0 6px 20px rgba(0,0,0,.25);border-radius:14px;background:var(--bg)}
body.sblow2 #main .secsearch input{background:var(--sf)}
body.sblow2 #main .stsrow.secsearch{display:flex;gap:8px;padding:0;background:none;box-shadow:none}
body.sblow2 #main .stsrow.secsearch>.sbox{flex:1;box-shadow:0 6px 20px rgba(0,0,0,.25);border-radius:14px}
body.sblow2 #main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
body.sblow2 .qcbtn,body.sblow2 .fab{bottom:calc(142px + env(safe-area-inset-bottom,0px))!important}
body.sblow2 .qcap{bottom:calc(204px + env(safe-area-inset-bottom,0px))!important}
body.sblow2 #toast{bottom:calc(140px + env(safe-area-inset-bottom,0px))!important}
}
/* Shortcuts tiles only take over touches (for dragging) while being edited; otherwise a swipe on them scrolls */
.shtile:not([data-dnd]){touch-action:manipulation}
/* Phones: the notes list on its own until a note is opened or New note is pressed */
@media (max-width:760px){.npanel.noed>.nedit{display:none}.npanel.noed .nlist{max-height:none}}
.nclosem{display:none;width:32px;height:32px;padding:0;border-radius:50%}.nclosem .sym{width:16px;height:16px}
@media (max-width:760px){.neditor>.head{position:relative;padding-right:46px}.nclosem{display:grid;place-items:center;position:absolute;top:2px;right:0;width:38px;height:38px;color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent)}.nclosem .sym{width:20px;height:20px}}
/* Swiping between sections on phones: the new section slides in from the side it came from */
@keyframes swl{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes swr{from{opacity:.4;transform:translateX(-28px)}to{opacity:1;transform:none}}
#main.swl{animation:swl .26s ease-out}#main.swr{animation:swr .26s ease-out}
@media (prefers-reduced-motion:reduce){#main.swl,#main.swr{animation:none}}
/* Tasks: pinned lists as big cards (icon and count on top, name below), the other lists as compact rows */
.ntabs.ltabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:14px 0 18px}
.ltabs .ntab:not(.cattile){display:grid;grid-template-columns:1fr auto;grid-template-areas:"i c" "n n";align-items:start;min-width:0;max-width:none;min-height:96px;padding:14px 16px;border-radius:18px;gap:0}
.ltabs .ntab .nti{grid-area:i;width:40px;height:40px}.ltabs .ntab .nti .sym{width:21px;height:21px}
.ltabs .ntab .ntc{grid-area:c;font-size:30px;line-height:1;margin:0;align-self:start}
.ltabs .ntab .ntl{grid-area:n;align-self:end;margin-top:14px;font-size:16px}
@media (max-width:760px){.ntabs.ltabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ltabs .ntab:not(.cattile){min-height:88px;padding:12px 14px}}
.tlrows .lrow{padding:9px 14px;gap:12px}
.tlrows .lri,.tlrows .lri.big{width:30px;height:30px;font-size:16px}.tlrows .lri .sym,.tlrows .lri.big .sym{width:17px;height:17px}
.tlrows .lrow+.lrow::before{left:56px}
.tlrows .lrc{font-size:14px}.tlrows .lrch{font-size:18px}
/* Phones: section tabs (Collections, Notes, Journal, Health, Storage…) as cards three to a row, a little taller:
   icon and count on top, name below. Pinned task lists keep their bigger cards; category tiles are separate. */
@media (max-width:760px){
#main .ntabs:not(.ltabs):not(.cattiles){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1 1 100%;width:100%}
#main .ntabs:not(.ltabs):not(.cattiles) .ntab:not(.cattile){display:grid;grid-template-columns:1fr auto;grid-template-areas:"i c" "n n";align-items:start;min-width:0;max-width:none;min-height:72px;padding:9px 10px;border-radius:14px;gap:0}
#main .ntabs:not(.ltabs):not(.cattiles) .ntab .nti{grid-area:i;width:28px;height:28px}#main .ntabs:not(.ltabs):not(.cattiles) .ntab .nti .sym{width:15px;height:15px}
#main .ntabs:not(.ltabs):not(.cattiles) .ntab .ntc{grid-area:c;font-size:17px;line-height:1;margin:2px 0 0;align-self:start}
#main .ntabs:not(.ltabs):not(.cattiles) .ntab .ntl{grid-area:n;align-self:end;margin-top:8px;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Phones: an open or new note fills the screen (list, tabs and title step aside); ✕ or back returns to the list */
@media (max-width:760px){
body.nfull #main>*:not(.npanel){display:none!important}
body.nfull .npanel{display:block}body.nfull .npanel>.nlist{display:none}
body.nfull #main{padding-top:calc(10px + env(safe-area-inset-top,0px))}
body.nfull .npanel>.nedit{margin:0}
body.nfull #nb{min-height:calc(100dvh - 300px)}
}
@media (max-width:760px){body.nfull #nbell,body.nfull .fab,body.nfull .qcbtn{display:none!important}}

/* Sliders: a thick rounded track filled with the accent up to the knob (--p, set in app.js), a round knob with a gap
   around it, and a value bubble while dragging (#rngtip). */
input[type=range]{-webkit-appearance:none;appearance:none;height:24px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;--p:50%;--rngbg:var(--bg);--rngtr:color-mix(in srgb,var(--ink) 14%,transparent)}
section input[type=range],.ctx input[type=range],.qcap input[type=range]{--rngbg:var(--sf)}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(to right,var(--ac) var(--p),var(--rngtr) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border:0;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px var(--rngbg);transition:transform .12s}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--rngtr)}
input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--ac)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px var(--rngbg)}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ac);outline-offset:3px}
input[type=range]:disabled{opacity:.45;cursor:default}
#rngtip{position:fixed;z-index:9999;transform:translate(-50%,-100%);padding:5px 9px;border-radius:8px;background:var(--ink);color:var(--bg);font-weight:700;font-size:13px;line-height:1.2;pointer-events:none;opacity:0;transition:opacity .12s}
#rngtip.on{opacity:1}
#rngtip::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}

/* Hobbies and Skills */
.putiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 16px}
.putile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--sf);border:1px solid var(--line)}
.putile b{font-size:20px;line-height:1.2}.putile .meta{font-size:12.5px}
.pudet .putiles{margin:6px 0 4px}
.punew{margin-bottom:16px}.punew #pun{flex:1;min-width:0}
.puico{background:color-mix(in srgb,var(--tc,var(--ac)) 22%,transparent);color:var(--tc,var(--ac))}
.pubar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.pubar .moods.seg button{padding:7px 12px;font-size:14px}
.pugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.pucard{position:relative;display:flex;align-items:stretch;border-radius:16px;background:var(--sf);border:1px solid var(--line);transition:border-color .15s}
.pucard:hover{border-color:color-mix(in srgb,var(--tc) 50%,var(--line))}
.puopen{all:unset;cursor:pointer;flex:1;min-width:0;display:flex;gap:12px;align-items:flex-start;padding:14px 14px 14px 14px;box-sizing:border-box}
.puopen:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:16px}
.puopen .puico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px}
.puopen .puico .sym{width:22px;height:22px}
.pucn{display:flex;flex-direction:column;gap:5px;min-width:0}.pucn>b{font-size:15.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.puchips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pust{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mut)}
.pust.st-active{background:color-mix(in srgb,var(--tc) 20%,transparent);color:var(--ink)}
.puimp{display:inline-flex;gap:3px}.puimp i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}.puimp i.on{background:var(--tc)}
.pulv{display:flex;align-items:center;gap:8px}.pusteps{display:inline-flex;gap:3px}.pusteps i{width:16px;height:5px;border-radius:99px;background:color-mix(in srgb,var(--ink) 14%,transparent)}.pusteps i.on{background:var(--tc)}
.pulog{position:absolute;right:10px;bottom:10px;width:32px;height:32px}
.pucard .pucn{padding-right:30px}
.puimpseg,.pulvseg{flex-wrap:wrap}
.pugoal{align-items:center;gap:10px}.pugoal b{min-width:22px;text-align:center;font-size:17px}
.pudesc{min-height:90px;width:100%;box-sizing:border-box}
.pums .rt{display:flex;align-items:center}.pumsd{text-decoration:line-through;color:var(--mut)}
.pures{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}.pures .meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pures>span:not(.meta){flex:1}
.pures .clink{display:inline-flex;align-items:center;gap:4px}.pures .clink .sym{width:14px;height:14px}
.pulogadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pulogadd>:first-child{flex:0 0 190px;width:190px;min-width:0;box-sizing:border-box}.pulogadd #pulogd{flex:0 0 160px}.pulogadd #pulogm{flex:0 0 110px}.pulogadd #pulogn{flex:1 1 200px;min-width:0}
.pulogs{margin:8px 0 6px}.pulogr{display:grid;grid-template-columns:120px 80px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.pulogd{font-weight:600;font-size:14px}.pulogn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.pugrid{grid-template-columns:1fr}.pulogr{grid-template-columns:90px 60px minmax(0,1fr) auto;gap:6px;font-size:13.5px}.pubar{flex-direction:column;align-items:stretch}.pubar .moods.seg{overflow-x:auto;flex-wrap:nowrap}}

/* Achievements */
.achlv{display:flex;align-items:center;gap:18px}
.achring{--p:0;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(closest-side,var(--sf) 79%,transparent 80% 100%),conic-gradient(var(--ac) calc(var(--p)*1%),color-mix(in srgb,var(--ink) 12%,transparent) 0)}
.achring b{font-size:30px;line-height:1}.achring span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.achlvt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.achlvt>b{font-size:18px}
.achlv.sm{gap:14px}.achlv.sm .achring{width:68px;height:68px}.achlv.sm .achring b{font-size:22px}.achlv.sm .achring span{font-size:9px}.achlv.sm .achlvt>b{font-size:15px}
.achbar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}.achbar i{display:block;height:100%;border-radius:inherit;background:var(--mc,var(--ac))}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.achc{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:var(--sf);border:1px solid var(--line)}
.achc:not(.got){opacity:.75}
.achico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--mut)}
.achico .sym{width:22px;height:22px}
.achc.got .achico{background:color-mix(in srgb,var(--mc) 24%,transparent);color:var(--mc)}
.acht{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.acht>b{font-size:15px}.acht>.meta{font-size:12.5px;margin-top:-3px}
.achst{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.achst .meta{font-size:12.5px}
.achtier{font-size:12px;font-weight:700;color:var(--mut)}.achc.got .achtier{color:var(--mc)}
.achpips{display:flex;gap:4px}.achpips i{flex:1;height:4px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
@media (max-width:760px){.achgrid{grid-template-columns:1fr}.achring{width:80px;height:80px}}
.pums .rchk{display:grid;place-items:center;color:#fff}.pums .rchk.on{background:var(--tc);border-color:var(--tc)}.pums .rchk .sym{width:14px;height:14px}
@media (max-width:760px){.putiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.putile{padding:10px 11px;border-radius:12px}.putile b{font-size:16px}.putile .meta{font-size:11.5px}.pudet .putiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pubar .moods.seg button{white-space:nowrap;flex:none}.puimpseg button,.pulvseg button{padding:7px 11px;font-size:14px}}

.pucard{flex-wrap:wrap}.puq{flex:1 1 100%;display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}.puqchips{display:flex;flex-wrap:wrap;gap:6px}
.pucard:has(.puq) .pulog{bottom:auto;top:14px}
.pulog.on{background:color-mix(in srgb,var(--tc) 22%,var(--sf));color:var(--tc);border-color:color-mix(in srgb,var(--tc) 45%,var(--line))}

/* Color pickers outside menus: the same grid as the side cards' menu (7 a row, custom color last) */
.swgrid{display:grid;grid-template-columns:repeat(7,28px);gap:10px;margin:0}
.swgrid .swcustom{width:28px;height:28px;border-radius:50%;box-sizing:border-box}

/* Choices in right-click menus: the segmented selector used across the app */
.ctx .ctxseg,.ctx .ctxpills{display:flex;flex-wrap:wrap;gap:3px;margin:2px 8px 6px;padding:3px;max-width:none;border-radius:12px;background:var(--segtr)}
.ctx .ctxseg button,.ctx .ctxpills button{padding:6px 11px;border-radius:9px;font-size:13.5px;font-weight:600;line-height:1.25;color:var(--mut);background:none;transition:background .15s,color .15s,box-shadow .15s}
.ctx .ctxseg button:hover,.ctx .ctxpills button:hover,.ctx .ctxseg button:focus-visible,.ctx .ctxpills button:focus-visible{color:var(--ink);background:none}
.ctx .ctxseg button.on,.ctx .ctxpills button.on{background:var(--segon);color:var(--ink);box-shadow:var(--segsh)}
:root[data-style="material"] .ctx .ctxseg button.on,:root[data-style="material"] .ctx .ctxpills button.on{background:var(--acs);color:var(--ink);box-shadow:none}
:root:is([data-style="colorful"],[data-style="accent"]) .ctx .ctxseg button.on,:root:is([data-style="colorful"],[data-style="accent"]) .ctx .ctxpills button.on{background:var(--ac);color:var(--onac);box-shadow:none}
/* hobby and skill cards: text never runs under the round log button */
.pucard .pucn{padding-right:44px}
.pulv{flex-wrap:wrap;row-gap:4px}.pulv .meta{white-space:nowrap}
.puchips{row-gap:4px}
/* Sounds card header: title, volume and play stay on one line; the volume slider gives way in narrow columns */
.head:has(.sndmaster){flex-wrap:nowrap;gap:10px}
.head:has(.sndmaster)>.row{flex:1 1 auto;min-width:0;justify-content:flex-end;flex-wrap:nowrap}
.head .sndmaster{flex:1 1 auto;min-width:0;max-width:150px;display:flex;align-items:center;gap:6px}
.head .sndmaster input[type=range]{flex:1 1 auto;min-width:40px;width:auto}
/* right-click menus stay narrow; a selector with many choices wraps onto a second line */
.ctx{max-width:248px;box-sizing:border-box}
.ctx .ctxseg button,.ctx .ctxpills button{flex:1 1 auto;text-align:center;padding:6px 6px;font-size:13px}
.ctx .ctxseg,.ctx .ctxpills{gap:2px}
.ctx .ctxseg button,.ctx .ctxpills button{box-sizing:border-box;min-width:0}
.ctx .ctxbr{flex-basis:100%;height:0}
.pucnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;box-sizing:border-box;border-radius:99px;font-size:11px;font-weight:700;background:color-mix(in srgb,currentColor 16%,transparent)}

/* Collections toolbar: Show and Sort on the first line, then the filter box with the card size slider on the right */
.colbar.colbar2{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:2px 0 16px}
.colbar2 .colfilt{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px 22px}
.colbar2 .colsrow{display:flex;align-items:center;gap:16px}
.colbar2 .colsrow .sbox{flex:1 1 auto;min-width:0;max-width:560px}
.colbar2 .colsrow .cardsz{margin-left:auto;flex:none}
@media (max-width:760px){.colbar2 .colfilt{gap:8px}.colbar2 .colsrow{gap:10px}.colbar2 .colsrow .sbox{max-width:none}}
/* Show and Sort stay on one line; .compact (set in colHeadFit when they don't fit) turns both into dropdowns */
.colbar2 .colfilt{flex-wrap:nowrap!important;gap:10px 18px}
.colbar2 .colfilt .segsel{flex:none;min-width:0}
.colbar2 .colfilt.compact .segsel{flex:1 1 0}
.colbar2 .colfilt.compact .segsel>.seg{display:none}
.colbar2 .colfilt.compact .segsel>.dsel{display:inline-flex;flex:1 1 auto;min-width:0;max-width:none}
.colbar2 .colfilt.compact .segsel>.dsel .dsl{overflow:hidden;text-overflow:ellipsis}
.colbar2 .colfilt .moods.seg button{padding:5px 8px;font-size:13px}
.colbar2 .colfilt.compact .segsel{flex:0 1 260px}
/* Home In progress suggestion: cover and text side by side; the buttons get their own row under both in narrow
   columns, and sit beside the cover when there's room */
.cswrap{container-type:inline-size}
.csugg{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:center}
.csugg>.csmini{grid-column:1;grid-row:1;flex:none;width:88px}
.csugg>.cstext{grid-column:2;grid-row:1}.csugg .cstext b{font-size:16px;line-height:1.25}
.csugg>.csbtns{grid-column:1/-1;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.csugg>.csbtns>button{flex:1 1 0;min-width:max-content;justify-content:center}
@container (min-width:400px){
 .csugg{grid-template-columns:112px minmax(0,1fr);row-gap:10px}
 .csugg>.csmini{grid-row:1/span 2;width:112px}
 .csugg>.cstext{align-self:end}.csugg .cstext b{font-size:18px}
 .csugg>.csbtns{grid-column:2;align-self:start}.csugg>.csbtns>button{flex:0 0 auto}}
.csugg .csmini .cbadge{display:none!important}

/* Menus on phones: centered over a dimmed backdrop, above the search bar and tab bar */
#ctxbg{position:fixed;inset:0;z-index:998;background:rgba(0,0,0,.5)}
#ctxbg[hidden]{display:none}
#ctx.ctxmob{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:999;width:min(92vw,360px);max-width:none;max-height:min(82dvh,680px);overflow-y:auto;overscroll-behavior:contain;border-radius:18px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#ctx.ctxmob button{padding:11px 14px}
#ctx.ctxmob .ctxseg button,#ctx.ctxmob .ctxpills button{padding:8px 8px}

/* Home In progress (and collection Home cards): each cover keeps its own shape, and the covers flow like Collections
   (a masonry grid: rows of 4px, each item spans its height; stMasonry sets the spans) */
.minis{grid-auto-rows:4px;row-gap:0!important;align-items:start}
.mcov.hasc{aspect-ratio:auto;min-height:60px}
.mcov.hasc img{height:auto;max-height:320px;object-fit:contain}

/* Sidebar edit mode: cards can be dragged; a Done bar ends it */
#nav.navedit .navb{cursor:grab;outline:1.5px dashed color-mix(in srgb,var(--ink) 40%,transparent);outline-offset:-4px}
#nav.navedit .navb:active{cursor:grabbing}
.navdonebar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 4px;padding:0 4px}
.navdonebar .meta{font-size:12.5px}
/* Tags look like a price tag with a pointed right end; when a tag can be removed, its × sits in the point */
.chip.tagc{position:relative;border-radius:7px 0 0 7px;padding-right:18px!important;
 clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%)}
.chip.tagc:has(>.cx){padding-right:3px!important}
.chip.tagc>.cx{padding:0 9px 0 4px;border-radius:0}
button.chip.tagc{padding:3px 18px 3px 11px}
.nhnav{display:inline-flex;gap:2px;margin-right:4px}.nhnav .rbtn:disabled{opacity:.35;cursor:default}
.hchid button .hchico{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--ac);font-size:14px}.hchid button .hchico .sym{width:16px;height:16px}
.hchid button .hchadd{display:inline-grid;opacity:.55}.hchid button .hchadd .sym{width:12px;height:12px}.hchid button:hover .hchadd{opacity:1}
.drhico{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;color:var(--ac);font-size:15px}.drhico .sym{width:18px;height:18px}
.hchid button .hchico,.hchid button .hchico .sym,.drhico,.drhico .sym{color:var(--hc,var(--ac))!important}
/* weather off: the clock and date sit in the middle of the card */
.wxcard.wxoff .wxclock{align-items:center;text-align:center}

/* Home clock styles (.ck-<style> on .wxclock) */
.wxclock .cktime{font-size:44px;line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wxclock .ckap{font-size:.42em;font-weight:600;margin-left:6px;opacity:.7;letter-spacing:0}
/* Modern: light, airy numbers; the date small, spaced and in the accent */
.ck-modern .cktime{font-size:54px;font-weight:300;letter-spacing:-.03em}
.ck-modern .ckdate{text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;font-weight:700;color:var(--ac)}
/* Digital: an LCD panel with the unlit segments faintly behind the time */
.ck-digital .cklcd{display:inline-flex;align-items:baseline;gap:4px;padding:8px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 7%,transparent);border:1px solid var(--line)}
.ck-digital .cktime{position:relative;font-family:ui-monospace,'JetBrains Mono',monospace;font-weight:700;font-size:44px;letter-spacing:.04em;color:var(--ac)}
.ck-digital .ckghost{position:absolute;inset:0;opacity:.1}.ck-digital .ckreal{position:relative}
.ck-digital .ckap{color:var(--ac)}
.ck-digital .ckdate{margin-top:6px}
/* Analog: a face with hour, minute and second hands */
.wxclock.ck-analog{flex-direction:row;align-items:center;gap:14px}
.ckface{width:92px;height:92px;flex:none}
.ckrim{fill:color-mix(in srgb,var(--ink) 5%,transparent);stroke:var(--line);stroke-width:2}
.cktick{stroke:var(--mut);stroke-width:1.5;stroke-linecap:round}.cktick.big{stroke:var(--ink);stroke-width:2.5}
.ckh{stroke:var(--ink);stroke-width:4.5;stroke-linecap:round}.ckm{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.cks{stroke:var(--ac);stroke-width:1.4;stroke-linecap:round}.ckpin{fill:var(--ac)}
.ck-analog .ckside{display:flex;flex-direction:column;gap:2px}.ck-analog .cktime{font-size:22px}
/* Flip: each digit on its own tile with a fold line */
.ckflip{display:flex;align-items:center;gap:4px}
.ckflip>span{position:relative;display:grid;place-items:center;width:34px;height:48px;border-radius:8px;background:color-mix(in srgb,var(--ink) 10%,var(--sf));font-size:32px;font-weight:700;font-variant-numeric:tabular-nums}
.ckflip>span::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.ckflip>i{font-style:normal;font-size:28px;font-weight:700;opacity:.6;margin:0 1px}
.ckflip .ckap{align-self:flex-end;margin-left:4px}
.ck-flip .ckdate{margin-top:8px}
/* Minimal: small and quiet */
.ck-minimal .cktime{font-size:26px;font-weight:600;color:var(--mut)}
/* Words: the time spelled out */
.wxclock .ckwords{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em}.ckwords em{font-style:normal;color:var(--ac)}
/* Elegant: serif italic */
.ck-elegant .cktime{font-family:Literata,Georgia,serif;font-style:italic;font-weight:500;font-size:50px;letter-spacing:-.01em}
.ck-elegant .ckdate{font-family:Literata,Georgia,serif;font-style:italic;font-size:14px}
/* Outline: hollow numbers drawn in the accent */
.ck-outline .cktime{font-size:56px;font-weight:800;color:transparent;-webkit-text-stroke:1.6px var(--ac)}
.ck-outline .ckap{-webkit-text-stroke:0;color:var(--ac)}
/* Stacked: hours over minutes, the date beside them */
.wxclock.ck-stacked{flex-direction:row;align-items:center;gap:14px}
.ckstack{display:flex;flex-direction:column;line-height:.9}.ckstack b{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums}.ckstack b+b{color:var(--ac)}
.ck-stacked .ckside{display:flex;flex-direction:column;gap:2px}.ck-stacked .ckday{color:var(--ink);font-weight:700;font-size:15px}
/* centered when weather is off */
.wxcard.wxoff .wxclock.ck-analog,.wxcard.wxoff .wxclock.ck-stacked{justify-content:center;text-align:left}
.wxcard.wxoff .ck-analog .ckside,.wxcard.wxoff .ck-stacked .ckside{align-items:flex-start}
.wxcard.wxoff .ckflip,.wxcard.wxoff .cklcd{justify-content:center}
.ctx .ctxtog{display:flex;align-items:center;justify-content:space-between;gap:12px}.ctx .ctxtog .sw{pointer-events:none;flex:none}
/* Alarm clock: seven-segment digits in the text color, the unlit segments faintly showing */
.ckalarm{display:inline-flex;align-items:flex-end;gap:8px}
.cksegs{height:72px;width:auto;display:block}.ck-alarm .ckalarm{align-self:flex-start}.cksegs polygon,.cksegs circle{fill:color-mix(in srgb,var(--ink) 6%,transparent)}.cksegs .lit{fill:var(--ink)}
.ckalarm .ckap{color:var(--ink);font-size:13px;font-weight:700;opacity:.85;margin:0 0 2px}
.ck-alarm .ckdate{margin-top:8px}.wxcard.wxoff .ckalarm{align-self:center}
/* Daily recap tiles: icon top left, the number top right, the label underneath */
.rctile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico num" "lab lab";align-items:center;row-gap:6px}
.rctile .rcico{grid-area:ico}.rctile b{grid-area:num;justify-self:end;font-size:20px;line-height:1}.rctile .meta{grid-area:lab}