/* ==========================================================================================================================
   SYSTEM COMPONENTS. Loaded last (app stylesheets that load later are inserted before it), so these are the final word
   on how the shared pieces look and move. Values come only from css/tokens.css; the rules behind them are written there.
   ========================================================================================================================== */

/* ---------- foundation ---------- */
html{-webkit-tap-highlight-color:transparent;text-size-adjust:100%}
body{font-family:var(--font);font-optical-sizing:auto;font-feature-settings:normal;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
code,kbd,pre,samp{font-family:var(--mono)}
b,strong{font-weight:var(--fw-b)}
::selection{background:color-mix(in srgb,var(--ink) 18%,transparent)}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 20%,transparent) transparent}
::placeholder{color:var(--ink3);opacity:1}
/* focus: one ring everywhere, ink with a paper gap, only for the keyboard */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible,[contenteditable] *:focus-visible,.rb-e:focus-visible,.rb-cell:focus-visible{outline:0!important;outline-offset:0}
/* every control changes colour quickly and never moves on its own (the ripple is the press) */
button,a,[role=button],.btn,.chip{transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--ink)}
a{color:var(--ink);text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent);text-underline-offset:.18em}
hr{border:0;border-top:1px solid var(--line)}

/* ---------- the desk ---------- */
#desk{background:var(--bg)}
.wall{background:var(--bg)}
.wall .wp{position:absolute;inset:0;display:block;background:var(--bg)}
/* dot grid: the paper of a planner. Dots on a 24px grid at 13% ink. */
.wall .wp-dots{background-image:radial-gradient(circle at 1.25px 1.25px,var(--ink) .9px,transparent 1.3px);background-size:28px 28px;background-position:14px 14px}
/* ruled: hairlines every 32px, like Tweek's week */
.wall .wp-ruled{background-image:linear-gradient(to bottom,transparent 39px,var(--ink) 39px,var(--ink) 40px);background-size:100% 40px;opacity:.16}
/* wallpapers are still: nothing moves behind the work */
.wall *,.walls button svg *{animation:none!important}
.walls button .wp{position:absolute;inset:0;display:block;background:var(--bg)}
.walls button .wp-dots{background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 22%,transparent) 1px,transparent 1.4px);background-size:10px 10px}
.walls button .wp-ruled{background-image:linear-gradient(to bottom,transparent 11px,color-mix(in srgb,var(--ink) 12%,transparent) 11px,color-mix(in srgb,var(--ink) 12%,transparent) 12px);background-size:100% 12px}
/* grain: a still texture, no blending (blending repaints the whole screen on every frame) */
.grain{mix-blend-mode:normal;opacity:calc(var(--grain,.45) * .12)}
:root[data-theme=dark] .grain{opacity:calc(var(--grain,.45) * .2);filter:invert(1)}

/* ---------- top bar ---------- */
.topbar{padding:10px 14px;gap:6px;font-size:var(--fs-4);font-weight:var(--fw-m)}
.pill{background:var(--surface);color:var(--ink);border:0;box-shadow:0 0 0 1px var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 14px;height:40px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font-weight:var(--fw-m)}
.pill:hover{background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
#who{font-weight:var(--fw-b)}
.status{gap:10px}.status #tTime{font-weight:var(--fw-b);font-variant-numeric:tabular-nums}
.tb-ic{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;border:0;background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.tb-ic:hover{background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
.tb-ic[aria-expanded=true],.status[aria-expanded=true]{background:var(--primary);color:var(--on-primary);box-shadow:none}
.tb-ic svg{width:20px;height:20px}
.tb-dot{background:var(--danger)!important;box-shadow:0 0 0 2px var(--surface)}
.tb-n{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 2px var(--surface);font-weight:var(--fw-b)}

/* ---------- app icons: one ink glyph on a paper tile (Android themed icons) ---------- */
:root{--icon-tile:var(--surface);--icon-ink:var(--ink)}
.ico.mono{color:var(--icon-ink)}
.ico.mono .ictile{fill:var(--icon-tile);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.bar .ico.mono .ictile,.ow-pln .ico.mono .ictile{fill:transparent;stroke:none}
.launcher,.shelf,.qs,.spot,.ae-lib,.lgrid{--icon-tile:var(--surface2)}
.launcher .ico.mono .ictile,.shelf .ico.mono .ictile,.spot .ico.mono .ictile{stroke:none}
.ico.lay,.ico.photo{filter:grayscale(1)}
/* desktop icons: hover is a state layer behind the icon and its name, nothing jumps */
.dicon{border-radius:var(--r-5);font-size:var(--fs-3);font-weight:var(--fw-m);color:var(--ink);transition:background-color var(--dur-2) var(--ease)}
.dicon .lb,.icons .dicon .lb{font-weight:var(--fw-m);text-shadow:none;background:none;padding:0 2px;line-height:1.25}
.icons .dicon:hover,.lgrid .dicon:hover{background:var(--st-hover)}
.dicon .ico,.dicon:hover .ico,.dicon:focus-visible .ico{transform:none}
.dicon:hover .ico.photo{transform:none}
.dicon:active{background:var(--st-press)}
#desk[data-vivid] .icons .dicon .lb{color:var(--ink);text-shadow:none}

/* ---------- home widgets: flat paper cards on the desk ---------- */
.wg{background:var(--surface);border:0;box-shadow:0 0 0 1px var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--r-6);padding:14px 16px 12px;animation:sysFade var(--dur-4) var(--ease-out) both;transition:box-shadow var(--dur-2) var(--ease)}
.wg:nth-child(n){animation-delay:0ms}
.wg:hover{box-shadow:0 0 0 1px var(--outline)}
.wg.bare,.wg.bare:hover{background:none;box-shadow:none}
.wg-h{font-size:var(--fs-3);color:var(--ink2);gap:8px}
.wg-h b{font-weight:var(--fw-b);color:var(--ink);font-size:var(--fs-4)}
.wg-h svg{color:var(--ink)}
.wg-add,.wg-qs select,.wg-fc select{background:var(--surface2);border-radius:var(--r-pill)}
.wg-add:focus{background:var(--surface2);box-shadow:0 0 0 1.5px var(--ink)}
.wg-t,.wg-u{border-radius:var(--r-4)}
.wg-t:hover,.wg-u:hover{background:var(--st-hover)}
.wg-tt b{font-weight:var(--fw-m);font-size:var(--fs-4)}
.wg-tt small{font-size:var(--fs-2)}
.wg-tt small.today{color:var(--ink);font-weight:var(--fw-m)}
.wg-star{color:var(--ink)}
.wg-snb button{background:var(--surface2);color:var(--ink);font-weight:var(--fw-m)}
.wg-snb button:hover{background:var(--surface3)}
.wg-mh b{font-weight:var(--fw-b);font-size:var(--fs-4)}
.wg-mg i.h{font-weight:var(--fw-m);color:var(--ink3)}
.wg-mg button{font-variant-numeric:tabular-nums}
.wg-mg button.today{font-weight:var(--fw-b)}
.wg-ft{font-weight:var(--fw-b);letter-spacing:-.02em}
.wg-fb{font-weight:var(--fw-b)}
.wg-st b,.wg-sb .big{font-weight:var(--fw-b)}
.wg-st div{background:var(--surface2)}
.wg-pg b,.wg-lb .b b,.wg-mt b{font-weight:var(--fw-m)}
.wg-art{background:var(--surface2)}
.wg-mc button:hover{background:var(--st-hover)}
/* the clock: a big bold time on its shape */
.wclock .h{font-weight:var(--fw-b);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.wclock .d{font-weight:var(--fw-m);color:var(--ink2)}
.wclock svg path{fill:var(--surface);stroke:var(--line);stroke-width:.6;vector-effect:non-scaling-stroke}

/* ---------- windows ---------- */
.win{background:var(--surface);border:0;border-radius:var(--r-win);box-shadow:var(--e3)}
.win:not(.top){box-shadow:var(--e2)}
.win.max{border-radius:var(--r-win-max)}
.win .bar .ttl{font-size:var(--fs-4);font-weight:var(--fw-b);letter-spacing:0}
.win:not(.top) .bar{opacity:1}.win:not(.top) .bar .ttl,.win:not(.top) .bar .ico{opacity:.5}
.wb{width:32px;height:32px;border-radius:50%;background:transparent;color:var(--ink2)}
.wb:hover{background:var(--st-hover);color:var(--ink)}
.wb:active{background:var(--st-press)}
/* close is the only red thing in a window: red means "this goes away" */
.wb.x:hover,.ov-c:hover{background:var(--danger);color:#fff}
.wb svg{width:14px;height:14px}
.rz.se::after{border-color:var(--outline)}
/* motion: a window grows out of what opened it and settles; it leaves faster than it came */
.win.popin{animation:sysWinIn var(--dur-5) var(--ease-out)}
.win.opening,.win.restoring{animation:sysWinGrow var(--dur-5) var(--ease-out)}
.win.closing{animation:sysWinOut var(--dur-2) var(--ease-in) forwards;pointer-events:none}
.win.minimizing{animation:win-min var(--dur-4) var(--ease-in) forwards;pointer-events:none}
.win.resizing-anim{transition:left var(--dur-5) var(--ease),top var(--dur-5) var(--ease),width var(--dur-5) var(--ease),height var(--dur-5) var(--ease),border-radius var(--dur-5) var(--ease)}
@keyframes sysWinIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes sysWinGrow{from{opacity:0;transform:scale(.6)}50%{opacity:1}}
@keyframes sysWinOut{to{opacity:0;transform:scale(.97)}}
@keyframes sysFade{from{opacity:0}}

/* ---------- shelf ---------- */
.shelf{background:var(--surface);border:0;box-shadow:var(--e2);-webkit-backdrop-filter:none;backdrop-filter:none;padding:8px;height:72px;gap:4px;align-items:center}
.shelf .launch,.shelf [data-launch]{width:52px;height:52px;margin:0 2px;background:var(--primary)!important;color:var(--on-primary)!important;box-shadow:none}
.shelf .launch:hover{background:color-mix(in srgb,var(--primary) 86%,var(--surface))!important}
.sbtn{border-radius:var(--r-5);padding:4px}
.sbtn:hover{background:var(--st-hover)}
.sbtn .ico{width:48px;height:48px}
.sbtn.on::after{background:var(--ink);bottom:-1px;height:3px;width:12px;margin-left:-6px;border-radius:2px}
.sbtn.minned::after{width:4px;margin-left:-2px;background:var(--ink3)}
.sbtn .tip,.closeall .tip{background:var(--primary);color:var(--on-primary);font-weight:var(--fw-m);font-size:var(--fs-2);border-radius:var(--r-3);padding:5px 10px;transition:opacity var(--dur-2) var(--ease)}
.closeall{background:transparent;color:var(--ink2)}
.closeall:hover{background:var(--danger);color:#fff}
.sep{background:var(--line);height:28px}
.sbtn.fresh,.closeall{animation:sysPopIn var(--dur-4) var(--ease-out)}
@keyframes sysPopIn{from{opacity:0;transform:translateY(8px) scale(.8)}}

/* ---------- launcher (ChromeOS app drawer) ---------- */
.launcher{background:var(--surface);border:0;border-radius:var(--r-8);box-shadow:var(--e3);-webkit-backdrop-filter:none;backdrop-filter:none;padding:24px;transform-origin:50% 100%}
.launcher.in{animation:sysLaunchIn var(--dur-5) var(--ease-out)}
.launcher.out{animation:sysLaunchOut var(--dur-2) var(--ease-in) forwards}
@keyframes sysLaunchIn{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.96)}}
@keyframes sysLaunchOut{to{opacity:0;transform:translateX(-50%) translateY(10px) scale(.98)}}
.launcher h2{font-size:var(--fs-9);font-weight:var(--fw-b);letter-spacing:-.015em}
.launcher .sub{color:var(--ink2);font-size:var(--fs-4)}
.launcher .search,.launcher input[type=search]{background:var(--surface2);border:0;border-radius:var(--r-pill);height:48px;padding:0 20px;font-size:var(--fs-5)}
.launcher .search:focus{box-shadow:0 0 0 1.5px var(--ink)}
.lgrid .dicon .ico{width:52px;height:52px}
.lw-n{font-weight:var(--fw-b);color:var(--ink2);font-size:var(--fs-1);letter-spacing:.08em}
.lw-b{background:var(--surface2);font-weight:var(--fw-m)}.lw-b:hover{background:var(--surface3)}

/* ---------- floating panels: quick settings, notifications ---------- */
.qs{background:var(--surface);border:0;border-radius:var(--r-8);box-shadow:var(--e3);-webkit-backdrop-filter:none;backdrop-filter:none;transform-origin:top right;animation:sysPanelIn var(--dur-4) var(--ease-out)}
.notif{animation:sysPanelIn var(--dur-4) var(--ease-out)}
.notif.closing{animation:sysPanelOut var(--dur-2) var(--ease-in) forwards}
@keyframes sysPanelIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
@keyframes sysPanelOut{to{opacity:0;transform:translateY(-4px) scale(.98)}}
.qs .qt{font-size:var(--fs-11);font-weight:var(--fw-b);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.qs .qd{color:var(--ink2);font-weight:var(--fw-m)}
.tile{border-radius:var(--r-6);background:var(--surface2);font-weight:var(--fw-b);font-size:var(--fs-4);color:var(--ink)}
.tile:hover{background:var(--surface3)}
.tile small{font-weight:var(--fw-r);color:var(--ink2)}
.tile.on{background:var(--primary);color:var(--on-primary)}
.tile.on:hover{background:color-mix(in srgb,var(--primary) 88%,var(--surface))}
.tile.on small{color:inherit;opacity:.72}
.notif-h b{font-size:var(--fs-6);font-weight:var(--fw-b)}
.notif-clear{color:var(--ink)!important;font-weight:var(--fw-m)}
.notif-i:hover{background:var(--st-hover)}

/* ---------- search (spotlight) ---------- */
.spot-ov{background:color-mix(in srgb,#000 32%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;animation:sysFade var(--dur-3) var(--ease-out)}
.spot{border-radius:var(--r-8);box-shadow:var(--e3);animation:sysPanelIn var(--dur-4) var(--ease-out)}
.spot-in{font-size:var(--fs-7)}
.spot-g{font-weight:var(--fw-b);font-size:var(--fs-1);color:var(--ink3);letter-spacing:.08em}
.spot-it{border-radius:var(--r-4)}
.spot-it:hover{background:var(--st-hover)}
.spot-it.on{background:var(--surface3)}
.spot-t b{font-weight:var(--fw-m)}

/* ---------- menus ---------- */
.ctx{background:var(--surface)!important;border:0!important;border-radius:var(--r-menu)!important;box-shadow:var(--e2)!important;padding:6px!important}
.ctx.in{animation:sysMenuIn var(--dur-3) var(--ease-out) both}
.ctx button{min-height:40px;padding:0 12px!important;border-radius:var(--r-3)!important;font-size:var(--fs-4);font-weight:var(--fw-m)!important;color:var(--ink)}
.ctx button:hover,.ctx button:focus-visible{background:var(--st-hover)!important}
.ctx button.on{color:var(--ink);font-weight:var(--fw-b)!important}
.ctx .cx-ck{color:var(--ink)}
.ctx button.danger:hover{background:var(--danger-soft)!important}
.ctx .cx-h{font-size:var(--fs-1);font-weight:var(--fw-b);color:var(--ink3);letter-spacing:.08em}
.ctx hr{border-top-color:var(--line)!important}
@keyframes sysMenuIn{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.wd-pop{animation:sysMenuIn var(--dur-3) var(--ease-out) both}

/* ---------- buttons ---------- */
.btn{min-height:40px;padding:0 20px;border-radius:var(--r-pill);font-size:var(--fs-4);font-weight:var(--fw-b);letter-spacing:0;background:var(--primary);color:var(--on-primary);box-shadow:none;filter:none}
.btn:hover{background:color-mix(in srgb,var(--primary) 86%,var(--surface));box-shadow:none;filter:none}
.btn.tonal{background:var(--surface2);color:var(--ink)}
.btn.tonal:hover{background:var(--surface3)}
.btn.outline,.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--outline)}
.btn.outline:hover,.btn.ghost:hover{background:var(--st-hover)}
.btn.danger,.btn.del{background:var(--danger);color:#fff}
/* Material 3 Expressive: a pressed button squares off a little (the shape answers the finger) */
.btn,.seg button,.tile{transition:border-radius var(--dur-3) var(--ease),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.btn:active:not(:disabled){border-radius:12px}
.chip{background:var(--surface2);border-radius:var(--r-3);font-size:var(--fs-3);font-weight:var(--fw-m)}
.chip,.tag,.pj-chip{border-radius:var(--r-3)}

/* ---------- segmented control: the selected option is ink ---------- */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface2);border:0;border-radius:var(--r-pill);overflow:visible}
.seg button{border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink2);padding:7px 16px;font-size:var(--fs-3);font-weight:var(--fw-m)}
.seg button:hover:not(.on){background:var(--st-hover);color:var(--ink)}
.seg button.on{background:var(--primary);color:var(--on-primary);font-weight:var(--fw-b)}

/* ---------- fields ---------- */
.ow-f input,.ow-f textarea,.ow-f select{border:0;border-radius:var(--r-4);background:var(--surface2);box-shadow:none;transition:box-shadow var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.ow-f input:focus,.ow-f textarea:focus,.ow-f select:focus{outline:0;background:var(--surface);box-shadow:0 0 0 1.5px var(--ink)}
.kn-search:focus-within,.dx-search:focus-within,.gm-field:focus-within,.search:focus-within{box-shadow:0 0 0 1.5px var(--ink)}
.spot-in:focus-within{box-shadow:none}

/* ---------- dialogs ---------- */
.own-card,.dx-card{border-radius:var(--r-dialog);box-shadow:var(--e3);animation:sysPanelIn var(--dur-4) var(--ease-out)}
.own-ov,.dx-ov{background:color-mix(in srgb,#000 32%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- toast: inverse, rises from the bottom ---------- */
#toast{background:var(--primary);color:var(--on-primary);border-radius:var(--r-4);font-size:var(--fs-4);font-weight:var(--fw-m);padding:12px 16px;box-shadow:var(--e2);transition:opacity var(--dur-2) var(--ease),transform var(--dur-4) var(--ease-out)}

/* ---------- task check: a circle that fills with ink and pops once (done is the one moment worth celebrating) ---------- */
.td-chk{border:1.5px solid var(--outline);transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.td-chk:hover{border-color:var(--ink);color:color-mix(in srgb,var(--ink) 40%,transparent)}
.td-chk.on{background:var(--ink);border-color:var(--ink);color:var(--on-primary)}
.td-chk.pulse{animation:sysCheck var(--dur-5) var(--ease-spring)}
@keyframes sysCheck{0%{transform:scale(.8)}100%{transform:scale(1)}}

/* ---------- overview of all windows ---------- */
.ov{background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.ov-card{border-radius:var(--r-6);box-shadow:var(--e2);animation:sysWinIn var(--dur-5) var(--ease-out) both;animation-delay:calc(var(--i,0) * 30ms)}
.ov-card:hover,.ov-card:focus-visible{transform:none;box-shadow:var(--e3)}
.ov-t{font-weight:var(--fw-b)}
.ov-n,.ov-all{background:var(--surface2)}

/* ---------- lock screen ---------- */
.lock{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.lock .lk-art,.lock .lav{filter:grayscale(1)}
.lock .lt{filter:none}
.lock[data-ls=gemini] .lt{background:linear-gradient(100deg,var(--ink) 20%,var(--ink2) 90%);-webkit-background-clip:text;background-clip:text}
.lock[data-ls=gemini] .lg::before{background:var(--ink)}
.lock[data-ls=expressive] .lkh{background:var(--ink)!important;color:var(--surface)!important}.lock[data-ls=expressive] .lkm{background:var(--surface2)!important;color:var(--ink)!important}
.lock[data-ls=stack] .lkm{-webkit-text-fill-color:var(--ink2);color:var(--ink2)}
.lk-pw{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px var(--line)}
.lsp .lsp-v{filter:grayscale(1)}.lsp-gemini .lsp-v{background:var(--surface2)!important}

/* ---------- decoration that used the colour palette is neutral (the palette stays for notes and tags) ---------- */
.avatar path{fill:var(--surface2)}
.side button.on{background:var(--surface3);font-weight:var(--fw-b)}
.j-draft,.dc-vi,.dc-lk,.art,.hb-ic{background:var(--surface2)}
.sv-ic,.sv-card .sv-ic{background:var(--surface2)!important}
.ba-fav,.wp-ib.on,.ba .wp-ib.on,.pl-m b em{color:var(--ink)!important}
.mw.mu-host,.mu-appwrap{--mu-ink:var(--ink);--mu-ink2:var(--ink2);--mu-cream:var(--surface);--mu-cream2:var(--surface);--mu-accent:var(--ink)}
.mw.mu-host{background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.mu-app .mpa-stage{background:radial-gradient(80% 70% at 50% 35%,#2a2a2a 0,#111 70%),#111}
.dz-st .dz-stp{background:var(--surface2);color:var(--ink2)}.dz-st .dz-stp i{background:var(--surface)}
html .lb2-ph{background:var(--surface2);color:var(--ink)}
.serp b,.ws-gt{color:var(--ink)!important}
.walls button{background:var(--surface2);border-radius:var(--r-4);border:2px solid transparent;box-shadow:0 0 0 1px var(--line)}
.walls button.on{border-color:var(--ink)}
.walls .lb{background:var(--surface);font-weight:var(--fw-b);color:var(--ink)}

/* ---------- ripple (js/feel.js): spreads from the finger, fades when it lifts ---------- */
.rp-host{position:fixed;z-index:2147483000;pointer-events:none;overflow:hidden;contain:strict}
.rp-host i{position:absolute;border-radius:50%;background:currentColor;opacity:.12;transform:scale(0);animation:rp-in var(--dur-6) var(--ease) forwards}
.rp-host i.rp-out{opacity:0;transition:opacity var(--dur-5) linear}
@keyframes rp-in{to{transform:scale(1)}}

/* ---------- phone ---------- */
@media (max-width:760px){
  .topbar{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 6px}
  .pill,.tb-ic,.topbar .tb-ic{height:36px}.tb-ic,.topbar .tb-ic{width:36px}
  .shelf{background:none;box-shadow:none;padding:0;height:auto}
  .shelf .launch{width:56px;height:56px;box-shadow:var(--e2)}
  .qs{max-height:calc(100% - 52px - 104px - env(safe-area-inset-bottom,0px))}
  .launcher .lhead h2{font-size:var(--fs-8);line-height:1.2}
  .win{border-radius:var(--r-7)!important}
  .win.max,.win.focus{border-radius:0!important}
}

/* ---------- reduced motion: things still change, they just do not travel ---------- */
#desk[data-motion=off] *,#desk[data-motion=off] *::before,#desk[data-motion=off] *::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important}}

/* ---------- inside a window: the canvas and the paper on it ---------- */
.win,.sf-page{--bg:var(--canvas);--surface:var(--card);--surface2:var(--card2);--surface3:var(--card3);background:var(--canvas)}

/* ---------- home screen: the widget board scrolls under the shelf instead of being cut above it ---------- */
#desk .widgets{bottom:0;padding-bottom:112px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent)}
/* lists inside a widget scroll, and say so with a soft edge instead of cutting a row in half */
.wg-list,.wg-sn{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);padding-bottom:20px}
/* the clock is type, not a shape: the biggest, boldest thing on the desk */
.wclock svg{display:none}
.wg.bare .wclock,.widgets .wclock{width:auto;height:auto;place-items:start;padding:8px 4px}
.wclock .t{text-align:left}
.wclock .h{font-size:72px;line-height:.95;letter-spacing:-.045em}
.wclock .d{font-size:var(--fs-5);margin-top:10px;color:var(--ink2)}
.wg.bare{justify-content:center;align-items:flex-start}
:root:not([data-theme=light]) .grain{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .grain{opacity:calc(var(--grain,.45) * .2);filter:invert(1)}}

/* =========================== APPS =========================== */
/* Page titles in every app share one role: 28-34px, bold, tight. Section labels: 13px bold. Meta: 12px ink2. */

/* ---------- To-do and My Day ---------- */
.td-head h2{font-weight:var(--fw-b);letter-spacing:-.025em}
.td-head p{font-weight:var(--fw-m)}
.td-li{font-weight:var(--fw-m);padding:10px 14px}
.td-li.on{background:var(--surface3);color:var(--ink);font-weight:var(--fw-b)}
.td-li em{font-variant-numeric:tabular-nums;color:var(--ink3)}
.td-li .td-t{color:inherit;cursor:pointer}
.td-search input{background:var(--card)}
.td-search input:focus{border-color:transparent;box-shadow:0 0 0 1.5px var(--ink)}
.td-add{box-shadow:none;border-radius:var(--r-4)}
.td-add:focus-within{color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.td-list{gap:6px}
.td-row{box-shadow:none;border-radius:var(--r-4);padding:14px 18px;transition:background-color var(--dur-2) var(--ease),transform var(--dur-4) var(--ease),opacity var(--dur-3) var(--ease),max-height var(--dur-4) var(--ease),padding var(--dur-4) var(--ease),margin var(--dur-4) var(--ease)}
.td-row:hover{background:color-mix(in srgb,var(--ink) 3%,var(--card))}
.td-row.sel{background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.td-row.in{animation:sysFade var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0) * 12ms)}
.td-row.fresh{animation:sysRowIn var(--dur-4) var(--ease-out) both}
@keyframes sysRowIn{from{opacity:0;transform:translateY(-6px)}}
.td-title{font-size:var(--fs-5)}
.td-m.today{color:var(--ink);font-weight:var(--fw-m)}
.td-star{color:var(--ink3)}.td-star:hover{color:var(--ink);background:var(--st-hover)}.td-star.on{color:var(--ink)}
.td-grp{font-weight:var(--fw-b);color:var(--ink)}
.td-card,.td-ev,.md-line,.md-note{box-shadow:none}
.td-ti{font-weight:var(--fw-b)}
.td-detail.slide{animation:sysSheetIn var(--dur-5) var(--ease-out) both}
@keyframes sysSheetIn{from{opacity:0;transform:translateX(16px)}}
.td-page{color:var(--ink)}.td-page:hover{background:var(--st-hover)}
.md-h b{font-weight:var(--fw-b)}
.md-h em{background:var(--surface3);color:var(--ink)}
.md-mv button{background:var(--surface3);color:var(--ink)}.md-mv button:hover{background:var(--card3)}
.td-who i,.td-av{background:var(--surface3);color:var(--ink)}
.td-eic{color:var(--ink3);opacity:1}
@media (max-width:1100px){.td-detail{background:var(--canvas);box-shadow:var(--e3)}}
@media (max-width:760px){.td-li{background:var(--card)}.td-li.on{background:var(--primary);color:var(--on-primary)}.td-li.on .td-ic{color:inherit}}

/* ---------- Calendar ---------- */
.ca-nav h2{font-size:var(--fs-10);font-weight:var(--fw-b);letter-spacing:-.02em}
.ca-b{background:var(--card)}.ca-b:hover{background:var(--card3);color:var(--ink)}
.ca-seg{background:var(--card)}
.ca-seg button.on{background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:var(--fw-b)}
.ca-add{font-weight:var(--fw-b)}
.ca-src button{background:var(--card);font-weight:var(--fw-m)}
.ca-dow span{font-weight:var(--fw-b);color:var(--ink3)}
.ca-cell{box-shadow:none;overflow:clip;transition:background-color var(--dur-2) var(--ease)}
.ca-cell:hover{box-shadow:none;background:color-mix(in srgb,var(--ink) 3%,var(--card))}
.ca-cell>b{font-size:var(--fs-3);font-weight:var(--fw-b);color:var(--ink)}
.ca-cell.dim{opacity:1}.ca-cell.dim>b{color:var(--ink3);font-weight:var(--fw-m)}.ca-cell.dim{background:color-mix(in srgb,var(--card) 50%,transparent)}
.ca-cell.sel{box-shadow:0 0 0 1.5px var(--ink)}
.ca-side,.ca-col{box-shadow:none}
.ca-side h3{font-weight:var(--fw-b);font-size:var(--fs-7)}
.ca-ch b{font-weight:var(--fw-b)}
.ca-col.today .ca-ch b,.ca-day h3.today{color:var(--ink)}
.ca-col.today .ca-ch b{background:var(--primary);color:var(--on-primary);border-radius:var(--r-pill);padding:0 8px}
.ca-view.enter{animation:sysFade var(--dur-3) var(--ease-out)}
.ca-more:hover{color:var(--ink)}
.ca-sadd{background:var(--card2)}

/* ---------- navigation lists (every app's sidebar): pill rows; the current one is a darker pill in bold ---------- */
.td-li,.td-newlist,.ba-nv,.ba-row{border-radius:var(--r-pill)}
.ba-nv{color:var(--ink);font-weight:var(--fw-m)}
.ba-nv:hover,.ba-row:hover{background:var(--st-hover)}
.ba-nv.on,.ba-row.on{background:var(--surface3);color:var(--ink);font-weight:var(--fw-b)}
.ba-nv em{color:var(--ink3);font-variant-numeric:tabular-nums}
.ba-sec{font-weight:var(--fw-b);color:var(--ink2);font-size:var(--fs-2)}

/* ---------- Boards ---------- */
:root,:root[data-theme],:root:not([data-theme=light]){--bd-bg:var(--canvas);--bd-card:var(--card);--bd-e1:var(--e1);--bd-e2:var(--e2);--bd-e3:var(--e3);--bd-state:var(--st-hover);--bd-tonal:var(--surface3);--bd-img:var(--card3)}
.ba-side{background:transparent;border-right:1px solid var(--line)}
.ba .ba-new,.ba-new{background:var(--primary);color:var(--on-primary);box-shadow:none;border-radius:var(--r-pill);height:48px;font-weight:var(--fw-b);font-size:var(--fs-4)}
.ba .ba-new:hover{background:color-mix(in srgb,var(--primary) 86%,var(--surface));box-shadow:none}
.ba-fav{color:var(--ink)}

/* ---------- Timeline: today is a line behind the bars, not across them ---------- */
.tln-today{z-index:0;opacity:1;background:var(--ink);width:1.5px}
.tln-it{z-index:1;box-shadow:none}
.tln-it:hover{box-shadow:inset 0 0 0 1.5px var(--c);z-index:2}

/* ---------- focus inside lists and menus: the highlighted row IS the focus, so no extra ring ---------- */
.ctx button:focus-visible,.spot-it:focus-visible,.notif-i:focus-visible,.selmenu [role=option]:focus-visible{outline:0;background:var(--st-hover)!important}
.ov-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* a search field that is the whole point of its panel shows the caret, not a ring */
.launcher .search:focus,.launcher .search:focus-within{box-shadow:none;background:var(--surface3)}
.ba .ba-new .ic{color:inherit}
/* phones: the widget board stays above the dock, so nothing peeks out between an open app and the dock */
@media (max-width:760px){#desk .widgets{bottom:104px;padding-bottom:28px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}}

/* ---------- cards on a page: hover is an inset ring, never a lift (a lift gets cropped by the list that holds it) ---------- */
:root,:root[data-theme],:root:not([data-theme=light]){--wd-card:var(--card);--wd-e1:var(--e1);--wd-e2:var(--e2);--wd-hover:var(--st-hover);--wd-line:var(--line);--m-e1:var(--e1);--m-e2:var(--e2);--m-e3:var(--e3)}
:is(.ba-tc,.ba-card,.db-card,.dz-st,.dz-card,.sb2-row,.st-b,.st-tc,.wh-rc,.wh-db,.wh-note,.wd-card,.kn-card,.pj-card,.pcard,.bp-chip,.hb-it,.jr-feat,.feat,.lk,.hb-site){transition:background-color var(--dur-2) var(--ease),outline-color var(--dur-2) var(--ease)!important;outline:1px solid transparent;outline-offset:-1px}
:is(.ba-tc,.ba-card,.db-card,.dz-st,.dz-card,.sb2-row,.st-b,.st-tc,.wh-rc,.wh-db,.wh-note,.wd-card,.kn-card,.pj-card,.pcard,.bp-chip,.hb-it,.jr-feat,.feat,.lk,.hb-site):is(:hover,:focus-visible){transform:none!important;box-shadow:none!important;outline-color:var(--outline)}
:is(.ba-tc,.ba-card,.db-card,.wh-rc,.wh-db,.dz-card,.st-b){box-shadow:none}
.ba-card,.ba-tc,.wh-rc,.wh-db{background:var(--card)}
.sn{transition:outline-color var(--dur-2) var(--ease)!important;outline:1px solid transparent;outline-offset:-1px}
.sn:hover,.sn:focus-within{transform:none!important;box-shadow:none!important;outline-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.lb2-bk:hover .lb2-cv,.lb2-cur:hover .lb2-cv{transform:none;box-shadow:0 0 0 1px var(--outline)}
.ca-cell:hover,.pl-ev:hover{box-shadow:none}
.sb .sb-print:hover{transform:none!important}
/* the lock screen's living backdrop stops the moment it is unlocked (it is still in the page, just out of sight) */
#desk:not(.is-locked) .lock,#desk:not(.is-locked) .lock *{animation-play-state:paused!important}

/* ---------- sticky headers sit on the canvas they scroll over ---------- */
.st2-top,.db-bar,.wd-bar{background:var(--canvas)}

/* ---------- Settings ---------- */
.st2-nav{background:transparent;border-right:1px solid var(--line)}
.st2-nav h1,.st2-h{font-weight:var(--fw-b);letter-spacing:-.015em}
.st2-q{border:0;background:var(--card)}.st2-q:focus{box-shadow:0 0 0 1.5px var(--ink)}
.st2-nav nav button.on{background:var(--surface3)}
.st2-ic{color:var(--ink)}
.st2-grp{background:var(--card);border:0}
.st2-grp h3{font-weight:var(--fw-b)}
.st2-own i{background:var(--ok)}
.st2-back{color:var(--ink)}
/* the clock takes the room it needs (two rows), so the board packs tightly under it */
.wg.bare:has(.wclock){grid-row:span 2!important}

/* ---------- pure black and white: paper on paper is separated by a hairline, never by a grey fill ---------- */
:is(.td-row,.td-add,.td-card,.td-ev,.md-line,.md-note,.ca-cell,.ca-side,.ca-col,.ba-card,.ba-tc,.wh-rc,.wh-db,.wh-note,.db-card,.st2-grp,.sb2-row,.st-b,.st-tc,.dz-card,.wd-card,.lb2-bk,.sv-card,.pl-card,.tln-grid,.tl-grid,.spot,.qa){box-shadow:inset 0 0 0 1px var(--line)}
.td-row.sel{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ca-cell.sel{box-shadow:inset 0 0 0 1.5px var(--ink)}
.td-add:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ca-cell.dim{background:var(--card)}.ca-cell.dim>b{color:var(--ink3)}
.td-row:hover,.ca-cell:hover{background:color-mix(in srgb,var(--ink) 3%,var(--card))}
/* inputs and quiet buttons are the only faint fills */
.td-search input,.st2-q,.ca-b,.ca-seg,.ca-src button{background:var(--card2)}
/* the shelf, panels and windows float: white with a hairline and a soft shadow */
.pill,.tb-ic{box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- app icons (js/app-icons-rk.js): a black tile with the app drawn in white; inverted in dark mode ---------- */
.ico.rk{--icon-tile:var(--ink);color:var(--surface)}
.ico.rk>svg{overflow:visible;display:block;width:100%;height:100%}
.ico.rk .ictile{fill:var(--icon-tile);stroke:none}
.bar .ico.rk{--icon-tile:transparent;color:var(--ink)}
.ico.rk [class^="k-"]{transform-box:fill-box;transform-origin:center}
/* hover and opening play the same short motion */
.ico.rk .k-c{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease)}
.ico.rk .k-o{transition:opacity .15s var(--ease)}
:is(.dicon:hover,.sbtn:hover,.lgrid .dicon:hover) .ico.rk .k-c,.ico.rk.go .k-c{stroke-dashoffset:0}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-o,.ico.rk.go .k-o{opacity:0}
.ico.rk .k-n{transform:rotate(-6deg);transition:transform .35s var(--ease-out)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-n,.ico.rk.go .k-n{transform:rotate(0) translateY(-3px)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-p,.ico.rk.go .k-p{animation:rkFlip .5s var(--ease-out)}
@keyframes rkFlip{45%{transform:scaleY(0)}}
.ico.rk :is(.k-b1,.k-b2,.k-b3){transition:transform .4s var(--ease-out)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-b1,.ico.rk.go .k-b1{transform:translateX(8px)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-b2,.ico.rk.go .k-b2{transform:translateX(-8px)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-b3,.ico.rk.go .k-b3{transform:translateX(12px)}
.ico.rk .k-t{transition:transform .4s var(--ease-out)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-t,.ico.rk.go .k-t{transform:translate(-27px,-27px)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-pl,.ico.rk.go .k-pl{animation:rkPulse .6s var(--ease-out)}
@keyframes rkPulse{40%{transform:scale(1.18)}}
.ico.rk .k-rec{opacity:0;transition:opacity .2s}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-rec,.ico.rk.go .k-rec{opacity:1;animation:rkBlink 1s steps(2) infinite}
@keyframes rkBlink{50%{opacity:.2}}
.ico.rk .k-bk{transition:transform .35s var(--ease-out)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-bk,.ico.rk.go .k-bk{transform:translateY(-8px)}
.ico.rk .k-r{transition:transform .6s var(--ease-out)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-r,.ico.rk.go .k-r{transform:rotate(360deg)}
.ico.rk .k-cv{stroke-dasharray:1;stroke-dashoffset:0}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-cv,.ico.rk.go .k-cv{animation:rkDraw .7s var(--ease-out)}
@keyframes rkDraw{from{stroke-dashoffset:1}}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-v,.ico.rk.go .k-v{animation:rkSpin 1.6s linear infinite}
@keyframes rkSpin{to{transform:rotate(360deg)}}
.ico.rk .k-g,.ico.rk .k-s{transition:transform .6s var(--ease-out)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-g,.ico.rk.go .k-g{transform:rotate(45deg)}
:is(.dicon:hover,.sbtn:hover) .ico.rk .k-s,.ico.rk.go .k-s{transform:rotate(45deg)}
/* the icon itself never jumps; a pressed icon dips slightly, like a key */
.dicon:active .ico.rk,.sbtn:active .ico.rk{transform:scale(.94);transition:transform .1s var(--ease)}
.ico.rk{transition:transform .2s var(--ease-out)}

/* ---------- colour that a person assigns is solid: options, tags, list icons, notes ---------- */
[data-c="grey"],[data-c="gray"],[data-c="default"]{--oc-bg:var(--tag-grey);--oc:#fff}
[data-c="brown"]{--oc-bg:var(--tag-brown);--oc:#fff}[data-c="orange"]{--oc-bg:var(--tag-orange);--oc:#fff}
[data-c="yellow"]{--oc-bg:var(--tag-yellow);--oc:#000}[data-c="green"]{--oc-bg:var(--tag-green);--oc:#fff}
[data-c="blue"]{--oc-bg:var(--tag-blue);--oc:#fff}[data-c="purple"]{--oc-bg:var(--tag-purple);--oc:#fff}
[data-c="pink"]{--oc-bg:var(--tag-pink);--oc:#fff}[data-c="red"]{--oc-bg:var(--tag-red);--oc:#fff}[data-c="teal"]{--oc-bg:var(--tag-teal);--oc:#fff}
.wd-opt{background:var(--oc-bg,var(--tag-grey));color:var(--oc,#fff);font-weight:var(--fw-m)}
.wd-swc{background:var(--oc-bg);box-shadow:none}
.wd-swc.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.td-ic[data-c]{color:var(--oc-bg)}
/* sticky notes: solid paper colours, text chosen to read on each */
:root,:root[data-theme],:root:not([data-theme=light]){--sn-yellow:#FFD43B;--sn-blue:#1A73E8;--sn-green:#1E9E50;--sn-pink:#E8336F;--sn-purple:#8E44E0;--sn-orange:#F47B20;--sn-grey:#5F6368;--sn-ink:#000}
.sn-blue,.sn-green,.sn-pink,.sn-purple,.sn-orange,.sn-grey{--sn-ink:#fff}
.sn{color:var(--sn-ink)}
.sn :is(.sn-body,.sn-t,input,textarea,small,span,button){color:inherit}
.sn ::placeholder{color:currentColor;opacity:.6}
.sn .td-chk,.sn .sn-ck{border-color:currentColor}
.wall .wp-grid{background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);background-size:40px 40px;opacity:.12}
.walls button .wp-grid{background-image:linear-gradient(color-mix(in srgb,var(--ink) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 18%,transparent) 1px,transparent 1px);background-size:10px 10px}
.walls .lb{background:var(--surface);color:var(--ink)}
/* a note's preview anywhere takes the note's own text colour, so it reads on the solid paper */
.wh-note[class*="sn-"]{color:var(--sn-ink);border-color:transparent}
.wh-note[class*="sn-"] span{color:inherit;opacity:.85}

/* ---------- lock screen in black and white: plain paper, the clock in ink, a solid ink ring round the portrait ---------- */
.lock .lk-art{display:none}
.lock .lav{background:var(--ink);animation:none}
.lsp .lsp-v{background:var(--bg)!important;box-shadow:inset 0 0 0 1px var(--line)}
.lsp .lsp-v *{-webkit-text-fill-color:currentColor}
.lsp .lsp-v{color:var(--ink)}