/* Marginalia — styles */
/* Layout: a working desk — narrow index rail on the left, one wide working surface; on phones the rail becomes a bottom tab bar. */
:root{
  --bg:#f3f5f2; --surface:#fbfcfa; --raised:#ffffff; --sunk:#e9eee9; --col:#e7ece7; --line:#dbe2dc; --line-strong:#bdc9c1;
  --ink:#141c18; --muted:#55645c; --faint:#84928a;
  --accent:#2b6b59; --accent-ink:#ffffff; --accent-soft:#d6e8df;
  --warn:#94600f; --warn-soft:#f2e5cb; --danger:#a63d3a; --danger-soft:#f4dcd8;
  --shadow:0 1px 2px rgb(20 52 40 / .06), 0 10px 28px -14px rgb(20 52 40 / .22);
  --lift:0 1px 1px rgb(20 52 40 / .05), 0 2px 6px -2px rgb(20 52 40 / .10);
  --lift-hi:0 2px 4px rgb(20 52 40 / .06), 0 12px 24px -12px rgb(20 52 40 / .28);
  --edge:inset 0 0 0 1px rgb(20 52 40 / .05);
  --grain:.035;
  --f-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-read:"Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --r-xs:4px; --r-s:7px; --r-m:10px; --r-l:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --c-teal:#2e817c; --c-plum:#85569a; --c-ochre:#a7801a; --c-sky:#3a77a8; --c-rust:#b05f34; --c-rose:#b24e6a; --c-moss:#5a8444; --c-slate:#61707b;
  --z-nav:10; --z-grain:20; --z-toast:30; --z-dialog:40;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1412; --surface:#151c19; --raised:#1b2420; --sunk:#0b0f0d; --col:#131a17; --line:#24302a; --line-strong:#38473f;
  --ink:#e3ece7; --muted:#97a89f; --faint:#6b7c73;
  --accent:#78c4ab; --accent-ink:#0a1712; --accent-soft:#1c3a2f;
  --warn:#dca956; --warn-soft:#382c16; --danger:#e88581; --danger-soft:#3c1f1f;
  --shadow:0 1px 2px rgb(0 0 0 / .35), 0 14px 34px -14px rgb(0 0 0 / .7);
  --lift:0 1px 2px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .035);
  --lift-hi:0 10px 26px -10px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .05);
  --edge:inset 0 0 0 1px rgb(255 255 255 / .04);
  --grain:.05;
  --c-teal:#6cc3bd; --c-plum:#c197d4; --c-ochre:#dcbb55; --c-sky:#7fb3df; --c-rust:#e39a70; --c-rose:#e490a8; --c-moss:#95c47b; --c-slate:#a0acb7;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0f1412; --surface:#151c19; --raised:#1b2420; --sunk:#0b0f0d; --col:#131a17; --line:#24302a; --line-strong:#38473f;
  --ink:#e3ece7; --muted:#97a89f; --faint:#6b7c73;
  --accent:#78c4ab; --accent-ink:#0a1712; --accent-soft:#1c3a2f;
  --warn:#dca956; --warn-soft:#382c16; --danger:#e88581; --danger-soft:#3c1f1f;
  --shadow:0 1px 2px rgb(0 0 0 / .35), 0 14px 34px -14px rgb(0 0 0 / .7);
  --lift:0 1px 2px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .035);
  --lift-hi:0 10px 26px -10px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .05);
  --edge:inset 0 0 0 1px rgb(255 255 255 / .04);
  --grain:.05;
  --c-teal:#6cc3bd; --c-plum:#c197d4; --c-ochre:#dcbb55; --c-sky:#7fb3df; --c-rust:#e39a70; --c-rose:#e490a8; --c-moss:#95c47b; --c-slate:#a0acb7;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit}
.faint{color:var(--faint)}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-40px;background:var(--accent);color:var(--accent-ink);padding:6px 10px;border-radius:var(--r-s);z-index:var(--z-dialog)}
.skip:focus{top:8px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);height:100%;transition:grid-template-columns .22s var(--ease)}
.side{display:flex;flex-direction:column;gap:20px;padding:16px 10px 12px;border-right:1px solid var(--line);background:var(--sunk);min-height:0;overflow:auto;overflow-x:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:2px 4px 2px 8px;min-height:32px}
.brand-mark{width:24px;height:24px;flex:none}
.brand-mark rect{fill:var(--accent)}
.brand-mark path{fill:none;stroke:var(--accent-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brand b{font:650 18px/1 var(--f-display);letter-spacing:-.025em;white-space:nowrap}
.side-toggle{margin-left:auto;width:28px;height:28px}
.pins-empty{display:block;padding:0 10px;color:var(--faint);font-size:12.5px}
.search-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border:0;background:var(--surface);box-shadow:var(--lift);border-radius:var(--r-s);color:var(--muted);text-align:left;white-space:nowrap;transition:color .15s,box-shadow .15s}
.search-btn:hover{color:var(--ink);box-shadow:var(--lift-hi)}
.search-btn kbd{margin-left:auto;font:500 11px var(--f-mono);color:var(--faint);background:var(--sunk);padding:1px 5px;border-radius:var(--r-xs)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s);color:var(--muted);text-decoration:none;font-weight:500;white-space:nowrap;transition:background-color .15s,color .15s}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--lift)}
.nav a[aria-current="page"] svg.i{color:var(--accent)}
.nav .count{margin-left:auto;font:500 12px var(--f-mono);color:var(--faint);font-variant-numeric:tabular-nums}
.side h2{margin:0 10px 6px;font:500 12.5px var(--f-body);color:var(--faint)}
.pins{display:flex;flex-direction:column;gap:1px}
.pins button{all:unset;cursor:pointer;padding:5px 10px;border-radius:var(--r-s);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.pins button:hover{background:var(--surface);color:var(--ink)}
.pins button:focus-visible{outline:2px solid var(--accent)}
.status{margin-top:auto;white-space:nowrap;display:flex;flex-direction:column;gap:2px;padding:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.status .row{display:flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.dot.busy{background:var(--warn)}
.dot.bad{background:var(--danger)}
.status small{color:var(--faint);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.app.collapsed{grid-template-columns:60px minmax(0,1fr)}
.collapsed .side{padding-inline:8px}
.collapsed .brand{flex-direction:column;gap:12px;padding:2px 0}
.collapsed .brand b,.collapsed .lb,.collapsed .search-btn kbd,.collapsed .nav .count,.collapsed .pin-sec,.collapsed .status small,.collapsed .status .row>:not(.dot){display:none}
.collapsed .side-toggle{margin:0}
.collapsed .search-btn,.collapsed .nav a{justify-content:center;padding-inline:0}
.collapsed .status{align-items:center;border-top:0;font-size:0}
main{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.view{padding:32px max(16px,3.2vw) 72px;max-width:1240px;min-width:0}
.topbar,.tabbar{display:none}

h1{font:650 34px/1.05 var(--f-display);letter-spacing:-.032em;margin:0;text-wrap:balance}
h3{display:flex;align-items:baseline;gap:8px;font:600 14px var(--f-body);letter-spacing:-.005em;color:var(--ink);margin:0 0 10px}
h3 .hc,.tgroup h3 .c{font:500 12px var(--f-mono);color:var(--faint);margin:0;letter-spacing:0}
.head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:26px}
.head .sub{color:var(--muted);width:100%;margin:-4px 0 0;max-width:68ch;text-wrap:pretty}
.spacer{flex:1}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-s);border:0;background:var(--raised);box-shadow:var(--lift),var(--edge);font-weight:500;font-size:14px;white-space:nowrap;transition:background-color .15s,box-shadow .15s,transform .12s var(--ease),filter .15s}
.btn:hover{box-shadow:var(--lift-hi),var(--edge)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 1px 0 rgb(255 255 255 / .14)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--danger);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 35%,transparent)}
.btn.danger:hover{background:var(--danger-soft)}
.btn.danger.armed{background:var(--danger);color:var(--surface)}
.btn.ghost{background:transparent;box-shadow:none;color:var(--muted)}
.btn.ghost:hover{background:var(--sunk);color:var(--ink)}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-s);border:0;background:transparent;color:var(--muted);transition:background-color .15s,color .15s}
.icon-btn:hover{background:var(--sunk);color:var(--ink)}
.icon-btn[aria-pressed="true"]{color:var(--accent)}
.seg{display:inline-flex;padding:3px;background:var(--sunk);border-radius:var(--r-m);gap:2px;box-shadow:inset 0 1px 2px rgb(0 0 0 / .05)}
.seg button{border:0;background:transparent;padding:5px 13px;border-radius:var(--r-s);color:var(--muted);font-weight:500;font-size:13.5px;transition:background-color .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:var(--lift),var(--edge)}
.field{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--raised);transition:border-color .15s,box-shadow .15s}
.field::placeholder{color:var(--faint)}
.field:hover{border-color:var(--line-strong)}
.field:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select.field,input[type=date].field,input[type=time].field{background-color:var(--raised);color:var(--ink)}
label.lbl{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:4px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:5px;font-size:12px;font-weight:500;background:var(--sunk);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.late{background:var(--danger-soft);color:var(--danger)}
.chip.today{background:var(--accent-soft);color:var(--accent)}
.empty{padding:22px 20px;border:1.5px dashed var(--line);border-radius:var(--r-m);color:var(--muted);text-align:left;font-size:14px}
.empty b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* ---------- today ---------- */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-radius:var(--r-m);background:var(--warn-soft);color:var(--ink);margin-bottom:22px;font-size:14px}
.banner p{margin:0;flex:1;min-width:220px}
.today-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px}
.stack{display:flex;flex-direction:column;gap:34px;min-width:0}
.upnext{color:var(--muted);font-size:13.5px;margin:12px 0 0;text-wrap:pretty}
.tlink{color:var(--accent);font-weight:500;text-underline-offset:3px}
.agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.agenda li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.agenda li:last-child{border-bottom:1px solid var(--line)}
.agenda time{font:500 13px var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums;padding-top:2px}
.agenda .t{font-weight:500}
.agenda .n{color:var(--muted);font-size:13.5px}
.panel{background:var(--surface);border-radius:var(--r-l);padding:18px;box-shadow:var(--lift),var(--edge)}
.daily{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--accent) 70%,#fff 30%) 0%,transparent 55%),var(--accent);color:var(--accent-ink);border:0;border-radius:var(--r-l);padding:18px 20px;box-shadow:0 12px 28px -16px color-mix(in srgb,var(--accent) 80%,transparent);transition:transform .2s var(--ease),box-shadow .2s}
.daily:hover{transform:translateY(-1px);box-shadow:0 18px 34px -16px color-mix(in srgb,var(--accent) 85%,transparent)}
.daily:active{transform:scale(.99)}
.daily b{display:block;font:650 18px/1.2 var(--f-display)}
.daily span{font-size:13px;opacity:.85}
.daily .big{margin-left:auto;font:650 46px/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;opacity:.92}
.capture textarea{min-height:84px;resize:vertical}
.capture .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px;color:var(--faint);font-size:12.5px}
.recent{list-style:none;margin:0;padding:0}
.recent button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:8px 0;border-top:1px solid var(--line)}
.recent button:hover .t{color:var(--accent)}
.recent button:focus-visible{outline:2px solid var(--accent)}
.recent .t{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent .d{color:var(--faint);font-size:12.5px;white-space:nowrap}

/* ---------- notes ---------- */
.view.notes{display:grid;grid-template-columns:290px minmax(0,1fr);gap:0;padding:0;max-width:none;height:100%}
.nlist{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:color-mix(in srgb,var(--sunk) 45%,var(--bg))}
.nlist-head{padding:24px 14px 12px;display:flex;flex-direction:column;gap:12px}
.nlist-head .r{display:flex;align-items:center;justify-content:space-between}
.nlist-head h1{font-size:24px}
.nitems{list-style:none;margin:0;padding:6px;overflow:auto;flex:1;min-height:0}
.nitems li+li{margin-top:1px}
.nitem{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:9px 10px;border-radius:var(--r-s);transition:background-color .12s}
.nitem:hover{background:var(--sunk)}
.nitem:focus-visible{outline:2px solid var(--accent)}
.nitem[aria-current="true"]{background:var(--surface);box-shadow:var(--lift),var(--edge)}
.nitem[aria-current="true"] .t{color:var(--accent)}
.nl-empty{margin:10px}
.nitem .t{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nitem .t span{overflow:hidden;text-overflow:ellipsis}
.nitem .s{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.nitem .d{color:var(--faint);font-size:11.5px;margin-top:2px}
.pin-mark{color:var(--accent);flex:none}
.editor-wrap{min-width:0;overflow:auto;min-height:0}
.editor{max-width:72ch;margin-inline:auto;padding:20px max(16px,4vw) 96px}
.ed-bar{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.ed-bar .back{display:none}
.ed-title{width:100%;border:0;background:transparent;font:650 40px/1.08 var(--f-display);letter-spacing:-.035em;padding:0;margin:0}
.ed-title:focus-visible{outline:none}
.ed-title::placeholder{color:var(--faint)}
.ed-meta{color:var(--faint);font-size:12.5px;margin:6px 0 18px;font-variant-numeric:tabular-nums}
.ed-body{width:100%;min-height:55vh;border:0;background:transparent;resize:none;font:14.5px/1.75 var(--f-mono);padding:0;tab-size:2}
.ed-body:focus-visible{outline:none}
.prose{font:18px/1.65 var(--f-read);font-optical-sizing:auto;word-break:break-word;text-wrap:pretty}
.prose ul.tasks,.prose li{font-size:inherit}
.prose>*:first-child{margin-top:0}
.prose h1,.prose h2,.prose h3{font-family:var(--f-display);letter-spacing:-.015em;line-height:1.25;margin:1.4em 0 .4em;text-transform:none;color:var(--ink)}
.prose h1{font-size:26px;font-weight:650}
.prose h2{font-size:21px;font-weight:650}
.prose h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.prose p{margin:.6em 0}
.prose ul,.prose ol{padding-left:1.4em;margin:.5em 0}
.prose ul.tasks{list-style:none;padding-left:.2em}
.prose ul.tasks li{display:flex;gap:9px;align-items:flex-start}
.prose ul.tasks input{margin-top:.45em;accent-color:var(--accent);width:15px;height:15px}
.prose ul.tasks li.done span{color:var(--faint);text-decoration:line-through}
.prose blockquote{margin:1em 0;padding:.1em 0 .1em 1em;border-left:2px solid var(--accent);color:var(--muted);font-style:italic}
.prose code{font:.8em var(--f-mono);background:var(--sunk);padding:.1em .35em;border-radius:4px}
.prose pre{background:var(--sunk);padding:12px 14px;border-radius:var(--r-m);overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.6em 0}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose a.wl{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.prose a.wl:hover{border-bottom-color:var(--accent)}
.prose a.wl.missing{color:var(--muted);border-bottom-style:dashed}
.tag{font-family:var(--f-body);color:var(--accent);background:var(--accent-soft);padding:0 5px;border-radius:4px;font-size:.88em;cursor:pointer;border:0}
.backlinks{margin-top:44px;padding-top:16px;border-top:1px solid var(--line)}
.backlinks ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.backlinks button{border:0;background:var(--surface);box-shadow:var(--lift),var(--edge);border-radius:var(--r-s);padding:4px 10px;font-size:13.5px;transition:color .15s,box-shadow .15s}
.backlinks button:hover{color:var(--accent);box-shadow:var(--lift-hi),var(--edge)}
.backlinks p{color:var(--faint);font-size:13.5px;margin:0}
.no-note{padding:60px max(16px,4vw);color:var(--muted);max-width:44ch}
.no-note b{display:block;font:650 22px/1.2 var(--f-display);color:var(--ink);margin-bottom:6px}

/* ---------- tasks ---------- */
.quick{display:flex;gap:8px;margin-bottom:22px}
.quick .field{flex:1;min-width:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters{gap:4px}
.filters button{border:0;background:transparent;border-radius:var(--r-s);padding:5px 10px;font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;transition:background-color .15s,color .15s}
.filters button:hover{background:var(--sunk);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.tfilters{margin-bottom:20px}
.tgroup{margin-bottom:26px}
.tgroup h3 .c{color:var(--faint);font-family:var(--f-mono);margin-left:6px;letter-spacing:0}
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.task{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);min-width:0;border-radius:var(--r-xs);transition:background-color .12s}
.task:hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.task input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:none;margin:0}
.task .tt{all:unset;cursor:text;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 0}
.task .tt:focus-visible{outline:2px solid var(--accent)}
.task.done .tt{color:var(--faint);text-decoration:line-through}
.task .tedit{flex:1;min-width:0;padding:3px 6px;border:1px solid var(--accent);border-radius:4px;background:var(--surface)}
.date-chip{border:1px solid transparent;background:var(--sunk);color:var(--muted);border-radius:5px;padding:1px 6px;font-size:12.5px;font-variant-numeric:tabular-nums;width:auto;max-width:138px;cursor:pointer}
.date-chip.empty-d{color:var(--faint);background:transparent;border-color:var(--line)}
.date-chip.late{background:var(--danger-soft);color:var(--danger)}
.date-chip.today{background:var(--accent-soft);color:var(--accent)}
.prio{border:0;background:transparent;width:24px;height:24px;border-radius:5px;display:grid;place-items:center;flex:none}
.prio i{display:block;width:9px;height:9px;border-radius:2px;background:var(--line-strong)}
.prio[data-p="high"] i{background:var(--danger)}
.prio[data-p="med"] i{background:var(--warn)}
.prio:hover{background:var(--sunk)}
.task .del{opacity:0;transition:opacity .15s}
.task:hover .del,.task:focus-within .del{opacity:1}

/* ---------- kanban ---------- */
.view.wide{max-width:none}
.ktools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:16px}
.ktools .field{max-width:280px}
.kb{display:flex;gap:14px;align-items:stretch;min-height:min(560px,calc(100dvh - 260px));overflow-x:auto;padding:2px 2px 18px;margin:0 -2px;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.kcol{flex:0 0 296px;min-width:0;background:var(--col);border-radius:var(--r-l);padding:10px 8px 8px;box-shadow:var(--edge);display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;transition:box-shadow .15s}
.kcol.over{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--col))}
.kh{position:relative;min-height:32px;display:flex;align-items:center;gap:4px;padding:0 0 2px 4px}
.kh h2{margin:0;flex:1;min-width:0;display:flex;align-items:center;gap:6px;color:var(--accent)}
.kname{all:unset;cursor:text;font:600 14px var(--f-body);color:var(--ink);padding:3px 4px;border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kname:hover{background:var(--surface)}
.kname:focus-visible{outline:2px solid var(--accent)}
.kname-in{flex:1;min-width:0;font:600 14px var(--f-body);padding:3px 6px;border:1px solid var(--accent);border-radius:5px;background:var(--surface)}
.kcount{font:500 12px var(--f-mono);color:var(--faint);font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:var(--r-xs)}
.kcount.full{background:var(--warn-soft);color:var(--warn)}
.kcount.over{background:var(--danger-soft);color:var(--danger)}
.kmenu{position:absolute;right:0;top:36px;z-index:var(--z-nav);width:220px;background:var(--raised);border:0;border-radius:var(--r-m);box-shadow:var(--shadow),var(--edge);padding:6px;display:flex;flex-direction:column;gap:2px}
.kmenu button{all:unset;cursor:pointer;padding:7px 9px;border-radius:var(--r-s);font-size:14px}
.kmenu button:hover:not(:disabled){background:var(--sunk)}
.kmenu button:focus-visible{outline:2px solid var(--accent)}
.kmenu button:disabled{color:var(--faint);cursor:default}
.kmenu .dz{color:var(--danger)}
.kmenu{animation:pop .12s ease-out;transform-origin:top right}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(-3px)}to{opacity:1;transform:none}}
.kmenu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.kmenu .wip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 4px 4px 9px;font-size:14px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.kmenu .stepper button{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;color:var(--muted);font-size:16px;line-height:1;border-radius:0}
.kmenu .stepper button:hover:not(:disabled){background:var(--sunk);color:var(--ink)}
.kmenu .stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:44px;text-align:center;font:500 13px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.kmenu p{margin:4px 9px 6px;font-size:12.5px;color:var(--faint)}
.kcards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;min-height:6px}
.kcard{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;width:100%;background:var(--raised);border-radius:var(--r-m);padding:11px 12px;cursor:grab;box-shadow:var(--lift),var(--edge);transition:box-shadow .18s var(--ease),transform .18s var(--ease);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kcard:hover{box-shadow:var(--lift-hi),var(--edge);transform:translateY(-1px)}
.kcard:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kcard .kt{font-size:14.5px;font-weight:500;line-height:1.4;word-break:break-word}
.kcard.done{opacity:.72}
.kcard.done .kt{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.km{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.km .chip{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.km svg.i{width:13px;height:13px}
.kp{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--muted)}
.kp i{width:8px;height:8px;border-radius:2px;background:var(--line-strong)}
.kp[data-p="high"]{color:var(--danger)}
.kp[data-p="high"] i{background:var(--danger)}
.kp[data-p="med"] i{background:var(--warn)}
.kmore{color:var(--faint);display:inline-flex}
li.kplace{border:1.5px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--r-m);background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
li.kplace .kcard{visibility:hidden}
.kghost{position:fixed;left:0;top:0;z-index:var(--z-dialog);pointer-events:none;box-shadow:0 22px 44px -14px rgb(10 30 22 / .5),inset 0 0 0 1.5px var(--accent);cursor:grabbing}
.kempty{margin:0;padding:10px 4px;text-align:center;font-size:12.5px;color:var(--faint)}
.kadd{margin-top:2px}
.kadd .field{background:transparent;border-color:transparent;padding:7px 10px;font-size:14px}
.kadd .field::placeholder{color:var(--muted)}
.kadd .field:hover{background:color-mix(in srgb,var(--raised) 60%,transparent)}
.kadd .field:focus-visible{background:var(--raised)}
.kcol-add{align-self:flex-start;flex:0 0 200px;display:flex;align-items:center;gap:8px;justify-content:center;padding:12px;border:1.5px dashed var(--line);border-radius:var(--r-l);background:transparent;color:var(--muted);font-weight:500;transition:border-color .15s,color .15s}
.kcol-add:hover{border-color:var(--accent);color:var(--accent)}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}
/* card drawer */
dialog.drawer{margin:0 0 0 auto;height:100%;max-height:100%;width:min(500px,100%);max-width:100%;border:0;box-shadow:var(--shadow);padding:0;background:var(--surface);color:var(--ink);overscroll-behavior:contain;animation:slide .2s ease-out}
dialog.drawer::backdrop{background:rgb(10 20 16 / .3)}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.dform{display:flex;flex-direction:column;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;min-height:100%}
.dbar{display:flex;align-items:center;gap:8px}
.dbar select{width:auto;max-width:200px;padding:6px 10px;font-weight:500}
.dtitle{width:100%;border:0;background:transparent;resize:none;font:650 24px/1.25 var(--f-display);letter-spacing:-.015em;padding:0;overflow:hidden}
.dtitle:focus-visible{outline:none;box-shadow:0 2px 0 var(--accent)}
.dgrid{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px 12px;align-items:center}
.dgrid>label{font-size:13px;color:var(--muted);font-weight:500}
.dnote{display:flex;gap:6px;min-width:0}
.dnote select{flex:1;min-width:0}
.dbody-wrap{display:flex;flex-direction:column;flex:1}
.dbody{min-height:180px;resize:vertical;line-height:1.6;flex:1}
.dfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--faint);margin-top:auto}

/* ---------- categories ---------- */
.cat{display:inline-flex;align-items:center;gap:5px;padding:1px 7px 1px 6px;border-radius:5px;font-size:12px;font-weight:500;white-space:nowrap;background:color-mix(in srgb,var(--cc) 15%,transparent);color:color-mix(in srgb,var(--cc) 72%,var(--ink));max-width:150px;overflow:hidden;text-overflow:ellipsis;flex:none}
.cat i,.cdot{width:7px;height:7px;border-radius:50%;background:var(--cc);flex:none;display:inline-block}
.filters.cats button{display:inline-flex;align-items:center;gap:6px}
.filters.cats .cdot{box-shadow:0 0 0 1.5px var(--surface)}
.catrow{margin:-8px 0 20px}
dialog.catdlg{border:0;border-radius:var(--r-l);padding:0;width:min(460px,calc(100% - 32px));background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -20px rgb(0 0 0 / .45);overscroll-behavior:contain}
dialog.catdlg::backdrop{background:rgb(10 20 16 / .35)}
.cd-in{padding:18px}
.cd-head{display:flex;align-items:center;justify-content:space-between}
.cd-head h2{margin:0;font:650 21px/1.2 var(--f-display);letter-spacing:-.015em}
.cd-sub{margin:4px 0 16px;color:var(--muted);font-size:13.5px}
.cd-sub kbd{font:500 12px var(--f-mono);background:var(--sunk);padding:1px 5px;border-radius:4px}
.cd-list{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.cd-list li{display:flex;align-items:center;gap:8px}
.cd-list .field{flex:1;min-width:0;padding:6px 10px}
.swatch{width:30px;height:30px;border-radius:8px;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);background:var(--cc);flex:none;transition:transform .1s}
.swatch:active{transform:scale(.94)}
.cd-n{font-size:12px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.cd-empty{color:var(--muted);font-size:14px;padding:4px 0}
.cd-add{display:flex;gap:8px}
.cd-add .field{flex:1;min-width:0}

/* ---------- account + sign in ---------- */
.acct{display:flex;align-items:center;gap:9px;padding:8px 6px 0 8px;min-width:0}
.acct .av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--accent);color:var(--accent-ink);font:650 14px/1 var(--f-display)}
.acct .av.local{background:var(--surface);color:var(--muted);box-shadow:var(--lift)}
.acct .av svg.i{width:15px;height:15px}
.acct .who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.acct .who b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .who small{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .btn{padding:4px 8px;font-size:13px}
.collapsed .acct{flex-direction:column;padding:8px 0 0}
.collapsed .acct .who,.collapsed .acct .btn{display:none}
.cl-idle{max-width:320px;margin:4px 0 14px}
.login{height:100%;overflow:auto;background:var(--bg)}
.lg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100%}
.lg-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:36px max(24px,4vw) 32px;background:radial-gradient(90% 70% at 0% 100%,color-mix(in srgb,var(--accent) 40%,transparent) 0%,transparent 70%),radial-gradient(70% 60% at 100% 0%,color-mix(in srgb,var(--accent) 22%,transparent) 0%,transparent 70%),var(--sunk);border-right:1px solid var(--line)}
.lg-side .brand{padding:0}
.lg-side .brand b{font-size:20px}
.lg-pitch h2{font:650 clamp(30px,3.4vw,46px)/1.04 var(--f-display);letter-spacing:-.035em;margin:0 0 26px;max-width:15ch;text-wrap:balance}
.lg-pitch ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:var(--muted)}
.lg-pitch li{display:flex;gap:10px;align-items:baseline}
.lg-pitch li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none;transform:translateY(-2px)}
.lg-pitch li b{color:var(--ink);font-weight:600}
.lg-foot{margin:0;font-size:13px;color:var(--faint);max-width:44ch}
.lg-foot code{font:12px var(--f-mono);background:var(--surface);padding:1px 5px;border-radius:var(--r-xs);color:var(--muted)}
.lg-main{display:grid;place-items:center;padding:48px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
.lg-form{width:min(440px,100%);display:grid;gap:16px}
.lg-form h1{font-size:34px}
.lg-sub{margin:-8px 0 4px;color:var(--muted)}
.lg-msg{margin:0;padding:10px 12px;border-radius:var(--r-s);background:var(--accent-soft);color:var(--ink);font-size:14px}
.lg-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lg-hint{margin:6px 0 0;font-size:12.5px;color:var(--faint)}
.lg-hint a{color:var(--accent);font-weight:500;text-underline-offset:3px}
.lg-go{justify-content:center;padding:10px 14px;font-size:15px}
.lg-alt{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px}
.lg-alt::before,.lg-alt::after{content:"";flex:1;border-top:1px solid var(--line)}
.lg-local{justify-content:center}
.lg-busy{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;color:var(--muted)}
.idlewarn{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:var(--z-dialog);display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 16px;border-radius:var(--r-m);background:var(--raised);box-shadow:var(--shadow),inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent);font-size:14px;animation:rise .2s var(--ease)}
.idlewarn b{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--warn)}

/* ---------- calendar ---------- */
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.cal{border-radius:var(--r-l);overflow:hidden;background:var(--surface);box-shadow:var(--lift),var(--edge)}
.dow,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dow div{padding:9px 10px;font-size:12.5px;font-weight:500;color:var(--faint);border-bottom:1px solid var(--line)}
.day{all:unset;box-sizing:border-box;cursor:pointer;min-height:104px;padding:6px 7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0;transition:background-color .12s}
.day:nth-child(7n){border-right:0}
.day.wk{background:color-mix(in srgb,var(--sunk) 40%,transparent)}
.day:hover{background:var(--sunk)}
.day:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.day .num{font:500 13px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.day.out .num{color:var(--faint);opacity:.6}
.day.is-today .num{background:var(--accent);color:var(--accent-ink)}
.day[aria-pressed="true"]{background:var(--accent-soft)}
.ev{font-size:12px;line-height:1.4;padding:1px 6px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ev .evt{font:500 11px var(--f-mono);color:var(--accent)}
.ev.task-ev{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.ev.task-ev.d{text-decoration:line-through;opacity:.7}
.more{font-size:11.5px;color:var(--faint);padding-left:5px}
.dayp h2{font:650 21px/1.2 var(--f-display);margin:0 0 14px;letter-spacing:-.015em}
.dayp ul{list-style:none;padding:0;margin:0 0 16px}
.dayp li{border-top:1px solid var(--line)}
.dayp li:last-child{border-bottom:1px solid var(--line)}
.dayp .evb{all:unset;cursor:pointer;display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;width:100%;box-sizing:border-box;padding:9px 2px}
.dayp .evb:hover .t{color:var(--accent)}
.dayp .evb:focus-visible{outline:2px solid var(--accent)}
.dayp time{font:500 12.5px var(--f-mono);color:var(--accent);padding-top:2px}
.dayp .t{font-weight:500;word-break:break-word}
.dayp .n{display:block;color:var(--muted);font-size:13px}
.dayp .struck{text-decoration:line-through;color:var(--faint)}
.dayp .nothing{color:var(--muted);margin:0 0 16px;font-size:14px}
.dayp .daynote{margin:-4px 0 16px}
.dayp .daynote .btn{padding-left:0}
.evform h3{margin:0}
.ferr{color:var(--danger);margin:0;font-size:13px}
.dayp .tk{display:flex;align-items:center;gap:9px;padding:8px 2px}
.dayp .tk input{accent-color:var(--accent);width:16px;height:16px}
.evform{display:grid;gap:10px}
.evform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.evform .acts{display:flex;gap:8px;flex-wrap:wrap}
.cal-nav{display:flex;gap:6px}

/* ---------- data ---------- */
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.data-grid .panel p{margin:0 0 12px;color:var(--muted);font-size:14px;max-width:62ch}
.data-grid .acts{display:flex;flex-wrap:wrap;gap:8px}
.data-grid .panel.cloud{grid-column:1/-1}
.cloudform{display:grid;gap:12px;max-width:640px}
.cloudform .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cl-more summary{cursor:pointer;color:var(--muted);font-size:13.5px;font-weight:500;width:max-content}
.cl-more .two{margin-top:10px}
.data-grid .panel .cl-help{font-size:12.5px;color:var(--faint);margin:0}
.data-grid .panel .cl-state{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.cl-state.bad{color:var(--danger)}
.cl-conflict{display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.cl-conflict .acts{margin:0}
.cl-bk{max-width:460px;margin:0 0 14px}
.cl-bkrow{display:flex;gap:8px}
.cl-bkrow .field{flex:1;min-width:0}
.cl-bk .cl-help{margin-top:6px}
.lg-pwrow{display:flex;gap:6px}
.lg-pwrow .field{flex:1;min-width:0}
.status .cl-line.busy{color:var(--warn)}
.status .cl-line.bad{color:var(--danger)}
.stats{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.stats div{font-size:12.5px;color:var(--muted)}
.stats b{display:block;font:650 32px/1.05 var(--f-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.note-box{font-size:13px;color:var(--warn);background:var(--warn-soft);border-radius:var(--r-s);padding:8px 10px;margin:0 0 12px}
.sql{margin-top:18px}
.kbdhint{color:var(--faint);font-size:12.5px;margin-left:6px}
.sql textarea{font:13.5px/1.5 var(--f-mono);min-height:96px;resize:vertical}
.sql .ex{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.sql .ex button{border:1px solid var(--line);background:transparent;border-radius:5px;font:12px var(--f-mono);padding:2px 8px;color:var(--muted)}
.sql .ex button:hover{border-color:var(--accent);color:var(--ink)}
.res{margin-top:12px;overflow-x:auto;max-height:340px;border:1px solid var(--line);border-radius:var(--r-m)}
.res table{border-collapse:collapse;font:12.5px var(--f-mono);width:100%;font-variant-numeric:tabular-nums}
.res th,.res td{padding:5px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
.res th{position:sticky;top:0;background:var(--sunk);font-weight:500;color:var(--muted)}
.res .msg{padding:10px 12px;font:13px var(--f-mono);color:var(--muted)}
.res .msg.err{color:var(--danger)}

/* ---------- palette & toast ---------- */
dialog.pal{border:0;border-radius:var(--r-l);padding:0;width:min(620px,calc(100% - 32px));background:var(--raised);color:var(--ink);box-shadow:0 30px 80px -20px rgb(0 0 0 / .45);margin-top:12vh;overscroll-behavior:contain}
dialog.pal::backdrop,dialog.catdlg::backdrop,dialog.drawer::backdrop{background:rgb(10 20 16 / .38);backdrop-filter:blur(2px)}
dialog.pal[open]{animation:pop .16s var(--ease)}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.pal-in input{flex:1;border:0;background:transparent;font-size:16px;color:var(--ink);min-width:0}
.pal-in input:focus-visible{outline:none}
.pal ul{list-style:none;margin:0;padding:6px;max-height:min(420px,55vh);overflow:auto}
.pal li button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-s)}
.pal li button[aria-selected="true"]{background:var(--accent-soft)}
.pal .k{font:500 11.5px var(--f-mono);color:var(--faint);width:52px;flex:none}
.pal .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal .s{color:var(--faint);font-size:12.5px;white-space:nowrap}
.pal .none{padding:14px 12px;color:var(--muted)}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast);width:max-content;max-width:calc(100% - 32px)}
.toast{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg);padding:9px 10px 9px 14px;border-radius:var(--r-m);font-size:14px;font-weight:500;box-shadow:var(--shadow);animation:rise .22s var(--ease)}
.toast button{border:0;background:transparent;color:var(--accent-soft);font-weight:600;padding:2px 6px;border-radius:4px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sk{background:linear-gradient(90deg,var(--sunk) 0%,color-mix(in srgb,var(--sunk) 55%,var(--bg)) 50%,var(--sunk) 100%);background-size:200% 100%;border-radius:var(--r-s);animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.sk-h{height:36px;width:min(420px,70%)}
.sk-s{height:14px;width:min(520px,85%);margin:14px 0 34px}
.sk-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px}
.sk-b{height:16px;width:120px;margin-bottom:14px}
.sk-r{height:44px;margin-bottom:8px}
.sk-c{height:84px;border-radius:var(--r-l);margin-bottom:28px}

/* ---------- phone ---------- */
@media (max-width:820px){
  .app,.app.collapsed{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .sk-grid{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .topbar{display:flex;align-items:center;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--sunk)}
  .topbar .search-btn{width:auto;margin-left:auto}
  .topbar .sdot{margin-left:4px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--sunk)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:11px;font-weight:500;color:var(--faint);text-decoration:none}
  .tabbar a[aria-current="page"]{color:var(--accent)}
  .view{padding:20px 16px 48px}
  .lg{grid-template-columns:minmax(0,1fr)}
  .lg-side{gap:18px;padding:24px 16px 22px;border-right:0;border-bottom:1px solid var(--line)}
  .lg-pitch h2{font-size:28px;margin-bottom:14px}
  .lg-pitch ul,.lg-foot{display:none}
  .lg-main{place-items:start center;padding-top:28px}
  .lg-form .two{grid-template-columns:1fr}
  h1{font-size:28px}
  .prose{font-size:17px}
  .today-grid,.cal-wrap{grid-template-columns:minmax(0,1fr)}
  .view.notes{grid-template-columns:minmax(0,1fr)}
  .view.notes.has-note .nlist{display:none}
  .view.notes:not(.has-note) .editor-wrap{display:none}
  .nlist{border-right:0}
  .ed-bar .back{display:inline-grid}
  .ed-title{font-size:30px}
    .day{min-height:58px;padding:4px}
  .day .ev{display:none}
  .day .dots{display:flex;gap:3px;flex-wrap:wrap;padding-left:3px}
  .day .dots i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
  .day .dots i.tk{background:var(--line-strong)}
  .more{display:none}
  .task .del{opacity:1}
  .kcol{flex-basis:min(84vw,320px)}
  .task .cat{padding:0;background:none;font-size:0;gap:0}
  .task .cat i{width:9px;height:9px}
  .kcol-add{flex-basis:160px}
  .ktools .field{max-width:none}
}
@media (min-width:821px){.day .dots{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}