/* One look across every app, loaded last. The shape scale, the type ramp and the control sizes, said once:
     outer surfaces (windows, widgets, dialogs)        20px   from --r-win / --r-6
     section cards (stats, charts, columns, notes)      20px
     list rows and cards inside them                   16px
     menu items, small tiles                            12px
     tags                                                8px
     buttons, text fields, chips, segmented controls   pill, 40px tall (32px when compact)
     page titles 32px bold; section titles 15px bold; body 14 to 15px; one family (Google Sans), numbers tabular in lists */

/* page titles */
.td-head h2,.sna-head h2,.lb2-h h2,.sb2-h h2,.st-h h2{font-size:32px;font-weight:var(--fw-b,700);letter-spacing:-.02em;line-height:1.12}
@media (max-width:760px){.td-head h2,.sna-head h2,.lb2-h h2,.sb2-h h2,.st-h h2{font-size:26px}}

/* buttons: one height, one padding, one weight */
.pl-btn,.sna-new,.sna-arch,.ca-b,.wd-btn,.btn{min-height:40px;padding-inline:18px;border-radius:var(--r-pill);font-size:var(--fs-3,14px);font-weight:var(--fw-b,600);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pl-btn svg,.sna-new svg,.sna-arch svg,.ca-b svg{flex:none}

/* text fields */
.sna-search input,.lx-i input,.wd-in,.qa-in:not(textarea){min-height:40px;box-sizing:border-box;border-radius:var(--r-pill)}
.lx-i input{border-radius:var(--r-3,12px)}

/* section cards share one corner and one hairline */
.sb2-tile,.sb2-card,.lb2-yr,.st-sum,.wh-card,.kb-col{border-radius:var(--r-6,20px)}
.sna-grid .sn{border-radius:var(--r-6,20px)}

/* rows and cards inside sections */
.td-row,.kb-card,.sb2-row,.wh-rc,.wh-db,.lb2-cur{border-radius:var(--r-5,16px)}

/* menus: items 12, the menu itself 16 */
.ctx,.wd-pop,.wd-menu{border-radius:var(--r-5,16px)}
.ctx button,.wd-mi{border-radius:var(--r-3,12px)}

/* tags stay 8; status and list tags in rows a little smaller */
.wd-opt{border-radius:8px}

/* numbers that line up */
.td-li em,.kb-h em,.sna-tags em,.ch-r b,.sb2-a b{font-variant-numeric:tabular-nums}

/* the handwriting font is only where it is chosen on a board */
.sb-cap,.sb-vcap{font-family:var(--font)}

/* ---------- motion: quick, soft and on the compositor ---------- */
/* windows grow out of the icon that opened them and settle (no overshoot), and leave a little faster than they came */
@keyframes win-arrive{from{opacity:0;transform:scale(.72)}35%{opacity:1}}
@keyframes win-leave{to{opacity:0;transform:translateY(6px) scale(.97)}}
.win.opening,.win.restoring{animation:win-arrive 320ms cubic-bezier(.05,.7,.1,1)}
.win.closing{animation:win-leave 170ms cubic-bezier(.3,0,.8,.15) forwards}
/* size changes slide with a transform (js/os-windows.mjs flipWin), never by laying the window out on every frame */
.win.resizing-anim{transition:none!important}
/* every button answers the press the same way */
:where(.pl-btn,.sna-new,.sna-arch,.ca-b,.ca-add,.wd-btn,.btn,.ba-ib,.ba-new,.lx-auto,.ca-tf,.qa-go){transition:background-color 150ms var(--ease),color 150ms var(--ease),box-shadow 200ms var(--ease),transform 150ms var(--ease)}
:where(.pl-btn,.sna-new,.sna-arch,.ca-b,.ca-add,.wd-btn,.btn,.ba-ib,.ba-new,.ca-tf,.qa-go):active{transform:scale(.97)}
/* menus and popovers open from where they were asked for */
.ctx{animation-timing-function:cubic-bezier(.05,.7,.1,1)}
@media (prefers-reduced-motion:reduce){.win.opening,.win.restoring,.win.closing{animation-duration:1ms}}