:root{
  /* Accent theme (default = Meadow Sage). The picker sets body[data-theme];
     every accent usage reads these vars, so a swap is instant. See theme blocks below. */
  --acc:#9dba8a; --accSoft:rgba(157,186,138,.16); --accLine:rgba(157,186,138,.5);
  --accWash:rgba(157,186,138,.09); --accDim:rgba(157,186,138,.06); --accRing:rgba(157,186,138,.65);
  --accText:#c6dab3; --accInk:#141a12;
  --orange:#f59e0b; --green:#34d399; --red:#f87171; --blue:#60a5fa;
  --tx:#e9eaf2; --mut:#9aa0b6; --line:rgba(255,255,255,.08);
  --panel:#0d0e16; --panel2:#171826; --woA:.85;
  /* user-tunable widget typography (Settings › Appearance) */
  --wTitleSize:13px; --wTitleColor:#e9eaf2; --wBodySize:12.5px; --wBodyColor:#e9eaf2;
  /* Per-widget zoom factor. Widgets override --wS inline (see .widget below);
     the neutral 1 here keeps shared classes (.hbtn, .tiny, .inrow, .focusMenu…)
     valid when they're reused in modals and the dock, outside any widget. */
  --wS:1; --wTS:var(--wTitleSize); --wBS:var(--wBodySize);
}

/* Accent themes — only the accent hue moves; neutrals, panels and status colours
   are shared. sage is the :root default (no data-theme attribute). */
body[data-theme="cloud"]{
  --acc:#a3b8c6; --accSoft:rgba(163,184,198,.16); --accLine:rgba(163,184,198,.5);
  --accWash:rgba(163,184,198,.09); --accDim:rgba(163,184,198,.06); --accRing:rgba(163,184,198,.65);
  --accText:#ccdbe5; --accInk:#10161b;
}
body[data-theme="night"]{
  --acc:#d9c68a; --accSoft:rgba(217,198,138,.16); --accLine:rgba(217,198,138,.5);
  --accWash:rgba(217,198,138,.09); --accDim:rgba(217,198,138,.06); --accRing:rgba(217,198,138,.65);
  --accText:#e7d9ad; --accInk:#191509;
}
body[data-theme="tide"]{
  --acc:#8fc0b5; --accSoft:rgba(143,192,181,.16); --accLine:rgba(143,192,181,.5);
  --accWash:rgba(143,192,181,.09); --accDim:rgba(143,192,181,.06); --accRing:rgba(143,192,181,.65);
  --accText:#bcdcd2; --accInk:#0f1815;
}
body[data-theme="clay"]{
  --acc:#cfa98c; --accSoft:rgba(207,169,140,.16); --accLine:rgba(207,169,140,.5);
  --accWash:rgba(207,169,140,.09); --accDim:rgba(207,169,140,.06); --accRing:rgba(207,169,140,.65);
  --accText:#e2c8b4; --accInk:#1a130d;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;background:#07070c;color:var(--tx);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:var(--tx)}
svg{display:block}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2b2d3e;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#bgVid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:none;background:#000}
#ytBg{position:fixed;inset:0;z-index:0;display:none;background:#000;overflow:hidden}
#ytBg.show{display:block}
#ytBg iframe{position:absolute;border:none;pointer-events:none}
#imgBg{position:fixed;inset:0;z-index:0;display:none;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#000}
#imgBg.show{display:block}
/* Background fit: "Fit" mode (body.bg-contain) letterboxes media so a 16:9 video/
   image keeps its natural cinema borders instead of cropping to fill. #ytBg is
   sized in JS (sizeYtBg); #bgVid / #imgBg switch via CSS here. */
body.bg-contain #bgVid{object-fit:contain}
body.bg-contain #imgBg{background-size:contain}
/* Letterbox border colour (Fit mode only): the media element background shows
   through the letterbox gaps. --bg-fit-color is set from state.bgFitColor. */
body.bg-contain #bgVid,body.bg-contain #ytBg,body.bg-contain #imgBg{background-color:var(--bg-fit-color,#000)}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(0,0,0,.38) 100%),
             linear-gradient(to top,rgba(0,0,0,.30),transparent 22%)}

/* ---------- auth gate: hide the app until signed in ---------- */
body:not(.authed) #spaceChip,
body:not(.authed) #acctChip,
body:not(.authed) #clock,
body:not(.authed) .widget,
body:not(.authed) #dock{display:none !important}

/* ============================================================
   Landing / auth gate — "Morning Meadow" light theme.
   The gate is light; the app behind it stays dark (:root vars untouched).
   Markup: #landing in index.html · wiring: js/13-gate.js
   ============================================================ */

/* Landing-scoped tokens — the app's dark :root vars stay untouched. */
#landing{
  --mBg1:#f8f5ea; --mBg2:#f3efdf; --mBg3:#ece6d0;      /* cream sky */
  --mHill1:#cfdabe; --mHill2:#c2d1ad; --mHill3:#aec29a; /* sage hills */
  --mGreen:#556b47;  --mGreenHover:#4a5e3d;             /* moss action */
  --mInk:#2c3627; --mInkSoft:#5b6852; --mMut:#83907a;   /* text */
  --mOchre:#e3b455;                                     /* wildflower sun */
  --mLine:rgba(83,101,70,.3);
  --mSerif:'Newsreader',Georgia,serif;
  --mSans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
}

#landing{position:fixed;inset:0;z-index:75;display:none;overflow:auto;
  color:var(--mInk);font-family:var(--mSans);
  background:linear-gradient(180deg,var(--mBg1) 0%,var(--mBg2) 52%,var(--mBg3) 100%)}
body.gated #landing{display:block}

/* ---- scene (replaces the video/scrim treatment: no #landBg iframe, no .land-scrim) ---- */
.land-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.ls-sun{position:absolute;top:-190px;right:4%;width:580px;height:580px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,178,86,.22) 0%,rgba(226,178,86,0) 65%)}
.ls-hill{position:absolute;border-radius:50%}
.ls-hill.h1{bottom:-24%;left:-14%;width:76%;height:52%;background:var(--mHill1)}
.ls-hill.h2{bottom:-27%;right:-18%;width:82%;height:54%;background:var(--mHill2)}
.ls-hill.h3{bottom:-32%;left:8%;width:92%;height:56%;background:var(--mHill3)}
.ls-pollen{position:absolute;border-radius:50%;width:5px;height:5px;
  animation:fnDrift 10s ease-in-out infinite alternate}
.ls-pollen.p1{left:16%;top:56%;background:rgba(214,168,74,.5);animation-delay:-2s}
.ls-pollen.p2{left:30%;top:64%;width:4px;height:4px;background:rgba(214,168,74,.38);animation-delay:-5s;animation-duration:11s}
.ls-pollen.p3{right:24%;top:54%;background:rgba(214,168,74,.45);animation-delay:-1s}
.ls-pollen.p4{right:14%;top:67%;width:4px;height:4px;background:rgba(150,170,120,.5);animation-delay:-7s;animation-duration:12s}
.ls-pollen.p5{left:50%;top:71%;width:4px;height:4px;background:rgba(150,170,120,.42);animation-delay:-4s}
.ls-pollen.p6{left:64%;top:48%;width:3px;height:3px;background:rgba(214,168,74,.32);animation-delay:-8s;animation-duration:13s}
@keyframes fnDrift{0%{transform:translate(0,0)}50%{transform:translate(9px,-14px)}100%{transform:translate(-6px,-4px)}}
@media (prefers-reduced-motion:reduce){.ls-pollen{animation:none}}

/* ---- layout ---- */
.land-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;min-height:100%;
  display:flex;flex-direction:column;padding:30px clamp(28px,5vw,64px) 56px;box-sizing:border-box}
.land-top{display:flex;align-items:center;justify-content:space-between}
.land-brand{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:#33402e;cursor:pointer}
.land-logo{display:inline-flex}
.land-logo svg{width:34px;height:34px;border-radius:9px;box-shadow:0 1px 4px rgba(83,101,70,.25)}
.land-signlink{font-family:inherit;font-size:13.5px;font-weight:600;color:#4a5c42;padding:9px 18px;
  border-radius:99px;border:1px solid var(--mLine);background:rgba(255,255,255,.5);cursor:pointer;white-space:nowrap}
.land-signlink:hover{border-color:rgba(83,101,70,.55);background:rgba(255,255,255,.8)}

/* ---- view switching: #landing carries .view-hero (default) or .view-auth ---- */
#landing .land-hero{display:none}
#landing .land-authwrap{display:none}
#landing.view-hero .land-hero{display:flex}
#landing.view-auth .land-authwrap{display:flex}

/* ---- hero view ---- */
.land-hero{flex:1;flex-direction:column}
.land-hero-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 0}
.land-kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7d9455}
.land-hero h1{margin:18px 0 0;font-family:var(--mSerif);font-weight:500;
  font-size:clamp(40px,4.5vw,58px);line-height:1.06;letter-spacing:-.015em;color:var(--mInk);
  max-width:17ch;text-wrap:balance}
.land-sub{margin:20px 0 0;max-width:46ch;font-size:16.5px;line-height:1.65;color:var(--mInkSoft);text-wrap:pretty}
.land-capture{display:flex;gap:10px;margin-top:32px;width:min(440px,100%)}
.land-capture input{flex:1;min-width:0;font-family:inherit;font-size:14.5px;color:#33402e;
  padding:13px 16px;border-radius:12px;border:1px solid rgba(83,101,70,.32);background:rgba(255,255,255,.75);box-sizing:border-box}
.land-freenote{margin-top:14px;font-size:12.5px;color:var(--mMut);text-wrap:balance}

.land-primary{font-family:inherit;font-size:14.5px;font-weight:600;color:#f7f5ea;background:var(--mGreen);
  padding:13px 22px;border-radius:12px;border:none;white-space:nowrap;
  box-shadow:0 2px 8px rgba(85,107,71,.3);cursor:pointer}
.land-primary:hover{background:var(--mGreenHover)}
.land-primary:active{transform:translateY(1px)}

#landing input::placeholder{color:#33402e;opacity:.4}
#landing input:focus{outline:none;border-color:#8aa470;box-shadow:0 0 0 3px rgba(125,156,114,.22)}

/* feature row */
.land-features{list-style:none;margin:0;padding:0 8px;display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.land-features li{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.lf-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.6);border:1px solid rgba(83,101,70,.18);color:#5d7550}
.lf-ic svg{width:18px;height:18px}
.land-features b{font-size:13px;font-weight:600;color:#3b4834}
.land-features span{font-size:12px;line-height:1.5;color:#78856d;margin-top:-4px}

/* ---- auth view ---- */
.land-authwrap{flex:1;flex-direction:column;align-items:center;justify-content:center;padding:40px 0}
.land-authcard{width:min(420px,100%);background:rgba(255,255,255,.78);border:1px solid rgba(83,101,70,.22);
  border-radius:20px;padding:32px 30px;backdrop-filter:blur(8px);
  box-shadow:0 18px 50px rgba(83,101,70,.18);box-sizing:border-box}
.land-authcard h2{margin:0;font-family:var(--mSerif);font-weight:500;font-size:26px;letter-spacing:-.01em;color:var(--mInk)}
.land-authsub{margin:7px 0 0;font-size:13px;color:#6f7d65;line-height:1.5}
.land-authcard form{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.land-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#55644c}
.land-field input{font-family:inherit;font-size:14px;color:#33402e;background:rgba(255,255,255,.85);
  border:1px solid var(--mLine);border-radius:11px;padding:11px 13px;box-sizing:border-box}
.land-authcard .land-primary{justify-content:center;padding:12px;border-radius:11px;margin-top:4px}
.land-alt{margin-top:16px;font-size:12.5px;color:#6f7d65;text-align:center}
.land-toggle{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--mGreen);
  background:none;border:none;padding:0;cursor:pointer;white-space:nowrap}
.land-toggle:hover{color:#3f5334;text-decoration:underline}
.land-back{margin-top:18px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--mMut);
  background:none;border:none;cursor:pointer}
.land-back:hover{color:var(--mGreen)}
.land-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:#b3762e;min-height:0}
.land-note.err{color:#b0554b}
.land-note.ok{color:#4f7a52}

/* reveal on gate open */
body.gated .land-reveal{opacity:0;transform:translateY(14px);animation:landUp .7s cubic-bezier(.16,1,.3,1) forwards}
body.gated .land-reveal.d0{animation-delay:.02s}
body.gated .land-reveal.d1{animation-delay:.10s}
body.gated .land-reveal.d2{animation-delay:.18s}
@keyframes landUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.gated .land-reveal{animation:none;opacity:1;transform:none}}

/* ---- responsive ---- */
@media (max-width:880px){
  .land-features{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
  .land-capture{flex-direction:column}
  .land-hero h1{max-width:none}
}

#spaceChip{position:fixed;top:14px;left:16px;z-index:30;font-size:12px;color:#d6d8e6;
  background:rgba(10,11,18,.55);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:6px 12px;border-radius:99px;cursor:pointer;transition:.2s}
#spaceChip:hover{border-color:var(--accLine);color:#fff}

#acctChip{position:fixed;top:14px;right:16px;z-index:30;font-size:12px;color:#d6d8e6;
  background:rgba(10,11,18,.55);backdrop-filter:blur(10px);border:1px solid var(--line);
  padding:6px 12px;border-radius:99px;cursor:pointer;transition:.2s;max-width:200px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#acctChip:hover{border-color:var(--accLine);color:#fff}
#acctChip.in{border-color:var(--accLine);color:#eaf5ff}
#acctChip.in::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#57d6a4;margin-right:7px;vertical-align:middle}

#clock{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:4;box-sizing:content-box;
  display:flex;align-items:center;justify-content:center;text-align:center;
  text-shadow:0 2px 26px rgba(0,0,0,.65);cursor:grab;user-select:none;touch-action:none;
  padding:10px 16px;border-radius:16px;border:1px solid transparent;transition:border-color .15s,background .15s}
#clock.placed{transform:none}                 /* once moved, left/top are exact px */
#clock:hover{border-color:rgba(255,255,255,.1);background:rgba(12,13,21,.18)}
#clock.drag{cursor:grabbing;border-color:var(--accLine)}
#clock.resizing{border-color:var(--accLine)}
#clockBox{transform-origin:center;pointer-events:none;white-space:nowrap}
#clockTime{font-size:46px;font-weight:600;letter-spacing:.01em;color:var(--clockColor,#e9eaf2)}
#clockDate{font-size:15px;color:var(--clockColor,#cfd3e6);opacity:.85;margin-top:2px}
/* clock resize handles (reuse .rsz look; visible on hover) */
#clock .rsz{opacity:0}
#clock:hover .rsz{opacity:1}

/* ---------- widgets ---------- */
/* --wS is the per-widget zoom factor, set inline by js/03-widgets.js from
   (current width / natural width). Every size inside a widget is expressed as
   calc(<base>px * var(--wS)) so dragging a widget wider scales its type,
   controls, icons, chips and padding together instead of only reflowing text.
   Doing it with calc() rather than transform/zoom keeps flex + scrolling exact. */
.widget{--wS:1;
  --wTS:calc(var(--wTitleSize) * var(--wS));
  --wBS:calc(var(--wBodySize) * var(--wS));
  position:fixed;width:302px;z-index:20;visibility:hidden;color:var(--tx);
  background:rgba(12,13,21,var(--woA));backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.45);
  user-select:none;touch-action:none}
.widget.drag{opacity:.92;cursor:grabbing}
.widget.resizing{opacity:.97}
.widget.sized{display:flex;flex-direction:column;overflow:hidden}

/* Natural (un-resized) height cap for the task list. Scoped to :not(.sized) so
   the .wgrow fill rules below win once the user has resized the widget — an id
   selector would otherwise out-specify them. */
#taskList{margin-top:calc(6px * var(--wS));overflow:auto}
.widget:not(.sized) #taskList{max-height:calc(250px * var(--wS))}

/* Fill: in a manually sized widget the body is a column and its designated
   .wgrow child takes the leftover height, so growing a widget taller actually
   shows more rows instead of leaving dead space under a fixed-height list. */
.widget.sized .w-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.widget.sized .w-body>*{flex:0 0 auto}
.widget.sized .w-body>.wgrow{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
/* resize handles */
.rsz{position:absolute;z-index:5;opacity:0;transition:opacity .15s;touch-action:none}
.widget:hover .rsz{opacity:1}
.rsz-e{top:8px;bottom:8px;right:-3px;width:9px;cursor:ew-resize}
.rsz-s{left:8px;right:8px;bottom:-3px;height:9px;cursor:ns-resize}
.rsz-se{right:-2px;bottom:-2px;width:16px;height:16px;cursor:nwse-resize;border-radius:0 0 14px 0;
  background:linear-gradient(135deg,transparent 45%,var(--accLine) 45%,var(--accLine) 62%,transparent 62%)}
.w-head{display:flex;align-items:center;gap:calc(8px * var(--wS));
  padding:calc(11px * var(--wS)) calc(12px * var(--wS)) calc(9px * var(--wS));cursor:grab;touch-action:none;
  font-weight:600;font-size:var(--wTS);color:var(--wTitleColor)}
.w-head>span:not([data-ic]):not(.sp):not(.counter){color:var(--wTitleColor)}
.w-head [data-ic]{color:#c9cbe0;display:inline-flex}
.sp{flex:1}
/* Icons carry their size as SVG width/height attributes, which CSS cannot
   multiply — zoom scales the whole (leaf) box, layout included, so one rule
   scales every icon in every widget with the rest of the content. */
.widget svg{zoom:var(--wS)}
.hbtn{display:inline-flex;align-items:center;justify-content:center;
  width:calc(26px * var(--wS));height:calc(26px * var(--wS));
  border-radius:calc(8px * var(--wS));color:var(--mut);transition:.15s}
.hbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.wclose{opacity:0;transition:.15s}
.widget:hover .wclose{opacity:1}

/* Touch devices: hover never fires, so keep resize handles + close button visible
   and give the handles a bigger hit target. */
@media (pointer:coarse){
  .rsz{opacity:1}
  .widget .wclose{opacity:1}
  .rsz-e{right:-8px;width:18px}
  .rsz-s{bottom:-8px;height:18px}
  .rsz-se{right:-4px;bottom:-4px;width:24px;height:24px}
  #clock .rsz{opacity:1}
}

/* Locked: widgets are frozen in place — no drag cursor, no resize handles. */
body.locked .rsz{display:none}
body.locked .w-head,body.locked #clock{cursor:default}
.w-body{padding:calc(2px * var(--wS)) calc(12px * var(--wS)) calc(12px * var(--wS))}
.tiny{font-size:calc(11px * var(--wS))}.mut{color:var(--mut)}.grn{color:var(--green)}
.counter{font-size:calc(11px * var(--wS));color:var(--mut);background:rgba(255,255,255,.06);
  padding:calc(2px * var(--wS)) calc(8px * var(--wS));border-radius:99px}

.seg{display:flex;background:#171826;border-radius:calc(10px * var(--wS));padding:calc(3px * var(--wS));margin-bottom:calc(12px * var(--wS))}
.seg button{flex:1;padding:calc(6px * var(--wS)) 0;border-radius:calc(8px * var(--wS));font-size:calc(12px * var(--wS));font-weight:600;color:var(--mut)}
.seg button.on{background:#2a2c40;color:#fff}

.ringWrap{position:relative;width:calc(150px * var(--wS));margin:calc(2px * var(--wS)) auto calc(4px * var(--wS))}
.rbg{fill:none;stroke:#23253a;stroke-width:7}
.rfg{fill:none;stroke:var(--acc);stroke-width:7;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .3s linear}
.ringTx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#tTime{font-size:calc(30px * var(--wS));font-weight:700;color:var(--orange);letter-spacing:.02em}
#tLabel{font-size:calc(10px * var(--wS));letter-spacing:.28em;color:var(--mut);margin-top:calc(2px * var(--wS))}
.trow{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--wS));padding:calc(6px * var(--wS)) 0 calc(2px * var(--wS))}
.cbtn{width:calc(38px * var(--wS));height:calc(38px * var(--wS));border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#1b1d2b;border:1px solid var(--line);color:#cfd3e6}
.cbtn:hover{background:#242637}
.playO{width:calc(46px * var(--wS));height:calc(46px * var(--wS));border-radius:50%;background:var(--orange);color:#1b1204;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(245,158,11,.35)}
.playO:hover{filter:brightness(1.08)}
.topts{display:none;margin-top:calc(12px * var(--wS));border-top:1px solid var(--line);padding-top:calc(10px * var(--wS))}
.topts.open{display:block}
.orow{display:flex;align-items:center;gap:calc(10px * var(--wS));font-size:calc(12px * var(--wS));color:#cfd3e6;padding:calc(5px * var(--wS)) 0}
.orow input[type=number]{width:calc(58px * var(--wS));background:#171826;border:1px solid var(--line);border-radius:calc(8px * var(--wS));
  padding:calc(5px * var(--wS)) calc(8px * var(--wS));font-size:calc(12px * var(--wS));text-align:center}
.orow input[type=number]:focus{outline:none;border-color:var(--accLine)}

.pill{min-width:calc(46px * var(--wS));text-align:center;padding:calc(5px * var(--wS)) calc(12px * var(--wS));
  border-radius:99px;font-size:calc(12px * var(--wS));font-weight:600;
  background:#23253a;color:var(--mut);transition:.15s}
.pill.on{background:var(--acc);color:var(--accInk)}

input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:calc(4px * var(--wS));border-radius:99px;
  background:linear-gradient(to right,#8f83f5 var(--v,50%),#2a2c3e var(--v,50%));outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:calc(13px * var(--wS));height:calc(13px * var(--wS));border-radius:50%;
  background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:calc(13px * var(--wS));height:calc(13px * var(--wS));border-radius:50%;background:#fff;border:none}

/* lists / inputs */
.inrow{display:flex;gap:calc(8px * var(--wS));margin-top:calc(8px * var(--wS))}
.inrow input{flex:1;min-width:0;background:#14152233;border:1px solid var(--line);border-radius:calc(10px * var(--wS));
  padding:calc(8px * var(--wS)) calc(11px * var(--wS));font-size:calc(12.5px * var(--wS))}
.inrow input::placeholder{color:#6c7186}
.inrow input:focus{outline:none;border-color:var(--accLine);background:#14152288}
.addb{width:calc(34px * var(--wS));height:calc(34px * var(--wS));border-radius:calc(10px * var(--wS));
  background:var(--acc);color:var(--accInk);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.wideb{width:100%;margin-top:calc(10px * var(--wS));padding:calc(8px * var(--wS));border-radius:calc(10px * var(--wS));background:#171826;
  border:1px solid var(--line);font-size:calc(12px * var(--wS));color:var(--mut)}
.wideb:hover{color:#fff;border-color:var(--accLine)}
.item{display:flex;align-items:center;gap:calc(9px * var(--wS));
  padding:calc(7px * var(--wS)) calc(4px * var(--wS));border-bottom:1px solid rgba(255,255,255,.05)}
.item:last-child{border-bottom:none}
/* custom checkbox — replaces the native white box */
.item input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;
  width:calc(18px * var(--wS));height:calc(18px * var(--wS));flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.28);border-radius:calc(6px * var(--wS));background:rgba(255,255,255,.04);cursor:pointer;
  position:relative;transition:.15s}
.item input[type=checkbox]:hover{border-color:var(--accLine)}
.item input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
.item input[type=checkbox]:checked::after{content:"";position:absolute;
  left:calc(5px * var(--wS));top:calc(2px * var(--wS));width:calc(5px * var(--wS));height:calc(9px * var(--wS));
  border:solid var(--accInk);border-width:0 calc(2px * var(--wS)) calc(2px * var(--wS)) 0;transform:rotate(45deg)}
.item input[type=checkbox]:focus-visible{outline:2px solid var(--accLine);outline-offset:2px}
.item .t{flex:1;font-size:var(--wBS);color:var(--wBodyColor);line-height:1.35;word-break:break-word}
.item.done .t{text-decoration:line-through;color:var(--mut)}
.item .hbtn{width:calc(22px * var(--wS));height:calc(22px * var(--wS));opacity:0}
.item:hover .hbtn{opacity:1}
.srcTag{font-size:calc(9px * var(--wS));font-weight:700;letter-spacing:.05em;color:#e44332;background:rgba(228,67,50,.14);
  padding:calc(1px * var(--wS)) calc(5px * var(--wS));border-radius:calc(5px * var(--wS))}
.dueChip{display:inline-flex;align-items:center;gap:calc(3px * var(--wS));font-size:calc(9.5px * var(--wS));font-weight:600;
  padding:calc(1px * var(--wS)) calc(6px * var(--wS));border-radius:calc(5px * var(--wS));color:var(--mut);background:rgba(255,255,255,.06);white-space:nowrap}
.dueChip svg{width:10px;height:10px}
.dueChip.today{color:var(--accText);background:var(--accSoft)}
.dueChip.over{color:var(--red);background:rgba(248,113,113,.15)}
/* Tasks widget Today/All toggle (only shown when Todoist is connected) */
.tdView{display:flex;gap:calc(2px * var(--wS));background:rgba(255,255,255,.05);
  border-radius:calc(8px * var(--wS));padding:calc(2px * var(--wS));margin-right:calc(2px * var(--wS))}
.tdView .tvb{font-size:calc(10.5px * var(--wS));font-weight:600;color:var(--mut);
  padding:calc(2px * var(--wS)) calc(8px * var(--wS));border-radius:calc(6px * var(--wS));line-height:1.4}
.tdView .tvb.on{background:#2a2c40;color:#fff}
.wfoot{display:flex;align-items:center;gap:calc(8px * var(--wS));padding-top:calc(9px * var(--wS));
  margin-top:calc(4px * var(--wS));border-top:1px solid rgba(255,255,255,.05)}
.tdStatsRow{display:flex;gap:calc(14px * var(--wS));justify-content:center;
  padding-top:calc(8px * var(--wS));margin-top:calc(6px * var(--wS));
  border-top:1px solid rgba(255,255,255,.05);font-size:calc(11px * var(--wS));color:var(--mut)}
.tdStat{white-space:nowrap}
.linkb{font-size:calc(11px * var(--wS));color:var(--mut)}
.linkb:hover{color:#fff}

#noteTx{width:100%;resize:vertical;background:transparent;border:none;outline:none;
  font-size:var(--wBS);line-height:1.55;color:var(--wBodyColor)}
#noteTx::placeholder{color:#6c7186}
.widget:not(.sized) #noteTx{height:calc(130px * var(--wS))}
/* the widget's own resize handles own the height once it has been sized */
.widget.sized #noteTx{resize:none;height:auto}

.plist{max-height:calc(298px * var(--wS));overflow:auto;margin:0 calc(-4px * var(--wS));padding:0 calc(4px * var(--wS))}
.prow{display:flex;align-items:center;gap:calc(10px * var(--wS));padding:calc(2px * var(--wS)) 0;border-bottom:1px solid rgba(255,255,255,.05)}
.prow .hl{width:calc(44px * var(--wS));flex-shrink:0;font-size:calc(10.5px * var(--wS));color:var(--mut);text-align:right}
.prow input{flex:1;min-width:0;background:transparent;border:none;outline:none;font-size:var(--wBS);padding:calc(8px * var(--wS)) calc(2px * var(--wS));color:var(--wBodyColor)}
.prow input::placeholder{color:#4a4f66}
.prow.now{background:linear-gradient(90deg,var(--accSoft),transparent);border-radius:8px}
.prow.now .hl{color:var(--accText);font-weight:700}
/* Todoist "tasks take over today" planner mode */
.ptrow{align-items:stretch}
.pslot{flex:1;display:flex;flex-direction:column;justify-content:center;gap:calc(4px * var(--wS));min-height:calc(30px * var(--wS));padding:calc(4px * var(--wS)) 0;border-radius:calc(8px * var(--wS));transition:background .12s}
.ptrow.over .pslot{background:var(--accSoft);box-shadow:inset 0 0 0 1px var(--accLine)}
.pstrip{display:flex;flex-wrap:wrap;gap:calc(6px * var(--wS));padding:calc(2px * var(--wS)) calc(2px * var(--wS)) calc(8px * var(--wS));margin-bottom:calc(4px * var(--wS));border-bottom:1px solid rgba(255,255,255,.06)}
.ptask{display:flex;align-items:center;gap:calc(7px * var(--wS));background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:calc(8px * var(--wS));padding:calc(5px * var(--wS)) calc(8px * var(--wS));cursor:grab;font-size:var(--wBS);user-select:none;
  min-width:0;max-width:100%}
.ptask:active{cursor:grabbing}
.ptask.dragging{opacity:.45}
.ptask .pt-dot{width:calc(7px * var(--wS));height:calc(7px * var(--wS));border-radius:50%;flex-shrink:0}
/* min-width:0 — a flex item defaults to min-width:auto, which refuses to shrink
   below its text and pushes the chip past the widget edge instead of ellipsing. */
.ptask .pt-txt{flex:1;min-width:0;color:var(--wBodyColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptask .pt-time{font-size:calc(10px * var(--wS));color:var(--mut);flex-shrink:0}
.pstrip .ptask{background:var(--accSoft);border-color:var(--accLine)}
.pslot.empty{cursor:text}
.pslot.empty:hover{background:rgba(255,255,255,.04)}
.pslotIn{width:100%;background:#14152288;border:1px solid var(--accLine);border-radius:calc(8px * var(--wS));
  padding:calc(5px * var(--wS)) calc(8px * var(--wS));font-size:var(--wBS);outline:none;color:var(--wBodyColor)}

.ambrow{display:flex;align-items:center;gap:calc(10px * var(--wS));padding:calc(7px * var(--wS)) calc(2px * var(--wS))}
.ambrow .ai{width:calc(22px * var(--wS));text-align:center;font-size:calc(14px * var(--wS));flex-shrink:0}
.ambrow .an{width:calc(78px * var(--wS));font-size:calc(12px * var(--wS));color:#cfd3e6;flex-shrink:0}

/* ---------- dock ---------- */
#dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:2px;padding:7px 9px;border-radius:18px;
  background:rgba(11,12,19,.72);backdrop-filter:blur(16px);border:1px solid var(--line);
  box-shadow:0 12px 36px rgba(0,0,0,.5);transition:opacity .25s,transform .28s ease}
/* auto-hide dock (taskbar-style): slide off-screen unless hovered/peeked */
body.autohide-dock #dock{transform:translateX(-50%) translateY(150%);opacity:0;pointer-events:none}
body.autohide-dock #dock.peek,body.autohide-dock #dock:hover{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
/* invisible hover strip along the bottom edge to reveal the dock */
#dockReveal{position:fixed;left:0;right:0;bottom:0;height:14px;z-index:39;display:none}
body.autohide-dock #dockReveal{display:block}
.ditem{width:52px;padding:6px 2px 5px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;gap:3px;color:var(--mut);font-size:9.5px;transition:.15s}
.ditem:hover{color:#fff;background:rgba(255,255,255,.06)}
.ditem.on{color:#fff;background:var(--accSoft)}
.ditem.on [data-ic]{color:var(--accText)}
.ddiv{width:1px;height:30px;background:var(--line);margin:0 5px}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none;background:rgba(4,4,8,.5);backdrop-filter:blur(3px)}
.modal.open{display:block}
.sheet{position:absolute;top:3.5vh;left:50%;transform:translateX(-50%);width:600px;max-width:94vw;
  max-height:92vh;overflow:auto;background:rgba(11,12,18,.97);border:1px solid var(--line);
  border-radius:18px;padding:22px 24px 26px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.m-head{display:flex;align-items:center;margin-bottom:6px}
.m-head h2{font-size:21px;font-weight:700}
.m-head .hbtn{margin-left:auto;width:32px;height:32px;background:#1b1d2b}
.sec{display:flex;align-items:center;gap:8px;margin:26px 0 4px;color:#8b90a6;font-size:12px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hint{font-size:12px;color:var(--mut);margin-bottom:12px}
.wrow{display:flex;align-items:center;gap:11px;padding:12px 13px;margin-bottom:9px;border-radius:12px;
  border:1px solid var(--accLine);background:var(--accDim);cursor:pointer}
.wrow.off{border-color:var(--line);background:rgba(255,255,255,.02);opacity:.75}
.wrow [data-ic]{color:#cfd3e6}
.wrow .n{font-size:13.5px;font-weight:600}
.badge{margin-left:auto;background:#eceef6;color:#14151f;font-size:11px;font-weight:800;
  border-radius:6px;padding:2px 8px}
.srow{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:13.5px}
.srow .sl{flex:1}
.srow select,.dsel{background:#171826;border:1px solid var(--line);border-radius:10px;padding:8px 34px 8px 12px;
  font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer;min-width:150px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
.srow select:focus{outline:none;border-color:var(--accLine)}
.colorpick{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:9px;background:#171826;cursor:pointer;flex-shrink:0}
.colorpick::-webkit-color-swatch-wrapper{padding:3px}
.colorpick::-webkit-color-swatch{border:none;border-radius:6px}
.colorpick::-moz-color-swatch{border:none;border-radius:6px}
/* accent-theme picker (Settings › Appearance) */
.themeRow{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.themeSw{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--tx);font-family:inherit;transition:border-color .15s}
.themeSw:hover{border-color:rgba(255,255,255,.22)}
.themeSw i{width:16px;height:16px;border-radius:50%;flex:none}
.themeSw.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--accSoft)}
.btn{display:inline-flex;align-items:center;gap:8px;background:#1b1d2b;border:1px solid var(--line);
  padding:9px 14px;border-radius:11px;font-size:12.5px;font-weight:600;transition:.15s}
.btn:hover{border-color:var(--accLine)}
.btn.acc{background:var(--acc);border-color:transparent;color:var(--accInk)}
.btn.acc:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.4;pointer-events:none}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin:4px 0 8px}
.icard{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:14px;
  padding:15px 16px;margin-bottom:12px}
.icard .ih{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.icard .ih b{font-size:14px}
.status{margin-left:auto;font-size:11px;font-weight:600;color:var(--mut);
  background:#1d1f2e;padding:3px 10px;border-radius:99px}
.status.ok{color:#0e2a1d;background:var(--green)}
.icard p{font-size:12px;color:var(--mut);line-height:1.5;margin-bottom:11px}
.icard p a{color:#a79bfa;text-decoration:none}
.tokrow{display:flex;gap:9px;margin:0}
.tokrow input{flex:1;background:#14152a55;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px}
.tokrow input:focus{outline:none;border-color:var(--accLine)}
.tdScope{margin-top:11px;display:flex;flex-direction:column;gap:9px}
.tdScopeRow{display:flex;gap:14px;font-size:12px;color:var(--mut)}
.tdScopeRow label{display:flex;align-items:center;gap:6px;cursor:pointer}
.tdScopeRow input[type=radio]{accent-color:var(--acc);cursor:pointer}
.tdScope select,.tdScope #tdFilter{width:100%;background:#14152a55;border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-size:12.5px}
.tdScope select:focus,.tdScope #tdFilter:focus{outline:none;border-color:var(--accLine)}
.tdScopeHint{font-size:11px;color:var(--mut);margin:0}
.tdScopeHint a{color:#a79bfa;text-decoration:none}
.krow{display:flex;align-items:center;padding:9px 2px;font-size:13px;color:#cfd3e6}
kbd{background:#22243a;border:1px solid #34365244;border-bottom-width:2px;border-radius:7px;
  padding:3px 9px;font-size:11.5px;font-weight:700;font-family:inherit}
.krow .ka{margin-left:auto;color:var(--mut)}
.nameRow{display:none;gap:9px;margin-bottom:10px}
.nameRow.open{display:flex}
.nameRow input{flex:1;background:#171826;border:1px solid var(--accLine);border-radius:10px;padding:8px 12px;font-size:13px}

/* spaces — categorized library */
#spHideDefaults.on{background:var(--accSoft);border-color:var(--accLine);color:var(--accText)}
.btn.sm{padding:6px 10px;font-size:11.5px}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--mut)}
.btn.danger{background:transparent;border-color:rgba(248,113,113,.4);color:var(--red)}
.btn.danger:hover{background:rgba(248,113,113,.12);border-color:var(--red)}

/* ---------- task editor modal (#mTask) ---------- */
.tkForm{display:flex;flex-direction:column;gap:5px}
.tkl{font-size:11px;font-weight:600;color:var(--mut);margin-top:8px}
.tkForm input,.tkForm textarea,.tkForm select{width:100%;background:#14152a55;border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;font-size:13px}
.tkForm input:focus,.tkForm textarea:focus,.tkForm select:focus{outline:none;border-color:var(--accLine);background:#14152288}
.tkForm textarea{min-height:60px;resize:vertical;line-height:1.5}
.tkGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tkPri{margin-bottom:0;margin-top:0}
.tkFoot{display:flex;align-items:center;gap:9px;margin-top:16px}
#tkDue{cursor:pointer}
.item .t{cursor:pointer}

/* ---------- due-date calendar popover ---------- */
.tkCal{position:fixed;z-index:81;background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:10px;box-shadow:0 22px 60px rgba(0,0,0,.6)}
.calChips{display:flex;gap:5px;margin-bottom:9px}
.calChips button{flex:1;font-size:10.5px;font-weight:600;color:var(--mut);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:8px;padding:5px 2px}
.calChips button:hover{color:#fff;border-color:var(--accLine)}
.calHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:13px;font-weight:600}
.calNav{width:26px;height:26px;border-radius:7px;color:var(--mut);font-size:16px;line-height:1}
.calNav:hover{color:#fff;background:rgba(255,255,255,.06)}
.calDow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.calDow span{text-align:center;font-size:10px;color:var(--mut)}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calGrid .cx{height:30px}
.calGrid .cd{height:30px;border-radius:7px;font-size:12px;color:var(--tx)}
.calGrid .cd:hover{background:rgba(255,255,255,.08)}
.calGrid .cd.today{color:var(--accText);font-weight:700}
.calGrid .cd.sel{background:var(--acc);color:var(--accInk)}
.calTime{display:flex;align-items:center;gap:8px;margin-top:10px}
.calTime label{font-size:11px;color:var(--mut)}
.calTime input[type=time]{flex:1;background:#14152a55;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;color-scheme:dark}
.calType{margin-top:8px}
.calType input{width:100%;background:#14152a55;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:11.5px;color:var(--tx)}
.calType input:focus{outline:none;border-color:var(--accLine)}

/* ---------- Pomodoro focus-task link ---------- */
.focusRow{position:relative;display:flex;align-items:center;gap:calc(6px * var(--wS));margin-top:calc(12px * var(--wS))}
.focusPick{flex:1;display:flex;align-items:center;gap:calc(8px * var(--wS));min-width:0;
  padding:calc(8px * var(--wS)) calc(11px * var(--wS));border-radius:calc(10px * var(--wS));
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--mut);font-size:calc(12.5px * var(--wS));transition:.15s}
.focusPick:hover{border-color:var(--accLine);color:var(--tx)}
.focusRow.active .focusPick{background:var(--accSoft);border-color:var(--accLine);color:var(--tx)}
.focusPick .focusLbl{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.focusDone,.focusClear{width:calc(30px * var(--wS));height:calc(30px * var(--wS));flex-shrink:0}
.focusDone{color:var(--green)}
.focusDone.pulse{animation:focusPulse 1s ease-in-out infinite}
@keyframes focusPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.7}}
.focusMenu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:50;max-height:calc(210px * var(--wS));overflow:auto;
  background:var(--panel2);border:1px solid var(--line);border-radius:calc(12px * var(--wS));padding:calc(5px * var(--wS));
  box-shadow:0 14px 40px rgba(0,0,0,.55)}
.fmItem{display:flex;align-items:center;gap:calc(7px * var(--wS));width:100%;text-align:left;
  padding:calc(8px * var(--wS)) calc(9px * var(--wS));border-radius:calc(8px * var(--wS));
  font-size:calc(12.5px * var(--wS));color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmItem:hover{background:rgba(255,255,255,.06)}
.fmItem .fmTd{font-size:calc(9px * var(--wS));font-weight:700;color:#e44332;background:rgba(228,67,50,.14);padding:calc(1px * var(--wS)) calc(4px * var(--wS));border-radius:calc(4px * var(--wS));flex-shrink:0}
.fmEmpty{padding:calc(10px * var(--wS));font-size:calc(12px * var(--wS));color:var(--mut);text-align:center}
/* Spotify searchable playlist picker (extends .focusMenu / .fmItem) */
.spMenu{max-height:calc(322px * var(--wS));padding:calc(6px * var(--wS))}
.spSearchWrap{position:sticky;top:calc(-6px * var(--wS));background:var(--panel2);padding:calc(4px * var(--wS)) calc(2px * var(--wS)) calc(6px * var(--wS));margin:-1px 0 2px;z-index:1}
#spSearch{width:100%;background:#14152a55;border:1px solid var(--line);border-radius:calc(8px * var(--wS));padding:calc(7px * var(--wS)) calc(9px * var(--wS));font-size:calc(12px * var(--wS));color:var(--tx)}
#spSearch:focus{outline:none;border-color:var(--accLine)}
.fmSect{font-size:calc(9.5px * var(--wS));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8b90a6;padding:calc(8px * var(--wS)) calc(9px * var(--wS)) calc(3px * var(--wS))}
.spMenu .fmItem{flex-direction:column;align-items:flex-start;gap:calc(1px * var(--wS))}
.fmMain{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmSub{max-width:100%;font-size:calc(10.5px * var(--wS));color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- spotify widget: now-playing shell ----------
   The player view is JS-rendered (js/14-spotify.js shellHTML). These rules give
   the bare hooks (.sp-now/.sp-cover/.sp-prog/.sp-ctl) the scaled sizing the rest
   of the widget system uses, so resizing the widget wider scales the cover, type,
   progress bar and controls — not just the box. Source order puts .sp-toggle
   after .addb, so the 40px play button overrides .addb's 34px. */
.sp-now{display:flex;align-items:center;gap:calc(10px * var(--wS))}
.sp-cover{width:calc(52px * var(--wS));height:calc(52px * var(--wS));border-radius:calc(8px * var(--wS));flex-shrink:0;background:rgba(255,255,255,.06);background-size:cover;background-position:center}
.sp-meta{min-width:0;flex:1}
.sp-title{font-weight:600;font-size:calc(13px * var(--wS));color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-prog{display:flex;align-items:center;gap:calc(8px * var(--wS));margin-top:calc(10px * var(--wS))}
.sp-time{width:calc(34px * var(--wS));text-align:right;font-variant-numeric:tabular-nums}
.sp-track{flex:1;min-width:0;height:calc(4px * var(--wS));border-radius:calc(3px * var(--wS));background:rgba(255,255,255,.1);overflow:hidden}
.sp-progbar{height:100%;width:0;background:var(--acc)}
.sp-ctl{display:flex;align-items:center;justify-content:center;gap:calc(14px * var(--wS));margin-top:calc(8px * var(--wS))}
.sp-toggle{width:calc(40px * var(--wS));height:calc(40px * var(--wS))}
.sp-vrow{display:flex;align-items:center;gap:calc(8px * var(--wS));margin-top:calc(10px * var(--wS))}
.sp-vrow>span{flex-shrink:0}
.sp-vrow input[type=range]{flex:1;min-width:0}
@media (prefers-reduced-motion:reduce){.focusDone.pulse{animation:none}}
.btn.ghost:hover{color:#fff;border-color:var(--accLine)}
.spcat{margin-top:20px}
.spcat-head{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.spcat-name{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8b90a6}
.spcat-head .hbtn{width:22px;height:22px;opacity:0;transition:.15s}
.spcat:hover .spcat-head .hbtn{opacity:1}
.spcat-input{background:#171826;border:1px solid var(--accLine);border-radius:8px;padding:5px 9px;font-size:12px;color:var(--tx)}
.spcat-add{display:flex;gap:8px;margin-top:16px}
.spaddcat{margin-top:16px}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:8px}
.scard{position:relative;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;
  background:#0e0f18;transition:.15s;text-align:left}
.scard:hover{border-color:#4b4e6a;transform:translateY(-2px)}
.scard.on{border-color:var(--acc);box-shadow:0 0 0 3px var(--accSoft)}
.sc-thumb{display:block;width:100%;aspect-ratio:16/9;height:auto}
.sc-img{background-size:cover;background-position:center}
.sc-grad{display:flex;align-items:center;justify-content:center;position:relative}
.sc-ytthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard.concealed{opacity:.5}
.scard.concealed:hover{opacity:.85}
.sc-glyph{color:rgba(255,255,255,.85);display:inline-flex}
.sc-glyph svg{width:26px;height:26px}
.sc-vtag{position:absolute;bottom:7px;right:8px;font-size:9px;font-weight:700;letter-spacing:.05em;
  background:rgba(0,0,0,.5);color:#fff;padding:2px 7px;border-radius:99px;text-transform:uppercase}
.scap{padding:9px 11px 11px}
.sc-name{font-size:13px;font-weight:600;line-height:1.25}
.sc-desc{font-size:11px;color:var(--mut);line-height:1.35;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-edit{position:absolute;top:7px;right:7px;display:flex;gap:3px;opacity:0;transition:.15s}
.scard:hover .sc-edit{opacity:1}
.sc-edit .hbtn{width:26px;height:26px;background:rgba(8,9,15,.72);backdrop-filter:blur(6px)}
.scard-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1.5px dashed var(--line);background:rgba(255,255,255,.02);color:var(--mut);min-height:150px}
.scard-add:hover{border-color:var(--accLine);color:#fff;transform:none}
.sc-plus{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.06)}
.sc-plus svg{width:22px;height:22px}
.sc-addlab{font-size:12px;font-weight:600}
.sp-confirm{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--mut);padding:6px 2px}
.sc-delc{position:absolute;inset:auto 6px 6px 6px;background:rgba(8,9,15,.9);border-radius:9px;padding:7px 9px;justify-content:center}
/* add / edit space form */
.sp-form{max-width:460px;margin:8px auto;display:flex;flex-direction:column;gap:10px}
.sp-ftitle{font-size:16px;font-weight:700;margin-bottom:2px}
.sp-frow{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.sp-fbtns{display:flex;gap:9px;margin-top:2px}

#toasts{position:fixed;top:16px;right:16px;z-index:80;display:flex;flex-direction:column;gap:9px}
.toast{background:rgba(19,20,32,.95);border:1px solid var(--line);border-left:3px solid var(--acc);
  padding:11px 15px;border-radius:12px;font-size:12.5px;max-width:320px;box-shadow:0 12px 32px rgba(0,0,0,.5);
  animation:tin .25s ease}
.toast.warn{border-left-color:var(--orange)}
.toast.err{border-left-color:var(--red)}
@keyframes tin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ---------- routines widget ---------- */
#w-routines .w-body{max-height:70vh;overflow:auto}
#w-routines.sized .w-body{max-height:none}
.rt-block{margin-bottom:calc(12px * var(--wS));border-radius:calc(12px * var(--wS));padding:calc(8px * var(--wS)) calc(9px * var(--wS));transition:opacity .2s,background .2s}
.rt-block:last-child{margin-bottom:0}
.rt-emph{background:var(--accWash);border:1px solid var(--accLine)}
.rt-mut{opacity:.62;border:1px solid transparent}
.rt-mut:hover{opacity:.85}
.rt-bhead{display:flex;align-items:center;margin-bottom:calc(5px * var(--wS))}
.rt-blabel{font-size:calc(11px * var(--wS));font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accText)}
.rt-mut .rt-blabel{color:var(--mut)}
.rt-prog{margin-left:auto;font-size:calc(10.5px * var(--wS));color:var(--mut);font-variant-numeric:tabular-nums}
.rt-empty{font-size:calc(12px * var(--wS));color:var(--mut);padding:calc(4px * var(--wS)) calc(2px * var(--wS))}
.rt-alldone{font-size:calc(11px * var(--wS));color:var(--green);padding:calc(5px * var(--wS)) calc(2px * var(--wS)) calc(2px * var(--wS))}
.rt-row{display:flex;align-items:center;gap:calc(10px * var(--wS));width:100%;padding:calc(7px * var(--wS)) calc(5px * var(--wS));border-radius:calc(9px * var(--wS));text-align:left}
.rt-check{background:transparent;border:none;color:var(--tx);cursor:pointer;transition:background .15s}
.rt-check:hover{background:rgba(255,255,255,.05)}
.rt-check:focus-visible{outline:2px solid var(--accLine);outline-offset:1px}
.rt-box{width:calc(18px * var(--wS));height:calc(18px * var(--wS));flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.28);border-radius:calc(6px * var(--wS));
  background:rgba(255,255,255,.04);position:relative;transition:.15s}
.rt-check:hover .rt-box{border-color:var(--accLine)}
.rt-check.done .rt-box{background:var(--acc);border-color:var(--acc)}
.rt-check.done .rt-box::after{content:"";position:absolute;
  left:calc(5px * var(--wS));top:calc(2px * var(--wS));width:calc(5px * var(--wS));height:calc(9px * var(--wS));
  border:solid var(--accInk);border-width:0 calc(2px * var(--wS)) calc(2px * var(--wS)) 0;transform:rotate(45deg)}
.rt-title{flex:1;font-size:var(--wBS);color:var(--wBodyColor);line-height:1.3}
/* kept habit: text mutes but stays legible — NO strikethrough by default (that's task language) */
.rt-check.done .rt-title{color:var(--mut)}
/* opt-in task-style line-through (manage › Strike done) */
#rtDay.rt-strike .rt-check.done .rt-title{text-decoration:line-through}
.rt-streak{font-size:calc(10.5px * var(--wS));font-weight:700;color:var(--accText);background:var(--accSoft);padding:calc(1px * var(--wS)) calc(7px * var(--wS));border-radius:99px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s}
.rt-check:hover .rt-streak,.rt-check:focus-visible .rt-streak{opacity:1}
.rt-rest{color:var(--mut)}
.rt-restdot{width:calc(8px * var(--wS));height:calc(8px * var(--wS));border-radius:50%;background:rgba(255,255,255,.16);flex-shrink:0;margin:0 calc(5px * var(--wS))}
.rt-resttag{font-size:calc(10px * var(--wS));color:var(--mut);font-style:italic}
.rt-prog.rt-done{color:var(--green);font-weight:600;animation:rtfade .4s ease}
@keyframes rtfade{from{opacity:0}to{opacity:1}}
/* fold */
.rt-fold{display:inline-flex;align-items:center;justify-content:center;width:calc(20px * var(--wS));height:calc(20px * var(--wS));color:var(--mut);flex-shrink:0;cursor:pointer;border-radius:calc(6px * var(--wS));transition:.15s}
.rt-fold:hover{color:#fff;background:rgba(255,255,255,.08)}
.rt-fold:focus-visible{outline:2px solid var(--accLine);outline-offset:1px}
.rt-fold svg{transition:transform .2s}
.rt-block.folded .rt-fold svg{transform:rotate(-90deg)}
.rt-block.folded .rt-rows{display:none}
/* completion ring + wash reward */
.rt-row{position:relative;overflow:hidden}
.rt-washfx{position:absolute;inset:0;background:var(--accSoft);border-radius:9px;pointer-events:none;animation:rtwash .6s ease-out .12s both}
@keyframes rtwash{from{opacity:.9}to{opacity:0}}
.rt-ringfx{position:absolute;left:calc(13px * var(--wS));top:50%;width:calc(30px * var(--wS));height:calc(30px * var(--wS));
  margin:calc(-15px * var(--wS)) 0 0 calc(-15px * var(--wS));border-radius:calc(9px * var(--wS));
  border:2px solid var(--accRing);pointer-events:none;animation:rtring .5s cubic-bezier(.16,1,.3,1) both}
@keyframes rtring{from{transform:scale(.4);opacity:.9}to{transform:scale(2.1);opacity:0}}
/* manage mode */
.rt-mgr{display:flex;flex-direction:column;gap:calc(12px * var(--wS))}
.rt-form{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:calc(12px * var(--wS));padding:calc(11px * var(--wS));display:flex;flex-direction:column;gap:calc(9px * var(--wS))}
.rt-input{background:#14152288;border:1px solid var(--line);border-radius:calc(9px * var(--wS));padding:calc(8px * var(--wS)) calc(10px * var(--wS));font-size:calc(13px * var(--wS))}
.rt-input:focus{outline:none;border-color:var(--accLine)}
.rt-frow{display:flex;align-items:center;gap:calc(8px * var(--wS));font-size:calc(12px * var(--wS))}
.rt-flabel{width:calc(52px * var(--wS));color:var(--mut);flex-shrink:0}
.rt-days{display:flex;gap:calc(5px * var(--wS));flex-wrap:wrap}
.rt-day{width:calc(30px * var(--wS));height:calc(28px * var(--wS));border-radius:calc(8px * var(--wS));border:1px solid var(--line);background:#171826;font-size:calc(11px * var(--wS));color:var(--mut);cursor:pointer;transition:.12s}
.rt-day.on{background:var(--acc);border-color:transparent;color:var(--accInk)}
.rt-formbtns{display:flex;gap:calc(8px * var(--wS))}
.rt-mbhead{font-size:calc(10.5px * var(--wS));font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:calc(2px * var(--wS)) 0 calc(5px * var(--wS))}
.rt-mlist{display:flex;flex-direction:column;gap:calc(3px * var(--wS));min-height:calc(6px * var(--wS));border-radius:calc(8px * var(--wS))}
.rt-mlist.rt-over{outline:1.5px dashed var(--accLine);outline-offset:2px}
.rt-mrow{display:flex;align-items:center;gap:calc(7px * var(--wS));padding:calc(6px * var(--wS)) calc(5px * var(--wS));border-radius:calc(8px * var(--wS));background:rgba(255,255,255,.02);font-size:calc(12px * var(--wS))}
.rt-mrow.rt-over{box-shadow:0 -2px 0 var(--acc)}
.rt-mrow.rt-dragging{opacity:.5}
.rt-mrow.inactive{opacity:.5}
.rt-grip{color:var(--mut);cursor:grab;display:inline-flex;touch-action:none}
.rt-grip:active{cursor:grabbing}
.rt-mtitle{flex:1;min-width:0;font-size:var(--wBS);color:var(--wBodyColor);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-inact{color:var(--mut);font-style:italic;font-size:calc(10px * var(--wS))}
.rt-mrep{font-size:calc(10px * var(--wS));color:var(--mut);white-space:nowrap}
.rt-mstreak{font-size:calc(10px * var(--wS));color:var(--accText);font-variant-numeric:tabular-nums;white-space:nowrap}
.rt-mbtns{display:flex;align-items:center;gap:calc(1px * var(--wS))}
.rt-mbtns .hbtn{width:calc(22px * var(--wS));height:calc(22px * var(--wS));font-size:calc(12px * var(--wS))}
.rt-mbtns .hbtn:disabled{opacity:.25;pointer-events:none}
.rt-confirm{display:inline-flex;align-items:center;gap:calc(5px * var(--wS));font-size:calc(11px * var(--wS));color:var(--red)}
.rt-cyes,.rt-cno{padding:calc(2px * var(--wS)) calc(7px * var(--wS));border-radius:calc(6px * var(--wS));font-size:calc(11px * var(--wS));font-weight:600}
.rt-cyes{background:var(--red);color:#fff}
.rt-cno{background:#171826;border:1px solid var(--line);color:var(--tx)}
.rt-mfoot{display:flex;align-items:center;gap:calc(8px * var(--wS));padding-top:calc(10px * var(--wS));margin-top:calc(2px * var(--wS));border-top:1px solid rgba(255,255,255,.06)}
.rt-mfoot .rt-flabel{width:auto;flex:1;color:var(--mut);font-size:calc(12px * var(--wS))}
@media (prefers-reduced-motion:reduce){
  .rt-ringfx{display:none}
  .rt-washfx{animation:none;opacity:.9}
}

/* zen / hide-ui mode */
body.zen .widget,body.zen #spaceChip,body.zen #acctChip,body.zen #dock{opacity:0;pointer-events:none}
body.zen #dock.peek{opacity:1;pointer-events:auto}

@media (max-width:760px){
  #clock{top:20%}
  #clockTime{font-size:36px}
  .widget{width:min(302px,calc(100vw - 24px))}
  #dock{max-width:96vw;overflow-x:auto}
}