/* Gofer: minimalist, launcher-style. Near-black by default, one accent, thin dividers, no shadows or gradients. */
:root{--bg:#0e0e0f;--fg:#f2f2f2;--dim:#9a9aa0;--faint:#6c6c72;--line:#26262a;--field:#17171a;--tile:#141416;--accent:#f28c4b;--on-accent:#0e0e0f;color-scheme:dark}
:root[data-theme=light]{--bg:#fafafa;--fg:#111113;--dim:#6b6b70;--faint:#a1a1a6;--line:#e2e2e5;--field:#efeff1;--tile:#ffffff;--accent:#b4531a;--on-accent:#fff;color-scheme:light}
@media (prefers-color-scheme:light){:root[data-theme=auto]{--bg:#fafafa;--fg:#111113;--dim:#6b6b70;--faint:#a1a1a6;--line:#e2e2e5;--field:#efeff1;--tile:#ffffff;--accent:#b4531a;--on-accent:#fff;color-scheme:light}}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;font:300 16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:var(--fg);-webkit-font-smoothing:antialiased;letter-spacing:.01em}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{font-weight:300;margin:0}
h2{font-size:26px;line-height:1.2}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin:28px 0 8px;font-weight:400}
header{display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 20px 6px}
header h1{font-size:15px;letter-spacing:.3em;text-transform:lowercase;color:var(--dim)}
header>div{display:flex;align-items:center;gap:4px}
button,select,input,textarea{font:inherit;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px}
input,select,textarea{background:var(--field);border-color:transparent;width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:1px solid var(--accent);outline-offset:1px}
input[type=checkbox]{width:auto;min-height:0}
button{cursor:pointer}
header button{border:0;color:var(--dim);min-width:44px;font-size:13px;letter-spacing:.08em}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:500}
button.link{border:0;padding:10px 0;color:var(--dim)}
.danger{color:var(--dim)}
.danger:hover{color:var(--accent)}
.syncdot{width:6px;height:6px;border-radius:50%;background:var(--faint);display:inline-block;margin-right:8px}
.syncdot.ok{background:var(--dim)}.syncdot.off{background:transparent;border:1px solid var(--faint)}.syncdot.err{background:var(--accent)}
/* Navigation: bottom tab bar on phone, left rail on laptop */
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav button{flex:1;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;min-height:58px;color:var(--faint);font-size:11px;letter-spacing:.06em}
nav button.active{color:var(--accent)}
main{padding:8px 20px 140px;max-width:760px;margin:0 auto}
@media (min-width:900px){
  nav{top:0;right:auto;width:96px;flex-direction:column;justify-content:center;gap:10px;border-top:0;border-right:1px solid var(--line)}
  nav button{flex:0}
  body{padding-left:96px}
  main{padding:16px 40px 80px}
  header{padding-left:40px;padding-right:40px}
}
#banner{max-width:720px;margin:6px auto;width:calc(100% - 40px);padding:12px 14px;border-radius:10px;border:1px solid var(--accent);color:var(--fg);cursor:pointer}
ul{list-style:none;padding:0;margin:0}
.muted{color:var(--dim);font-size:14px}
.meta{font-size:13px;color:var(--dim);margin:2px 0 0}
.error{color:var(--accent);font-size:14px;min-height:1em;margin:4px 0}
.row{display:flex;gap:10px;align-items:center}.row input{flex:1}.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:10px}
label{display:block;margin:0 0 14px}
label>span{display:block;font-size:12px;color:var(--dim);margin-bottom:4px;letter-spacing:.04em}
label.inline{display:flex;gap:10px;align-items:center;margin:14px 0}
label.inline span{display:inline;margin:0;font-size:14px}
.filebtn{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;min-height:44px;cursor:pointer;margin:0}
.filebtn span{font-size:16px;color:var(--fg);margin:0}
/* Flat lists with thin dividers */
li.item{display:flex;gap:14px;align-items:flex-start;padding:14px 2px;border-bottom:1px solid var(--line)}
li.item .body{flex:1;min-width:0;cursor:pointer}
li.item .ttl{font-size:17px;overflow-wrap:anywhere}
li.item.done .ttl{text-decoration:line-through;color:var(--faint)}
li.item .due{color:var(--dim)}
li.item.overdue .due,li.item .due.soon{color:var(--accent)}
li.item input[type=checkbox]{appearance:none;width:22px;height:22px;border:1.5px solid var(--faint);border-radius:50%;margin-top:2px;flex:none;cursor:pointer;padding:0}
li.item input[type=checkbox]:checked{background:var(--faint);box-shadow:inset 0 0 0 4px var(--bg)}
li.empty{padding:18px 2px;color:var(--faint)}
.tag{font-size:12px;color:var(--dim);margin-right:10px;white-space:nowrap}
.tag::before{content:"\00b7  ";color:var(--faint)}
.tag:first-child::before{content:""}
li.proj .ttl{font-size:20px}
li.proj .count{font-size:22px;color:var(--dim);min-width:2ch;text-align:right}
li.proj .count.hot{color:var(--accent)}
#projAddForm{margin:6px 0 4px}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:6px}
.notes{white-space:pre-wrap;color:var(--dim);overflow-wrap:anywhere}
.filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:6px 0 10px}
.filters input{grid-column:1/4}
/* Calendar */
.calnav{display:flex;justify-content:space-between;align-items:center;margin:6px 0 12px}
.calnav button{border:0;color:var(--dim);min-width:44px}
.calnav strong{font-weight:300;font-size:20px;text-transform:capitalize}
#calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cd{min-height:48px;border-radius:10px;padding:6px 2px;font-size:14px;cursor:pointer;text-align:center;color:var(--fg)}
.cd.dim{color:var(--faint)}
.cd.today{color:var(--accent)}
.cd.sel{background:var(--field)}
.cd i{display:block;font-style:normal;font-size:11px;color:var(--dim)}
.dow{font-size:11px;color:var(--faint);text-align:center;text-transform:uppercase;letter-spacing:.08em;padding-bottom:6px}
/* FAB: the one bold element */
#fab{position:fixed;right:20px;bottom:calc(78px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:0;display:flex;align-items:center;justify-content:center;z-index:6;padding:0}
#fab svg{width:26px;height:26px;stroke-width:2}
@media (min-width:900px){#fab{bottom:32px;right:32px}}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--fg);width:min(94vw,480px);padding:22px}
dialog::backdrop{background:#000a}
/* Auth */
#auth{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px}
#auth form{width:min(100%,380px)}
#auth h2{margin-bottom:24px}
#auth .primary{width:100%;margin-top:6px}
[hidden]{display:none!important}

/* Today widget (launcher style): big thin numeral, bold uppercase month, thin divider, compact stats */
.today{padding:18px 18px 16px;border:1px solid var(--line);border-radius:22px;background:var(--tile);margin:6px 0 8px}
.today-top{display:flex;justify-content:space-between;align-items:flex-start}
.today .num{font-size:72px;line-height:.9;font-weight:100;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.today .weekday{font-size:20px;padding-top:6px;font-weight:200;text-transform:uppercase;letter-spacing:.04em;color:var(--fg)}
.today .month{font-weight:800;font-size:15px;letter-spacing:.14em;margin-top:8px}
.today hr{border:0;border-top:1px solid var(--line);margin:14px 0 12px}
.stats{display:flex;gap:26px}
.stats div{display:flex;flex-direction:column}
.stats .sv{font-size:28px;font-weight:200;line-height:1.1;font-variant-numeric:tabular-nums}
.stats .sl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stats .hot .sv,.stats .hot .sl{color:var(--accent)}
.quick{display:flex;gap:12px;margin-top:16px}
button.round{width:48px;height:48px;min-height:48px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--fg)}
button.round:hover{border-color:var(--accent);color:var(--accent)}
/* Project tiles */
ul.tiles{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:600px){ul.tiles{grid-template-columns:1fr 1fr}}
ul.tiles li.item{border:1px solid var(--line);border-radius:18px;background:var(--tile);padding:16px;align-items:center;cursor:pointer}
ul.tiles li.proj .ttl{font-size:18px;font-weight:400}
ul.tiles li.proj .count{font-size:30px;font-weight:100}
h3{font-weight:700;font-size:11px}