/* ══════════════════════════════════════════════════════════════════════
   YUUBAKO v5  ·  anime cyberpunk PMS wallpaper

   Grammar taken from the new references, all artwork drawn here:
     HUD kit   -> chamfered notched panels, bracket frames, crosshair tick
                  field, triangle badges, hatched fill blocks, big percent
                  readouts, vertical percent strips, registration marks
     X-MECHS   -> type running up both edges, barcodes, boxed CE and danger
                  glyphs, tiny captioned blocks, copyright marks
     Cyber kit -> hard chamfered blocks, circuit traces with elbows and
                  junction dots, X marks, arrow and ++++ glyphs, grid squares
   ══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden}
body{background:var(--void);color:var(--text);
  font:500 calc(16px*var(--ts,1))/1.5 'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;display:block;
  transition:background .7s ease,color .7s ease}
:root{--disp:'Chakra Petch',sans-serif; --mono:'Share Tech Mono',ui-monospace,monospace;
  --cond:'Rajdhani','Chakra Petch',sans-serif;
  --dim:.38; --grain:.06; --depth:1; --tilt:1; --pspeed:1; --scan:.5;
  --ch:13px;              /* chamfer size, the single biggest shape decision */
  --panelA:93%}
:root[data-bg="image"],:root[data-bg="video"]{--panelA:96%}

/* ── surfaces. harder and higher contrast than the cozy build ── */
:root[data-tod="dawn"]{--void:#07050A;--page:#120B16;--p1:#1C1220;--p2:#241829;
  --text:#FFF0F6;--muted:#C0A2B4;
  --sky1:#180B1E;--sky2:#3D1330;--sky3:#7A1E42;--sky4:#C43A63;
  --orbx:22%;--orby:62%;--orb:#FF9EC4;--orbglow:rgba(255,80,150,.4);
  --star:.35;--city:#1A0F1F;--city2:#2A1730;--grid:rgba(255,62,157,.18)}
:root[data-tod="day"]{--void:#8E949C;--page:#E6E9ED;--p1:#F4F6F8;--p2:#D2D7DE;
  --text:#0A0A0C;--muted:#4C5058;
  --sky1:#93AABC;--sky2:#B8C9D6;--sky3:#DCE6EC;--sky4:#F2F6F8;
  --orbx:74%;--orby:18%;--orb:#FFFFFF;--orbglow:rgba(255,214,150,.45);
  --star:0;--city:#7E8B9B;--city2:#A3AEBB;--grid:rgba(17,103,117,.2)}
:root[data-tod="dusk"]{--void:#06050C;--page:#100C18;--p1:#1A1426;--p2:#221A30;
  --text:#F2ECFA;--muted:#ADA0C0;
  --sky1:#0C0818;--sky2:#241340;--sky3:#5B1F5E;--sky4:#A32F55;
  --orbx:78%;--orby:58%;--orb:#FFB477;--orbglow:rgba(255,110,60,.38);
  --star:.7;--city:#150F22;--city2:#231A36;--grid:rgba(192,132,252,.16)}
:root[data-tod="night"]{--void:#030308;--page:#07090E;--p1:#0E1218;--p2:#141A22;
  --text:#E8F4FA;--muted:#94A8B4;
  --sky1:#03040A;--sky2:#071018;--sky3:#0B1E2A;--sky4:#123240;
  --orbx:26%;--orby:20%;--orb:#DFF6FF;--orbglow:rgba(34,211,238,.3);
  --star:1;--city:#080C12;--city2:#0F161E;--grid:rgba(34,211,238,.16)}

/* ── accent schemes, AA-checked against p1, p2 and page ── */
:root[data-tod="dawn"][data-acc="ember"]{--a1:#FF6B35;--a2:#FF3355;--a3:#FFB020;--a1t:#FF7B4A;--a2t:#FF758C;--a3t:#FFB020}
:root[data-tod="dawn"][data-acc="cyan"]{--a1:#22D3EE;--a2:#5EEAD4;--a3:#FF6B35;--a1t:#22D3EE;--a2t:#5EEAD4;--a3t:#FF7B4A}
:root[data-tod="dawn"][data-acc="acid"]{--a1:#E8FF47;--a2:#A3E635;--a3:#22D3EE;--a1t:#E8FF47;--a2t:#A3E635;--a3t:#22D3EE}
:root[data-tod="dawn"][data-acc="magenta"]{--a1:#FF3E9D;--a2:#C084FC;--a3:#22D3EE;--a1t:#FF6EB5;--a2t:#C287FC;--a3t:#22D3EE}
:root[data-tod="day"][data-acc="ember"]{--a1:#9E4221;--a2:#B2243C;--a3:#7D5610;--a1t:#793219;--a2t:#8A1C2F;--a3t:#61420C}
:root[data-tod="day"][data-acc="cyan"]{--a1:#116775;--a2:#29675D;--a3:#9E4221;--a1t:#0D4F5A;--a2t:#204F48;--a3t:#793219}
:root[data-tod="day"][data-acc="acid"]{--a1:#5A631C;--a2:#496718;--a3:#116775;--a1t:#454C16;--a2t:#384F13;--a3t:#0D4F5A}
:root[data-tod="day"][data-acc="magenta"]{--a1:#AB2A69;--a2:#714E95;--a3:#116775;--a1t:#832051;--a2t:#573C72;--a3t:#0D4F5A}
:root[data-tod="dusk"][data-acc="ember"]{--a1:#FF6B35;--a2:#FF3355;--a3:#FFB020;--a1t:#FF7B4A;--a2t:#FF758C;--a3t:#FFB020}
:root[data-tod="dusk"][data-acc="cyan"]{--a1:#22D3EE;--a2:#5EEAD4;--a3:#FF6B35;--a1t:#22D3EE;--a2t:#5EEAD4;--a3t:#FF7B4A}
:root[data-tod="dusk"][data-acc="acid"]{--a1:#E8FF47;--a2:#A3E635;--a3:#22D3EE;--a1t:#E8FF47;--a2t:#A3E635;--a3t:#22D3EE}
:root[data-tod="dusk"][data-acc="magenta"]{--a1:#FF3E9D;--a2:#C084FC;--a3:#22D3EE;--a1t:#FF6FB6;--a2t:#C287FC;--a3t:#22D3EE}
:root[data-tod="night"][data-acc="ember"]{--a1:#FF6B35;--a2:#FF3355;--a3:#FFB020;--a1t:#FF7643;--a2t:#FF7087;--a3t:#FFB020}
:root[data-tod="night"][data-acc="cyan"]{--a1:#22D3EE;--a2:#5EEAD4;--a3:#FF6B35;--a1t:#22D3EE;--a2t:#5EEAD4;--a3t:#FF7643}
:root[data-tod="night"][data-acc="acid"]{--a1:#E8FF47;--a2:#A3E635;--a3:#22D3EE;--a1t:#E8FF47;--a2t:#A3E635;--a3t:#22D3EE}
:root[data-tod="night"][data-acc="magenta"]{--a1:#FF3E9D;--a2:#C084FC;--a3:#22D3EE;--a1t:#FF69B3;--a2t:#C084FC;--a3t:#22D3EE}
/* an uploaded image drives the accents from JS. these keep every accent token
   defined if the palette is ever dropped, so nothing renders unstyled. */
:root[data-tod="dawn"][data-acc="media"]{--a1:#22D3EE;--a2:#5EEAD4;--a3:#FF6B35;--a1t:#22D3EE;--a2t:#5EEAD4;--a3t:#FF7B4A}
:root[data-tod="day"][data-acc="media"]{--a1:#116775;--a2:#29675D;--a3:#9E4221;--a1t:#0D4F5A;--a2t:#204F48;--a3t:#793219}
:root[data-tod="dusk"][data-acc="media"]{--a1:#22D3EE;--a2:#5EEAD4;--a3:#FF6B35;--a1t:#22D3EE;--a2t:#5EEAD4;--a3t:#FF7B4A}
:root[data-tod="night"][data-acc="media"]{--a1:#22D3EE;--a2:#5EEAD4;--a3:#FF6B35;--a1t:#22D3EE;--a2t:#5EEAD4;--a3t:#FF7643}

/* ══════════════ the chamfer, used on every hard surface ══════════════ */
.cham{clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
      calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.cham-sm{--ch:7px;clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
      calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}

/* edge to edge. the registration marks in .hud carry the frame now, so no
   clip-path is needed and nothing is cropped at the corners. */
#frame{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden}
#frame::after{content:'';position:absolute;inset:9px;z-index:12;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--a1) 26%,transparent)}

/* ── scene ── */
#scene{position:absolute;inset:0;z-index:0;overflow:hidden}
#scene > *{position:absolute;inset:-7%}
/* v71 · only these move with the pointer; see LAY in app.js */
.orb i,.city svg,.city2 svg,.floor,.haze{will-change:transform}
/* v71 · floor and haze are only the bottom strip they show in; the #scene rule above sets top, so this needs its weight */
#scene > .floor,#scene > .haze{top:auto}
:root[data-bg="image"] #scene,:root[data-bg="video"] #scene{display:none}
.sky{background:linear-gradient(to top,var(--sky4) 0,var(--sky3) 24%,var(--sky2) 56%,var(--sky1) 100%);
  transition:background .9s ease}
.neb{background:
  radial-gradient(52% 38% at 18% 26%,color-mix(in srgb,var(--a1) 26%,transparent),transparent 70%),
  radial-gradient(46% 34% at 82% 36%,color-mix(in srgb,var(--a2) 20%,transparent),transparent 72%);
  mix-blend-mode:screen;opacity:.75}
.orb i{position:absolute;left:var(--orbx);top:var(--orby);width:74px;height:74px;
  margin:-37px 0 0 -37px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,var(--orb) 0,var(--orb) 52%,
    color-mix(in srgb,var(--orb) 62%,transparent) 100%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--a1) 55%,transparent),
    0 0 0 9px color-mix(in srgb,var(--a1) 9%,transparent),
    0 0 54px 20px var(--orbglow),0 0 170px 80px var(--orbglow);
  opacity:.9;transition:left .9s ease,top .9s ease}
/* v71 · each star carries the theme's star strength itself. On the parent, it would make Chrome draw
   all the twinkling stars into one more sky-sized layer first. Twinkling never goes below a third. */
.stars i{position:absolute;background:var(--text);opacity:var(--star)}
.stars i.tw{animation:twg var(--d,4s) ease-in-out infinite alternate}
@keyframes twg{from{opacity:calc(var(--star)*.35)}to{opacity:var(--star)}}
@keyframes tw{from{opacity:.15}to{opacity:.95}}
/* perspective floor grid, the cyber-layout circuit field */
.floor{background-image:
  repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 62px),
  repeating-linear-gradient(var(--grid) 0 1px,transparent 1px 44px);
  transform-origin:50% 100%;
  /* v71 · only the bottom third shows through the mask, so the layer is only that tall */
  height:calc(114% * .34);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 35.3%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0,#000 35.3%,transparent 100%);opacity:.9}
.city svg,.city2 svg{position:absolute;bottom:0;left:0;width:100%;height:auto;display:block}
.city .lit,.city2 .lit{fill:var(--a1)}
.city2 .lit{fill:var(--a2)}
.haze{height:calc(114% * .3);background:linear-gradient(to top,
  color-mix(in srgb,var(--sky4) 52%,transparent) 0,transparent 100%)}

/* uploaded image */
#imgwrap{position:absolute;inset:0;z-index:0;display:none;perspective:1400px;overflow:hidden;background:var(--page)}
:root[data-bg="image"] #imgwrap{display:block}
#imgwrap .plane{position:absolute;inset:-6%;transform-style:preserve-3d;will-change:transform}
#imgwrap img{width:100%;height:100%;object-fit:cover;display:block}
#imgwrap .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:radial-gradient(40% 40% at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.2),transparent 68%)}
#vidwrap{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;background:#000}
:root[data-bg="video"] #vidwrap{display:block}
#vidwrap #player{position:absolute;top:50%;left:50%;
  width:max(100vw,177.78vh);height:max(56.25vw,100vh);
  transform:translate(-50%,-50%) scale(1.22);pointer-events:none;border:0}

#fx{position:absolute;inset:0;z-index:1;pointer-events:none}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--dim);
  background:radial-gradient(120% 92% at 50% 44%,transparent 30%,rgba(0,0,0,.66) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.42) 0,transparent 20%,transparent 60%,rgba(0,0,0,.58) 100%);
  transition:opacity .35s ease}
:root[data-tod="day"][data-bg="scene"] .scrim{
  background:radial-gradient(120% 92% at 50% 44%,transparent 40%,rgba(20,22,30,.34) 100%)}
/* CRT scanlines, the one effect that reads cyberpunk before anything else */
.scan{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--scan);
  background:repeating-linear-gradient(rgba(0,0,0,.3) 0 1px,transparent 1px 4px)}
/* v71 · no multiply blend: for black lines it gives the same pixels as plain layering, and a blend
   needs a screen-sized layer of its own */
:root[data-tod="day"] .scan{opacity:calc(var(--scan)*.5)}
.grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* soft plates under the top and bottom rows so controls stay readable
   over any wallpaper. --page carries the mode, so this darkens at night
   and lightens at noon without a second rule. */
.band{position:absolute;left:0;right:0;z-index:6;pointer-events:none}
.band.t{top:0;height:186px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--page) 88%,transparent) 0,
    color-mix(in srgb,var(--page) 46%,transparent) 56%,transparent 100%)}
.band.b{bottom:0;height:186px;
  background:linear-gradient(to top,color-mix(in srgb,var(--page) 90%,transparent) 0,
    color-mix(in srgb,var(--page) 46%,transparent) 54%,transparent 100%)}

/* 9-10px mono loses real contrast to antialiasing, so the glyphs get a
   hair of stroke. Colour is untouched; only coverage goes up. */
.cbox .ck,.cbox .cw,.credit,.seg button,.hp,.edge,.pct .k,.nav a,.blurb .more,.step .nm{
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}

/* ══════════════ sign in ══════════════ */
#gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--void);padding:24px}
#gate[hidden]{display:none}
.gatebox{width:min(400px,100%);padding:30px 30px 26px;--ch:16px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--p1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 34%,transparent)}
.gmark{width:38px;height:38px;--ch:9px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);display:grid;place-items:center;color:var(--page);
  font:700 calc(18px*var(--ts,1))/1 var(--disp);margin-bottom:18px}
.gatebox h1{margin:0 0 7px;font:700 calc(26.5px*var(--ts,1))/1.1 var(--disp);letter-spacing:.01em}
.gsub{margin:0 0 20px;font:400 calc(14px*var(--ts,1))/1.6 var(--mono);
  color:color-mix(in srgb,var(--text) 76%,transparent)}
#gform{display:flex;flex-direction:column;gap:9px}
#gmail{padding:12px 13px;border:0;--ch:8px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--p2);color:var(--text);font:400 calc(15px*var(--ts,1))/1 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
#gmail:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--a1)}
#gbtn{padding:12px 13px;border:0;cursor:pointer;--ch:8px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);color:var(--page);font:400 calc(13.5px*var(--ts,1))/1 var(--mono);
  letter-spacing:0.08em;text-transform:uppercase;transition:opacity .18s}
/* a ring on hover keeps the label at full contrast in the Day look */
#gbtn:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--page) 55%,transparent)}
#gbtn:disabled{opacity:.5;cursor:default}
.gmsg{margin:15px 0 0;min-height:17px;font:400 calc(13.5px*var(--ts,1))/1.6 var(--mono);
  color:color-mix(in srgb,var(--text) 80%,transparent)}
.gmsg.ok{color:var(--a2t,var(--a2))}
.gmsg.bad{color:var(--a3t,var(--a3))}

/* ══════════════ task panel ══════════════ */
.tpan{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);z-index:22;
  background:color-mix(in srgb,var(--page) 96%,transparent);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:-1px 0 0 color-mix(in srgb,var(--a1) 32%,transparent),-30px 0 70px rgba(0,0,0,.4);
  display:flex;flex-direction:column;animation:slidein .26s ease}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.tpan .th{display:flex;align-items:center;gap:11px;padding:20px 22px 14px}
.tpan .th h2{margin:0;font:700 calc(20px*var(--ts,1))/1.1 var(--disp)}
.tpan .th .sp{flex:1}
.tpan .tx{background:none;border:0;color:var(--text);font-size:calc(22.5px*var(--ts,1));cursor:pointer;line-height:1;padding:2px 5px}
.tpan .tmeta{padding:0 22px 13px;font:400 calc(12.5px*var(--ts,1))/1.6 var(--mono);letter-spacing:0.065em;
  text-transform:uppercase;color:color-mix(in srgb,var(--text) 74%,transparent);
  -webkit-text-stroke:.32px currentColor}
.tadd{display:flex;gap:7px;padding:0 22px 14px}
.tadd input{flex:1;padding:10px 12px;border:0;--ch:7px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--p2);color:var(--text);font:400 calc(14px*var(--ts,1))/1 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 15%,transparent)}
.tadd input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ac,var(--a1))}
.tadd button{padding:10px 14px;border:0;cursor:pointer;--ch:7px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--ac,var(--a1));color:var(--page);font:400 calc(12.5px*var(--ts,1))/1 var(--mono);
  letter-spacing:0.065em;text-transform:uppercase}
.tlist{flex:1;overflow-y:auto;padding:0 22px 22px}
.trow{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-top:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.trow .ck{width:15px;height:15px;flex:0 0 auto;margin-top:2px;cursor:pointer;
  background:none;border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent);
  transform:rotate(45deg);transition:all .18s;padding:0}
.trow .ck:hover{border-color:var(--ac,var(--a1))}
.trow.done .ck{background:var(--ac,var(--a1));border-color:var(--ac,var(--a1))}
.trow .body{flex:1;min-width:0}
.trow .t{display:block;font-size:calc(15px*var(--ts,1));line-height:1.4}
.trow.done .t{opacity:.5;text-decoration:line-through}
.trow .m{display:block;margin-top:4px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;
  text-transform:uppercase;color:color-mix(in srgb,var(--text) 72%,transparent);
  -webkit-text-stroke:.32px currentColor}
.trow .m b{color:var(--ac,var(--a1));font-weight:400}
.trow .m .late{color:var(--a3t,var(--a3))}
.tempty{padding:26px 0;font:400 calc(14px*var(--ts,1))/1.7 var(--mono);
  color:color-mix(in srgb,var(--text) 74%,transparent)}
@media(max-width:1000px){.tpan{width:100%}}

/* ══════════════ HUD furniture ══════════════ */
.hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.hud .reg{position:absolute;width:26px;height:26px;
  border-color:color-mix(in srgb,var(--a1) 70%,transparent)}
.hud .reg.tl{top:16px;left:16px;border-top:2px solid;border-left:2px solid}
.hud .reg.tr{top:16px;right:16px;border-top:2px solid;border-right:2px solid}
.hud .reg.bl{bottom:16px;left:16px;border-bottom:2px solid;border-left:2px solid}
.hud .reg.br{bottom:16px;right:16px;border-bottom:2px solid;border-right:2px solid}
/* crosshair tick field, straight out of the HUD kit's grid sheet */
.hud .ticks{position:absolute;inset:44px;opacity:.3;
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 40%,transparent) 0 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--text) 40%,transparent) 0 1px,transparent 1px);
  background-size:9px 1px,1px 9px;
  background-position:center center;
  background-repeat:repeat-x,repeat-y;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 118px);
  mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 118px)}
/* type running up both edges */
.edge{position:absolute;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--text) 62%,transparent);white-space:nowrap}
.edge.l{left:6px}
.edge.r{right:6px;transform:translateY(-50%) rotate(0deg)}
/* both strips live in the outer gutters, clear of every control */
.hud .bars{position:absolute;right:9px;top:13%;display:flex;flex-direction:column;
  gap:3px;align-items:flex-end;width:22px}
.hud .bars i{height:4px;background:color-mix(in srgb,var(--a1) 75%,transparent);display:block}
.hud .code{position:absolute;left:9px;bottom:13%;display:flex;flex-direction:column;
  gap:1.5px;align-items:flex-start;width:20px}
.hud .code i{height:2px;background:color-mix(in srgb,var(--text) 55%,transparent);display:block}
.hud .tri{position:absolute;left:11px;top:7%;width:13px;height:11px;
  background:color-mix(in srgb,var(--a2) 85%,transparent);
  clip-path:polygon(50% 0,100% 100%,0 100%)}

/* the ghost word, now with a chromatic split */
.ghost{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  font:700 clamp(54px,9.4vw,168px)/.84 var(--disp);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 22%,transparent);
  white-space:nowrap;pointer-events:none;text-transform:uppercase}
.ghost::before,.ghost::after{content:attr(data-w);position:absolute;inset:0;
  -webkit-text-stroke:1.5px currentColor;mix-blend-mode:screen}
.ghost::before{color:color-mix(in srgb,var(--a1) 40%,transparent);transform:translate(-3px,0)}
.ghost::after{color:color-mix(in srgb,var(--a2) 36%,transparent);transform:translate(3px,0)}
.ghost.long{font-size:clamp(44px,7.5vw,134px)}
.ghost.run{-webkit-text-stroke-color:color-mix(in srgb,var(--a1) 66%,transparent);
  animation:glitch 3.4s steps(1) infinite}
@keyframes glitch{0%,92%{transform:translate(-50%,-50%)}
  93%{transform:translate(calc(-50% + 5px),-50%)}95%{transform:translate(calc(-50% - 4px),-50%)}
  97%{transform:translate(calc(-50% + 2px),-50%)}100%{transform:translate(-50%,-50%)}}

/* v71 · the box is the ring's own size; as a full-screen box it was a screen-sized layer */
.halo{position:absolute;left:50%;top:50%;width:min(56vh,500px);aspect-ratio:1;translate:-50% -50%;z-index:1;display:grid;place-items:center;pointer-events:none}
.halo i{width:min(56vh,500px);aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--a1) 40%,transparent);
  clip-path:polygon(16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%,0 16%);
  background:radial-gradient(circle,color-mix(in srgb,var(--a1) 8%,transparent) 0,transparent 66%)}
.halo b{position:absolute;width:min(44vh,392px);aspect-ratio:1;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--a2) 22%,transparent);animation:spin 160s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════ UI ══════════════ */
#ui{position:absolute;inset:0;z-index:7;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  --uix:clamp(30px,2.7vw,54px);padding:clamp(26px,2.3vw,40px) var(--uix)}
.nav{display:flex;align-items:center;gap:clamp(9px,1.4vw,22px)}
.logo{width:28px;height:28px;flex:0 0 auto;--ch:7px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);display:grid;place-items:center;
  font:700 calc(15px*var(--ts,1))/1 var(--disp);color:var(--page)}
.nav a{color:color-mix(in srgb,var(--text) 74%,transparent);text-decoration:none;cursor:pointer;
  position:relative;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;text-transform:uppercase;
  padding:7px 3px;transition:color .18s}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--a1t,var(--a1))}
.nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--a1)}
.nav a.addlink{color:var(--a1t,var(--a1));letter-spacing:0.05em}
.nav .crumb{opacity:.75;font-size:calc(17px*var(--ts,1));line-height:1;flex:0 0 auto}
.nav .here{flex:0 0 auto;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--a1t);white-space:nowrap;-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.nav .sp{flex:1}
.ico{width:31px;height:31px;flex:0 0 auto;cursor:pointer;--ch:7px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  border:0;background:color-mix(in srgb,var(--text) 14%,transparent);
  display:grid;place-items:center;color:var(--text);transition:all .18s}
.ico:hover,.ico[aria-expanded="true"]{background:var(--a1);color:var(--page)}
.ico svg{width:14px;height:14px}

.mid{position:relative}
.rail{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;z-index:3}
.step{display:flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;
  padding:7px 3px;color:color-mix(in srgb,var(--text) 78%,transparent);
  font:inherit;text-align:left;transition:color .18s}
.step:hover{color:var(--text)}
.step .rd{width:12px;height:12px;flex:0 0 auto;border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent);
  transform:rotate(45deg);transition:all .22s}
.step[aria-current] .rd{background:var(--ac);border-color:var(--ac);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent),0 0 14px var(--ac)}
.step .nm{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.085em;text-transform:uppercase;white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;transition:max-width .35s ease,opacity .25s}
.step[aria-current] .nm{max-width:240px;opacity:1;color:var(--text)}
.step[aria-current]{color:var(--text)}
.step.add .rd{border-style:dashed}
.step.add .nm{max-width:240px;opacity:1}

.stack{position:absolute;left:2px;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3}
.stack .ln{width:1px;height:46px;background:color-mix(in srgb,var(--a1) 40%,transparent)}
.stack button{background:none;border:0;padding:0;cursor:pointer;color:var(--muted);line-height:0;transition:color .18s}
.stack button:hover{color:var(--a1)}
.stack svg{width:15px;height:15px}

/* ── callouts: circuit trace + chamfered block ── */
.call{position:absolute;display:flex;align-items:center;cursor:grab;background:none;border:0;padding:0;
  font:inherit;color:inherit;opacity:.88;transition:opacity .3s ease;touch-action:none;z-index:5}
.call:hover{opacity:1}
.call[aria-current]{opacity:1;z-index:6}
.call.flip{flex-direction:row-reverse}
.call.dragging{cursor:grabbing;opacity:1;z-index:9;transition:none}
.cdot{width:10px;height:10px;flex:0 0 auto;background:var(--ac);transform:rotate(45deg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent),0 0 15px var(--ac);position:relative}
.call[aria-current] .cdot::after{content:'';position:absolute;inset:-7px;border:1px solid var(--ac);
  animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
/* the trace: a horizontal run, an elbow, then a junction node */
.trace{flex:0 0 auto;width:clamp(34px,4.4vw,70px);height:26px;position:relative}
.trace::before{content:'';position:absolute;left:0;right:9px;top:50%;height:1.5px;background:var(--ac)}
.trace::after{content:'';position:absolute;right:0;top:calc(50% - 3.5px);width:7px;height:7px;
  background:var(--ac);transform:rotate(45deg)}
.call.flip .trace::before{left:9px;right:0}
.call.flip .trace::after{right:auto;left:0}

.cbox{display:block;position:relative;width:min(27vw,268px);min-width:0;text-align:left;
  background:var(--ac);padding:1.5px;
  --ch:13px;clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  transition:transform .2s ease}
.call.dragging .cbox{transform:scale(1.02)}
.cbox .in{display:block;position:relative;padding:10px 13px 11px;
  background:color-mix(in srgb,var(--page) var(--panelA),transparent);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  --ch:12px;clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
/* a hatched strip along the top, the HUD kit's fill-block motif */
.cbox .in::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(135deg,var(--ac) 0 2px,transparent 2px 5px);opacity:.8}
.cbox .ck{display:flex;align-items:center;gap:7px;margin:3px 0 5px;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 78%,transparent)}
.cbox .ck b{color:var(--act,var(--ac));font-weight:400}
.cbox .cn{display:block;font:700 calc(17px*var(--ts,1))/1.1 var(--disp);letter-spacing:.01em;margin-bottom:5px}
.cbox .ct{display:block;font-size:calc(14px*var(--ts,1));line-height:1.32;font-weight:500}
.cbox .cw{display:block;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--act,var(--ac));margin-top:7px}
.cbox .hint{display:block;margin-top:7px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;
  text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .2s}
.call[aria-current]:hover .cbox .hint{opacity:.7}

.blurb{position:absolute;left:0;bottom:64px;max-width:min(30vw,326px);z-index:4;
  padding:13px 15px 14px;--ch:11px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 74%,transparent);
  backdrop-filter:blur(13px) saturate(140%);-webkit-backdrop-filter:blur(13px) saturate(140%)}
.chips{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;--ch:5px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;color:var(--page);
  background:var(--a1)}
.chip.alt{background:color-mix(in srgb,var(--text) 16%,transparent);color:var(--text)}
.chip i{width:5px;height:5px;background:currentColor;transform:rotate(45deg)}
.blurb p{margin:0;font:400 calc(12.5px*var(--ts,1))/1.75 var(--mono);text-align:justify;hyphens:auto;
  color:color-mix(in srgb,var(--text) 80%,transparent)}
.blurb .more{margin-top:9px;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;
  color:var(--a1t,var(--a1));cursor:pointer;background:none;border:0;padding:0}
.blurb .more::after{content:' \203A\203A'}

/* big percent readout, the HUD kit's 95% block */
.pct{position:absolute;right:0;top:4px;text-align:right;z-index:4;pointer-events:none;
  padding:9px 13px 11px;--ch:10px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 76%,transparent);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}
.pct .n{font:700 clamp(38px,5vw,74px)/.86 var(--disp);letter-spacing:-.02em;color:var(--a1t,var(--a1));
  text-shadow:0 0 26px color-mix(in srgb,var(--a1) 40%,transparent);font-variant-numeric:tabular-nums}
.pct .n s{text-decoration:none;font-size:.44em;margin-left:2px}
.pct .k{font:400 calc(12.5px*var(--ts,1))/1.7 var(--mono);letter-spacing:0.085em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 78%,transparent)}
.pct .meter{margin-top:7px;display:flex;gap:2px;justify-content:flex-end}
.pct .meter i{width:5px;height:12px;background:color-mix(in srgb,var(--text) 16%,transparent);display:block}
.pct .meter i.on{background:var(--a1);box-shadow:0 0 7px color-mix(in srgb,var(--a1) 55%,transparent)}

/* ── bottom bar ── */
.bot{display:flex;align-items:center;gap:clamp(9px,1.2vw,16px);flex-wrap:wrap}
.play{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--text);padding:0;font:inherit}
.play .pb{width:35px;height:35px;flex:0 0 auto;display:grid;place-items:center;--ch:8px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);color:var(--page);transition:transform .18s}
.play:hover .pb{transform:scale(1.08)}
.play .pb svg{width:12px;height:12px}
.play .pt{display:block;font:700 calc(14px*var(--ts,1))/1.2 var(--disp);letter-spacing:.02em;text-align:left}
.play .ps{display:block;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 78%,transparent);-webkit-text-stroke:.32px currentColor}
.tmr{font:400 calc(22.5px*var(--ts,1))/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--a1t,var(--a1))}
/* at noon the timer sits over a pale skyline, where the dark accent dropped under 4.5:1 */
:root[data-tod="day"]:not(.skinned) .tmr{color:var(--text)}
.hab{display:flex;gap:5px}
.hp{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;cursor:pointer;--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 76%,transparent);
  background:color-mix(in srgb,var(--page) 82%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 13%,transparent);
  border:0;transition:all .2s}
.hp:hover{color:var(--text)}
.hp i{width:6px;height:6px;flex:0 0 auto;transform:rotate(45deg);
  border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent)}
.hp[aria-pressed="true"]{color:var(--page);background:var(--hc)}
.hp[aria-pressed="true"] i{background:var(--page);border-color:var(--page)}
.hp em{font-style:normal;opacity:1}
.bot .sp{flex:1}
.seg{display:flex;gap:1px;padding:2px;backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  background:color-mix(in srgb,var(--page) 84%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 13%,transparent);--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.seg button{background:none;border:0;cursor:pointer;padding:6px 10px;
  color:color-mix(in srgb,var(--text) 76%,transparent);
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;text-transform:uppercase;transition:all .18s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{color:var(--page);background:var(--a1)}
.credit{font:400 calc(12px*var(--ts,1))/1.7 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 74%,transparent);
  text-align:right;white-space:nowrap}

.media{display:none;align-items:center;gap:10px;padding:6px 12px;--ch:7px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--text) 11%,transparent);min-width:min(40vw,460px)}
:root[data-bg="video"] .media{display:flex}
.media button{background:none;border:0;cursor:pointer;color:var(--a1);line-height:0;padding:0}
.media button svg{width:13px;height:13px}
.media .tt{font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
  width:auto;flex:0 0 auto;border:0;padding:0}
.sl input,.rng{-webkit-appearance:none;appearance:none;height:3px;
  background:color-mix(in srgb,var(--text) 22%,transparent);outline:none;cursor:pointer}
.sl input::-webkit-slider-thumb{
  -webkit-appearance:none;width:10px;height:14px;background:var(--a1);
  box-shadow:0 0 8px color-mix(in srgb,var(--a1) 60%,transparent)}
.sl input::-moz-range-thumb{
  width:10px;height:14px;border:0;border-radius:0;background:var(--a1)}
.media .seek{flex:1;min-width:140px}
.media .vol{width:76px;flex:0 0 auto}
/* The sliders are drawn 3px thin but take an 18px tall hit area, and the
   played part of the track fills in so the timeline reads at a glance. */
.media input[type=range]{-webkit-appearance:none;appearance:none;height:18px;margin:0;padding:0;
  background:transparent;outline:none;cursor:pointer;--p:0%;
  --trk:color-mix(in srgb,var(--text) 22%,transparent)}
.media input[type=range]::-webkit-slider-runnable-track{height:3px;
  background:linear-gradient(90deg,var(--a1) 0 var(--p),var(--trk) var(--p) 100%)}
.media input[type=range]::-moz-range-track{height:3px;background:var(--trk)}
.media input[type=range]::-moz-range-progress{height:3px;background:var(--a1)}
.media input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;margin-top:-5.5px;
  background:var(--a1);box-shadow:0 0 8px color-mix(in srgb,var(--a1) 60%,transparent);
  transition:transform var(--t-sm,.15s) var(--e-out,ease)}
.media input[type=range]::-moz-range-thumb{width:10px;height:14px;border:0;border-radius:0;background:var(--a1)}
.media input[type=range]:hover::-webkit-slider-thumb,
.media input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
.media input[type=range]:focus-visible{outline:1px solid color-mix(in srgb,var(--a1) 60%,transparent);outline-offset:3px}
.media .vol.off{--p:0%!important;opacity:.55}
.media button:focus-visible{outline:1px solid var(--a1);outline-offset:3px}

/* ══════════════ theme drawer ══════════════ */
.scrim2{position:absolute;inset:0;z-index:19;background:rgba(0,0,0,.55);border:0;padding:0;cursor:default}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(396px,100%);z-index:20;
  background:color-mix(in srgb,var(--page) 96%,transparent);display:flex;flex-direction:column;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:-24px 0 60px rgba(0,0,0,.6);border-left:1.5px solid var(--a1)}
.dh{display:flex;align-items:center;gap:10px;padding:17px 20px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.dh h2{margin:0;font:700 calc(18px*var(--ts,1))/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.dh .sp{flex:1}
.dx{background:none;border:1px solid color-mix(in srgb,var(--text) 26%,transparent);color:var(--muted);
  width:27px;height:27px;cursor:pointer;font-size:calc(17px*var(--ts,1));line-height:1}
.dx:hover{color:var(--a1);border-color:var(--a1)}
.tabs{display:flex;gap:2px;padding:12px 20px 0}
.tabs button{flex:1;background:none;border:0;cursor:pointer;color:var(--muted);padding:9px 4px;
  border-bottom:2px solid color-mix(in srgb,var(--text) 14%,transparent);
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.085em;text-transform:uppercase;transition:all .18s}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--a1);border-bottom-color:var(--a1)}
.db{flex:1;overflow-y:auto;padding:18px 20px 30px}
.lbl{display:flex;align-items:center;gap:9px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);margin:20px 0 10px}
.lbl::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.lbl:first-child{margin-top:0}
.row{display:flex;gap:5px;flex-wrap:wrap}
.opt{flex:1;min-width:74px;background:color-mix(in srgb,var(--text) 9%,transparent);border:0;
  color:var(--muted);padding:10px 8px;cursor:pointer;--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.06em;text-transform:uppercase;transition:all .18s}
.opt:hover{color:var(--text)}
.opt[aria-pressed="true"]{color:var(--page);background:var(--a1)}
.opt .sw{display:flex;gap:2px;justify-content:center;margin-bottom:6px}
.opt .sw i{width:9px;height:9px;display:block;transform:rotate(45deg)}
.drop{border:1.5px dashed color-mix(in srgb,var(--text) 28%,transparent);padding:22px 14px;
  text-align:center;cursor:pointer;transition:all .2s;background:color-mix(in srgb,var(--text) 5%,transparent)}
.drop:hover,.drop.over{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 12%,transparent)}
.drop .big{font:700 calc(14px*var(--ts,1))/1.3 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.drop .sm{font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.thumb{margin-top:10px;position:relative;border:1px solid color-mix(in srgb,var(--text) 20%,transparent)}
.thumb img{width:100%;height:92px;object-fit:cover;display:block}
.thumb .rm{position:absolute;top:6px;right:6px;background:var(--a1);color:var(--page);border:0;
  width:22px;height:22px;cursor:pointer;font-size:calc(15px*var(--ts,1));line-height:1}
.fld{display:flex;gap:5px}
.fld input{flex:1;min-width:0;background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:10px 11px;
  font:400 calc(13.5px*var(--ts,1))/1.3 var(--mono)}
.fld input::placeholder{color:var(--muted)}
.fld input:focus{outline:1.5px solid var(--a1);outline-offset:-1px;border-color:transparent}
.fld button{background:var(--a1);color:var(--page);border:0;padding:0 15px;cursor:pointer;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase}
.sl{display:flex;align-items:center;gap:11px;padding:7px 0}
.sl label{flex:0 0 78px;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.055em;text-transform:uppercase;color:var(--muted)}
.sl input{flex:1}
.sl .v{flex:0 0 32px;text-align:right;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);color:var(--a1);font-variant-numeric:tabular-nums}
.note{margin:14px 0 0;font:400 calc(12.5px*var(--ts,1))/1.7 var(--mono);color:var(--muted)}
.note b{color:var(--text)}
.pal{display:flex;gap:4px;margin-top:9px}
.pal i{flex:1;height:24px;display:block}
.ok{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font:400 calc(12px*var(--ts,1))/1 var(--mono);
  letter-spacing:0.07em;text-transform:uppercase;color:var(--a1)}
.ok i{width:6px;height:6px;background:currentColor;transform:rotate(45deg)}

/* chrome backing over photo or video */
:root[data-bg="image"] .nav,:root[data-bg="video"] .nav,
:root[data-bg="image"] .bot,:root[data-bg="video"] .bot{padding:10px 16px;--ch:9px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 76%,transparent);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
:root[data-bg="image"] .blurb,:root[data-bg="video"] .blurb{padding:14px 16px;--ch:11px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 84%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-bg="image"] .rail,:root[data-bg="video"] .rail,
:root[data-bg="image"] .stack,:root[data-bg="video"] .stack,
:root[data-bg="image"] .pct,:root[data-bg="video"] .pct{padding:11px 14px;
  background:color-mix(in srgb,var(--page) 62%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
:root[data-bg="image"] .halo,:root[data-bg="video"] .halo{opacity:.5}

@media(max-width:1000px){
  #frame::after{display:none}
  .rail,.stack,.blurb,.hud .ticks,.edge,.pct{display:none}
  #ui{--uix:16px;padding:14px var(--uix);grid-template-rows:auto minmax(0,1fr) auto}
  .nav{gap:9px;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto}
  .call{position:static !important;opacity:1 !important;width:100%;cursor:default}
  .call .trace,.call .cdot{display:none}
  .cbox{width:100%}
  .mid{overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:8px 0}
  :root:not([data-mode="space"]) .mid > :first-child{margin-top:auto}
  .ghost{top:24%;font-size:clamp(42px,14vw,86px)}
  .ghost.long{font-size:clamp(34px,11vw,70px)}
  .bot{gap:7px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .bot::-webkit-scrollbar{display:none}
  .bot > *{flex:0 0 auto}
  .bot .sp,.credit,.hab{display:none}
  .media{min-width:330px}
  .drawer{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ══════════════════════════════════════════════════════════════════════
   STAGE 3  ·  the working views
   My Work, Board, Table, Calendar, Timeline, the task drawer, the
   command palette and the notification inbox. Same HUD grammar as the
   home screen: chamfered panels, mono labels, accent hairlines.
   ══════════════════════════════════════════════════════════════════════ */
.ws{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--page) var(--panelA),transparent);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  }
@keyframes wsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ws::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  opacity:var(--scan);mix-blend-mode:overlay}

/* ── header ─────────────────────────────────────────────────────── */
.wsh{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:16px 26px 0;position:relative;z-index:2}
.wsh h2{margin:0;font:700 calc(21px*var(--ts,1))/1 var(--disp);letter-spacing:.01em;white-space:nowrap}
.wsh .kk{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.wsh .sp{flex:1}
.wsx{background:none;border:0;color:var(--text);font-size:calc(24.5px*var(--ts,1));line-height:1;
  cursor:pointer;padding:2px 7px;opacity:.8}
.wsx:hover{opacity:1;color:var(--a1t)}

.vtabs{display:flex;gap:2px;padding:12px 26px 0;position:relative;z-index:2;flex-wrap:wrap}
.vtabs button{--ch:7px;background:color-mix(in srgb,var(--p1) 72%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 13%,transparent);border-bottom:0;
  color:var(--muted);cursor:pointer;padding:8px 15px 7px;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill;
  clip-path:polygon(var(--ch) 0,100% 0,100% 100%,0 100%,0 var(--ch))}
.vtabs button:hover{color:var(--text)}
.vtabs button[aria-current="page"]{background:color-mix(in srgb,var(--p2) 92%,transparent);
  color:var(--text);border-color:color-mix(in srgb,var(--a1) 55%,transparent);
  box-shadow:inset 0 2px 0 var(--a1)}
.vtabs .cnt{color:var(--a1t);margin-left:7px}

/* ── filter bar ─────────────────────────────────────────────────── */
.fbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 26px;border-top:1px solid color-mix(in srgb,var(--a1) 30%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  background:color-mix(in srgb,var(--p1) 55%,transparent);position:relative;z-index:2}
.fbar select,.fbar input[type=search]{--ch:6px;
  background:color-mix(in srgb,var(--p2) 88%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  font:500 calc(14px*var(--ts,1))/1 var(--disp);padding:7px 10px;cursor:pointer;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.fbar input[type=search]{min-width:190px;cursor:text}
.fbar select:focus,.fbar input:focus{outline:2px solid var(--a1);outline-offset:1px}
.fbar .lb{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;color:var(--muted);
  text-transform:uppercase;-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.fbar .sp{flex:1}
.fbtn{--ch:6px;background:color-mix(in srgb,var(--a1) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 55%,transparent);color:var(--a1t);
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  padding:8px 13px;cursor:pointer;-webkit-text-stroke:.32px currentColor;paint-order:stroke fill;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.fbtn:hover{background:color-mix(in srgb,var(--a1) 30%,transparent);color:var(--text)}
.fbtn.quiet{background:none;border-color:color-mix(in srgb,var(--text) 20%,transparent);color:var(--muted)}
.fbtn.quiet:hover{color:var(--text);border-color:var(--a1)}

/* ── the scrolling body ─────────────────────────────────────────── */
.wsb{flex:1;min-height:0;overflow:auto;padding:18px 26px 30px;position:relative;z-index:2}
.wsb::-webkit-scrollbar{width:10px;height:10px}
.wsb::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--a1) 40%,transparent)}
.wsb::-webkit-scrollbar-track{background:color-mix(in srgb,var(--text) 6%,transparent)}
.empty{padding:46px 4px;text-align:center;color:var(--muted);font-size:calc(15px*var(--ts,1))}
.empty b{display:block;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--a1t);margin-bottom:10px;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}

/* ── grouped list, shared by My Work and search ─────────────────── */
.grp{margin-bottom:22px}
.grp>h3{margin:0 0 9px;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.grp>h3 b{font-weight:400}
.grp>h3 i{flex:1;height:1px;background:color-mix(in srgb,var(--text) 14%,transparent);font-style:normal}
.grp>h3 s{text-decoration:none;color:var(--a1t)}
.grp.hot>h3 s{color:var(--a3t,var(--a3))}

.ti{--ch:7px;display:flex;align-items:flex-start;gap:12px;padding:11px 14px;margin-bottom:5px;
  background:color-mix(in srgb,var(--p1) 70%,transparent);cursor:pointer;
  border-left:2px solid var(--pc,var(--a1));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.ti:hover{background:color-mix(in srgb,var(--p2) 88%,transparent)}
.ti.sel{outline:1px solid var(--a1)}
.ti .ck{width:15px;height:15px;flex:0 0 auto;margin-top:2px;cursor:pointer;
  background:none;border:1.5px solid color-mix(in srgb,var(--text) 34%,transparent);padding:0}
.ti .ck:hover{border-color:var(--a1)}
.ti.done .ck{background:var(--a1);border-color:var(--a1)}
.ti.done .t{opacity:.45;text-decoration:line-through}
.ti .bd{flex:1;min-width:0}
.ti .t{display:block;font-size:calc(15px*var(--ts,1));line-height:1.4;word-break:break-word}
.ti .m{display:block;margin-top:4px;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.06em;
  color:color-mix(in srgb,var(--muted) 80%,var(--text));text-transform:uppercase;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.ti .m .pj{color:var(--pc,var(--a1t))}
.ti .m .late{color:var(--a3t,var(--a3))}
.ti .m .blk{color:var(--a2t,var(--a2))}
.ti .rt{flex:0 0 auto;display:flex;align-items:center;gap:7px;margin-top:1px}
.pill{--ch:4px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.055em;padding:4px 7px;
  border:1px solid currentColor;text-transform:uppercase;white-space:nowrap;
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.pill.p0{color:var(--a2t,var(--a2))}
.pill.p1{color:var(--a3t,var(--a3))}
.pill.p2{color:var(--muted)}
.pill.p3{color:var(--muted);opacity:.6}
.av{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  font:700 calc(12px*var(--ts,1))/1 var(--disp);letter-spacing:.02em;
  background:color-mix(in srgb,var(--a1) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 60%,transparent);color:var(--text)}

/* ── board ──────────────────────────────────────────────────────── */
.board{display:flex;gap:13px;align-items:stretch;min-height:100%}
.col{--ch:9px;flex:1 1 0;min-width:186px;min-height:230px;
  background:color-mix(in srgb,var(--p1) 60%,transparent);
  border-top:2px solid var(--cc,var(--a1));padding:11px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.col.over{background:color-mix(in srgb,var(--a1) 14%,transparent);outline:1px dashed var(--a1)}
.col>h3{margin:0 0 11px;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.085em;text-transform:uppercase;
  color:var(--cc,var(--a1));display:flex;gap:8px;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.col>h3 s{text-decoration:none;color:var(--muted);margin-left:auto}
.card{--ch:7px;background:color-mix(in srgb,var(--p2) 92%,transparent);padding:10px 11px;
  margin-bottom:7px;cursor:grab;border-left:2px solid var(--pc,var(--a1));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.card:hover{background:color-mix(in srgb,var(--p2) 100%,transparent)}
.card.drag{opacity:.4;cursor:grabbing}
.card .t{display:block;font-size:calc(14px*var(--ts,1));line-height:1.35;word-break:break-word}
.card .m{display:flex;align-items:center;gap:6px;margin-top:8px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--muted);text-transform:uppercase;
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.card .m .late{color:var(--a3t,var(--a3))}
.col .cadd{width:100%;background:none;border:1px dashed color-mix(in srgb,var(--text) 22%,transparent);
  color:var(--muted);font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  padding:9px;cursor:pointer;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.col .cadd:hover{color:var(--a1t);border-color:var(--a1)}

/* ── table ──────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:calc(14px*var(--ts,1))}
.tbl th{text-align:left;padding:9px 11px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--a1) 40%,transparent);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill;
  position:sticky;top:0;background:color-mix(in srgb,var(--page) 96%,transparent);z-index:1}
.tbl th:hover{color:var(--text)}
.tbl th[aria-sort] s{text-decoration:none;color:var(--a1t);margin-left:5px}
.tbl td{padding:9px 11px;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent);
  vertical-align:middle}
.tbl tr{cursor:pointer}
.tbl tr:hover td{background:color-mix(in srgb,var(--p1) 70%,transparent)}
.tbl tr.done .ttl{opacity:.45;text-decoration:line-through}
.tbl .ttl{word-break:break-word}
.tbl .nm{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.055em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.tbl .nm.late{color:var(--a3t,var(--a3))}
.tbl .dot{display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--pc,var(--a1))}

/* ── calendar ───────────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:color-mix(in srgb,var(--text) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.cal .cdh{background:color-mix(in srgb,var(--p1) 80%,transparent);padding:7px 9px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.cal .dy{background:color-mix(in srgb,var(--page) 88%,transparent);min-height:96px;padding:6px;
  display:flex;flex-direction:column;gap:3px}
.cal .dy.off{opacity:.36}
.cal .dy.now{background:color-mix(in srgb,var(--a1) 12%,transparent);
  box-shadow:inset 0 0 0 1px var(--a1)}
.cal .dy.over{background:color-mix(in srgb,var(--a1) 22%,transparent)}
.cal .dy>b{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;color:var(--muted);margin-bottom:2px;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.cal .dy.now>b{color:var(--a1t)}
.cev{font:500 calc(12.5px*var(--ts,1))/1.3 var(--disp);padding:4px 6px;cursor:grab;word-break:break-word;
  background:color-mix(in srgb,var(--p2) 92%,transparent);border-left:2px solid var(--pc,var(--a1))}
.cev:hover{background:color-mix(in srgb,var(--p1) 100%,transparent)}
.cev.done{opacity:.45;text-decoration:line-through}
.cev.drag{opacity:.4}

/* ── timeline ───────────────────────────────────────────────────── */
.tline{min-width:760px}
.tline .hd{display:flex;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--muted);
  padding-left:194px;margin-bottom:7px;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.tline .hd span{flex:1 0 0;text-align:center;border-left:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  padding:3px 0;text-transform:uppercase}
.tline .rw{display:flex;align-items:center;gap:0;margin-bottom:4px}
.tline .lb{flex:0 0 186px;padding-right:8px;font-size:calc(14px*var(--ts,1));white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer}
.tline .lb:hover{color:var(--a1t)}
.tline .tr{flex:1;position:relative;height:24px;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1px),
    color-mix(in srgb,var(--text) 9%,transparent) calc(100%/12 - 1px) calc(100%/12))}
.tline .br{position:absolute;top:4px;height:16px;min-width:6px;cursor:pointer;
  background:color-mix(in srgb,var(--pc,var(--a1)) 60%,transparent);
  border:1px solid var(--pc,var(--a1))}
.tline .br:hover{background:var(--pc,var(--a1))}
.tline .br.done{opacity:.4}
.tline .br.ms{width:16px!important;transform:rotate(45deg);top:8px;height:11px}
.tline{position:relative}
.tline .today{position:absolute;top:26px;bottom:0;width:1px;z-index:2;
  background:var(--a3t,var(--a3));opacity:.8;pointer-events:none}
.tline .today::before{content:'NOW';position:absolute;top:-15px;left:-12px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:var(--a3t,var(--a3));
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}

/* ── the task drawer ────────────────────────────────────────────── */
.tdscrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.58);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* A full screen grid whose only job is to centre the panel. It lets pointer
   events through, so a click beside the panel still reaches the scrim. */
.tdwrap{position:fixed;inset:0;z-index:41;display:grid;place-items:center;
  padding:26px 20px;pointer-events:none}
.td{pointer-events:auto;position:relative;
  width:min(760px,100%);height:min(86vh,880px);
  display:flex;flex-direction:column;overflow:hidden;--ch:16px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 95%,transparent);
  backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 38%,transparent),
             0 44px 96px rgba(0,0,0,.6);
  animation:tdIn var(--t-md) var(--e-pop) both}
@keyframes tdIn{from{opacity:0;transform:scale(.955) translateY(10px)}
  to{opacity:1;transform:none}}
/* The panel re-renders on every field change, and again when the comments and
   history arrive. Replaying the entrance on each of those is the stutter. */
.td.seated{animation:none}
@media (max-width:560px){
  .tdwrap{padding:14px 10px}
  .td{height:92vh;--ch:12px}
}
.td .hd{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:17px 20px 12px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.td .hd .pj{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--pc,var(--a1t));-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.td .hd .sp{flex:1}
.td .hd .dele{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;padding:5px 7px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a2) 38%,transparent)}
.td .hd .hdgap{width:12px;flex:0 0 auto}
.td .bd{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 26px}
.td h3{margin:22px 0 9px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.td h3:first-child{margin-top:0}
.tt{width:100%;background:none;border:0;border-bottom:1px solid transparent;color:var(--text);
  font:600 calc(18px*var(--ts,1))/1.35 var(--disp);padding:3px 0;resize:none;overflow:hidden}
.tt:hover{border-bottom-color:color-mix(in srgb,var(--text) 18%,transparent)}
.tt:focus{outline:0;border-bottom-color:var(--a1)}
.frow{display:grid;grid-template-columns:96px 1fr;gap:7px 12px;align-items:center}
.frow>label{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.frow select,.frow input,.frow textarea{--ch:5px;width:100%;
  background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);
  font:500 calc(14px*var(--ts,1))/1.4 var(--disp);padding:7px 9px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.frow select:focus,.frow input:focus,.frow textarea:focus{outline:2px solid var(--a1);outline-offset:1px}
.td textarea.notes{width:100%;min-height:86px;resize:vertical;
  background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);
  font:500 calc(14px*var(--ts,1))/1.55 var(--disp);padding:9px 10px}
.td textarea.notes:focus{outline:2px solid var(--a1);outline-offset:1px}

.chk{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:calc(14px*var(--ts,1))}
.chk button.b{width:14px;height:14px;flex:0 0 auto;cursor:pointer;padding:0;background:none;
  border:1.5px solid color-mix(in srgb,var(--text) 34%,transparent)}
.chk.on button.b{background:var(--a1);border-color:var(--a1)}
.chk.on span{opacity:.45;text-decoration:line-through}
.chk span{flex:1;word-break:break-word}
.chk .rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:calc(17px*var(--ts,1));line-height:1;padding:0 4px}
.chk .rm:hover{color:var(--a2t,var(--a2))}
.miniadd{display:flex;gap:7px;margin-top:8px}
.miniadd select.mini,.miniadd input{--ch:5px;flex:1;background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);font:500 calc(14px*var(--ts,1))/1 var(--disp);padding:8px 9px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.miniadd select.mini:focus,.miniadd input:focus{outline:2px solid var(--a1);outline-offset:1px}

.cm{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.cm .who{display:flex;align-items:center;gap:8px;margin-bottom:5px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.cm .who b{color:var(--a1t);font-weight:400}
.cm .who .ho{color:var(--a3t,var(--a3))}
.cm p{margin:0;font-size:calc(14px*var(--ts,1));line-height:1.55;white-space:pre-wrap;word-break:break-word}
.act{display:flex;gap:9px;padding:6px 0;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);letter-spacing:.09em;
  color:var(--muted);-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.act b{color:var(--text);font-weight:400}
.act s{text-decoration:none;margin-left:auto;white-space:nowrap;opacity:.7}

/* ── command palette ────────────────────────────────────────────── */
.cmdscrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.cmd{position:fixed;top:13vh;left:50%;transform:translateX(-50%);z-index:51;
  width:min(620px,92vw);max-height:66vh;display:flex;flex-direction:column;overflow:hidden;
  background:color-mix(in srgb,var(--page) 98%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 55%,transparent);
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:tdIn .16s ease}
.cmd input{width:100%;background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--a1) 40%,transparent);
  color:var(--text);font:500 calc(17px*var(--ts,1))/1 var(--disp);padding:17px 20px}
.cmd input:focus{outline:0}
.cmd .rs{flex:1;overflow-y:auto;padding:7px 0}
.cmd .r{display:flex;align-items:center;gap:11px;padding:9px 20px;cursor:pointer;font-size:calc(15px*var(--ts,1))}
.cmd .r[aria-selected="true"]{background:color-mix(in srgb,var(--a1) 18%,transparent);
  box-shadow:inset 2px 0 0 var(--a1)}
/* grey labels on the tinted row fell to about 3:1 */
.cmd .r[aria-selected="true"] :is(.kd,.sub){color:color-mix(in srgb,var(--text) 82%,var(--muted))}
.cmd .r .kd{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);
  flex:0 0 66px;-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.cmd .r .lb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd .r .sub{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.cmd .ft{flex:0 0 auto;padding:9px 20px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  font:400 calc(12px*var(--ts,1))/1.6 var(--mono);letter-spacing:0.055em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 80%,var(--text));
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.cmd .ft b{color:var(--a1t);font-weight:400}

/* ── notification inbox ─────────────────────────────────────────── */
.bell{position:relative}
.bell .bdg{position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;padding:0 3px;
  display:grid;place-items:center;border-radius:8px;background:var(--a2);color:var(--page);
  font:700 calc(12px*var(--ts,1))/1 var(--disp);pointer-events:none}
.nbox{position:fixed;top:62px;right:24px;z-index:55;width:min(380px,84vw);
  max-height:min(460px,64vh);display:flex;flex-direction:column;overflow:hidden;
  background:color-mix(in srgb,var(--page) 98%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 50%,transparent);
  box-shadow:0 22px 54px rgba(0,0,0,.55);animation:tdIn .15s ease;text-align:left}
.nscrim{position:fixed;inset:0;z-index:54}
.nbox .hd{display:flex;align-items:center;gap:10px;padding:12px 15px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent);
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.nbox .hd .sp{flex:1}
.nbox .hd button{background:none;border:0;color:var(--a1t);cursor:pointer;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;text-transform:uppercase;padding:0}
.nbox .hd button:hover{color:var(--text)}
.nbox .ls{flex:1;overflow-y:auto}
.nrow{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:11px 15px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.nrow:hover{background:color-mix(in srgb,var(--p1) 80%,transparent)}
.nrow.unread{box-shadow:inset 2px 0 0 var(--a1)}
.nrow .t{display:block;font-size:calc(14px*var(--ts,1));line-height:1.35}
.nrow.unread .t{font-weight:600}
.nrow .b{display:block;margin-top:3px;font-size:calc(13.5px*var(--ts,1));line-height:1.4;color:var(--muted)}
.nrow .w{display:block;margin-top:5px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;
  text-transform:uppercase;color:var(--muted);-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.nbox .none{padding:34px 15px;text-align:center;color:var(--muted);font-size:calc(14px*var(--ts,1))}

/* ── toast ──────────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.tst{--ch:6px;padding:10px 17px;background:color-mix(in srgb,var(--p2) 97%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 55%,transparent);color:var(--text);
  font:500 calc(14px*var(--ts,1))/1 var(--disp);box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:tstIn .18s ease;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.tst.bad{border-color:var(--a2);color:var(--a2t,var(--a2))}
@keyframes tstIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

@media(max-width:820px){
  .wsh,.vtabs,.fbar,.wsb{padding-left:14px;padding-right:14px}
  .frow{grid-template-columns:1fr}
  .frow>label{margin-top:5px}
  .board{flex-direction:column}
  .col{max-width:none;width:100%}
  .cal .dy{min-height:62px}
}


/* ══════════════════════════════════════════════════════════════════════
   SPACES  ·  one dashboard per project
   Home is the gateway. Opening a project swaps the whole shell over to
   that project's own wallpaper, theme and widget layout, saved per
   person per project.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-mode="space"] .ghost{opacity:.15}
:root[data-mode="space"] .band.t{height:132px}
:root[data-mode="space"] .band.b{height:150px}

.shead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  padding:2px 0 14px;position:relative;z-index:4}
.shead h1{margin:0;font:700 clamp(24px,2.6vw,38px)/1 var(--disp);letter-spacing:.005em}
.shead .code{font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.12em;color:var(--a1t);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.shead .facts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:3px}
.shead .facts span{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 78%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.shead .facts b{color:var(--text);font-weight:400}
.shead .facts .hot{color:var(--a3t,var(--a3))}
.shead .sp{flex:1}
.shead .tools{display:flex;gap:6px;align-items:center;margin-bottom:2px}

/* A Space stacks its header over the widget grid. The grid takes whatever
   height is left and scrolls inside it, at every window size. Before this the
   page grid's middle row grew to fit its content, so the widget grid was as
   tall as its widgets and there was nothing to scroll. */
:root[data-mode="space"] .mid{display:flex;flex-direction:column;min-height:0}
:root[data-mode="space"] .mid > .shead{flex:0 0 auto}
:root[data-mode="space"] .mid > .spc{flex:1 1 auto;min-height:0;height:auto}

/* the widget field */
.spc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:13px;
  grid-auto-rows:max-content;
  align-content:start;overflow-y:auto;overflow-x:hidden;
  padding:2px 4px 18px 0;height:100%;position:relative;z-index:3}
.spc::-webkit-scrollbar{width:9px}
.spc::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--a1) 38%,transparent)}
.spc::-webkit-scrollbar-track{background:color-mix(in srgb,var(--text) 6%,transparent)}

.wgt{--ch:11px;position:relative;display:flex;flex-direction:column;min-height:132px;min-width:0;
  background:color-mix(in srgb,var(--p1) 76%,transparent);
  backdrop-filter:blur(13px) saturate(1.15);-webkit-backdrop-filter:blur(13px) saturate(1.15);
  border-top:2px solid color-mix(in srgb,var(--ac,var(--a1)) 80%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%)}
.wgt.over{outline:1px dashed var(--a1);outline-offset:2px}
.wgt.drag{opacity:.35}
.wgt.s3{grid-column:span 3}
.wgt.s4{grid-column:span 4}
.wgt.s6{grid-column:span 6}
.wgt.s12{grid-column:span 12}
.wgt.s2{grid-column:span 2}.wgt.s5{grid-column:span 5}.wgt.s7{grid-column:span 7}.wgt.s8{grid-column:span 8}.wgt.s9{grid-column:span 9}.wgt.s10{grid-column:span 10}.wgt.s11{grid-column:span 11}

.wh{display:flex;align-items:center;gap:9px;padding:10px 12px 8px;cursor:grab;
  border-bottom:1px solid color-mix(in srgb,var(--text) 9%,transparent)}
.wh:active{cursor:grabbing}
.wh h3{margin:0;flex:1;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 70%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.wh .gr{width:9px;height:11px;flex:0 0 auto;opacity:.45;
  background:radial-gradient(circle,currentColor 1px,transparent 1.1px) 0 0/3px 3px}
.wh button{background:none;border:0;color:var(--muted);cursor:pointer;padding:2px 4px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em}
.wh button:hover{color:var(--a1t)}
.wb{flex:1;min-height:0;padding:12px;overflow:auto}
.wb::-webkit-scrollbar{width:7px}
.wb::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--a1) 30%,transparent)}

/* next up */
.nx .t{display:block;font:600 clamp(15px,1.5vw,20px)/1.3 var(--disp);word-break:break-word}
.nx .m{display:block;margin-top:9px;font:400 calc(12.5px*var(--ts,1))/1.6 var(--mono);letter-spacing:0.065em;
  text-transform:uppercase;color:color-mix(in srgb,var(--muted) 78%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.nx .m .late{color:var(--a3t,var(--a3))}
.nx .go{margin-top:12px}

/* progress dial */
.pg{display:flex;align-items:center;gap:14px}
.pg .dial{position:relative;width:78px;height:78px;flex:0 0 auto}
.pg .dial svg{transform:rotate(-90deg)}
.pg .dial .n{position:absolute;inset:0;display:grid;place-items:center;
  font:700 calc(20px*var(--ts,1))/1 var(--disp)}
.pg .dial .n s{text-decoration:none;font-size:calc(12.5px*var(--ts,1));opacity:.8;margin-left:1px}
.pg .ls{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pg .ls i{display:flex;justify-content:space-between;gap:8px;font-style:normal;
  font:400 calc(12.5px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 78%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.pg .ls i b{color:var(--text);font-weight:400}
.pg .ls i.hot b{color:var(--a3t,var(--a3))}

/* mini board */
.mb{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;height:100%}
.mb .c{display:flex;flex-direction:column;gap:5px;min-width:0}
.mb .c>h4{margin:0 0 2px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  color:var(--cc,var(--a1));display:flex;gap:6px;
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.mb .c>h4 s{text-decoration:none;color:var(--muted);margin-left:auto}
.mb .c.over{background:color-mix(in srgb,var(--a1) 12%,transparent);outline:1px dashed var(--a1)}
.mb .t{font:500 calc(13.5px*var(--ts,1))/1.3 var(--disp);padding:6px 7px;cursor:grab;word-break:break-word;
  background:color-mix(in srgb,var(--p2) 88%,transparent);
  border-left:2px solid color-mix(in srgb,var(--cc,var(--a1)) 70%,transparent)}
.mb .t:hover{background:color-mix(in srgb,var(--p2) 100%,transparent)}
.mb .more{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;color:var(--muted);padding:2px 0}

/* generic small list */
.wl{display:flex;flex-direction:column;gap:2px}
.wl .r{display:flex;align-items:flex-start;gap:9px;padding:7px 0;cursor:pointer;
  border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.wl .r:last-child{border-bottom:0}
.wl .r:hover .t{color:var(--a1t)}
.wl .r .ck{width:13px;height:13px;flex:0 0 auto;margin-top:2px;cursor:pointer;padding:0;
  background:none;border:1.5px solid color-mix(in srgb,var(--text) 34%,transparent)}
.wl .r.done .ck{background:var(--a1);border-color:var(--a1)}
.wl .r.done .t{opacity:.45;text-decoration:line-through}
.wl .r .t{flex:1;min-width:0;font-size:calc(14px*var(--ts,1));line-height:1.35;word-break:break-word}
.wl .r .w{flex:0 0 auto;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.055em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 80%,var(--text));white-space:nowrap;
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.wl .r .w.late{color:var(--a3t,var(--a3))}
.wl .none{padding:16px 0;color:var(--muted);font-size:calc(14px*var(--ts,1))}

/* people */
.pp{display:flex;flex-direction:column;gap:9px}
.pp .r{display:flex;align-items:center;gap:9px}
.pp .r .nm{flex:1;min-width:0;font-size:calc(14px*var(--ts,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .r .rl{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}

/* time */
.tmw .big{font:700 clamp(26px,2.8vw,40px)/1 var(--disp)}
.tmw .big s{text-decoration:none;font-size:calc(15px*var(--ts,1));opacity:.85;margin-left:3px}
.tmw .k{margin-top:6px;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.075em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 78%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.tmw .spark{display:flex;align-items:flex-end;gap:4px;height:38px;margin-top:11px}
.tmw .spark i{flex:1;min-width:3px;background:color-mix(in srgb,var(--a1) 55%,transparent);
  display:block;border-top:2px solid var(--a1)}
.tmw .days{display:flex;gap:4px;margin-top:5px}
.tmw .days i{flex:1;text-align:center;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;
  color:var(--muted);font-style:normal}

/* brief */
.nt textarea{width:100%;height:100%;min-height:84px;resize:none;background:none;border:0;
  color:var(--text);font:500 calc(15px*var(--ts,1))/1.6 var(--disp)}
.nt textarea:focus{outline:1px solid var(--a1);outline-offset:4px}

/* tags */
.tg{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}

/* the widget shelf */
.shelf{position:absolute;right:0;top:calc(100% + 7px);z-index:9;width:min(250px,80vw);
  padding:9px;background:color-mix(in srgb,var(--page) 97%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.shelf h4{margin:0 0 8px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;
  color:var(--muted);-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.shelf button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:0;color:var(--text);cursor:pointer;padding:6px 5px;font:500 calc(14px*var(--ts,1))/1 var(--disp)}
.shelf button:hover{background:color-mix(in srgb,var(--a1) 14%,transparent)}
.shelf button i{width:11px;height:11px;flex:0 0 auto;font-style:normal;
  border:1.5px solid color-mix(in srgb,var(--text) 34%,transparent)}
.shelf button.on i{background:var(--a1);border-color:var(--a1)}
.shelf .rs{margin-top:8px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  padding-top:8px}

/* the gateway hint on Home */
.gateway{position:absolute;left:0;bottom:22px;z-index:4;max-width:min(34vw,380px);
  font:400 calc(12.5px*var(--ts,1))/1.7 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 75%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.gateway b{color:var(--a1t);font-weight:400}

/* v73 · these stack the widgets for a phone; the free canvas keeps its own layout at any width (v93), so they leave it alone */
@media(max-width:1000px){
  .spc:not([data-free]){grid-template-columns:minmax(0,1fr);gap:10px}
  .spc:not([data-free])>.wgt{grid-column:span 1!important;margin:0!important}
  .wgx{display:none}
  /* Stacked, each widget was squeezed to its 132px minimum and scrolled inside
     itself, so the wheel kept catching on a widget instead of moving the page.
     One column means the page scrolls and the widgets show everything. */
  .spc:not([data-free]) .wb{overflow:visible;min-height:auto}
  .shead{gap:10px;padding-bottom:10px}
  .shead h1{font-size:calc(23.5px*var(--ts,1))}
  .spc:not([data-free]) .mb{grid-template-columns:repeat(2,1fr)}
  :root[data-mode="space"] .ghost{display:none}
}


/* ══════════════════════════════════════════════════════════════════════
   MOTION
   One set of tokens, used everywhere. Entrances decelerate, exits
   accelerate, and anything that changes size or position gets a
   transition rather than a jump. Everything here collapses to nothing
   under prefers-reduced-motion, which is handled at the bottom of the
   original sheet.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --e-out:cubic-bezier(.22,1,.36,1);        /* entrances, settle at the end */
  --e-in:cubic-bezier(.55,0,1,.45);         /* exits, leave quickly */
  --e-io:cubic-bezier(.65,0,.35,1);         /* moves between two places */
  --e-pop:cubic-bezier(.34,1.42,.64,1);     /* a little overshoot */
  --t-xs:90ms; --t-sm:150ms; --t-md:230ms; --t-lg:360ms; --t-xl:540ms;
  --stag:26ms;
}

@keyframes riseIn{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translate3d(0,-7px,0)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translate3d(-12px,0,0)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translate3d(14px,0,0)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes sweepX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{from{background-position:-160% 0}to{background-position:260% 0}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a1) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
@keyframes rowFlash{0%{background:color-mix(in srgb,var(--a1) 22%,transparent)}
  100%{background:transparent}}

/* ── staggered entrances. JS sets --i on each child ── */
/* v71 · backwards, so the entrance lets go when it ends. Held at its last frame it stayed a live
   animation, and Chrome kept every widget and card on a layer of its own for as long as it was on screen */
.stg>*{animation:riseIn var(--t-md) var(--e-out) backwards;
  animation-delay:calc(var(--i,0) * var(--stag))}
.stgL>*{animation:slideR var(--t-md) var(--e-out) both;
  animation-delay:calc(var(--i,0) * var(--stag))}
.stgP>*{animation:popIn var(--t-md) var(--e-pop) backwards;
  animation-delay:calc(var(--i,0) * var(--stag))}

/* ── view transitions. Chrome morphs the snapshot for us ── */
::view-transition-old(root){animation:fadeOut var(--t-sm) var(--e-in) both}
::view-transition-new(root){animation:fadeIn var(--t-md) var(--e-out) both}
::view-transition-group(space-head){
  animation-duration:var(--t-lg);animation-timing-function:var(--e-io)}
::view-transition-group(workspace){
  animation-duration:var(--t-md);animation-timing-function:var(--e-out)}
::view-transition-old(workspace){animation:fadeOut var(--t-xs) var(--e-in) both}
::view-transition-new(workspace){animation:riseIn var(--t-md) var(--e-out) both}
/* Nothing may outlast the slowest named group, or the page feels stuck. */
::view-transition-group(*){animation-duration:var(--t-lg)}
.shead{view-transition-name:space-head}
.ws{view-transition-name:workspace}

/* The wallpaper keeps its blurred look behind an open view, but nothing on it
   needs to keep moving while a full screen panel sits on top of it. */
:root[data-frozen="1"] #scene *,
:root[data-frozen="1"] #ghost,
:root[data-frozen="1"] .sheen{animation-play-state:paused!important}

/* ── interactive feedback everywhere ── */
button,a,select,input,textarea,.ti,.card,.wgt,.cev,.nrow,.tbl tr,.call{
  transition:background var(--t-sm) var(--e-io), color var(--t-sm) var(--e-io),
             border-color var(--t-sm) var(--e-io), opacity var(--t-sm) var(--e-io),
             transform var(--t-sm) var(--e-out), box-shadow var(--t-sm) var(--e-io)}
button:active,.fbtn:active{transform:translateY(1px) scale(.985)}
.ti:hover,.nrow:hover{transform:translateX(2px)}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.34)}
.wgt:hover{box-shadow:0 18px 40px rgba(0,0,0,.36)}
.cev:hover{transform:translateX(2px)}
.vtabs button{position:relative}
.vtabs button::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--a1);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-md) var(--e-out)}
.vtabs button[aria-current="page"]::after{transform:scaleX(1)}
.vtabs button[aria-current="page"]{box-shadow:none}
.nav a{position:relative}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-md) var(--e-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ── the tick ── */
.ck,.b{position:relative;overflow:visible}
.ck svg,.chk .b svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);
  pointer-events:none}
.ck svg path,.chk .b svg path{stroke:var(--page);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14}
.done .ck svg path,.on .b svg path,.ck[aria-pressed="true"] svg path{
  animation:tickDraw var(--t-md) var(--e-out) forwards}
.ck:not(.wasdone):active{transform:scale(.84)}

/* ── rows that just changed ── */
.flash{animation:rowFlash var(--t-xl) var(--e-out)}

/* ── skeletons ── */
.sk{border-radius:2px;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--text) 6%,transparent) 20%,
    color-mix(in srgb,var(--text) 14%,transparent) 42%,
    color-mix(in srgb,var(--text) 6%,transparent) 64%) 0 0/220% 100%;
  animation:shimmer 1.35s linear infinite}
.skrow{display:flex;gap:11px;align-items:center;padding:12px 14px;margin-bottom:5px;
  background:color-mix(in srgb,var(--p1) 60%,transparent)}
.skrow .sk:nth-child(1){width:15px;height:15px;flex:0 0 auto}
.skrow .sk:nth-child(2){height:12px;flex:1}
.skrow .sk:nth-child(3){width:64px;height:9px;flex:0 0 auto}

/* ── numbers that roll instead of jump ── */
.pg .dial circle:last-child{transition:stroke-dashoffset var(--t-xl) var(--e-out)}
.meter i{transition:background var(--t-md) var(--e-io),opacity var(--t-md) var(--e-io)}
.tmw .spark i{transition:height var(--t-lg) var(--e-out)}

/* ── drawers and overlays get a real exit ── */
.tdscrim,.cmdscrim,.nscrim{animation:fadeIn var(--t-md) var(--e-out) both}
.leaving .td{animation:tdIn var(--t-sm) var(--e-in) reverse both}
.leaving .tdscrim{animation:fadeOut var(--t-sm) var(--e-in) both}
.cmd{animation:dropIn var(--t-md) var(--e-pop) both}
.leaving .cmd{animation:dropIn var(--t-xs) var(--e-in) reverse both}
.nbox{animation:dropIn var(--t-md) var(--e-out) both}
.shelf{animation:dropIn var(--t-sm) var(--e-out) both}
.tst{animation:riseIn var(--t-md) var(--e-pop) both}

/* ── drag ── */
.card.drag,.wgt.drag,.cev.drag,.ti.drag{opacity:.32;transform:scale(.98) rotate(.6deg)}
/* v71 · inside a staggered list the held entrance used to cover the rule above, so these never faded while dragged; they still do not */
:is(.stg,.stgP)>:is(.card,.wgt,.cev,.ti).drag{opacity:1;transform:none}
.col.over,.dy.over,.mb .c.over,.wgt.over,.sec.over{
  animation:pulseRing 1.1s var(--e-out) infinite}
.ghostline{height:2px;background:var(--a1);margin:2px 0;border-radius:1px;
  animation:sweepX var(--t-sm) var(--e-out) both;transform-origin:left}

/* ── the clock ticks over rather than snapping ── */
.ghost{transition:opacity var(--t-xl) var(--e-io)}

/* ══════════════════════════════════════════════════════════════════════
   v7  ·  sections, grouping, bulk edit, live cells, dependencies
   ══════════════════════════════════════════════════════════════════════ */
kbd{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);padding:2px 5px;border:1px solid color-mix(in srgb,var(--text) 26%,transparent);
  border-bottom-width:2px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.fbtn.danger,.mini.danger{color:var(--a2t,var(--a2));border-color:color-mix(in srgb,var(--a2) 45%,transparent)}
.fbtn.on{background:color-mix(in srgb,var(--a1) 30%,transparent);color:var(--text);
  border-color:var(--a1)}
.mini{background:none;border:0;color:var(--muted);cursor:pointer;padding:3px 5px;
  font:400 calc(14px*var(--ts,1))/1 var(--disp);flex:0 0 auto}
.mini:hover{color:var(--a1t)}
.mini.on{color:var(--a1t)}
.mini.open{font-size:calc(13.5px*var(--ts,1));opacity:0;transition:opacity var(--t-sm)}
tr:hover .mini.open,.subrow:hover .mini.open{opacity:1}
.mini.open{color:color-mix(in srgb,var(--muted) 70%,var(--text))}

/* ── the select dot ── */
.pick{width:14px;height:14px;flex:0 0 auto;padding:0;cursor:pointer;background:none;
  border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:3px}
.pick:hover{border-color:var(--a1)}
.pick[aria-pressed="true"]{background:var(--a1);border-color:var(--a1);
  box-shadow:inset 0 0 0 2px var(--page)}
.ti.sel,tr.sel td{background:color-mix(in srgb,var(--a1) 13%,transparent)}
.ti.cur{outline:1px solid color-mix(in srgb,var(--a1) 70%,transparent);outline-offset:1px}
tr.cur td{box-shadow:inset 0 1px 0 var(--a1),inset 0 -1px 0 var(--a1)}
.card.sel{outline:1px solid var(--a1)}
.ti{align-items:center}
.ti .ck{margin-top:0}

/* ── group headers ── */
.ghd{display:flex;align-items:center;gap:9px;padding:13px 2px 8px;cursor:pointer;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.095em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 72%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.ghd:hover{color:var(--text)}
.ghd .cx{width:10px;flex:0 0 auto;color:var(--a1t)}
.ghd b{font-weight:400}
.ghd s{text-decoration:none;color:var(--a1t)}
.ghd i{flex:1;height:1px;background:color-mix(in srgb,var(--text) 13%,transparent)}
.tbl.grp{margin-bottom:18px}
.tbl caption{text-align:left;padding:11px 2px 7px;cursor:pointer;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.095em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 72%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.tbl caption .cx{color:var(--a1t);margin-right:8px}
.tbl caption s{text-decoration:none;color:var(--a1t);margin-left:8px}
.lane{margin-bottom:20px}

/* ── List view ── */
.lst{display:flex;flex-direction:column;gap:4px}
.sec{margin-bottom:14px}
.shd{display:flex;align-items:center;gap:9px;padding:12px 2px 7px;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 74%,var(--text));
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.shd .cx{cursor:pointer;color:var(--a1t);width:10px}
.shd b{font-weight:400;color:var(--text)}
.shd s{text-decoration:none;color:var(--a1t)}
.shd i{flex:1;height:1px;background:color-mix(in srgb,var(--text) 13%,transparent)}
.shd .mini{opacity:0}
.shd:hover .mini{opacity:.75}
.secadd{display:flex;align-items:center;gap:10px;padding:8px 14px;margin-top:3px;
  border:1px dashed color-mix(in srgb,var(--text) 15%,transparent)}
.secadd:focus-within{border-color:var(--a1)}
.secadd .pl{color:var(--muted);font:400 calc(16px*var(--ts,1))/1 var(--mono)}
.secadd input{flex:1;background:none;border:0;color:var(--text);font:500 calc(15px*var(--ts,1))/1.4 var(--disp);padding:3px 0}
.secadd input:focus{outline:0}
.addsec{align-self:flex-start;margin-top:6px}

/* ── bulk bar ── */
.bulk{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 26px;position:relative;z-index:3;
  background:color-mix(in srgb,var(--a1) 15%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--a1) 46%,transparent);
  font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;text-transform:uppercase;
  color:var(--text);animation:dropIn var(--t-md) var(--e-out) both;
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.bulk b{color:var(--a1t);font-weight:400;font-size:calc(15px*var(--ts,1))}
.bulk .sp{flex:1}
.bulk select{--ch:5px;background:color-mix(in srgb,var(--p2) 92%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);
  font:500 calc(14px*var(--ts,1))/1 var(--disp);padding:6px 8px;cursor:pointer;letter-spacing:0;text-transform:none}

/* ── live cells ── */
.cin{background:none;border:1px solid transparent;color:var(--text);
  font:500 calc(14px*var(--ts,1))/1.3 var(--disp);padding:5px 6px;width:100%;min-width:0;border-radius:2px}
.cin:hover{border-color:color-mix(in srgb,var(--text) 15%,transparent);
  background:color-mix(in srgb,var(--text) 4%,transparent)}
.cin:focus{outline:0;border-color:var(--a1);background:color-mix(in srgb,var(--p1) 92%,transparent)}
.cin.sm{width:auto;max-width:132px;font-size:calc(13.5px*var(--ts,1))}
.cin.late{color:var(--a3t,var(--a3))}
.cin.p0{color:var(--a2t,var(--a2))}
.cin.p1{color:var(--a3t,var(--a3))}
.tbl td{padding:4px 8px}
.tbl th.pk,.tbl td.pk{width:26px;padding-left:10px;padding-right:0}
.tbl .ttl{display:flex;align-items:center;gap:7px;min-width:230px}
.tbl .ttl .sub{color:var(--muted);flex:0 0 auto}
.tbl tr:hover td{background:color-mix(in srgb,var(--p1) 62%,transparent)}
.tbl tr.done .cin.t{opacity:.45;text-decoration:line-through}

/* ── badges ── */
.kid{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--a1t);flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--a1) 40%,transparent);padding:3px 5px}
.rec{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);color:var(--a1t);flex:0 0 auto}
.wch{color:var(--a1t);font-size:calc(13.5px*var(--ts,1))}
.ms{width:9px;height:9px;background:var(--a3,var(--a1));transform:rotate(45deg);display:inline-block}
.blk{color:var(--a2t,var(--a2))}
.kbar{display:block;height:3px;margin:7px 0 0;background:color-mix(in srgb,var(--text) 14%,transparent)}
.kbar i{display:block;height:100%;background:var(--a1);
  transition:width var(--t-lg) var(--e-out)}

/* ── drawer additions ── */
.td .hd .crumb{background:none;border:0;color:var(--muted);cursor:pointer;max-width:170px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 calc(13.5px*var(--ts,1))/1 var(--disp)}
.td .hd .crumb:hover{color:var(--a1t)}
.banner{--ch:6px;padding:9px 12px;margin-bottom:13px;font-size:calc(14px*var(--ts,1));
  background:color-mix(in srgb,var(--a3,var(--a1)) 16%,transparent);
  border-left:2px solid var(--a3t,var(--a3))}
.qrow{display:flex;gap:7px;margin:13px 0 4px;flex-wrap:wrap}
.chips2{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}
.chip2{--ch:4px;background:color-mix(in srgb,var(--p1) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);color:var(--muted);
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.055em;text-transform:uppercase;
  padding:6px 9px;cursor:pointer}
.chip2:hover{color:var(--text);border-color:var(--a1)}
.chip2.on{background:color-mix(in srgb,var(--a1) 22%,transparent);color:var(--text);border-color:var(--a1)}
.frow{display:grid;grid-template-columns:94px 1fr;gap:7px 12px;align-items:center}
.frow>label{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.frow select,.frow input,.frow textarea{--ch:5px;width:100%;
  background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);
  font:500 calc(14px*var(--ts,1))/1.4 var(--disp);padding:7px 9px}
.frow select:focus,.frow input:focus{outline:2px solid var(--a1);outline-offset:1px}
.frow .pair{display:flex;gap:6px}
.frow .pair>*{flex:1;min-width:0}
.td h3 s{text-decoration:none;color:var(--a1t);margin-left:7px}

.subrow{display:flex;align-items:center;gap:8px;padding:5px 0;
  border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.subrow .ck{width:14px;height:14px;flex:0 0 auto;cursor:pointer;padding:0;background:none;
  border:1.5px solid color-mix(in srgb,var(--text) 34%,transparent)}
.subrow.done .ck{background:var(--a1);border-color:var(--a1)}
.subrow.done .cin.t{opacity:.45;text-decoration:line-through}
.subrow .cin.t{flex:1;min-width:0}
.subrow .cin.sm{flex:0 0 118px}
.subrow .cin.sm[type=date]{flex:0 0 128px}
.subrow select.cin.sm{flex:0 0 64px}

.deps{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.dep{display:flex;align-items:center;gap:9px;padding:7px 9px;
  background:color-mix(in srgb,var(--p1) 68%,transparent);
  border-left:2px solid color-mix(in srgb,var(--a2) 60%,transparent)}
.dep .w{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:var(--a2t,var(--a2));flex:0 0 auto;
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.dep .t{flex:1;min-width:0;font-size:calc(14px*var(--ts,1));cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dep .t:hover{color:var(--a1t)}
.dep .st{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;color:var(--muted);flex:0 0 auto;
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.dep .st.ok{color:var(--a1t)}
.miniadd select.mini{--ch:5px;flex:1;background:color-mix(in srgb,var(--p1) 80%,transparent);
  color:var(--text);border:1px solid color-mix(in srgb,var(--text) 15%,transparent);
  font:500 calc(14px*var(--ts,1))/1 var(--disp);padding:8px 9px}

/* ── mentions ── */
.ment{display:flex;flex-direction:column;gap:1px;margin-top:5px}
.ment button{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--p1) 82%,transparent);
  border:0;color:var(--text);cursor:pointer;padding:6px 9px;text-align:left;
  font:500 calc(14px*var(--ts,1))/1 var(--disp);animation:dropIn var(--t-sm) var(--e-out) both}
.ment button:hover{background:color-mix(in srgb,var(--a1) 20%,transparent)}
.mn{color:var(--a1t)}

/* ── undo bar ── */
#undo{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);z-index:58;pointer-events:none}
.ubar{--ch:6px;display:flex;align-items:center;gap:13px;pointer-events:auto;
  padding:10px 9px 10px 17px;background:color-mix(in srgb,var(--p2) 98%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 50%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.5);font:500 calc(14px*var(--ts,1))/1 var(--disp);
  animation:riseIn .42s cubic-bezier(.65,0,.35,1) both;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.ubar.seated,.ubar.going{animation:none}
#undo{display:grid} #undo>.ubar{grid-area:1/1}
.ubar button{background:none;border:0;color:var(--a1t);cursor:pointer;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;padding:4px 6px}
.ubar button:hover{color:var(--text)}

@media(max-width:1000px){
  .bulk{padding-left:14px;padding-right:14px}
  .frow{grid-template-columns:1fr}
  .frow>label{margin-top:5px}
  .tbl .ttl{min-width:160px}
  #undo{bottom:96px;width:calc(100vw - 28px)}
  .ubar{width:100%}
}


/* ── the shortcut sheet ──────────────────────────────────────────────
   Lost from the v7 splice, so the sheet rendered as an unstyled block
   that ran off the bottom of short windows. Styled to match the task
   island. Centred with auto margins rather than a translate, because the
   entrance animation sets transform and would knock a translate off
   centre while it plays. */
.help{position:fixed;inset:0;margin:auto;z-index:56;
  width:min(1080px,calc(100vw - 32px));height:fit-content;max-height:min(86vh,860px);
  overflow-y:auto;--ch:14px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),
    calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 95%,transparent);
  backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 38%,transparent);
  animation:popIn var(--t-md) var(--e-pop) both}
.help .hh{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:11px;
  padding:17px 22px 13px;background:inherit;
  border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.help .hh h2{margin:0;font:700 calc(19px*var(--ts,1))/1 var(--disp)}
.help .hh .sp{flex:1}
.hg{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px 28px;padding:20px 22px 10px}
.hg h3{margin:0 0 10px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--a1t);-webkit-text-stroke:.32px currentColor;paint-order:stroke fill}
.kr{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:calc(14px*var(--ts,1))}
.kr kbd{flex:0 0 96px;text-align:center;padding:4px 6px;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);
  color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.kr span{color:color-mix(in srgb,var(--muted) 70%,var(--text))}

/* ══════════════ Harada method ══════════════ */
/* A Space already on screen keeps still when it redraws. */
.spc.seated>*{animation:none}

/* team or personal goal, in the Space header */
.kindsw{display:flex;gap:1px;padding:2px;margin-bottom:2px;--ch:6px;
  background:color-mix(in srgb,var(--page) 80%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 14%,transparent);
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.kindsw button{background:none;border:0;cursor:pointer;padding:6px 10px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 86%,transparent);transition:background var(--t-sm) var(--e-out),color var(--t-sm)}
.kindsw button:hover:not(:disabled){color:var(--text)}
.kindsw button[aria-pressed="true"]{color:var(--page);background:var(--ac,var(--a1))}
.kindsw button:disabled{cursor:default}
.kindsw button:focus-visible{outline:1px solid var(--a1);outline-offset:2px}

/* the tag on a Home callout */
.gk{font-style:normal;margin-left:6px;padding:2px 5px 1px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;
  color:var(--page);background:var(--act,var(--ac,var(--a1)))}

/* ── the brief, with the four-way purpose ── */
.brf{display:flex;flex-direction:column;gap:12px}
.bgl{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.bgl label{display:flex;flex-direction:column;gap:5px;min-width:0}
.bgl label>span,.fwk,.fh,.fr{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 78%,var(--text));-webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.bgl input{background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  color:var(--text);padding:4px 0 6px;font:600 calc(17px*var(--ts,1))/1.3 var(--disp);min-width:0;width:100%}
.bgl .bdt input{font:400 calc(14px*var(--ts,1))/1 var(--mono);color-scheme:dark;width:auto}
:root[data-tod="day"] .bgl .bdt input{color-scheme:light}
.bgl input:focus{outline:0;border-bottom-color:var(--a1)}
.brf .nt textarea{min-height:64px}
.fw{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);padding-top:11px}
.fwk{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.fwk em{font-style:normal;padding:2px 5px 1px;color:var(--page);background:var(--ac,var(--a1));
  -webkit-text-stroke:0}
.fwg{display:grid;grid-template-columns:auto 1fr 1fr;gap:6px;align-items:stretch}
.fwg .fh{align-self:end;padding:0 2px 2px}
.fwg .fr{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:center;padding:0 2px}
.fwg textarea{--ch:7px;width:100%;min-height:62px;resize:vertical;padding:8px 9px;
  background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);
  border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 11%,transparent);
  font:500 calc(14px*var(--ts,1))/1.45 var(--disp);
  clip-path:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%)}
.fwg textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--a1)}
.fwg textarea::placeholder,.bgl input::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent)}
.brf .ro{margin:0;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted)}
.saved{animation:savedFlash 900ms var(--e-out)}
@keyframes savedFlash{0%{box-shadow:inset 0 0 0 1px var(--a2)}100%{box-shadow:inset 0 0 0 1px transparent}}

/* ── the Open Window 64 ── */
@property --f{syntax:'<number>';inherits:false;initial-value:0}
.owwrap{container-type:inline-size}
.owi,.owx{margin:0 0 12px;max-width:760px;font:500 calc(14px*var(--ts,1))/1.55 var(--disp);
  color:color-mix(in srgb,var(--text) 82%,transparent)}
.owx{margin:10px 0 0;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)}
.ow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.owb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;position:relative;
  background:color-mix(in srgb,var(--text) 3%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 7%,transparent)}
.owb.ctr{background:color-mix(in srgb,var(--ac,var(--a1)) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 30%,transparent)}
.owb.flash{animation:owFlash 900ms var(--e-out)}
@keyframes owFlash{0%{box-shadow:inset 0 0 0 2px var(--ac,var(--a1))}100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 7%,transparent)}}

.oc{--f:0;position:relative;min-width:0;min-height:clamp(54px,5vw,72px);padding:7px 8px;
  display:flex;flex-direction:column;justify-content:space-between;gap:4px;text-align:left;
  border:0;color:var(--text);font:inherit;
  background:linear-gradient(to top,
     color-mix(in srgb,var(--ac,var(--a1)) var(--fillA,32%),transparent) calc(var(--f) * 100%),
     color-mix(in srgb,var(--p1) 70%,transparent) calc(var(--f) * 100%));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent);
  transition:--f var(--t-xl) var(--e-out),box-shadow var(--t-sm)}
.oc .tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font:500 calc(13.5px*var(--ts,1))/1.3 var(--disp);word-break:break-word}
/* Labels sit on top of the fill, so they take the text colour. Muted grey and
   accent-on-accent both dropped under 4.5:1 once a cell filled up. */
.oc .n{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:color-mix(in srgb,var(--text) 90%,transparent)}
.oc.nil{background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 5%,transparent)}
.oc.nil .n{color:color-mix(in srgb,var(--text) 82%,transparent)}

/* an action: the title opens it, the corner square ticks it */
.oc.act{padding:0}
.oc .ot{flex:1;display:flex;align-items:flex-start;background:none;border:0;color:inherit;
  cursor:pointer;padding:7px 22px 7px 8px;text-align:left;font:inherit;min-width:0}
.oc .ot:focus-visible{outline:1px solid var(--a1);outline-offset:-2px}
.oc.act:hover,.oc.rt:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 60%,transparent)}
.oc .ok{position:absolute;right:6px;top:7px;width:12px;height:12px;padding:0;cursor:pointer;background:none;
  border:1.5px solid color-mix(in srgb,var(--text) 38%,transparent);transition:background var(--t-sm),border-color var(--t-sm)}
.oc .ok:hover{border-color:var(--ac,var(--a1))}
.oc.done .ok{background:var(--ac,var(--a1));border-color:var(--ac,var(--a1))}
.oc.done .tx{color:color-mix(in srgb,var(--text) 88%,transparent)}
.oc.late{box-shadow:inset 2px 0 0 var(--a3),inset 0 0 0 1px color-mix(in srgb,var(--a3) 40%,transparent)}
.oc .who{position:absolute;right:5px;bottom:5px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;
  font-style:normal;color:var(--muted)}

/* a routine: the fill is how often it got done in the last 14 days */
.oc.rt{padding:0}
.oc.rt .ot{padding-right:8px;padding-bottom:18px}
.oc .rg{position:absolute;left:8px;bottom:6px;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);color:var(--text)}
.oc .rs{position:absolute;right:7px;bottom:6px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;
  color:color-mix(in srgb,var(--text) 86%,transparent)}
.oc.rt.on{box-shadow:inset 0 0 0 1.5px var(--ac,var(--a1))}
.oc.rt.on .rs{color:var(--text)}
.oc.rt.on .rg::after{content:' TODAY';font-size:calc(12px*var(--ts,1));letter-spacing:0.07em}

/* a theme: in the middle of its block, and again around the goal */
.oc.th,.oc.tc{cursor:default;
  background:linear-gradient(to top,
     color-mix(in srgb,var(--ac,var(--a1)) var(--fillT,30%),transparent) calc(var(--f) * 100%),
     color-mix(in srgb,var(--ac,var(--a1)) var(--fillT0,12%),var(--p1)) calc(var(--f) * 100%));
  box-shadow:inset 0 2px 0 var(--ac,var(--a1)),inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 32%,transparent)}
button.oc.th,button.oc.tc{cursor:pointer}
.oc.th .tx,.oc.tc .tx{font:700 calc(14px*var(--ts,1))/1.2 var(--disp)}
.oc.th .ct{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;color:color-mix(in srgb,var(--text) 88%,transparent)}
.oc.th.new{background:none;box-shadow:none;cursor:pointer;
  outline:1px dashed color-mix(in srgb,var(--ac,var(--a1)) 55%,transparent);outline-offset:-4px}
.oc.th.new .tx{font:400 calc(12.5px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--text)}
.oc.tc.new{background:none;box-shadow:none;outline:1px dashed color-mix(in srgb,var(--ac,var(--a1)) 55%,transparent);
  outline-offset:-4px}
.oc.tc.new .tx{font:400 calc(12.5px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--text)}
.oc.th.nil,.oc.tc.nil{background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 6%,transparent)}
.oc.tc .pb{display:block;height:3px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.oc.tc .pb i{display:block;height:100%;background:var(--ac,var(--a1));transition:width var(--t-xl) var(--e-out)}
.oc.tc.on{box-shadow:inset 0 2px 0 var(--ac,var(--a1)),inset 0 0 0 2px var(--ac,var(--a1))}

/* the goal, dead centre */
.oc.goal{justify-content:center;align-items:center;text-align:center;gap:6px;cursor:default;
  background:linear-gradient(to top,
     color-mix(in srgb,var(--ac,var(--a1)) var(--fillG,36%),var(--page)) calc(var(--f) * 100%),
     color-mix(in srgb,var(--ac,var(--a1)) var(--fillG0,15%),var(--page)) calc(var(--f) * 100%));
  box-shadow:inset 0 0 0 1px var(--ac,var(--a1)),0 0 22px color-mix(in srgb,var(--ac,var(--a1)) 30%,transparent)}
button.oc.goal{cursor:pointer}
.oc.goal .k{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:color-mix(in srgb,var(--text) 92%,transparent)}
.oc.goal .tx{font:700 calc(15px*var(--ts,1))/1.2 var(--disp);-webkit-line-clamp:4}
.oc.goal .pc{font:400 calc(17px*var(--ts,1))/1 var(--mono);color:var(--text)}

/* adding an action, and editing in place */
.oc.add{padding:3px;gap:3px;background:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 26%,transparent)}
.oc.add button{flex:1;background:none;border:0;cursor:pointer;padding:0 6px;text-align:left;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 84%,transparent);transition:background var(--t-sm),color var(--t-sm)}
.oc.add button:hover,.oc.add button:focus-visible{color:var(--text);outline:0;
  background:color-mix(in srgb,var(--ac,var(--a1)) 16%,transparent)}
.oc.ed{padding:6px;background:color-mix(in srgb,var(--page) 88%,transparent);
  box-shadow:inset 0 0 0 1px var(--ac,var(--a1))}
.oc.ed input{width:100%;min-width:0;background:none;border:0;color:var(--text);font:600 calc(14px*var(--ts,1))/1.3 var(--disp);padding:2px 0}
.oc.ed input:focus{outline:0}
.oc.ed .hint{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:var(--muted)}

/* A narrow widget stacks: the goal and its 8 themes first, then the one theme picked. */
@container (max-width:639px){
  .ow{grid-template-columns:minmax(0,1fr)}
  .owb{display:none}
  .owb.ctr,.owb.focus{display:grid}
  .owb.ctr{order:-1}
  .oc{min-height:64px}
  .oc.tc .tx{-webkit-line-clamp:2}
}

/* ── the routine check sheet ── */
.rhd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rhd b{font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;color:var(--text);min-width:128px;text-align:center}
.rhd .fbtn{padding:5px 9px}
.rhd .fbtn:disabled{opacity:.35;cursor:default}
.rhd .sp{flex:1}
.rhd .kk{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--ac,var(--a1))}
.rtw{overflow-x:auto;padding-bottom:4px}
.rtw::-webkit-scrollbar{height:6px}
.rtw::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--a1) 30%,transparent)}
.rtb{border-collapse:separate;border-spacing:2px;width:100%}
.rtb th,.rtb td{padding:0;text-align:center}
.rtb thead th{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;color:var(--muted);padding:0 0 4px;min-width:20px}
.rtb thead th.we{color:var(--muted);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--text) 12%,transparent)}
.rtb thead th.now{color:var(--ac,var(--a1))}
.rtb .rn{position:sticky;left:0;z-index:1;text-align:left;min-width:150px;max-width:220px;padding:3px 8px 3px 2px;
  background:color-mix(in srgb,var(--p1) 94%,var(--page))}
.rtb tbody .rn{display:flex;align-items:center;gap:6px}
.rtb .rn .tx{font:600 calc(14px*var(--ts,1))/1.25 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rtb .rn small{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.rtb .rn .ra{margin-left:auto;display:flex;opacity:0;transition:opacity var(--t-sm)}
.rtb tr:hover .rn .ra,.rtb .rn .ra:focus-within{opacity:1}
.rc{display:block;width:20px;height:20px;margin:auto;padding:0;cursor:pointer;border:0;
  background:color-mix(in srgb,var(--text) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent);
  transition:background var(--t-sm) var(--e-out),box-shadow var(--t-sm),transform var(--t-sm) var(--e-pop)}
.rc:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--ac,var(--a1))}
.rc.on{background:var(--ac,var(--a1));box-shadow:0 0 8px color-mix(in srgb,var(--ac,var(--a1)) 45%,transparent)}
.rc.on:active{transform:scale(.88)}
.rc.pre:not(.on){opacity:.3}
.rc:disabled{cursor:default;background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 6%,transparent)}
.rc:focus-visible{outline:1px solid var(--a1);outline-offset:1px}
.rtb td.now .rc:not(.on){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ac,var(--a1)) 70%,transparent)}
.rtb .stk,.rtb .mth{font:400 calc(13.5px*var(--ts,1))/1 var(--mono);color:var(--text);min-width:44px;padding:0 4px}
.rtb thead .stk,.rtb thead .mth{font-size:calc(12px*var(--ts,1));letter-spacing:0.05em;text-transform:uppercase;color:var(--muted)}
.radd{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.radd input,.radd select{--ch:5px;background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);padding:7px 9px;font:500 calc(14px*var(--ts,1))/1 var(--disp);
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.radd input{flex:1 1 200px;min-width:0}
.radd select{flex:0 1 160px;min-width:0}
.radd input:focus,.radd select:focus{outline:1px solid var(--a1);outline-offset:1px}

/* ══════════════ skins ══════════════ */
/* Yuubako is the default look. A skin, whose tokens load from skins.js, swaps
   in one of the 100 gallery themes. The palette, type, corners, shadows and
   backdrop change. The layout and every control stay where they are. */
:root.skinned{--ch:0px}
:root.skinned[data-smode="light"]{color-scheme:light}
:root.skinned[data-smode="dark"]{color-scheme:dark}
:root.skinned body{font-family:var(--disp)}
/* chamfers become the skin's own corners, and the hair of stroke that kept
   Share Tech Mono legible at 9px is not needed by the other faces */
:root.skinned *{clip-path:none!important}
:root.skinned *,:root.skinned *::before,:root.skinned *::after{-webkit-text-stroke:0!important}
:root.skinned[data-smode="light"] .bgl .bdt input{color-scheme:light}

/* the scene and its ornaments step aside for the skin's own backdrop */
:root.skinned #frame::after,:root.skinned .hud,:root.skinned .halo,
:root.skinned .scan,:root.skinned .grain{display:none}
:root.skinned[data-bg="scene"] :is(.scrim,.band){display:none}
:root.skinned #scene > *{display:none}
:root.skinned #scene{background:
  radial-gradient(900px 520px at 16% -10%,color-mix(in srgb,var(--a1) 9%,transparent),transparent 60%),
  radial-gradient(780px 470px at 88% 6%,color-mix(in srgb,var(--a2) 7%,transparent),transparent 62%),
  var(--page)}
:root.skinned #scene::after{content:'';position:absolute;inset:0;pointer-events:none}
:root.skinned[data-stex="grid"] #scene::after{background-image:
  linear-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px);
  background-size:72px 72px}
:root.skinned[data-stex="dots"] #scene::after{
  background-image:radial-gradient(color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1px);
  background-size:17px 17px}
:root.skinned[data-stex="diag"] #scene::after{background-image:repeating-linear-gradient(135deg,
  color-mix(in srgb,var(--text) 5%,transparent) 0 1px,transparent 1px 10px)}
:root.skinned[data-stex="dither"] #scene::after{
  background-image:radial-gradient(color-mix(in srgb,var(--text) 20%,transparent) 1px,transparent 1.2px);
  background-size:5px 5px;opacity:.55}
:root.skinned[data-stex="scan"] #scene::after{background-image:repeating-linear-gradient(
  color-mix(in srgb,var(--a1) 7%,transparent) 0 1px,transparent 1px 4px)}

/* type: the skin's display face on the headings, its body face everywhere else */
:root.skinned .ghost{color:color-mix(in srgb,var(--text) 9%,transparent);font-family:var(--hd)}
:root.skinned .ghost::before,:root.skinned .ghost::after{display:none}
:root.skinned :is(.shead h1,.wsh h2,.cbox .cn,.nx .t,.pct .n,.oc.goal .tx,.help h2,.dh h2,.td .tt,.gatebox h1){
  font-family:var(--hd)}

/* corners */
:root.skinned :is(.cham,.gatebox,.cbox,.blurb,.pct,.col,.td,.wgt,.help,.cmd,.nbox,.shelf,.owb){border-radius:var(--r)}
:root.skinned .cbox .in{border-radius:max(0px,calc(var(--r) - 1.5px))}
:root.skinned .cbox .in::before{display:none}
:root.skinned[data-bg="image"] :is(.nav,.bot),:root.skinned[data-bg="video"] :is(.nav,.bot){border-radius:var(--r)}
:root.skinned :is(.cham-sm,.gmark,#gmail,#gbtn,.tadd input,.tadd button,.logo,.ico,.chip,.play .pb,.hp,.seg,.media,
  .opt,.vtabs button,.fbar select,.fbar input[type=search],.fbtn,.ti,.pill,.card,.frow select,.frow input,
  .frow textarea,.miniadd select.mini,.miniadd input,.tst,.ubar,.kindsw,.fwg textarea,.radd input,.radd select,
  .oc,.skn,.skq input){border-radius:var(--rs)}
:root.skinned :is(.seg button,.kindsw button,.rc){border-radius:max(2px,calc(var(--rs) - 3px))}

/* surfaces: the skin's panel colour, border, blur and shadow family */
:root.skinned :is(.wgt,.cbox .in,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar){
  border:var(--bw) solid var(--edge);
  backdrop-filter:blur(var(--blur)) saturate(135%);-webkit-backdrop-filter:blur(var(--blur)) saturate(135%)}
:root.skinned :is(.wgt,.td,.help,.cmd,.nbox,.shelf){background:color-mix(in srgb,var(--p1) 96%,transparent)}
:root.skinned :is(.cbox .in,.blurb,.pct){background:var(--p1)}
:root.skinned .nav a:not([aria-current]):not(.addlink){color:color-mix(in srgb,var(--text) 88%,transparent)}
:root.skinned .bell .bdg{color:var(--page)}
/* the resting callouts were faded to 88%, which a bright accent on a dark scene
   survives and a mid-tone accent on paper does not */
:root.skinned .call{opacity:1}
:root.skinned :is(.pg .dial .n s,.tmw .big s){opacity:1}
:root.skinned .gateway b{color:var(--text);font-weight:700}
:root.skinned .fbtn{color:var(--text);background:color-mix(in srgb,var(--a1) 12%,var(--p1))}
:root.skinned .fbtn:hover{background:color-mix(in srgb,var(--a1) 22%,var(--p1))}
:root.skinned .fbtn.quiet{color:color-mix(in srgb,var(--text) 82%,var(--muted));background:none}
:root.skinned :is(.credit,.cbox .ck){color:color-mix(in srgb,var(--text) 86%,transparent)}
:root.skinned .col{background:var(--p2);border-top-width:2px}
:root.skinned .card{background:var(--p1);box-shadow:inset 0 0 0 1px var(--edge2)}
:root.skinned .ws{background:color-mix(in srgb,var(--page) 97%,transparent)}
:root.skinned .drawer{background:var(--page);border-left:var(--bw) solid var(--edge)}
:root.skinned[data-ssh="none"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar,.wgt:hover){box-shadow:none}
:root.skinned[data-ssh="soft"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar){box-shadow:0 16px 40px rgba(0,0,0,.34)}
:root.skinned[data-ssh="soft"][data-smode="light"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar){
  box-shadow:0 10px 30px rgba(0,0,0,.09)}
:root.skinned[data-ssh="hard"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar,.fbtn,.card){
  box-shadow:5px 5px 0 0 var(--text)}
:root.skinned[data-ssh="clay"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar){
  box-shadow:0 14px 34px rgba(0,0,0,.16),inset 0 -5px 12px rgba(0,0,0,.10),inset 0 6px 12px rgba(255,255,255,.35)}
:root.skinned[data-ssh="neu"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar){
  box-shadow:7px 7px 18px color-mix(in srgb,var(--text) 15%,transparent),-7px -7px 18px color-mix(in srgb,#fff 60%,transparent)}
:root.skinned[data-ssh="skeu"] :is(.wgt,.cbox,.blurb,.pct,.td,.help,.cmd,.nbox,.shelf,.tst,.ubar){
  box-shadow:0 2px 0 rgba(255,255,255,.22) inset,0 -3px 8px rgba(0,0,0,.28) inset,0 12px 26px rgba(0,0,0,.36);
  background:linear-gradient(180deg,var(--p1),var(--p2))}
:root.skinned .wgt{border-top:var(--bw) solid var(--edge)}
:root.skinned .wgt::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--ac,var(--a1));border-radius:var(--r) var(--r) 0 0;opacity:.9}

/* ── the skin picker in the theme drawer ── */
.skq{display:flex;gap:8px;align-items:center;margin:4px 0 8px}
.skq input{flex:1;min-width:0;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);padding:8px 10px;font:500 calc(14px*var(--ts,1))/1 var(--disp)}
.skq input:focus{outline:1px solid var(--a1);outline-offset:1px}
.skq .seg button{padding:6px 8px}
.skc{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted);margin:0 0 8px}
.skl{display:flex;flex-direction:column;gap:5px}
.skn{display:flex;gap:11px;align-items:center;width:100%;text-align:left;cursor:pointer;padding:7px;
  background:color-mix(in srgb,var(--text) 5%,transparent);border:0;color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent);
  transition:background var(--t-sm) var(--e-out),box-shadow var(--t-sm)}
.skn:hover{background:color-mix(in srgb,var(--a1) 12%,transparent)}
.skn[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--a1);background:color-mix(in srgb,var(--a1) 14%,transparent)}
.skn:focus-visible{outline:1px solid var(--a1);outline-offset:1px}
.skp{position:relative;flex:0 0 auto;width:62px;height:44px;background:var(--sp);overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st) 16%,transparent)}
.skp i{position:absolute;left:7px;top:7px;right:7px;height:17px;background:var(--s1);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st) 12%,transparent)}
.skp i::after{content:'';position:absolute;left:5px;top:6px;width:26px;height:3px;background:var(--st);opacity:.8}
.skp b{position:absolute;bottom:7px;width:9px;height:9px;border-radius:50%;background:var(--sa)}
.skp b:nth-of-type(1){left:7px}
.skp b:nth-of-type(2){left:19px;background:var(--sb)}
.skp b:nth-of-type(3){left:31px;background:var(--sc)}
.skt{display:flex;flex-direction:column;gap:3px;min-width:0}
.skt .nm{font:600 calc(15px*var(--ts,1))/1.2 var(--disp)}
.skt .nm em{font-style:normal;margin-left:5px;padding:1px 5px;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.07em;
  color:var(--page);background:var(--a1)}
.skt .vb{font:500 calc(13.5px*var(--ts,1))/1.35 var(--disp);color:color-mix(in srgb,var(--muted) 82%,var(--text));
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.skt .ft{font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.05em;text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 70%,var(--text))}

/* ══════════════ v15: accounts, people, habits, music, tutorials ══════════════ */

/* ── sign in, reset, invite ── */
.gatebox{max-height:calc(100vh - 48px);overflow-y:auto}
.gform{display:flex;flex-direction:column;gap:11px}
.gf{display:flex;flex-direction:column;gap:6px}
.gf>span:first-child{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.gatebox input,.acct input{width:100%;padding:12px 13px;border:0;--ch:8px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--p2);color:var(--text);font:400 calc(15px*var(--ts,1))/1.2 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.gatebox input:focus,.acct input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--a1)}
.gatebox input[readonly]{color:var(--muted);background:color-mix(in srgb,var(--p2) 60%,transparent)}
.pwrap{position:relative;display:block}
.pwrap input{padding-right:62px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--a1t);padding:6px}
.eye:hover{color:var(--text)}
.gbtn{padding:12px 13px;border:0;cursor:pointer;--ch:8px;margin-top:4px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);color:var(--page);font:400 calc(13.5px*var(--ts,1))/1 var(--mono);
  letter-spacing:0.08em;text-transform:uppercase;transition:opacity .18s}
/* hover rings the button, so its text keeps full contrast in every time of day */
.gbtn:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--page) 55%,transparent)}.gbtn:disabled{opacity:.5;cursor:default}
.glinks{margin:14px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.glink{background:none;border:0;padding:0;cursor:pointer;color:var(--a1t);font:400 calc(13.5px*var(--ts,1))/1.4 var(--mono);
  letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px}
.glink:hover{color:var(--text)}
.gnote{margin:14px 0 0;font:400 calc(13.5px*var(--ts,1))/1.6 var(--mono);color:var(--muted)}
.gmsg.bad{color:var(--a2t,var(--a2))}
.gmsg.ok{color:var(--a1t)}
.gproj{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 10px 6px 8px;--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--pc) 16%,transparent);font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase}
.gproj i{width:8px;height:8px;background:var(--pc);transform:rotate(45deg)}
.pwm{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:-2px 0 2px}
.pwm i{height:3px;background:color-mix(in srgb,var(--text) 14%,transparent);transition:background .2s}
.pwm span{grid-column:1/-1;font:400 calc(12.5px*var(--ts,1))/1.4 var(--mono);color:var(--muted);min-height:15px}
.pwm[data-s="1"] i:nth-child(-n+1){background:var(--a2,#FF3355)}
.pwm[data-s="2"] i:nth-child(-n+2){background:var(--a3,#FFB020)}
.pwm[data-s="3"] i:nth-child(-n+3),.pwm[data-s="4"] i{background:var(--a1)}
.pwm[data-s="1"] span{color:var(--a2t,var(--a2))}

/* ── the account button and menu ── */
.ico.av{font:700 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;color:var(--text);background:color-mix(in srgb,var(--text) 14%,transparent)}
.ico.av:hover,.ico.av[aria-expanded="true"]{color:var(--page);background:var(--a1)}
.acct{position:fixed;top:62px;right:24px;z-index:55;width:min(360px,calc(100vw - 32px));
  max-height:calc(100vh - 84px);overflow-y:auto;text-align:left;padding:0 0 14px;
  background:color-mix(in srgb,var(--page) 98%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 50%,transparent);box-shadow:0 22px 54px rgba(0,0,0,.55);
  animation:dropIn var(--t-md,.2s) var(--e-out,ease) both}
.acct .ah{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.av.big{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb,var(--a1) 22%,transparent);color:var(--text);font:700 calc(15px*var(--ts,1))/1 var(--mono)}
.acct .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.acct .who b{font-size:calc(16px*var(--ts,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .who s{text-decoration:none;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.acct .af{display:flex;flex-direction:column;gap:9px;padding:13px 15px 4px}
.acct .af h4{margin:4px 0 0;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--a1t)}
.acct .row{display:flex;gap:8px}.acct .row input{flex:1}
.acct input{padding:10px 11px;font-size:calc(14px*var(--ts,1))}
.amsg{margin:0;min-height:15px;font:400 calc(13.5px*var(--ts,1))/1.4 var(--mono);color:var(--muted)}
.amsg.bad{color:var(--a2t,var(--a2))}.amsg.ok{color:var(--a1t)}
.an{margin:0;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}
.acct .aa{display:flex;gap:8px;flex-wrap:wrap;padding:12px 15px 0;margin-top:8px;border-top:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
/* v85 · the password page sits one click in from the account menu */
.acct .arow{display:flex;align-items:center;gap:12px;width:calc(100% - 30px);margin:12px 15px 0;padding:11px 12px;text-align:left;cursor:pointer;
  color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.acct .arow:hover,.acct .arow:focus-visible{border-color:color-mix(in srgb,var(--a1) 60%,transparent);background:color-mix(in srgb,var(--a1) 9%,transparent);outline:0}
.acct .arow span{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.acct .arow b{font-size:calc(14.5px*var(--ts,1))}
.acct .arow s{text-decoration:none;font:400 calc(12.5px*var(--ts,1))/1.4 var(--mono);color:var(--muted)}
.acct .arow i{font-style:normal;font-size:calc(22px*var(--ts,1));line-height:1;color:var(--a1t)}
.acct .aback{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;font-size:calc(24px*var(--ts,1));line-height:1;
  color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent);border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.acct .aback:hover,.acct .aback:focus-visible{border-color:var(--a1);color:var(--a1t);outline:0}

/* ── people ── */
.ppl{position:fixed;inset:0;margin:auto;z-index:56;width:min(680px,calc(100vw - 32px));height:fit-content;
  max-height:min(86vh,820px);overflow-y:auto;--ch:14px;text-align:left;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 96%,transparent);
  backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc,var(--a1)) 45%,transparent);
  animation:popIn var(--t-md,.2s) var(--e-pop,ease) both}
.ppl .ph{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:10px;padding:17px 22px 13px;background:inherit;
  border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.ppl .ph h2{margin:0;font:700 calc(19px*var(--ts,1))/1 var(--disp)}
.ppl .ph .sp{flex:1}
.ppl .kk{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;color:var(--a1t);
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.ppl .pb{padding:12px 22px 22px;display:flex;flex-direction:column;gap:18px}
.ppl h3{margin:6px 0 10px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--a1t)}
.pr{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.pr .av{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb,var(--pc,var(--a1)) 22%,transparent);font:700 calc(13.5px*var(--ts,1))/1 var(--mono)}
.pr .nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pr .nm b{font-size:calc(15px*var(--ts,1));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .nm b s{text-decoration:none;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--a1t);margin-left:6px}
.pr .nm em{font:400 calc(13.5px*var(--ts,1))/1.2 var(--mono);font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .rl{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted);padding:6px 8px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.pr select.cin{width:auto;min-width:118px}
.pr .pa{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pr.wait{box-shadow:inset 2px 0 0 color-mix(in srgb,var(--a1) 45%,transparent);padding-left:9px}
.ivf{display:flex;gap:8px;flex-wrap:wrap}
.ivf input{flex:1 1 220px;min-width:0;padding:10px 11px;border:0;background:var(--p2);color:var(--text);
  font:400 calc(14px*var(--ts,1))/1.2 var(--mono);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.ivf input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--a1)}
.ivf select{padding:9px 10px;background:var(--p2);color:var(--text);border:0;font:400 calc(14px*var(--ts,1))/1.2 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.rn{margin:8px 0 0;font:400 calc(13.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}
.rn.solo{margin:0}
.ivr{margin-top:14px;padding:13px 14px;--ch:9px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--a1) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent);
  animation:popIn var(--t-md,.2s) var(--e-pop,ease) both}
.ivr .lk{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0 8px}
.ivr .lk input{flex:1 1 260px;min-width:0;padding:9px 10px;border:0;background:var(--p2);color:var(--text);
  font:400 calc(13.5px*var(--ts,1))/1.2 var(--mono);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.ivr a.fbtn{text-decoration:none;display:inline-flex;align-items:center}
.ivr .lkm{align-items:center;margin-top:0}
.ivr .lkm span{font:600 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--text) 82%,transparent);margin-right:2px}
.ivr p{margin:0;font:400 calc(13.5px*var(--ts,1))/1.55 var(--mono);color:color-mix(in srgb,var(--text) 82%,transparent)}
.rk{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.rk span{font-size:calc(14px*var(--ts,1));line-height:1.45;color:var(--muted)}
.rk b{display:block;margin-bottom:4px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;color:var(--text)}
.pp .mng{margin-top:4px}

/* ── invitations under the bell ── */
.ninv{padding:12px 15px 6px;border-bottom:1px solid color-mix(in srgb,var(--a1) 30%,transparent);
  background:color-mix(in srgb,var(--a1) 7%,transparent)}
.ninv .kk{display:block;margin-bottom:8px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;color:var(--a1t)}
.ni{display:flex;flex-direction:column;gap:5px;padding:4px 0 10px}
.ni .t{display:flex;align-items:center;gap:8px;font-size:calc(15px*var(--ts,1));font-weight:600}
.ni .t i{width:8px;height:8px;background:var(--pc);transform:rotate(45deg)}
.ni .b{font-size:calc(13.5px*var(--ts,1));color:var(--muted)}
.ni .a{display:flex;gap:8px;margin-top:2px}

/* ── habits ── */
:root{--hb4:color-mix(in srgb,var(--a2) 50%,var(--a3))}
.hp.hpe{padding-left:10px;padding-right:10px;color:var(--muted);--hc:var(--muted)}
.hp.hpe[aria-expanded="true"]{color:var(--text)}
.habx{position:fixed;left:24px;bottom:78px;z-index:55;width:min(400px,calc(100vw - 32px));
  max-height:min(70vh,560px);display:flex;flex-direction:column;overflow:hidden;text-align:left;
  background:color-mix(in srgb,var(--page) 98%,transparent);border:1px solid color-mix(in srgb,var(--a1) 50%,transparent);
  box-shadow:0 22px 54px rgba(0,0,0,.55);animation:dropIn var(--t-md,.2s) var(--e-out,ease) both}
.habx .hh{display:flex;align-items:baseline;gap:10px;padding:13px 15px 9px}
.habx .hh h2{margin:0;font:700 calc(17px*var(--ts,1))/1 var(--disp)}
.habx .hh s{text-decoration:none;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted)}
.habx .hh .sp{flex:1}
.habx .hn{margin:0;padding:0 15px 10px;font:400 calc(13.5px*var(--ts,1))/1.55 var(--mono);color:var(--muted);
  border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.habx .hl{flex:1;overflow-y:auto;padding:6px 15px 10px}
.habx .hg{padding:8px 0 4px}
.habx .hg .kk{display:flex;align-items:center;gap:7px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.habx .hg .kk i{width:6px;height:6px;background:var(--pc);transform:rotate(45deg)}
.hr{display:flex;align-items:center;gap:8px;padding:2px 0}
.hpin{flex:1;display:flex;align-items:center;gap:9px;min-width:0;padding:7px 8px;background:none;border:0;cursor:pointer;
  color:var(--text);text-align:left;font-size:calc(14px*var(--ts,1))}
.hpin:hover:not(:disabled){background:color-mix(in srgb,var(--text) 6%,transparent)}
.hpin:disabled{opacity:.45;cursor:not-allowed}
.hpin i{width:12px;height:12px;flex:0 0 auto;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 40%,transparent)}
.hpin[aria-pressed="true"] i{background:var(--a1);box-shadow:none}
.hpin span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hpin em{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}
.hcs{display:flex;gap:5px}
.hc{width:16px;height:16px;border:0;cursor:pointer;background:var(--hc);transform:rotate(45deg) scale(.72);opacity:.55}
.hc[aria-pressed="true"]{opacity:1;transform:rotate(45deg) scale(.9);box-shadow:0 0 0 2px var(--page),0 0 0 3px var(--hc)}
.hnew{display:flex;gap:7px;padding:11px 15px 13px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.hnew input{flex:1;min-width:0;padding:9px 10px;border:0;background:var(--p2);color:var(--text);font:400 calc(14px*var(--ts,1))/1.2 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.hnew select{max-width:130px;padding:8px;border:0;background:var(--p2);color:var(--text);font:400 calc(13.5px*var(--ts,1))/1.2 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.habx .none{margin:10px 0;font-size:calc(14px*var(--ts,1));color:var(--muted)}

/* ── music ── */
:root[data-music="on"] .media{display:flex}
.media .mlab{display:none;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;color:var(--a1t)}
:root[data-music="on"] .media .mlab{display:block}
.mdock{position:fixed;z-index:95;width:356px;--ch:10px;background:var(--page);
  clip-path:polygon(var(--ch) 0,100% 0,100% 100%,0 100%,0 var(--ch));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 55%,transparent),0 18px 44px rgba(0,0,0,.55);
  transition:left .35s var(--e-out,ease),right .35s var(--e-out,ease),top .35s var(--e-out,ease),bottom .35s var(--e-out,ease)}
.mdock[hidden]{display:none}
.mdock[data-corner="br"]{right:18px;bottom:84px}
.mdock[data-corner="bl"]{left:18px;bottom:84px}
.mdock[data-corner="tl"]{left:18px;top:74px}
.mdock[data-corner="tr"]{right:18px;top:74px}
.mdh{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;
  border-bottom:1px solid color-mix(in srgb,var(--a1) 30%,transparent)}
.mdh .mn{color:var(--a1);font-size:calc(15px*var(--ts,1))}
.mdh .mt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--text)}
.mdock.err .mdh .mt{color:var(--a2t,var(--a2))}
.mdh button{background:none;border:0;cursor:pointer;color:var(--muted);font:400 calc(15px*var(--ts,1))/1 var(--mono);padding:5px 6px}
.mdh button:hover{color:var(--a1t)}
.mdh button[hidden]{display:none}
/* the player itself: 200 pixels tall at the least, nothing drawn over it */
.mdp{width:356px;height:200px;background:#000}
.mdp iframe,.mdp>div{width:100%;height:100%;display:block;border:0}
@media (max-width:640px){
  .mdock{width:200px}.mdp{width:200px;height:200px}
  .mdock[data-corner="br"],.mdock[data-corner="bl"]{bottom:74px}
}

/* ── the task panel for people who can only read or comment ── */
.td fieldset{border:0;margin:0;padding:0;min-width:0}
.td fieldset.tdhf{display:contents}
.td fieldset:disabled .fbtn,.td fieldset:disabled input,.td fieldset:disabled select,
.td fieldset:disabled textarea,.td fieldset:disabled .mini{opacity:.55;cursor:not-allowed}
.robanner{margin:0 0 12px;padding:9px 11px;font:400 calc(13.5px*var(--ts,1))/1.5 var(--mono);color:var(--text);
  background:color-mix(in srgb,var(--a1) 10%,transparent);box-shadow:inset 2px 0 0 var(--a1)}
:root[data-role="viewer"] .ws :is(.ck,.pick,.secadd,.cadd,#addSec,#fAdd),
:root[data-role="commenter"] .ws :is(.ck,.pick,.secadd,.cadd,#addSec,#fAdd){display:none}
:root[data-role="viewer"] .ws .cin,:root[data-role="commenter"] .ws .cin{pointer-events:none}

/* ══════════════ the guide ══════════════ */
.gdk{display:inline-block;padding:4px 7px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.11em;color:var(--page);
  background:var(--a1);-webkit-text-stroke:0}
/* hover highlight from the ? menu */
.gdhi{position:fixed;inset:0;z-index:80;pointer-events:none}
.gdhi[hidden]{display:none}
.gdhi svg{position:absolute;inset:0;width:100%;height:100%}
.gdhi .dim{fill:rgba(2,4,8,.42)}
.gdhi .ring{fill:none;stroke:var(--a1);stroke-width:2;filter:drop-shadow(0 0 6px var(--a1))}
.gdhi .gdtag{position:absolute;padding:4px 8px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;
  color:var(--page);background:var(--a1);white-space:nowrap}
/* the menu */
.gdmenu{position:fixed;z-index:82;display:flex;flex-direction:column;overflow:hidden;text-align:left;--ch:12px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 97%,transparent);
  backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 50%,transparent)}
.gdmenu[hidden]{display:none}
.gdmenu.in{animation:dropIn var(--t-md,.2s) var(--e-out,ease) both}
.gmh{display:flex;align-items:center;gap:10px;padding:13px 15px 10px}
.gmh b{font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:var(--text)}
.gmh .sp{flex:1}
.gmx{background:none;border:0;color:var(--muted);font-size:calc(22.5px*var(--ts,1));line-height:1;cursor:pointer;padding:0 2px}
.gmx:hover{color:var(--text)}
.gmbar{height:3px;margin:0 15px 6px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.gmbar i{display:block;height:100%;background:var(--a1);transition:width .4s var(--e-out,ease)}
.gml{flex:1;overflow-y:auto;padding:4px 8px 8px}
.gmg{padding:8px 0 2px}
.gmg>.kk{display:block;padding:0 8px 6px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.1em;color:var(--a1t);
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill}
.gmi{display:flex;align-items:center;gap:11px;width:100%;padding:8px;background:none;border:0;cursor:pointer;
  color:var(--text);text-align:left;--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.gmi:hover,.gmi:focus-visible{background:color-mix(in srgb,var(--a1) 14%,transparent);outline:0}
.gms{width:18px;flex:0 0 auto;text-align:center;color:var(--a1);font-size:calc(13.5px*var(--ts,1))}
.gmi.done .gms{color:var(--muted)}
.gmt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gmt b{font-size:calc(15px*var(--ts,1));font-weight:600}
.gmt em{font-style:normal;font-size:calc(13.5px*var(--ts,1));color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmi.done .gmt b{color:color-mix(in srgb,var(--text) 72%,transparent)}
.gmn{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:var(--muted)}
.gmf{display:flex;align-items:center;gap:8px;padding:9px 15px 11px;border-top:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.gmf .sp{flex:1}
.gmo{background:none;border:0;cursor:pointer;color:var(--muted);font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;
  text-transform:uppercase;padding:4px 0}
.gmo b{color:var(--a1t);font-weight:400;margin-left:4px}
.gmo:hover{color:var(--text)}
/* the spotlight */
.gdov{position:fixed;inset:0;z-index:90;pointer-events:none}
.gdov[hidden]{display:none}
/* The svg's own box would take every click, the hole included. Only the dim
   path takes them, so a step that asks for a click gets it through the hole. */
.gdsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gdsvg .dim{fill:rgba(2,4,8,.8);pointer-events:visiblePainted;cursor:not-allowed}
.gdsvg .ring{fill:none;stroke:var(--a1);stroke-width:2;pointer-events:none;
  filter:drop-shadow(0 0 8px var(--a1));animation:gdRing 1.8s ease-in-out infinite}
.gdsvg .lead{fill:none;stroke:color-mix(in srgb,var(--a1) 80%,transparent);stroke-width:1.2;pointer-events:none}
.gdsvg .dia{fill:var(--a1);pointer-events:none}
.gdblock{position:absolute;pointer-events:auto;cursor:not-allowed}
.gdblock[hidden]{display:none}
.gdghost{color:transparent}
.gdbr{position:absolute;pointer-events:none}
.gdbr[hidden]{display:none}
.gdbr i{position:absolute;width:14px;height:14px;border:2px solid var(--a1);animation:gdBr 1.8s ease-in-out infinite}
.gdbr i:nth-child(1){left:-9px;top:-9px;border-right:0;border-bottom:0}
.gdbr i:nth-child(2){right:-9px;top:-9px;border-left:0;border-bottom:0}
.gdbr i:nth-child(3){left:-9px;bottom:-9px;border-right:0;border-top:0}
.gdbr i:nth-child(4){right:-9px;bottom:-9px;border-left:0;border-top:0}
@keyframes gdRing{50%{stroke-opacity:.55}}
@keyframes gdBr{50%{transform:scale(1.18)}}
/* the dialog box */
.gdcard{position:fixed;z-index:91;width:min(410px,calc(100vw - 28px));text-align:left;--ch:14px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:linear-gradient(180deg,color-mix(in srgb,var(--page) 96%,var(--a1)),var(--page));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 60%,transparent);color:var(--text)}
.gdcard[hidden]{display:none}
.gdcard.in{animation:gdIn .32s var(--e-pop,ease) both}
.gdcard.busy{opacity:.6}
.gdcard.nudge{animation:gdNudge .34s ease}
.gdcard.title{width:min(520px,calc(100vw - 28px))}
@keyframes gdIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes gdNudge{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.gdh{display:flex;align-items:center;gap:9px;padding:12px 15px 0}
.gdt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.gdn{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;color:var(--a1t)}
.gdb{position:relative;display:flex;gap:13px;padding:12px 15px 4px}
.gdy{flex:0 0 auto;width:34px;height:34px;--ch:8px;display:grid;place-items:center;background:var(--a1);color:var(--page);
  font:700 calc(17px*var(--ts,1))/1 var(--disp);clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch))}
.gdtx{flex:1;min-width:0}
.gdtx h3{margin:2px 0 7px;font:700 calc(18px*var(--ts,1))/1.2 var(--disp)}
.gdp{margin:0;min-height:3.1em;font-size:calc(15px*var(--ts,1));line-height:1.55;color:color-mix(in srgb,var(--text) 92%,transparent)}
.gdcard:not(.typed) .gdp::after{content:'';display:inline-block;width:7px;height:13px;margin-left:2px;
  vertical-align:-2px;background:var(--a1);animation:gdCaret .8s steps(1) infinite}
@keyframes gdCaret{50%{opacity:0}}
.gdw{margin:10px 0 0;padding:8px 10px;font-size:calc(14px*var(--ts,1));line-height:1.5;opacity:0;transition:opacity .35s;
  background:color-mix(in srgb,var(--a1) 9%,transparent);box-shadow:inset 2px 0 0 var(--a1)}
.gdw b{display:block;margin-bottom:3px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.11em;color:var(--a1t)}
.gdcard.typed .gdw{opacity:1}
.gdo{display:flex;align-items:center;gap:9px;margin:10px 0 0;padding:8px 10px;font-size:calc(14px*var(--ts,1));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a3,var(--a1)) 60%,transparent)}
.gdo kbd{padding:3px 6px;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);background:color-mix(in srgb,var(--text) 10%,transparent);
  box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--text) 22%,transparent)}
.gdck{width:13px;height:13px;flex:0 0 auto;box-shadow:inset 0 0 0 1.5px var(--a3,var(--a1));animation:gdPulse 1.2s ease-in-out infinite}
.gdo.ok{box-shadow:inset 0 0 0 1px var(--a1)}
.gdo.ok .gdck{background:var(--a1);box-shadow:none;animation:none}
.gdo.ok span{text-decoration:line-through;text-decoration-color:var(--a1)}
@keyframes gdPulse{50%{box-shadow:inset 0 0 0 1.5px var(--a3,var(--a1)),0 0 0 4px color-mix(in srgb,var(--a3,var(--a1)) 25%,transparent)}}
.gdmiss{margin:8px 0 0;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}
.gdmore{position:absolute;right:15px;bottom:2px;color:var(--a1);font-size:calc(12px*var(--ts,1));opacity:0}
.gdcard.typed .gdmore{opacity:1;animation:gdBob 1s ease-in-out infinite}
@keyframes gdBob{50%{transform:translateY(3px)}}
.gdf{display:flex;align-items:center;gap:7px;padding:10px 15px 12px}
.gdf .sp{flex:1}
.gdq{background:none;border:0;cursor:pointer;color:var(--muted);font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;
  text-transform:uppercase;padding:6px 2px}
.gdq:hover{color:var(--text)}
.gdgo{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:0;cursor:pointer;--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);color:var(--page);font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;text-transform:uppercase}
.gdgo i{font-style:normal}
.gdgo:hover{filter:brightness(1.1)}
.gdgo:focus-visible,.gdq:focus-visible{outline:1px solid var(--a1);outline-offset:2px}
.gdbar{height:3px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.gdbar i{display:block;height:100%;background:var(--a1);transition:width .45s var(--e-out,ease)}
.gdclear{padding:18px 18px 4px;text-align:center}
.gdclear h3{margin:12px 0 6px;font:700 calc(23.5px*var(--ts,1))/1.15 var(--disp)}
.gdclear p{margin:0;font:400 calc(13.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}
.gdclear .gdk{animation:gdStamp .5s var(--e-pop,ease) both}
@keyframes gdStamp{from{transform:scale(2.2) rotate(-8deg);opacity:0}}
.gdwel{padding:24px 24px 6px}
.gdwel h2{margin:14px 0 8px;font:700 calc(32px*var(--ts,1))/1.08 var(--disp);letter-spacing:.01em}
.gdwel p{margin:0 0 6px;font-size:calc(16px*var(--ts,1));line-height:1.55;color:color-mix(in srgb,var(--text) 88%,transparent)}
.gdwel .gdf{padding:14px 0 6px}
.gdwel .gdsm{margin:0 0 14px;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}
/* the prompt for something new */
.gdprompt{position:fixed;left:50%;bottom:86px;z-index:88;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  width:max-content;max-width:calc(100vw - 28px);padding:10px 12px;--ch:10px;text-align:left;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--page);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 60%,transparent),0 16px 40px rgba(0,0,0,.5)}
.gdprompt[hidden]{display:none}
.gdprompt.in{animation:gdUp .4s var(--e-pop,ease) both}
@keyframes gdUp{from{opacity:0;transform:translate(-50%,14px)}}
.gdprompt .pt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gdprompt .pt b{font-size:calc(15px*var(--ts,1))}
.gdprompt .pt em{font-style:normal;font-size:calc(13.5px*var(--ts,1));color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .gdsvg .ring,.gdbr i,.gdck,.gdcard.typed .gdmore{animation:none}
  .gdcard.in,.gdprompt.in,.gdmenu.in,.gdclear .gdk{animation:none}
}
@media (max-width:640px){
  .gdcard{width:calc(100vw - 20px)}
  .gdprompt{bottom:70px}
  .habx{left:10px;bottom:70px}
}
.munow{margin:6px 0 4px;padding:10px 11px;display:flex;flex-direction:column;gap:6px;
  background:color-mix(in srgb,var(--a1) 9%,transparent);box-shadow:inset 2px 0 0 var(--a1)}
.munow .lbl{margin:0}
.munow b{font-size:calc(15px*var(--ts,1));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.munow .row{margin:2px 0 0}

/* the link rows in the theme drawer: the field takes the width, the button stays a button */
.drawer .frow{display:flex;gap:8px;align-items:stretch}
.drawer .frow input{flex:1;min-width:0}
.drawer .frow button{flex:0 0 auto;padding:0 16px;border:0;cursor:pointer;--ch:6px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:var(--a1);color:var(--page);font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;text-transform:uppercase}
.drawer .frow button:hover{filter:brightness(1.1)}

/* ── build 15 surfaces under a skin: the skin's panel colour and edge, and
   small text that clears 4.5:1 on tinted rows (measured by test/contrast2.mjs) ── */
:root.skinned :is(.acct,.ppl,.habx,.gdmenu,.gdcard,.gdprompt,.mdock){border-radius:var(--r);background:var(--page)}
:root.skinned :is(.acct,.ppl,.habx,.gdmenu,.gdprompt){border:var(--bw) solid var(--edge)}
:root.skinned .opt:not([aria-pressed="true"]){color:var(--text)}
:root.skinned :is(.gdw b,.ninv .kk){color:var(--text)}
:root.skinned[data-ssh="skeu"] .nrow .w{color:color-mix(in srgb,var(--text) 70%,var(--muted))}
.munow .lbl,.ni .b{color:var(--text)}
.gms{color:var(--a1t)}
.gmi:is(:hover,:focus-visible) :is(.gmt em,.gmn,.gms){color:var(--text)}
:root.skinned :is(.gmt em,.gmn,.gms,.gmx,.gmo){color:color-mix(in srgb,var(--text) 78%,var(--page))}
:root.skinned .gmi:is(:hover,:focus-visible) :is(.gmt em,.gmn,.gms){color:var(--text)}

/* ── who's online: placeholder avatars (v17) ── */
.pz{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;flex:0 0 auto}
.pz:empty{display:none}
.pz-t{height:17px;padding:0 5px 0 4px;border-radius:9px;flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  font:700 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.02em;color:var(--text);cursor:pointer;
  background:color-mix(in srgb,var(--a1) 16%,var(--page));border:1px solid color-mix(in srgb,var(--a1) 75%,transparent)}
.pz-t::before{content:'';width:6px;height:6px;border-radius:50%;background:#3DDC84;flex:0 0 auto}
.pz-t.idle{border-style:dashed;border-color:var(--muted);background:var(--page)}
.pz-t.idle::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.pz-t:hover,.pz-t:focus-visible{outline:1px solid var(--a1);outline-offset:1px}
.pz-more{font:600 calc(12px*var(--ts,1))/1 var(--mono);color:var(--text)}
.pzs{display:inline-flex;align-items:center;gap:4px;margin-right:6px}
.pzs[hidden]{display:none}
.pzs .pz-t{height:22px;padding:0 7px 0 6px;font-size:calc(12px*var(--ts,1));border-radius:11px}
.pzs .pz-t::before{width:7px;height:7px}
.cn .pz,.mb .t .pz{margin-left:6px}
.pz-nx{display:flex;margin:6px 0 2px}
.pp .r .av,.pr .av{position:relative}
.pdot{position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;display:none}
.pdot.active{display:block;background:#3DDC84;box-shadow:0 0 0 2px var(--page)}
.pdot.idle{display:block;background:var(--page);box-shadow:0 0 0 2px var(--page),inset 0 0 0 2px var(--muted)}
.ploc{display:block;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);font-style:normal;color:var(--muted);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ploc:empty{display:none}
.apres{display:flex;align-items:center;gap:9px;margin:2px 0 14px;font-size:calc(14px*var(--ts,1));cursor:pointer}
.apres input{accent-color:var(--a1);width:15px;height:15px;flex:0 0 auto}

/* ══════════════ v18 · the task window ══════════════
   A footer with one button that says what it does, marks on the fields a
   draft has changed, the hand-off block, chat edits and Harada plans. */
.td .bd{padding-bottom:18px}
.tdft{flex:0 0 auto;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 20px 14px;
  border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  background:color-mix(in srgb,var(--p1) 70%,transparent)}
.tdft .tdnote{flex:1 1 250px;margin:0;font:400 calc(13.5px*var(--ts,1))/1.55 var(--mono);letter-spacing:.02em;
  color:color-mix(in srgb,var(--text) 86%,transparent)}
.tdft.bad .tdnote{color:var(--a3t,var(--a3))}
.tdft.ask{background:color-mix(in srgb,var(--a3,var(--a1)) 14%,var(--page));
  box-shadow:inset 0 2px 0 var(--a3t,var(--a3))}
.tdft.ask .tdnote{color:var(--text);font-weight:700}
.tdft.nudge{animation:tdNudge .38s var(--e-out,ease)}
@keyframes tdNudge{0%,100%{transform:none}30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}
.tdbtns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;align-items:center}
.tdbtns [hidden]{display:none}
.fbtn.go{background:var(--a1);border-color:var(--a1);color:var(--page);padding:10px 18px;font-size:calc(12.5px*var(--ts,1));
  -webkit-text-stroke:0}
.fbtn.go:hover{background:var(--a1);color:var(--page);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--page) 55%,transparent)}
.fbtn.go:disabled{opacity:.7;cursor:progress}
:root.skinned .fbtn.go{color:var(--text);background:color-mix(in srgb,var(--a1) 20%,var(--p1));border:2px solid var(--a1)}
:root.skinned .fbtn.go:hover{background:color-mix(in srgb,var(--a1) 26%,var(--p1));box-shadow:none}
@media (prefers-reduced-motion:reduce){.tdft.nudge{animation:none}}
@media (max-width:560px){
  .tdft{padding:10px 12px 12px}
  .tdbtns{width:100%;justify-content:flex-end}
}

/* what the draft has changed */
.frow>label.chg,.td h3.chg{color:var(--a1t)}
.frow>label.chg::before,.td h3.chg::before{content:'';display:inline-block;width:5px;height:5px;margin:0 6px 1px 0;
  background:var(--a1);vertical-align:middle}
.tt.chg{border-bottom-color:color-mix(in srgb,var(--a1) 70%,transparent)}
.tt::placeholder{color:color-mix(in srgb,var(--text) 55%,transparent);font-weight:500}
.tdlater{margin:24px 0 4px;padding-top:14px;border-top:1px dashed color-mix(in srgb,var(--text) 14%,transparent);
  font:400 calc(12.5px*var(--ts,1))/1.6 var(--mono);color:var(--muted)}
.subrow span.ck{display:block}

/* hand-off */
.hob{padding:4px 0 4px 12px;box-shadow:inset 2px 0 0 color-mix(in srgb,var(--text) 20%,transparent)}
/* a tint behind the block pulled its grey labels under 4.5:1 in 70 skins, so a person picked shows as the accent bar */
.hob.on{box-shadow:inset 2px 0 0 var(--a1)}
.hob .notes{margin-top:10px;min-height:60px}
.honote{margin:9px 0 0;font:400 calc(12.5px*var(--ts,1))/1.55 var(--mono);color:var(--muted)}

/* the chat */
.cm .who .when{margin-left:auto;white-space:nowrap}
.cm .who em{font-style:normal;text-transform:none;letter-spacing:.04em}
.cm .cme{background:none;border:0;padding:2px 0 2px 10px;cursor:pointer;color:var(--a1t);
  font:inherit;letter-spacing:0.065em;text-transform:uppercase}
.cm .cme:hover,.cm .cme:focus-visible{color:var(--text)}
.cmef textarea{width:100%;min-height:62px;resize:vertical;background:color-mix(in srgb,var(--p1) 80%,transparent);
  color:var(--text);border:1px solid color-mix(in srgb,var(--a1) 55%,transparent);font:500 calc(14px*var(--ts,1))/1.55 var(--disp);padding:8px 10px}
.cmef textarea:focus{outline:2px solid var(--a1);outline-offset:1px}
.cmef .cmeb{display:flex;gap:7px;justify-content:flex-end;margin-top:7px}

/* Harada plans */
.plnote{margin:0 0 10px;font:400 calc(13.5px*var(--ts,1))/1.6 var(--mono);color:var(--muted)}
.pls{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.plc{position:relative;display:flex;align-items:center;gap:10px;min-width:210px;max-width:100%;padding:9px 12px 11px;
  cursor:pointer;text-align:left;color:var(--text);font:inherit;overflow:hidden;
  background:color-mix(in srgb,var(--p1) 82%,transparent);border:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.plc:hover,.plc:focus-visible{border-color:var(--a1)}
.plc.mine{border-color:color-mix(in srgb,var(--a1) 58%,transparent)}
.plc .pt{display:flex;flex-direction:column;gap:4px;min-width:0}
.plc .pt b{font:600 calc(14px*var(--ts,1))/1.2 var(--disp)}
.plc .pt s{text-decoration:none;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;color:var(--muted)}
.plc .pb{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.plc .pb i{display:block;height:100%;background:var(--a1)}
.plv .plhd{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.plv .plhd .sp{flex:1}
.plv h3.plh{margin:0 0 5px;font:700 calc(17px*var(--ts,1))/1.3 var(--disp);letter-spacing:0;text-transform:none;color:var(--text);
  -webkit-text-stroke:0}
.plv .plst{margin:0 0 12px;font:400 calc(12.5px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--a1t)}
.plw{margin-top:6px}
.plw .oc.act .ot{cursor:pointer}
.plw span.ot{cursor:default}
.plw span.ok{display:block;cursor:default}
.oc.add1{align-items:center;justify-content:center;cursor:pointer;background:none;color:var(--muted);
  font:400 calc(17px*var(--ts,1))/1 var(--mono);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 22%,transparent)}
.oc.add1:hover,.oc.add1:focus-visible{color:var(--text);outline:0;
  background:color-mix(in srgb,var(--ac,var(--a1)) 14%,transparent)}
.plw .oc.ed input{font:600 calc(14px*var(--ts,1))/1.3 var(--disp)}

/* the focus length */
.tmrset{background:none;border:0;padding:4px;margin-left:-6px;cursor:pointer;line-height:0;
  color:color-mix(in srgb,var(--text) 80%,transparent)}
.tmrset svg{width:14px;height:14px}
.tmrset:hover,.tmrset:focus-visible,.tmrset[aria-expanded="true"]{color:var(--a1t,var(--a1))}
:root[data-tod="day"]:not(.skinned) .tmrset:hover{color:var(--text)}
.fcx{position:fixed;left:24px;bottom:78px;z-index:55;width:min(380px,calc(100vw - 32px));text-align:left;
  background:color-mix(in srgb,var(--page) 98%,transparent);border:1px solid color-mix(in srgb,var(--a1) 50%,transparent);
  box-shadow:0 22px 54px rgba(0,0,0,.55);animation:dropIn var(--t-md,.2s) var(--e-out,ease) both}
.fcx .hh{display:flex;align-items:baseline;gap:10px;padding:13px 15px 9px}
.fcx .hh h2{margin:0;font:700 calc(17px*var(--ts,1))/1 var(--disp)}
.fcx .hh .sp{flex:1}
.fcx .hn{margin:0;padding:0 15px 12px;font:400 calc(13.5px*var(--ts,1))/1.55 var(--mono);color:var(--muted);
  border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.fcx .fcp{display:flex;gap:6px;flex-wrap:wrap;padding:12px 15px 4px}
.fcx .fcp .chip2{margin:0}
.fcx .fcf{display:flex;align-items:center;gap:8px;padding:8px 15px 4px;flex-wrap:wrap}
.fcx .fcf label{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.075em;text-transform:uppercase;color:var(--muted)}
.fcx .fcf input{width:86px;background:color-mix(in srgb,var(--p1) 80%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 15%,transparent);font:500 calc(15px*var(--ts,1))/1.3 var(--disp);padding:7px 9px}
.fcx .fcf input:focus{outline:2px solid var(--a1);outline-offset:1px}
.fcx .fcf span{font:400 calc(13.5px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.fcx .fcn{margin:0;padding:8px 15px 14px;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}
.fcx .fcn.bad{color:var(--a3t,var(--a3))}

/* making a task starts from a button */
button.secadd{width:100%;cursor:pointer;background:none;color:var(--muted);font:500 calc(14px*var(--ts,1))/1.4 var(--disp);text-align:left}
button.secadd:hover,button.secadd:focus-visible{color:var(--text);border-color:var(--a1);outline:0}
.tnewb{flex:1;padding:10px 14px;border:0;cursor:pointer;--ch:7px;text-align:left;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--ac,var(--a1)) 16%,var(--p2));color:var(--text);
  font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.065em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 50%,transparent)}
.tnewb:hover,.tnewb:focus-visible{background:color-mix(in srgb,var(--ac,var(--a1)) 28%,var(--p2));outline:0}

/* the second group of fields in a task starts with a heading of its own */
.td fieldset>h3:first-child{margin-top:22px}
/* with a task open, toasts and Undo sit above it, clear of its button */
body:has(#tdHost .td) #toast{bottom:auto;top:16px}
body:has(#tdHost .td):not(.tdDock) #undo{bottom:auto;top:66px}

/* The project name at the top of a task was drawn in the project's colour,
   which a pale page can't carry (1.4:1 in the Day look). The colour moves to
   a square beside a name in the text colour. */
.td .hd .pj{color:var(--text);display:inline-flex;align-items:center;gap:7px}
.td .hd .pj::before{content:'';width:7px;height:7px;flex:0 0 auto;background:var(--pc,var(--a1))}

/* ══════════════ v19 · steadier typing ══════════════
   The layers that cover the whole screen drop their backdrop blur. Over a
   moving wallpaper, a blurred full screen layer flickered with every key on
   some graphics cards. They sit on solid colour now, and the wallpaper's
   particles hide while the task window or the palette is open. */
.tdscrim,.cmdscrim{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.7)}
.td,.cmd,.nbox,.tdscrim,.cmdscrim{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.td,.cmd,.nbox{background:var(--page)}
:root.skinned .td,:root.skinned .cmd,:root.skinned .nbox{background:var(--p1)}
:root[data-modal="1"] #fx{visibility:hidden}
/* A redraw of a layer that is already open keeps it still. Replaying the
   entrance on every redraw made lists and windows blink. (Rows redrawn in
   place come without their entrance class, see paintWs.) */
.tdscrim.seated,.cmdscrim.seated,.cmd.seated,.nbox.seated,.help.seated,.acct.seated,.ppl.seated,.habx.seated,.fcx.seated{animation:none}
/* closing still plays, whether or not the layer was redrawn in place */
.leaving .tdscrim.seated{animation:fadeOut var(--t-sm) var(--e-in) both}
.leaving .cmd.seated{animation:dropIn var(--t-xs) var(--e-in) reverse both}

/* v20 · the panel you type in holds no blur
   The skin surfaces rule outranked v19's override, so with a skin on, the task
   window and the palette kept a backdrop filter and the flicker came back. The
   override above is !important now, so it holds in every skin. While a text box
   has the caret (app.js sets data-typing), the panel around it drops its
   backdrop filter too and turns solid at once, since a see-through panel with
   no blur lets the text behind it show. It gets its glass back when the caret
   leaves. :focus-within with a flag costs nothing per redraw, where a :has()
   rule slowed the workspace's first paint by about 200ms. */
:root[data-typing="1"] :is(.ws,.wgt,.drawer,.ppl,.help,.gdmenu,.shelf,.tpan,.cbox .in):focus-within{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-typing="1"] :is(.ws,.drawer,.ppl,.tpan):focus-within{background:var(--page);transition:none}
:root[data-typing="1"] .wgt:focus-within{background:var(--p1);transition:none}

/* v20 · steady drawing while the scene holds still
   On a variable refresh rate screen (G-SYNC or FreeSync), a page that sits idle
   and then draws one frame per key makes the refresh rate jump with each letter,
   and some laptop panels show each jump as a flash. That was the strobe on
   John's laptop, and a test in his tab stopped it. While the wallpaper holds
   still, a 3 pixel mark in the corner shifts by a pixel, so the page keeps
   drawing at a steady pace. The shift runs on the compositor alone, with no
   layout or paint. Reduced motion keeps it, since nobody can see it move. */
#pulse{position:fixed;right:2px;bottom:2px;width:3px;height:3px;z-index:2147483647;
  pointer-events:none;background:#808080;opacity:.05;visibility:hidden}
/* v69 · the pulse runs all the time now. Until v68 the particle canvas was cleared on every frame,
   even with Still chosen, and that kept the page drawing at a steady pace by accident. v68 drew it
   30 times a second, so once the mouse stopped the page drew every other frame, the refresh rate
   jumped each time you moved, and John's laptop panel flashed on every jump. The pulse costs a
   compositor frame and no paint, and holds the pace whatever the wallpaper is doing. */
#pulse{visibility:visible;animation:keepDraw .5s linear infinite}
@media (prefers-reduced-motion:reduce){#pulse{animation-duration:.5s!important}}
@keyframes keepDraw{0%,100%{transform:translate3d(0,0,0);opacity:.05}50%{transform:translate3d(1px,0,0);opacity:.07}}

/* ══════════════════════════════════════════════════════════════════════
   v21 · the theme is yours
   Five changes, all asked for after v20 went live.
   1. A skin no longer locks the accent. The picker writes the colours as
      inline custom properties with !important, which beats the skin sheet.
   2. On a skin with round widgets, the accent line followed a straight
      rectangle and poked out past the curve. It is now the top border of
      a full size overlay that carries the widget's own radius, so it
      bends with the corner.
   3. Mix your own accent from three colour wells, with the contrast
      against the panel behind them read out live.
   4. A saved theme of your own: a base skin, a display font, a mono font,
      corner and edge sizes, and your three colours.
   5. Drag the bar at the foot of a widget to set its height. The Board
      widget on a busy Space stopped at the fourth task before this.
   ══════════════════════════════════════════════════════════════════════ */

/* 2 · the accent line bends with a rounded corner */
:root.skinned .wgt::before{inset:0;left:0;right:0;top:0;height:auto;background:none;
  border-top:2px solid var(--ac,var(--a1));
  border-radius:max(0px,calc(var(--r) - var(--bw)));
  pointer-events:none;opacity:.9}

/* 5 · drag a widget taller */
.wgt[data-h]{height:var(--wh)}
.wgz{position:absolute;left:0;right:0;bottom:0;height:13px;z-index:5;cursor:ns-resize;
  display:flex;align-items:flex-end;justify-content:center;padding:0 0 3px;
  background:none;border:0;opacity:0;touch-action:none;
  transition:opacity var(--t-sm) var(--e-out)}
.wgt:hover .wgz,.wgz:focus-visible{opacity:1}
.wgz i{display:block;width:30px;height:3px;background:color-mix(in srgb,var(--text) 34%,transparent);
  transition:background var(--t-sm) var(--e-out)}
.wgz:hover i,.wgz:focus-visible i,.wgt.rz .wgz i{background:var(--a1t,var(--a1));width:46px}
.wgt.rz{outline:1px dashed color-mix(in srgb,var(--a1) 70%,transparent);outline-offset:2px}
.wgt.rz .wh{cursor:default}
:root[data-rz="1"]{cursor:ns-resize}
:root[data-rz="1"] *{user-select:none!important}
.wgz .rzv{position:absolute;font-weight:400;right:10px;bottom:11px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;
  color:var(--a1t,var(--a1));opacity:0}
.wgt.rz .wgz .rzv{opacity:1}
@media(max-width:700px){.wgz{opacity:.55}}

/* 3 · the colour wells */
.cpk{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin:2px 0 0}
.cpk .cw{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.cpk .cw span{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted)}
.cpk .cw input[type="color"]{width:52px;height:34px;padding:0;cursor:pointer;background:none;
  border:1px solid color-mix(in srgb,var(--text) 20%,transparent)}
.cpk .cw input[type="color"]::-webkit-color-swatch-wrapper{padding:2px}
.cpk .cw input[type="color"]::-webkit-color-swatch{border:0}
.cpk .hx{width:88px;background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:8px 9px;
  font:400 calc(13.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cpk .hx:focus{outline:1.5px solid var(--a1);outline-offset:-1px}
.crd{display:flex;align-items:center;gap:8px;margin:11px 0 0;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);
  letter-spacing:0.05em;text-transform:uppercase;color:var(--muted)}
.crd i{width:9px;height:9px;flex:0 0 auto;transform:rotate(45deg);background:var(--a2t,var(--a2))}
.crd.low i{background:var(--a3t,var(--a3))}
.crd b{color:var(--text);font-weight:400}

/* 4 · the theme builder */
.dsel{width:100%;background:color-mix(in srgb,var(--text) 9%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:9px 10px;
  font:500 calc(14px*var(--ts,1))/1.2 var(--disp);cursor:pointer}
.dsel:focus{outline:1.5px solid var(--a1);outline-offset:-1px}
.myl{display:flex;flex-direction:column;gap:5px}
.myr{display:flex;align-items:center;gap:9px;padding:8px 9px;
  background:color-mix(in srgb,var(--text) 6%,transparent)}
.myr[aria-current="true"]{box-shadow:inset 0 0 0 1px var(--a1)}
.myr .nm{flex:1;min-width:0;font:600 calc(14px*var(--ts,1))/1.25 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myr .nm s{display:block;text-decoration:none;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--muted)}
.myr .mp{display:flex;gap:2px;flex:0 0 auto}
.myr .mp i{width:9px;height:9px;transform:rotate(45deg)}
.myr button{background:none;border:0;cursor:pointer;color:var(--muted);padding:4px 5px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase}
.myr button:hover{color:var(--a1t,var(--a1))}
.myp{display:flex;align-items:center;gap:10px;padding:11px;margin-top:4px;
  background:color-mix(in srgb,var(--p2) 60%,transparent);
  border:var(--bw,1px) solid color-mix(in srgb,var(--text) 14%,transparent);
  border-top:2px solid var(--a1);border-radius:var(--r,0)}
.myp b{font:700 calc(16px*var(--ts,1))/1.1 var(--hd,var(--disp))}
.myp .grow{flex:1;min-width:0}
.myp s{display:block;text-decoration:none;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}

/* ══════════════════════════════════════════════════════════════════════
   v22 · Hako, and the links that live on one
   Hako is the window a task opens in. The name now sits in its header.
   Under Tags, a task carries a short list of links to wherever the work
   actually lives. Notes hold text and nothing in them is clickable, so
   these get their own rows, each one a button that opens in a new tab.
   ══════════════════════════════════════════════════════════════════════ */
.td .hd .hkn{flex:0 0 auto;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.12em;
  color:var(--page);background:var(--a1);padding:5px 6px 4px;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
:root.skinned .td .hd .hkn{clip-path:none;border-radius:max(2px,calc(var(--rs) - 3px))}

.lnx{display:flex;flex-direction:column;gap:5px}
.lnx .none{margin:0;font:400 calc(12.5px*var(--ts,1))/1.7 var(--mono);color:var(--muted)}
.lnk{display:flex;align-items:stretch;gap:0;--ch:7px}
.lnk > a{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 10px;
  text-decoration:none;color:var(--text);
  background:color-mix(in srgb,var(--text) 6%,transparent);
  border-left:2px solid color-mix(in srgb,var(--a1) 55%,transparent);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  transition:background var(--t-sm) var(--e-out)}
.lnk > a:hover{background:color-mix(in srgb,var(--a1) 15%,transparent)}
.lnk > a:focus-visible{outline:2px solid var(--a1);outline-offset:-2px}
.lnk i{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;font-style:normal;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;
  color:var(--a1t,var(--a1));background:color-mix(in srgb,var(--a1) 16%,transparent);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.lnk .n{flex:1;min-width:0;font:600 calc(15px*var(--ts,1))/1.25 var(--disp);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnk .n s{display:block;text-decoration:none;margin-top:3px;font:400 calc(12px*var(--ts,1))/1.2 var(--mono);
  letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnk em{flex:0 0 auto;font-style:normal;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;
  color:var(--muted);opacity:0;transition:opacity var(--t-sm) var(--e-out)}
.lnk > a:hover em,.lnk > a:focus-visible em{opacity:1;color:var(--a1t,var(--a1))}
.lnk .rm{flex:0 0 auto;width:30px;border:0;cursor:pointer;color:var(--muted);
  background:color-mix(in srgb,var(--text) 6%,transparent);
  font:400 calc(17px*var(--ts,1))/1 var(--disp);margin-left:3px}
.lnk .rm:hover{color:var(--page);background:var(--a3t,var(--a3))}
:root.skinned .lnk > a{clip-path:none;border-radius:var(--rs)}
:root.skinned .lnk i{clip-path:none;border-radius:max(2px,calc(var(--rs) - 3px))}

.lnadd{display:grid;grid-template-columns:130px 1fr auto;gap:6px;margin-top:3px}
@media(max-width:560px){.lnadd{grid-template-columns:1fr auto}
  .lnadd input:first-child{grid-column:1 / -1}}
.lnadd input{min-width:0;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);padding:8px 10px;
  font:400 calc(13.5px*var(--ts,1))/1.3 var(--mono)}
.lnadd input::placeholder{color:var(--muted)}
.lnadd input:focus{outline:1.5px solid var(--a1);outline-offset:-1px;border-color:transparent}
.lnadd button{background:var(--a1);color:var(--page);border:0;padding:0 14px;cursor:pointer;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase}
.lnadd button:hover{filter:brightness(1.1)}

/* ── v23: subtasks on the board ──────────────────────────────
   A child card states its ancestry above the title, so a card reading
   "4x5" in the Done column still says which job and which deliverable
   it belongs to. When a child sits in the same column as its parent it
   is indented and tied to it with a rule down the left. */
.card .bc{display:block;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;
  color:color-mix(in srgb,var(--text) 52%,transparent);margin:0 0 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .bc b{font-weight:400}
.card .bc i{font-style:normal;padding:0 4px;
  color:color-mix(in srgb,var(--text) 30%,transparent)}
.card.kidc{margin-left:calc(var(--kd,1) * 13px);position:relative}
.card.kidc::after{content:"";position:absolute;left:-7px;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--a1) 34%,transparent);pointer-events:none}
.kct{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--a1t,var(--a1));
  flex:0 0 auto;padding:3px 5px;
  border:1px solid color-mix(in srgb,var(--a1) 40%,transparent)}
:root.skinned .card.kidc::after{background:color-mix(in srgb,var(--a1) 46%,transparent)}
:root.skinned[data-ssh="hard"] .card.kidc::after{left:-8px}
@media (max-width:640px){
  .card.kidc{margin-left:calc(var(--kd,1) * 9px)}
  .card .bc{font-size:calc(12px*var(--ts,1))}
}

/* ── v24: the family widgets ────────────────────────────────
   Ledger, rota, countdown, list and record, plus the four that ride on
   tasks. One grammar for all nine: a headline figure with a mono caption,
   rows with an avatar or a state pill, and an add form at the foot. */
.fam{display:flex;flex-direction:column;gap:10px;min-width:0}
.ftop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fbig{font:600 clamp(24px,2.6vw,34px)/1 var(--disp);color:var(--a1t,var(--a1));font-variant-numeric:tabular-nums}
.fbig i{font-style:normal;color:var(--muted);padding:0 3px;font-weight:400}
.fsm{flex:1;min-width:0;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.065em;color:var(--muted);text-transform:uppercase}
.fcog,.fopen,.fmon{background:none;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);color:var(--muted);
  cursor:pointer;padding:4px 7px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em}
.fcog:hover,.fmon:hover,.fcog[aria-expanded="true"]{color:var(--text);border-color:var(--a1)}
.fopen.on{color:var(--void,#000);background:var(--a2);border-color:var(--a2)}
.fmon{font-size:calc(15px*var(--ts,1));padding:1px 8px}
.fcog:disabled,.fopen:disabled{opacity:.45;cursor:default}
.fitms{display:flex;flex-direction:column;gap:4px}
.fitm{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 6px;
  background:color-mix(in srgb,var(--text) 4%,transparent)}
.fitm.done .fnm{opacity:.55;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text) 40%,transparent)}
.fnm{flex:1;min-width:0;font-size:calc(14px*var(--ts,1));line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnm small{display:block;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.05em;color:var(--muted);text-decoration:none}
.fnm.lnk{all:unset;flex:1;min-width:0;font-size:calc(14px*var(--ts,1));line-height:1.3;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnm.lnk:hover{color:var(--a1t,var(--a1))}
.fnm.lnk:focus-visible{outline:1px solid var(--a1);outline-offset:2px}
.fav{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;font:600 calc(12px*var(--ts,1))/1 var(--mono);
  color:var(--text);border:1px solid color-mix(in srgb,var(--a1) 55%,transparent);border-radius:50%}
.famt{font:600 calc(15px*var(--ts,1))/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.famt.up{color:var(--a2t,var(--a2))} .famt.dn{color:var(--a3t,var(--a3))}
.fwho{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap;max-width:9em;
  overflow:hidden;text-overflow:ellipsis}
.fx{background:none;border:0;color:var(--muted);cursor:pointer;font-size:calc(17px*var(--ts,1));line-height:1;padding:2px 4px;opacity:.6}
.fx:hover{opacity:1;color:var(--a3t,var(--a3))}
.fx:disabled{display:none}
.ftick{flex:0 0 auto;width:18px;height:18px;border:1.5px solid var(--a1);background:none;cursor:pointer;padding:0;position:relative}
.ftick[aria-pressed="true"]{background:var(--a1)}
.ftick[aria-pressed="true"]::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid var(--void,#000);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ftick:disabled{opacity:.45;cursor:default}
.fstate,.fclaim,.fpaid{flex:0 0 auto;cursor:pointer;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase;
  padding:5px 7px;border:1px solid currentColor;background:none;white-space:nowrap}
.fstate.s0{color:var(--muted)} .fstate.s1{color:var(--a1t,var(--a1))}
.fstate.s2{color:var(--a2t,var(--a2))} .fstate.s3{color:var(--a3t,var(--a3))}
.fclaim{color:var(--a1t,var(--a1))}
.fclaim.quiet{color:var(--muted)}
.fpaid{color:var(--a3t,var(--a3))} .fpaid.on{color:var(--a2t,var(--a2))}
.fstate:disabled,.fclaim:disabled,.fpaid:disabled{cursor:default;opacity:.7}
.fchip{flex:0 0 auto;min-width:22px;text-align:center;font:600 calc(12px*var(--ts,1))/1 var(--mono);padding:4px 5px;color:var(--muted)}
.fchip.w{color:var(--void,#000);background:var(--a2)} .fchip.l{color:var(--void,#000);background:var(--a3)}
.fpts{width:58px;flex:0 0 auto;background:none;color:var(--a1t,var(--a1));font:600 calc(13.5px*var(--ts,1))/1 var(--mono);
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:4px 5px}
.fdue{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--muted)} .fdue.late{color:var(--a3t,var(--a3))}
.fdup{font:normal 400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--a3t,var(--a3));margin-left:6px}
.fgrp{margin:4px 0 0;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted);text-transform:uppercase}
.fwhen{font:400 calc(12.5px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.06em;color:var(--muted)}
.fprog{height:4px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.fprog i{display:block;height:100%;width:calc(var(--f,0)*100%);background:var(--a1);transition:width .5s ease}
.fnote,.fnone{margin:0;font-size:calc(13.5px*var(--ts,1));line-height:1.5;color:var(--muted)}
.fsettle{padding:7px 9px;border-left:2px solid var(--a2);font-size:calc(14px*var(--ts,1));display:flex;flex-direction:column;gap:3px}
.fsettle.ok{border-color:color-mix(in srgb,var(--text) 25%,transparent)}
.fsettle h5,.fset h4{margin:0 0 2px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted);text-transform:uppercase}
.fsettle b{font-family:var(--mono)}
.flog summary{cursor:pointer;font:400 calc(12px*var(--ts,1))/1.6 var(--mono);letter-spacing:0.05em;color:var(--muted);text-transform:uppercase}
.fent{display:flex;align-items:center;gap:8px;font-size:calc(14px*var(--ts,1));padding:3px 0}
.fent span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fent b{font-family:var(--mono)}
.fadd,.fset{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fadd input,.fadd select,.fset input,.fset select{flex:1 1 90px;min-width:0;background:color-mix(in srgb,var(--text) 6%,transparent);
  color:var(--text);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);padding:6px 8px;font:500 calc(14px*var(--ts,1))/1.2 var(--disp)}
.fadd input:focus,.fadd select:focus,.fset input:focus,.fset select:focus{outline:none;border-color:var(--a1)}
.fadd input[name="amt"],.fadd input[name="pts"],.fadd input[name="v"],.fadd input[name="score"]{flex:0 1 72px}
.fadd .fbtn{flex:0 0 auto}
.fset{flex-direction:column;align-items:stretch;padding:10px;border:1px solid color-mix(in srgb,var(--a1) 40%,transparent)}
.fset label{display:flex;flex-direction:column;gap:4px;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;color:var(--muted)}
.fbar2{display:flex;gap:6px}
.fcal{overflow-x:auto;display:flex;flex-direction:column;gap:2px;padding-bottom:4px}
.fcr{display:flex;gap:2px;min-width:max-content}
.fcr .fpl{flex:0 0 76px;position:sticky;left:0;z-index:1;background:var(--p1,var(--page));font:400 calc(12px*var(--ts,1))/1.2 var(--mono);
  letter-spacing:.06em;color:var(--muted);padding:5px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcr .fd{flex:0 0 34px;min-height:34px;display:flex;flex-direction:column;gap:2px;padding:2px;
  background:color-mix(in srgb,var(--text) 4%,transparent)}
.fcr.hd .fd{min-height:0;background:none;font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted);text-align:center;display:block;padding:3px 0}
.fcr .fd.now{box-shadow:inset 0 0 0 1px var(--a1)}
.fpost{all:unset;cursor:pointer;display:block;height:6px;background:var(--muted);overflow:hidden}
.fpost span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fpost.st-todo,.fpost.st-backlog{background:color-mix(in srgb,var(--a1) 45%,transparent)}
.fpost.st-in_progress,.fpost.st-review{background:var(--a1)}
.fpost.st-done{background:var(--a2)}
.fpost:hover,.fpost:focus-visible{outline:1px solid var(--text);outline-offset:1px}
@media (max-width:640px){
  .fnm,.fnm.lnk{font-size:calc(14px*var(--ts,1))}
  .fadd input,.fadd select{flex-basis:100%}
  .fadd input[name="amt"],.fadd input[name="pts"],.fadd input[name="v"],.fadd input[name="score"]{flex:1 1 60px}
}

/* ── v24: the Slack and Discord panel ─────────────────────── */
.hookp{position:absolute;right:0;top:calc(100% + 7px);z-index:9;width:min(360px,calc(100vw - 32px));max-height:70vh;overflow:auto;
  padding:12px;background:color-mix(in srgb,var(--page) 97%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:10px}
.hookp h4{margin:0;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;color:var(--muted)}
.hookp p{margin:0;font-size:calc(13.5px*var(--ts,1));line-height:1.5;color:var(--muted)}
.hk{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.hk.off{opacity:.6}
.hkt b{display:block;font:600 calc(15px*var(--ts,1))/1.3 var(--disp)}
.hkt small{display:block;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:.08em;color:var(--muted)}
.hkbad{color:var(--a3t,var(--a3))}
.hkb{display:flex;gap:6px;flex-wrap:wrap}
.hkb button{background:none;border:1px solid color-mix(in srgb,var(--text) 22%,transparent);color:var(--text);cursor:pointer;
  padding:5px 8px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase}
.hkb button[aria-pressed="true"]{background:var(--a2);border-color:var(--a2);color:var(--void,#000)}
.hkb button:disabled{opacity:.45;cursor:default}
.hkadd{display:flex;flex-direction:column;gap:8px}
.hkadd label{display:flex;flex-direction:column;gap:4px;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;color:var(--muted)}
.hkadd input:not([type=checkbox]),.hkadd select{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);padding:7px 8px;font:500 calc(14px*var(--ts,1))/1.2 var(--disp);min-width:0}
.hkadd fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.hkadd legend{font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.hkadd .hkc{flex-direction:row;align-items:center;gap:8px;font:500 calc(14px*var(--ts,1))/1.3 var(--disp);color:var(--text);letter-spacing:0}
.hkadd .fbtn{align-self:flex-start}

/* ── v24: the goal map ────────────────────────────────────────
   The Open Window 64 as nodes. Only the goal and the 8 themes are full
   size. A hovered action grows 1.4x; an open theme grows its actions 1.9x
   with labels and sends the rest back to about half size. The map tilts
   and its layers slide apart with the Parallax setting. */
.nmw{display:flex;flex-direction:column;gap:10px;min-width:0}
.nmsw{display:inline-flex;align-self:flex-end;gap:2px;padding:2px;
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent)}
.nmsw button{background:none;border:0;color:var(--muted);cursor:pointer;padding:5px 9px;
  font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase}
.nmsw button[aria-pressed="true"]{background:var(--a1);color:var(--void,#000)}
.nmsw button:disabled{cursor:default}
.nmsw button:disabled:not([aria-pressed="true"]){opacity:.45}
.nmbody{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;min-width:0}
.nmstage{position:relative;min-width:0;perspective:1200px}
.nmmap{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:720px;margin:0 auto;
  user-select:none;touch-action:manipulation;transform-origin:50% 50%;will-change:transform;overflow:hidden}
.nmedge{fill:none;stroke:color-mix(in srgb,var(--text) 16%,transparent);stroke-width:1.2;
  transition:stroke .3s,stroke-width .3s,opacity .3s,d .38s cubic-bezier(.2,.8,.2,1)}
.nmedge.hot{stroke:var(--a1);stroke-width:2;opacity:.9}
.nmnd{cursor:pointer;outline:none}
.nmact{transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.nmth{transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.nms{transform-box:fill-box;transform-origin:center;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s}
.nmbase{fill:var(--p2,var(--page));stroke:var(--muted);stroke-width:1.3}
.nmact.rt .nmbase{stroke-dasharray:3 2.2}
.nmring{fill:none;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-box:fill-box;transform-origin:center}
.nmact.task .nmring{stroke:var(--a1)} .nmact.rt .nmring{stroke:var(--a2)}
.nmact.task.done .nmbase{fill:var(--a1);stroke:var(--a1)}
.nmth .nmbase{stroke:var(--a1);stroke-width:1.6}
.nmth .nmring{stroke:var(--a1);stroke-width:4}
.nmgoal .nmbase{stroke:var(--a3);stroke-width:2}
.nmgoal .nmring{stroke:var(--a3);stroke-width:5}
.nmnd text{fill:var(--text);font-family:var(--disp);pointer-events:none}
.nmtl{font-size:calc(20px*var(--ts,1));font-weight:600;transition:opacity .25s;paint-order:stroke;stroke:var(--p1,var(--page));stroke-width:4px}
/* a theme's name opens it as well as its circle, while the name is showing */
.nmnd text.nmtl{pointer-events:auto;cursor:pointer}
.nmmap.focused .nmth .nmtl{pointer-events:none}
.nmtlf{font-size:calc(18px*var(--ts,1));font-weight:600;opacity:0;transition:opacity .25s}
.nmgl{font-size:calc(27.5px*var(--ts,1));font-weight:600}
.nmpc{font:calc(15px*var(--ts,1)) var(--mono);fill:var(--muted)!important;letter-spacing:0.05em}
.nmpc.sm{font-size:calc(12.5px*var(--ts,1));letter-spacing:.04em}
.nmal{font-size:calc(6px*var(--ts,1));font-weight:500;opacity:0;transition:opacity .25s;paint-order:stroke;stroke:var(--p1,var(--page));stroke-width:1.6px}
.nmglyph{font:calc(6px*var(--ts,1)) var(--mono);fill:var(--a2)!important;opacity:0;transition:opacity .25s}
.nmnd:focus-visible .nmbase{stroke:var(--text);stroke-width:2.5}
.nmact:hover .nms,.nmact:focus-visible .nms{transform:scale(1.4)}
.nmth:hover .nms,.nmth:focus-visible .nms{transform:scale(1.07)}
.nmmap.focused .nmth:not(.inweb) .nms{transform:scale(.72);opacity:.4}
.nmmap.focused .nmth:not(.inweb) .nmtl{opacity:0}
.nmmap.focused .nmth:not(.inweb):hover .nmtl,.nmmap.focused .nmth:not(.inweb):focus-visible .nmtl{opacity:1}
.nmmap.focused .nmact:not(.inweb) .nms{transform:scale(.55);opacity:.22}
.nmmap.focused .nmgoal .nms{transform:scale(.8);opacity:.6}
.nmmap.focused .nmth.inweb .nms{transform:scale(1.18)}
.nmmap.focused .nmth.inweb .nmtl{opacity:0}
.nmmap.focused .nmth.inweb .nmtlf{opacity:1}
.nmmap.focused .nmact.inweb .nms{transform:scale(1.9)}
.nmmap.focused .nmact.inweb:hover .nms,.nmmap.focused .nmact.inweb:focus-visible .nms{transform:scale(2.2)}
.nmmap.focused .nmact.inweb .nmal,.nmmap.focused .nmact.inweb .nmglyph{opacity:1}
.nmmap.focused .nmact.sel .nmbase{stroke:var(--text);stroke-width:2}
.nmmap.focused .nmedge:not(.hot){opacity:.25}
.nmtip{position:absolute;pointer-events:none;z-index:3;background:var(--void,#000);color:var(--text);
  border:1px solid var(--a1);font:500 calc(14px*var(--ts,1))/1.35 var(--disp);padding:6px 9px;max-width:220px;
  opacity:0;transform:translate(-50%,calc(-100% - 10px));transition:opacity .15s}
.nmtip.on{opacity:1}
.nmtip b{display:block;font:400 calc(12px*var(--ts,1))/1.5 var(--mono);letter-spacing:0.05em;color:var(--muted);text-transform:uppercase}
.nmhint{position:absolute;left:4px;bottom:0;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;color:var(--muted);text-transform:uppercase}
.nmside{display:flex;flex-direction:column;gap:9px;min-width:0}
.nmlab{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;color:var(--muted);text-transform:uppercase}
.nmh{margin:0;font:600 calc(17px*var(--ts,1))/1.3 var(--disp)}
.nmbig{font:600 calc(42.5px*var(--ts,1))/1 var(--mono);color:var(--a3t,var(--a3))}
.nmbig.a1{color:var(--a1t,var(--a1))}
.nmrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.nmrows button[data-nmopen]{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  gap:4px 10px;align-items:center;padding:7px 9px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid transparent}
.nmrows button[data-nmopen]:hover,.nmrows button[data-nmopen]:focus-visible{border-color:var(--a1)}
.nm1{font-size:calc(15px*var(--ts,1));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmv{font:calc(13.5px*var(--ts,1)) var(--mono);color:var(--muted)}
.nmmeter{grid-column:1/-1;height:3px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.nmmeter i{display:block;height:100%;background:var(--a1)}
.nmacts li{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:6px 8px;
  background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid transparent}
.nmacts li.sel{border-color:var(--text)}
.nmacts .nmnone{display:block;color:var(--muted);font-size:calc(14px*var(--ts,1))}
.nmtick{width:20px;height:20px;border:1.5px solid var(--a1);background:none;cursor:pointer;padding:0;position:relative}
.nmtick.rt{border-color:var(--a2);border-style:dashed;border-radius:50%}
.nmtick[aria-pressed="true"]{background:var(--a1)} .nmtick.rt[aria-pressed="true"]{background:var(--a2)}
.nmtick[aria-pressed="true"]::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;
  border:solid var(--void,#000);border-width:0 2px 2px 0;transform:rotate(45deg)}
.nmtick:disabled{opacity:.45;cursor:default}
.nmname{all:unset;cursor:pointer;display:block;font-size:calc(15px*var(--ts,1));line-height:1.3}
.nmname:hover{color:var(--a1t,var(--a1))}
.nmname:focus-visible{outline:1px solid var(--a1);outline-offset:2px}
.nmmeta{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);color:var(--muted);letter-spacing:.06em}
.nmback{align-self:flex-start;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--a1t,var(--a1));
  background:none;border:1px solid var(--a1);padding:7px 10px;cursor:pointer}
@media (max-width:900px){.nmbody{grid-template-columns:1fr}}
@media (max-width:600px){.nmal{font-size:calc(12px*var(--ts,1))}}
@media (prefers-reduced-motion:reduce){.nmact,.nmth,.nms,.nmedge{transition:none}}

/* ── v24: task families on the board ─────────────────────────
   A parent task reads as the head of its group: a heavier title, a thick
   bar in the family colour, and its subtask count. Every subtask carries
   the same colour, and one on its own names its parent above the title. */
.card.fpar,.card.fkid{border-left-color:var(--fc,var(--pc,var(--a1)))}
.card.fpar{border-left-width:4px;background:color-mix(in srgb,var(--fc,var(--a1)) 11%,color-mix(in srgb,var(--p2) 92%,transparent))}
.card.fpar>.t{font-weight:700;font-size:calc(15px*var(--ts,1))}
.card .parl{display:block;margin:0 0 4px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fc,var(--a1t,var(--a1)))}
.card.fkid .bc b,.card.fkid .bc{color:color-mix(in srgb,var(--fc,var(--text)) 80%,var(--text))}
.card.fpar .kct{color:var(--fc,var(--a1));border-color:color-mix(in srgb,var(--fc,var(--a1)) 55%,transparent)}
.card.fpar .kbar i{background:var(--fc,var(--a1))}
.mb .t.fpar,.mb .t.fkid{border-left-color:var(--fc,var(--cc,var(--a1)))}
.mb .t.fpar{border-left-width:4px;font-weight:700;font-size:calc(13.5px*var(--ts,1));
  background:color-mix(in srgb,var(--fc,var(--a1)) 13%,color-mix(in srgb,var(--p2) 88%,transparent))}
.mb .t.fkid{margin-left:calc(var(--kd,0) * 10px);position:relative}
.mb .t .up{display:block;font:normal 400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;margin-bottom:3px;
  color:color-mix(in srgb,var(--fc,var(--muted)) 85%,var(--text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb .t .kc{font:normal 400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;margin-left:6px;padding:2px 4px;vertical-align:1px;
  color:var(--fc,var(--a1));border:1px solid color-mix(in srgb,var(--fc,var(--a1)) 55%,transparent)}
/* on a light theme the family colours are too pale for text, so text uses a darker mix */
:root[data-tod="day"] .card .parl,:root[data-tod="day"] .mb .t .kc,:root[data-tod="day"] .card.fpar .kct{color:color-mix(in srgb,var(--fc,var(--a1)) 55%,#000)}
:root[data-tod="day"] .mb .t .up,:root[data-tod="day"] .card.fkid .bc{color:color-mix(in srgb,var(--fc,var(--muted)) 45%,#000)}

/* ── v24: readable dropdowns ─────────────────────────────────
   An open dropdown list is drawn by the system, which fell back to a white
   list with the app's pale text on it. Give every list the theme's own
   surface and text, and tell the browser which scheme the page is in. */
:root{color-scheme:dark}
:root[data-tod="day"]{color-scheme:light}
select option,select optgroup{background-color:var(--page);color:var(--text)}
select option:checked{background-color:var(--a1);color:var(--void,#000)}
select option:disabled{color:var(--muted)}

/* ── v24: a family lights up together ── */
.mb [data-card],.board .card{transition:opacity .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1)}
.mb.famhi [data-card]:not(.famon),.board.famhi .card:not(.famon){opacity:.32}
/* the rest of the family: lit, but softer */
.mb.famhi .famon,.board.famhi .card.famon{opacity:.68;box-shadow:0 0 0 1px color-mix(in srgb,var(--fc,var(--a1)) 55%,transparent)}
/* the card under the pointer: full strength */
.mb.famhi .famon.famme,.board.famhi .card.famon.famme{opacity:1;box-shadow:0 0 0 2px var(--fc,var(--a1)),0 0 14px color-mix(in srgb,var(--fc,var(--a1)) 35%,transparent);
  background-color:color-mix(in srgb,var(--fc,var(--a1)) 14%,var(--p2,transparent))}
@media (prefers-reduced-motion:reduce){.mb.famhi [data-card],.board.famhi .card{transition:none}}

/* ── v24: the content calendar's List view ── */
.fvw{display:inline-flex;gap:1px;padding:1px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.fvw button{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 8px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase}
.fvw button[aria-pressed="true"]{background:var(--a1);color:var(--void,#000)}
.fplist{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow:auto}
.fpday h5{margin:0 0 4px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;color:var(--muted)}
.fpday.now h5{color:var(--a1t,var(--a1))}
.fprow{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 7px;margin-bottom:3px;
  background:color-mix(in srgb,var(--text) 4%,transparent);border-left:2px solid color-mix(in srgb,var(--a1) 60%,transparent)}
.fprow.done{opacity:.6} .fprow.done .fnm{text-decoration:line-through}
.fprow.late{border-left-color:var(--a3)}
.fptime{flex:0 0 38px;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);color:var(--text)}
.fplat{flex:0 0 auto;max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 calc(12px*var(--ts,1))/1 var(--mono);
  letter-spacing:.08em;text-transform:uppercase;padding:3px 5px;border:1px solid color-mix(in srgb,var(--a2) 50%,transparent);color:var(--a2t,var(--a2))}
.fprow .fnm small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpst{flex:0 0 auto;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--muted)}
.fprow.late .fpst{color:var(--a3t,var(--a3))}
@media (max-width:640px){.fpst{display:none}.fplat{max-width:64px}}

/* ── v25: whose tasks, on the Board widget ────────────────── */
.wbps{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.wbx{display:flex;flex-direction:column;height:100%;min-height:0}
.wbx>.mb{flex:1;min-height:0;height:auto}
/* the board scrolls inside its widget when it is taller than the widget, headers stay put */
.wbx>.wbscroll{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--a1) 55%,transparent) transparent}
.wbx>.wbscroll::-webkit-scrollbar{width:8px} .wbx>.wbscroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--a1) 55%,transparent)}
.wbx>.wbscroll:focus-visible{outline:1px solid var(--a1);outline-offset:2px}
.wbx>.mb.wbscroll>.c>h4{position:sticky;top:0;z-index:1;background:var(--p1,var(--page));padding:3px 0}
.wbp{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;color:var(--muted);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);padding:3px 7px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.wbp .av{width:16px;height:16px;font-size:calc(12px*var(--ts,1));font-style:normal}
.wbp s{text-decoration:none;opacity:.7}
.wbp:hover{color:var(--text);border-color:var(--a1)}
.wbp.on{color:var(--void,#000);background:var(--a1);border-color:var(--a1)}
.wbp.on .av{background:color-mix(in srgb,var(--void,#000) 25%,transparent);color:var(--void,#000)}
.wbl{display:flex;flex-direction:column;gap:10px}
.wblane{padding:6px 0 4px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.wblane h5{display:flex;align-items:center;gap:7px;margin:0 0 6px;font:600 calc(14px*var(--ts,1))/1 var(--disp)}
.wblane h5 .av{width:20px;height:20px;font-size:calc(12px*var(--ts,1));font-style:normal}
.wblane h5 s{text-decoration:none;margin-left:auto;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;color:var(--muted);text-transform:uppercase}
.wblane .mb{height:auto}

/* ── v25: the Team map ─────────────────────────────────────── */
.tmx{display:flex;flex-direction:column;gap:8px;min-width:0}
.tmbar{display:flex;align-items:center;gap:8px}
.tmhint{margin:0;padding:6px 9px;font-size:calc(14px*var(--ts,1));border-left:2px solid var(--a2);background:color-mix(in srgb,var(--a2) 10%,transparent)}
.tmbody{display:grid;grid-template-columns:minmax(0,1fr) var(--tmside,min(470px,46%));gap:12px;min-width:0;position:relative}
/* the edge between the map and its side panel */
.tmsplit{position:absolute;top:0;bottom:0;z-index:4;width:12px;left:calc(100% - var(--tmside,min(470px,46%)) - 12px);padding:0;border:0;background:none;cursor:col-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center}
.tmsplit i{display:block;width:2px;height:48px;border-radius:2px;background:var(--a1);opacity:.25;transition:opacity .2s cubic-bezier(.65,0,.35,1),height .2s cubic-bezier(.65,0,.35,1)}
.tmsplit:hover i,.tmsplit:focus-visible i,.tmsplitting .tmsplit i{opacity:.9;height:120px}
.tmsplit:focus-visible{outline:none}
@media (max-width:900px){ .tmsplit{display:none} }
@media (max-width:900px){.tmbody{grid-template-columns:1fr}}
.tmmap{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:680px;overflow:hidden}
.tmhub{stroke:color-mix(in srgb,var(--text) 10%,transparent);stroke-width:1.2}
.tmsp{stroke:color-mix(in srgb,var(--text) 16%,transparent);stroke-width:1}
.tmcore circle{fill:var(--p2,var(--page));stroke:var(--a3);stroke-width:2}
.tmcore text{fill:var(--text);font:600 calc(14px*var(--ts,1)) var(--disp)}
.tmm{cursor:pointer;outline:none}
.tmm .tms{fill:var(--p2,var(--page));stroke:var(--a1);stroke-width:2}
.tmm .tmi{fill:var(--text);font:700 calc(17px*var(--ts,1)) var(--disp)}
.tmm .tmn{fill:var(--muted);font:500 calc(14px*var(--ts,1)) var(--disp)}
.tmm:focus-visible .tms,.tmm:hover .tms{stroke-width:3.5}
.tmt{cursor:pointer;outline:none}
.tmt .tms{fill:var(--p2,var(--page));stroke:var(--a1);stroke-width:1.6}
.tmt.blk .tms{stroke:var(--a2);stroke-dasharray:3 2}
.tmt.late .tms{fill:color-mix(in srgb,var(--a3) 35%,var(--p2,var(--page)))}
.tmt.pick .tms{fill:var(--a2);stroke:var(--a2)}
.tmt:hover .tms,.tmt:focus-visible .tms{stroke-width:3}
.tmt text{fill:var(--text);font:500 calc(14px*var(--ts,1)) var(--disp);paint-order:stroke;stroke:var(--p1,var(--page));stroke-width:3.5px}
/* v98 · a tree name's due date and its count of what it holds */
.tmt text .tmdue{font-family:var(--mono);font-weight:400;letter-spacing:.04em;fill:var(--muted)}
.tmt text .tmdue.late{fill:var(--a3t,var(--a3));font-weight:600}
.tmt text .tmmore{fill:var(--a1);font-weight:700}
.tmp.dim{opacity:.35}
.tmsub{stroke:color-mix(in srgb,var(--a1) 45%,transparent);stroke-width:1.2}
.tmt.sub .tms{stroke-width:1.3}
.tmfam{fill:none;stroke:color-mix(in srgb,var(--a1) 45%,transparent);stroke-width:1.2;stroke-dasharray:4 4}
.tmx.focused .tmfam{opacity:.35}
.tmcase{fill:none;stroke:var(--p1,var(--page));stroke-width:6;stroke-linecap:round;opacity:.85}
.tmdep{fill:none;stroke-width:1.5;stroke-linecap:round;opacity:.75;transition:opacity .15s,stroke-width .15s}
.tmdep.cross{stroke-width:2.2;opacity:1}
.tmdep.hot,.tmdep.lit{stroke-width:3;opacity:1}
.tmx.tracing .tmdep:not(.lit){opacity:.15}
.tmmap marker path{fill:var(--a2)}
.tmx.focused .tmdep:not(.hot){opacity:.2}
.tmx.linking .tmt .tms{stroke:var(--a2)}
.tmside{display:flex;flex-direction:column;gap:8px;min-width:0}
/* one height whatever it shows, so the widget never changes size when the Hako docks or leaves */
@media (min-width:901px){ .tmside{height:min(860px,calc(100vh - 190px));min-height:420px;overflow-y:auto;overflow-x:hidden} .tmside:has(.tmdock){overflow:visible} }
.tml{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.tml li{display:flex;flex-direction:column;gap:2px;padding:6px 8px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.tml li span{font-size:calc(13.5px*var(--ts,1));color:var(--muted)}
.tml li span b{color:var(--text);font-weight:600}
.tmln{all:unset;cursor:pointer;font-size:calc(15px*var(--ts,1));line-height:1.3}
.tmln:hover{color:var(--a1t,var(--a1))}
.tmln:focus-visible{outline:1px solid var(--a1);outline-offset:2px}
.tmx.focused .tmcore{opacity:.25}

/* ── v26: Marketing year ───────────────────────────────────── */
.f-marketing{container-type:inline-size}
.f-marketing .my-release{--kc:var(--a1)} .f-marketing .my-event{--kc:var(--a2)} .f-marketing .my-sale{--kc:var(--a3)} .f-marketing .my-moment{--kc:var(--muted)}
.my-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:2px 0 8px}
.my-seg,.my-keys{display:flex;flex-wrap:wrap;gap:4px}
.my-seg button,.my-keys button{cursor:pointer;background:none;color:var(--muted);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  padding:4px 8px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.my-seg button[aria-pressed="true"]{background:var(--a1);border-color:var(--a1);color:var(--void)}
.my-keys i{width:8px;height:8px;border-radius:50%;background:var(--kc)}
.my-keys button[aria-pressed="false"]{opacity:.45} .my-keys button[aria-pressed="false"] i{background:none;border:1px solid var(--kc)}
.f-marketing button:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.my-yr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-bottom:10px}
@container (max-width:760px){.my-yr{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-width:380px){.my-yr{grid-template-columns:repeat(2,minmax(0,1fr))}}
.my-m{min-width:0;padding:5px 5px 6px;background:color-mix(in srgb,var(--text) 4%,transparent);display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:background .15s,box-shadow .15s}
.my-m:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.my-m.my-past{opacity:.55}
.my-m.my-cur{opacity:1;background:color-mix(in srgb,var(--a1) 12%,transparent);box-shadow:inset 0 -2px 0 var(--a1)}
.my-mh{all:unset;cursor:pointer;display:flex;justify-content:space-between;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);padding:1px 0}
.my-mh:hover,.my-m.my-cur .my-mh{color:var(--a1t,var(--a1))}
.my-mh s{text-decoration:none;color:var(--text)}
.my-track{position:relative;height:18px;border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.my-run{position:absolute;bottom:0;height:6px;background:color-mix(in srgb,var(--kc) 22%,transparent);pointer-events:none}
.my-run.on{background:color-mix(in srgb,var(--kc) 45%,transparent)}
.my-today{position:absolute;top:-2px;bottom:-3px;width:2px;margin-left:-1px;background:var(--text);opacity:.7;pointer-events:none}
.my-dot{position:absolute;top:1px;width:12px;height:12px;margin-left:-6px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--kc);border:2px solid var(--p1,var(--page));box-shadow:0 0 0 1px var(--kc)}
.my-dot.my-gone{background:var(--p1,var(--page))}
.my-dot.on{transform:scale(1.35);box-shadow:0 0 0 2px var(--kc)}
.my-names{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.my-names li{border-left:2px solid var(--kc);min-width:0}
.my-names li.on{background:color-mix(in srgb,var(--kc) 14%,transparent)}
.my-names button{all:unset;cursor:pointer;display:block;padding:1px 4px;font:500 calc(12.5px*var(--ts,1))/1.25 var(--cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;box-sizing:border-box;color:var(--text)}
.my-names b{font:600 calc(12px*var(--ts,1)) var(--mono);color:var(--muted)}
.my-cal{display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden;margin-bottom:10px}
.my-calh{display:flex;align-items:center;gap:8px}
.my-calh h4{margin:0;min-width:130px;text-align:center;font:600 calc(17px*var(--ts,1))/1 var(--disp);color:var(--text)}
.my-nav{cursor:pointer;background:none;color:var(--text);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);padding:3px 9px;font:400 calc(16px*var(--ts,1))/1 var(--mono)}
.my-wk,.my-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.my-wk span{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);padding:2px 4px}
.my-wk .s{display:none} .my-wk b{font-weight:400}
.my-day{min-width:0;min-height:74px;padding:4px;display:flex;flex-direction:column;gap:2px;overflow:hidden;background:color-mix(in srgb,var(--text) 4%,transparent);border-top:2px solid transparent}
.my-day.my-out{opacity:.35}
.my-day.my-gone .my-dn{opacity:.55}
.my-day.my-inrun{background:color-mix(in srgb,var(--kc) 8%,transparent)}
.my-day.my-inrun.my-sel{background:color-mix(in srgb,var(--kc) 18%,transparent);border-top-color:color-mix(in srgb,var(--kc) 60%,transparent)}
.my-day.my-now{box-shadow:inset 0 0 0 1px var(--a1)} .my-day.my-now .my-dn{color:var(--a1t,var(--a1))}
.my-dn{font:500 calc(12.5px*var(--ts,1))/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.my-chip{all:unset;box-sizing:border-box;max-width:100%;cursor:pointer;padding:2px 4px;background:var(--kc);color:var(--void);font:600 calc(12.5px*var(--ts,1))/1.2 var(--cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-chip.on{box-shadow:0 0 0 2px var(--text)}
.my-prep{all:unset;box-sizing:border-box;max-width:100%;cursor:pointer;padding:0 0 0 4px;border-left:2px solid var(--kc);font:500 calc(12.5px*var(--ts,1))/1.25 var(--cond);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.my-prep.done{opacity:.5;text-decoration:line-through} .my-prep.late{color:var(--a3t,var(--a3))}
.my-more{font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.my-det{display:flex;flex-direction:column;gap:7px;padding:9px 10px;margin-bottom:10px;border-left:3px solid var(--kc);background:color-mix(in srgb,var(--kc) 7%,transparent)}
.my-dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.my-dh h4{margin:0;font:600 calc(17px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.my-kind{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--kc)}
.my-when{margin-left:auto;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.my-prog{height:4px;background:color-mix(in srgb,var(--text) 10%,transparent)} .my-prog i{display:block;height:100%;background:var(--kc)}
.my-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.my-steps li{display:flex;align-items:center;gap:8px;min-width:0;padding:3px 0}
.my-steps li.done .my-sn{opacity:.55;text-decoration:line-through}
.my-tick{flex:0 0 auto;width:18px;height:18px;padding:0;cursor:pointer;background:none;border:1.5px solid color-mix(in srgb,var(--text) 45%,transparent);position:relative}
.my-tick[aria-pressed="true"]{background:var(--kc);border-color:var(--kc)}
.my-tick[aria-pressed="true"]::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--void);border-width:0 2px 2px 0;transform:rotate(45deg)}
.my-tick:disabled{cursor:default;opacity:.6}
.my-sn{flex:1;min-width:0;font-size:calc(14px*var(--ts,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.my-open{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase;margin-left:4px}
.my-sd{flex:0 0 auto;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.my-flag{flex:0 0 auto;font:600 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--a3t,var(--a3))}
.my-steps li.late .my-sd{color:var(--a3t,var(--a3))}
.my-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.my-hint{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.my-add input[name="n"]{flex:1 1 180px;min-width:0}
.my-stepadd{margin:2px 0 4px}
.my-stepadd input[name="n"]{flex:1 1 180px;min-width:0}
.my-none{margin:0;font-size:calc(14px*var(--ts,1));line-height:1.5;color:var(--muted)}
.my-none .lnk{font-size:calc(14px*var(--ts,1))}
.my-sx{opacity:.5} .my-steps li:hover .my-sx,.my-sx:focus-visible{opacity:1}
@container (max-width:560px){
  .my-wk .l{display:none} .my-wk .s{display:inline}
  .my-day{min-height:52px;padding:2px}
  .my-chip{font-size:calc(12px*var(--ts,1));padding:1px 2px}
  .my-prep{font-size:0;height:3px;padding:0;border-left:0;background:var(--kc)} .my-prep.done{opacity:.3}
  .my-calh h4{min-width:0;flex:1}
}

/* ── v28: the chat dock ────────────────────────────────────── */
#chdock{position:fixed;right:18px;bottom:var(--chb,78px);z-index:35;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
#chdock[hidden]{display:none}
#chdock > *{pointer-events:auto}
/* the tab sits in the bottom bar; on a phone the bar scrolls sideways, so it sticks to the right edge */
.chd-slot{display:flex;flex:0 0 auto;position:sticky;right:0;z-index:1}
.chd-slot:empty{display:none}
.chd-tab{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 10px;background:var(--p2,var(--page));color:var(--text);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);font:600 calc(13.5px*var(--ts,1))/1 var(--disp)}
.chd-tab svg{width:16px;height:16px;fill:none;stroke:var(--a1);stroke-width:1.8;stroke-linejoin:round}
.chd-tab:hover{border-color:var(--a1)}
.chd-tab.on{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 14%,var(--p2,var(--page)))}
.chd-tab.new{border-color:color-mix(in srgb,var(--a3) 70%,transparent)}
#chslot.chd-ping .chd-tab{animation:chdPing .9s var(--e-out,ease-out)}
.chd-tab:focus-visible,.chd-ic:focus-visible,.chd-room:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
.chd-tt{display:flex;flex-direction:column;gap:3px;text-align:left}
.chd-tt small{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chd-badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center;background:var(--a3);color:var(--void);font:700 calc(12.5px*var(--ts,1))/1 var(--mono)}
.chd-panel{width:min(360px,calc(100vw - 24px));height:min(500px,calc(100vh - var(--chb,78px) - 90px));display:flex;flex-direction:column;
  background:var(--page);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);border-top:3px solid var(--pc,var(--a1));box-shadow:0 14px 40px rgba(0,0,0,.45)}
.chd-head{display:flex;align-items:flex-start;gap:6px;padding:8px 8px 8px 10px;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.chd-head h3{margin:0;font:600 calc(16px*var(--ts,1))/1.2 var(--disp);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chd-head > h3{flex:1;padding-top:4px}
.chd-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.chd-ic{position:relative;flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;cursor:pointer;background:none;color:var(--muted);
  border:1px solid transparent;font:400 calc(19px*var(--ts,1))/1 var(--mono)}
.chd-ic:hover{color:var(--text);border-color:color-mix(in srgb,var(--text) 18%,transparent)}
.chd-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.chd-dot{position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--a3)}
.chd-body{flex:1;overflow-y:auto;padding:4px}
.chd-rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.chd-room{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:center;gap:9px;padding:8px;border-left:3px solid var(--pc,var(--a1))}
.chd-room:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.chd-room.new b{color:var(--a1t,var(--a1))}
.chd-code{flex:0 0 auto;font:600 calc(12.5px*var(--ts,1))/1 var(--mono);color:var(--muted);width:18px}
.chd-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.chd-rt b{font:600 calc(15px*var(--ts,1))/1.2 var(--disp);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chd-rt small{font-size:calc(13.5px*var(--ts,1));color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chd-room time{flex:0 0 auto;font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted)}
#chdock.chd-ping .chd-panel{animation:chdPing .9s var(--e-out,ease-out)}
@keyframes chdPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a1) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){#chdock.chd-ping .chd-panel,#chslot.chd-ping .chd-tab{animation:none}}
@media (max-width:560px){ #chdock{right:8px;left:8px;align-items:stretch} .chd-tt small{display:none} .chd-panel{width:auto;height:min(70vh,calc(100vh - var(--chb,78px) - 70px))} }
.chd-panel .ch-who{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chd-panel .ch-who .av{position:relative;width:20px;height:20px;font-size:calc(12px*var(--ts,1));font-style:normal}
.chd-panel .ch-who .pdot{position:absolute;right:-2px;bottom:-2px}
.ch-cnt{margin-left:4px;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.05em;color:var(--muted)}
.chd-panel .ch-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:6px 10px}
.chd-panel .ch-form{padding:8px 10px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.chd-panel .ch-hint{padding:8px 10px}
.ch-none,.ch-older{margin:auto 0;padding:10px 4px;font-size:calc(14px*var(--ts,1));color:var(--muted);text-align:center}
.ch-older{margin:0;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase}
.ch-day{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted)}
.ch-day::before,.ch-day::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.ch-msg{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;max-width:86%;margin-top:6px;position:relative}
.ch-msg.cont{margin-top:1px}
.ch-msg.own{align-self:flex-end;align-items:flex-end}
.ch-msg.pend{opacity:.6}
.ch-meta{display:flex;align-items:center;gap:6px;margin-bottom:2px;font-size:calc(13.5px*var(--ts,1));color:var(--text)}
.ch-meta b{font-weight:600}
.ch-meta .av.sm{width:18px;height:18px;font-size:calc(12px*var(--ts,1));font-style:normal}
.ch-meta time{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.ch-bub{padding:6px 9px;font-size:calc(15px*var(--ts,1));line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);
  background:color-mix(in srgb,var(--text) 7%,transparent);border-left:2px solid color-mix(in srgb,var(--text) 22%,transparent)}
.ch-msg.own .ch-bub{background:color-mix(in srgb,var(--a1) 16%,transparent);border-left:0;border-right:2px solid var(--a1)}
.ch-bub a{color:var(--a1t,var(--a1));text-decoration:underline}
.ch-ed{margin-left:6px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Edit and Delete float beside the bubble, so pointing at a message never moves the list */
.ch-tools{position:absolute;bottom:2px;left:calc(100% + 6px);display:flex;gap:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.ch-msg.own .ch-tools{left:auto;right:calc(100% + 6px)}
.ch-msg:hover .ch-tools,.ch-msg:focus-within .ch-tools{opacity:1;pointer-events:auto}
.ch-tools .lnk{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:0.05em;text-transform:uppercase}
.ch-editf{display:flex;flex-direction:column;gap:4px;min-width:220px}
.ch-editf textarea,.ch-form textarea{font-size:calc(15px*var(--ts,1));line-height:1.4;font-family:inherit;color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:7px 9px;resize:none}
.ch-editf textarea:focus,.ch-form textarea:focus{outline:none;border-color:var(--a1)}
.ch-acts{display:flex;gap:6px;justify-content:flex-end}
.ch-form{display:flex;gap:6px;align-items:flex-end}
.ch-form textarea{flex:1;min-width:0;min-height:34px;max-height:120px}
.ch-hint{margin:0;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.05em;text-transform:uppercase;color:var(--muted)}
@media (hover:none){ .ch-tools{position:static;opacity:1;pointer-events:auto;margin-top:2px} }

/* ── v29: the font picker shows each font in its own face ──── */
.fpk{position:relative;margin-bottom:6px}
.fpk-btn{width:100%;text-align:left;cursor:pointer;font-size:calc(17px*var(--ts,1));padding-right:30px;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fpk-btn::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-5px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.7}
.fpk-btn[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-1px}
.fpk-list{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:30;max-height:340px;overflow-y:auto;margin:0;padding:4px 0;list-style:none;
  background:var(--page);border:1px solid color-mix(in srgb,var(--a1) 55%,transparent);box-shadow:0 14px 34px rgba(0,0,0,.45);outline:none}
.fpk-list li{padding:7px 12px;font-size:calc(18px*var(--ts,1));line-height:1.25;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpk-list li:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.fpk-list li.act{background:color-mix(in srgb,var(--a1) 20%,transparent)}
.fpk-list li[aria-selected="true"]{color:var(--a1t,var(--a1))}
.fpk-list li[aria-selected="true"]::after{content:" \2713";font-family:var(--mono);font-size:calc(14px*var(--ts,1))}

/* ── v31: move around the Team map, and a task panel beside it ── */
.tmmap{cursor:grab;touch-action:none;outline:none}
.tmmap.panning{cursor:grabbing}
.tmmap:focus-visible{box-shadow:inset 0 0 0 1px var(--a1)}
.tmzoom{display:inline-flex;gap:2px;margin-right:6px}
.tmzoom .fbtn{min-width:30px;padding-left:8px;padding-right:8px}
.tmt.open .tms{fill:var(--a1);stroke:var(--a1)}
.tmtask{display:flex;flex-direction:column;gap:9px;min-width:0}
.tmtask.tmt-in{animation:tmtIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes tmtIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.tmt-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.tmt-up{align-self:flex-start;font-size:calc(13.5px*var(--ts,1))}
.tmt-title{margin:0;font:600 calc(17px*var(--ts,1))/1.3 var(--disp);color:var(--text);overflow-wrap:anywhere}
.tmt-done{align-self:flex-start}
.tmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
.tmt-grid label{display:flex;flex-direction:column;gap:3px;font:400 calc(12px*var(--ts,1))/1.2 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);min-width:0}
.tmt-grid select,.tmt-grid input{font-weight:500;font-size:calc(14px*var(--ts,1));font-family:inherit;color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);padding:5px 6px;min-width:0;width:100%;text-transform:none;letter-spacing:0}
.tmt-kids li{flex-direction:row;align-items:center;gap:8px}
.tmt-kids li.done .tmln{opacity:.55;text-decoration:line-through}
.tmt-kids .my-tick{--kc:var(--a1)}
.tmt-notes{margin:0;font-size:calc(14px*var(--ts,1));line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow-y:auto}
@media (prefers-reduced-motion:reduce){.tmtask.tmt-in{animation:none}}

/* ── v31: an open branch stands out, the rest steps back ─────── */
.tmt.fade{opacity:.28} .tmt.fade:hover,.tmt.fade:focus-visible{opacity:1}
.tmt.br .tms{stroke-width:2.2}
.tmsub.br{stroke:var(--a1);stroke-width:1.8;opacity:.9}
.tmt.fade text{opacity:0}

/* ── v31: the lines follow the skin ────────────────────────────── */
.tmhub,.tmsp,.tmsub{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tmx[data-links="dotted"] :is(.tmhub,.tmsp,.tmsub){stroke-dasharray:.5 6;stroke-width:2.2}
.tmx[data-links="dotted"] .tmdep{stroke-dasharray:.5 5}
.tmx[data-links="angle"] :is(.tmhub,.tmsp,.tmsub){stroke-linejoin:miter;stroke-linecap:square}
.tmx[data-links="circuit"] :is(.tmsp,.tmsub){marker-mid:url(#tmVia)}
.tmx[data-links="circuit"] .tmsub{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--a1) 60%,transparent))}
.tmx[data-links="circuit"] .tmhub{stroke-dasharray:10 4}
.tmmap marker#tmVia circle{fill:color-mix(in srgb,var(--a1) 70%,transparent)}

/* ── v31: nodes in the skin's motif, lines that flow, nodes you can drag ── */
.tmhit{fill:transparent;stroke:none}
.tmg{transition:scale .25s cubic-bezier(.65,0,.35,1)}
.tmt:hover .tmg,.tmt:focus-visible .tmg{scale:1.2}
.tmm:hover .tmg,.tmm:focus-visible .tmg{scale:1.06}
.tmt,.tmm{cursor:grab} .tmt.dragging,.tmm.dragging{cursor:grabbing} .tmt.dragging .tmg{scale:1.25}
.tms-in{fill:none;stroke:color-mix(in srgb,var(--a1) 60%,transparent);stroke-width:1}
.tms-tick{stroke:var(--a1);stroke-width:1.3;stroke-linecap:square}
.tmm-ring{fill:none;stroke:color-mix(in srgb,var(--a1) 70%,transparent);stroke-width:1.2;stroke-dasharray:3 7;animation:tmSpin 2.4s linear infinite}
/* the ring turns by marching its dashes, so the node itself never moves */
@keyframes tmSpin{to{stroke-dashoffset:-20}}
.tms-sh{fill:color-mix(in srgb,var(--text) 70%,transparent);stroke:none}
.tms-wob{fill:none;stroke:color-mix(in srgb,var(--a1) 55%,transparent);stroke-width:1}
.tms-halo{fill:color-mix(in srgb,var(--a1) 16%,transparent);stroke:none}
.tms-shine{fill:rgba(255,255,255,.5);stroke:none}
.tms-core{fill:var(--a1);stroke:none}
.tmx[data-links="angle"] .tms{stroke-width:2.2;stroke:var(--text)}
.tmx[data-links="angle"] .tmt.open .tms{fill:var(--a1)}
.tmx[data-links="curve"] .tms{stroke-width:2}
.tmx[data-links="circuit"] .tmm .tms{stroke-width:2.2}
/* the lines: curves everywhere, dressed by the skin */
.tmx[data-links="circuit"] .tmsub{stroke-dasharray:7 5;animation:tmFlow 1.6s linear infinite}
.tmx[data-links="circuit"] .tmsp:not(.tmsub){stroke:color-mix(in srgb,var(--a1) 40%,transparent)}
@keyframes tmFlow{to{stroke-dashoffset:-12}}
.tmx[data-links="angle"] :is(.tmsp,.tmsub){stroke-width:2.2;stroke:color-mix(in srgb,var(--text) 55%,transparent)}
.tmx[data-links="curve"] :is(.tmsp,.tmsub){stroke-width:2.4;stroke:color-mix(in srgb,var(--a1) 45%,transparent)}
.tmx[data-links="straight"] :is(.tmsp,.tmsub){stroke-width:1}
@media (prefers-reduced-motion:reduce){ .tmm-ring,.tmx[data-links="circuit"] .tmsub{animation:none} .tmg{transition:none} }

/* ── v31: pick the node style, whatever the theme ─────────────── */
.tmstyles{display:inline-flex;gap:2px;margin-right:6px;flex-wrap:wrap}
.tmsty{cursor:pointer;display:grid;place-items:center;min-width:30px;height:28px;padding:0 6px;background:none;color:var(--muted);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase}
.tmsty svg{width:20px;height:20px;overflow:visible}
.tmsty svg .tms{fill:var(--p2,var(--page));stroke:var(--a1);stroke-width:1.4}
.tmsty:hover{border-color:var(--a1);color:var(--text)}
.tmsty.on{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 16%,transparent);color:var(--text)}
.tmsty:focus-visible{outline:2px solid var(--a1);outline-offset:1px}
.tmbar{flex-wrap:wrap;row-gap:6px}

/* ── v32: the Hako opens inside the Team map ───────────────────── */

.tmdock{height:min(860px,calc(100vh - 190px));min-height:420px;display:flex;flex-direction:column;gap:8px}
.tmdock-hako{flex:1 1 auto;min-height:320px}
body.tdDock #tdHost .tdscrim{display:none}
body.tdDock #tdHost .tdwrap{position:fixed;inset:auto;left:var(--dkx,0);top:var(--dky,0);width:var(--dkw,420px);height:var(--dkh,600px);
  display:block;padding:0;z-index:33;pointer-events:none;clip-path:inset(var(--dkt,0px) var(--dkr,0px) var(--dkb,0px) var(--dkl,0px))}
body.tdDock #tdHost .td{width:100%;height:100%;max-width:none;pointer-events:auto;--ch:12px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 45%,transparent),0 18px 40px rgba(0,0,0,.4);
  animation:tdDockIn .42s cubic-bezier(.65,0,.35,1) both}
body.tdDock #tdHost .td.seated{animation:none}
@keyframes tdDockIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ body.tdDock #tdHost .td{animation:none} }

/* ── v32: line shapes, and nodes that grow in ──────────────────── */
.tmx[data-shape="right"] :is(.tmsp,.tmsub,.tmhub){stroke-linejoin:miter;stroke-linecap:square;stroke-dasharray:none;animation:none}
.tmx[data-shape="trace"] :is(.tmsp,.tmsub){stroke:var(--a1);stroke-linejoin:miter;stroke-width:1.6;marker-mid:url(#tmVia);
  stroke-dasharray:16 5;animation:tmFlow 1.1s linear infinite}
/* v95 · the glow goes on the group of lines: one filter instead of one per line, which on a big screen made every
   zoom landing and every frame of the flowing dashes redraw a dozen or more separate glows. It blurs the lines
   themselves, so each glows in its own family's colour, as before */
.tmx[data-shape="trace"] .tmspk{filter:url(#tmGlow)}
.tmx[data-shape="trace"] .tmsp:not(.tmsub){opacity:.75}
.tmx[data-shape="trace"] .tmhub{stroke-dasharray:4 4;stroke-linejoin:miter}
@media (prefers-reduced-motion:reduce){ .tmx[data-shape="trace"] :is(.tmsp,.tmsub){animation:none} }
.tml-ic{fill:none;stroke:var(--a1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tmt.tmborn .tmg{animation:tmBorn .46s cubic-bezier(.65,0,.35,1) both}
.tmt.tmborn text{animation:tmFadeIn .46s cubic-bezier(.65,0,.35,1) both}
@keyframes tmBorn{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes tmFadeIn{from{opacity:0}to{opacity:1}}

/* ── v32: the selected task stands out, its subtasks list above the Hako ── */
/* the selected dot grows inside the node slide, on the same ease in and out as the camera */
@keyframes tmPop{from{transform:scale(.55)}to{transform:none}}
.tmt.open text{font-weight:700}
.tmt.open .tms{stroke-width:2.6}
.tmt.hl .tmg{scale:1.35}
@media (prefers-reduced-motion:reduce){ .tmt.open .tmg{animation:none} }
.tmkids{flex:0 0 34%;min-height:0;display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--a1) 35%,transparent);
  background:color-mix(in srgb,var(--page) 92%,transparent)}
.tmkids h5{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.tmkids h5 s{text-decoration:none;margin-left:auto;color:var(--text)}
.tmkids ul{list-style:none;margin:0;padding:4px 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--a1) 55%,transparent) transparent}
.tmkids li{display:flex;align-items:center;gap:8px;padding:5px 10px 5px calc(10px + var(--d,0)*16px);min-width:0}
.tmkids li:hover{background:color-mix(in srgb,var(--a1) 10%,transparent)}
.tmkids li .my-tick{--kc:var(--a1)}
.tmkn{all:unset;cursor:pointer;flex:1;min-width:0;font-size:calc(15px*var(--ts,1));color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmkn:hover{color:var(--a1t,var(--a1))} .tmkn:focus-visible{outline:1px solid var(--a1);outline-offset:2px}
.tmkids li.done .tmkn{opacity:.55;text-decoration:line-through}
.tmkm{flex:0 0 auto;display:flex;align-items:center;gap:5px;font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.tmkm .av{width:18px;height:18px;font-size:calc(12px*var(--ts,1));font-style:normal}
.tmkids li.on{background:color-mix(in srgb,var(--a1) 16%,transparent);box-shadow:inset 2px 0 0 var(--a1)}
.tmkids li.on .tmkn{font-weight:700}

/* ── v32: the selected family stands out by rank ── */
.tmt.r0 text{fill:var(--a1t,var(--a1));stroke-width:5px}
/* v99 · on the web a line can pass behind a name, so its halo in the panel colour is wide enough to fill the gaps
   between the letters; it moves with the name through every slide. The tree keeps lines clear of names already. */
.tmt.tmweb text{stroke-width:7px;stroke-linejoin:round}
.tmt.tmweb.r0 text{stroke-width:9px}
.tmt.r1 .tms{stroke:var(--a1);stroke-width:2.2}
.tmt.r1 text{fill:color-mix(in srgb,var(--a1t,var(--a1)) 60%,var(--text))}
.tmt.r2 .tms{stroke:color-mix(in srgb,var(--a1) 70%,var(--text));stroke-width:1.8}
.tmt.r4{opacity:.38} .tmt.r4:hover,.tmt.r4:focus-visible{opacity:1}
.tmt.r4 text{fill:var(--muted)}
.tmsp.fam0{stroke:var(--a1);stroke-width:2.8;opacity:1;stroke-dasharray:7 5;animation:tmFlow 1.1s linear infinite}
.tmsp.fam1{stroke:color-mix(in srgb,var(--a1) 75%,transparent);stroke-width:2;opacity:.95}
.tmsp.far{opacity:.3}
@keyframes tmFlow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){ .tmsp.fam0{animation:none} }
.tmring circle{fill:none;stroke:color-mix(in srgb,var(--text) 18%,transparent);stroke-width:3}
.tmring .fill{stroke:var(--a2,var(--a1));stroke-linecap:round}
.tmstage{position:relative}
.tmtrail{margin:0 0 8px;min-height:36px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 8px;
  font-size:calc(14px*var(--ts,1));background:color-mix(in srgb,var(--page) 86%,transparent);border:1px solid color-mix(in srgb,var(--a1) 30%,transparent);
  min-width:0}
.tmtrail>*+*:not(.tmtr-step)::before{content:'›';margin-right:6px;color:var(--muted)}
.tmtr-who{font:400 calc(12.5px*var(--ts,1))/1 var(--mono);letter-spacing:0.05em;text-transform:uppercase;color:var(--muted)}
.tmtr-up{all:unset;cursor:pointer;color:var(--text);opacity:.8}
.tmtr-up:hover,.tmtr-up:focus-visible{opacity:1;color:var(--a1t,var(--a1));text-decoration:underline}
.tmtr-me{color:var(--a1t,var(--a1));font-weight:700;font-size:calc(15px*var(--ts,1))}
.tmtr-step{margin-left:auto;display:flex;align-items:center;gap:4px}
.tmtr-step button{all:unset;cursor:pointer;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;text-align:center;line-height:22px;
  border:1px solid color-mix(in srgb,var(--text) 18%,transparent);font:400 calc(13.5px*var(--ts,1))/22px var(--mono);color:var(--text)}
.tmtr-step button:hover,.tmtr-step button:focus-visible{border-color:var(--a1);color:var(--a1t,var(--a1))}
.tmtr-step .mono{font-size:calc(12.5px*var(--ts,1));color:var(--muted);padding:0 2px}
.tmkids li.near .tmkn{font-weight:600}
.tmkids li.hl{background:color-mix(in srgb,var(--a2,var(--a1)) 18%,transparent)}
.tmtrail.idle .tmtr-who{text-transform:none;letter-spacing:.02em}

/* ── v32: crossfades, so nothing on the Team map pops ── */
path.tmghost{pointer-events:none}
.tdghost{position:fixed;z-index:33;pointer-events:none}
.tdghost .td{width:100%!important;height:100%!important;max-width:none!important;--ch:12px}
/* pointing at things eases too */
/* the slide drives transform, opacity and colour inline, so hover uses scale, which nothing else touches */
.tmkids li{transition:background-color .25s cubic-bezier(.65,0,.35,1)}
.tmkids li.none{font-size:calc(14px*var(--ts,1));color:var(--muted);padding:10px}
.tmtrail .tmhint{margin:0}
/* looping line animations keep the clock's phase, so a redrawn line carries on where the old one was */
.tmm-ring,.tmx[data-links="circuit"] .tmsub,.tmx[data-shape="trace"] :is(.tmsp,.tmsub),.tmsp.fam0{animation-delay:var(--tmT,0s)}

/* ── v32 · add a task from inside a widget ── */
.wqa{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 8px}
.wqa input{flex:1;min-width:0;height:28px;box-sizing:border-box;padding:0 9px;font:500 calc(14px*var(--ts,1)) var(--disp);color:var(--text);
  background:color-mix(in srgb,var(--page) 70%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);border-radius:0;outline:none;
  transition:border-color .2s cubic-bezier(.65,0,.35,1)}
.wqa input:focus{border-color:var(--a1)}
.wqa input::placeholder{color:var(--muted)}
.wqa .fbtn{height:28px;min-width:28px;padding:0 8px}
.tmbar .wqa{margin:0;flex:0 1 240px}
.wbx>.wqa{max-width:420px}

/* ── v32 · team pins ── */
.wh .wpin{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.wh .wpin svg,.shelf .pinmark svg{width:13px;height:13px;fill:currentColor}
.wh .wpin:hover:not(:disabled),.wh .wpin:focus-visible{color:var(--a1t,var(--a1))}
.wh .wpin.on{color:var(--a1t,var(--a1))}
.wh .wpin span{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.07em;text-transform:uppercase}
.wh .wpin:disabled{opacity:.35;cursor:not-allowed}
.wgt.pinned{box-shadow:inset 0 2px 0 var(--a1)}
.shelf .pinned{opacity:.8;cursor:default} .shelf .pinmark{margin-left:auto;color:var(--a1t,var(--a1))}

/* ── v33 · drag a card onto another card ── */
body.cdragging,body.cdragging *{cursor:grabbing!important;user-select:none}
.cdghost{position:fixed;z-index:80;margin:0!important;padding:0!important;display:block!important;height:auto;overflow:visible!important;
  pointer-events:none;box-sizing:border-box;transform-origin:30% 50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gc) 55%,transparent),0 10px 26px rgba(0,0,0,.45);
  transition:rotate .22s cubic-bezier(.65,0,.35,1),scale .22s cubic-bezier(.65,0,.35,1),border-color .3s cubic-bezier(.65,0,.35,1),
    background-color .3s cubic-bezier(.65,0,.35,1),box-shadow .3s cubic-bezier(.65,0,.35,1),opacity .3s cubic-bezier(.65,0,.35,1)}
.cdghost>*{margin:0!important;width:100%!important;height:100%;box-sizing:border-box;opacity:1!important;
  border-left:4px solid var(--gc)!important;background:color-mix(in srgb,var(--gc) 16%,var(--p2,var(--page)))!important;
  transition:border-color .3s cubic-bezier(.65,0,.35,1),background-color .3s cubic-bezier(.65,0,.35,1)}
.cdghost.lift{rotate:-3deg;scale:1.03}
.cdghost.into{box-shadow:0 0 0 2px var(--gc),0 0 18px color-mix(in srgb,var(--gc) 45%,transparent),0 10px 26px rgba(0,0,0,.45)}
.cdghost.landing{transition:translate .34s cubic-bezier(.65,0,.35,1),rotate .34s cubic-bezier(.65,0,.35,1),scale .34s cubic-bezier(.65,0,.35,1),opacity .34s cubic-bezier(.65,0,.35,1);
  rotate:0deg;scale:.96;opacity:0}
.cdsrc{opacity:.32;outline:1px dashed color-mix(in srgb,var(--text) 30%,transparent);outline-offset:-1px;transition:opacity .2s cubic-bezier(.65,0,.35,1)}
.mb .cdtarget,.board .cdtarget{box-shadow:0 0 0 2px var(--fc,var(--a1)),inset 0 -3px 0 var(--fc,var(--a1))!important;opacity:1!important;
  transition:box-shadow .2s cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){ .cdghost,.cdghost.landing{transition:none} .cdghost.lift{rotate:0deg;scale:1} }
.cdghost.held{rotate:0deg;scale:1}
/* a column lights up and fades back smoothly while a card is carried over it */
.mb .c,.board .col{transition:background-color .22s cubic-bezier(.65,0,.35,1),outline-color .22s cubic-bezier(.65,0,.35,1);outline:1px dashed transparent}
.cdghost.landing.handover{opacity:1}

/* ── v34 · the Team map's zoom hint ── */
.tmzhint{position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:none;opacity:0;z-index:4;
  padding:10px 16px;font:500 calc(16px*var(--ts,1))/1.2 var(--disp);color:var(--text);background:color-mix(in srgb,var(--page) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);backdrop-filter:blur(6px)}
/* lines into a family's tasks wear that family's colour */
.tmsp.famc{stroke:color-mix(in srgb,var(--fc) 55%,transparent)}

/* ── v34 · the edge between two widgets ── */
.wgx{position:absolute;top:0;bottom:0;right:0;width:10px;z-index:6;padding:0;border:0;background:none;cursor:col-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center}
.wgx i{display:block;width:2px;height:min(64px,40%);border-radius:2px;background:var(--a1);opacity:0;
  transition:opacity .2s cubic-bezier(.65,0,.35,1),height .2s cubic-bezier(.65,0,.35,1)}
.wgx:hover i,.wgx:focus-visible i,.wgt.wrxing>.wgx i{opacity:.9;height:min(120px,70%)}
.wgx:focus-visible{outline:none}
.wgx[data-cols]::after{content:attr(data-cols);position:absolute;top:50%;right:14px;translate:0 -50%;white-space:nowrap;
  padding:4px 7px;font:500 calc(14px*var(--ts,1))/1 var(--mono);color:var(--text);background:color-mix(in srgb,var(--page) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--a1) 45%,transparent)}
:root[data-rx] body,:root[data-rx] body *{cursor:col-resize!important;user-select:none}
.wgt.wrxing{z-index:5}
.wgt.wrxsettle{transition:margin .24s cubic-bezier(.65,0,.35,1)}

/* ── v35 · moving widgets ── */
.wgt>.wh{cursor:grab}
.wgt>.wh button{cursor:pointer}
body.wdragging,body.wdragging *{cursor:grabbing!important;user-select:none}
.wgt.wdsrc{opacity:.35;outline:1px dashed color-mix(in srgb,var(--a1) 60%,transparent);outline-offset:-1px;transition:opacity .2s cubic-bezier(.65,0,.35,1)}
.wdghost{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:flex;align-items:center;gap:10px;padding:12px 16px;min-width:220px;
  background:color-mix(in srgb,var(--p1,var(--page)) 94%,transparent);border:1px solid var(--a1);box-shadow:0 14px 34px rgba(0,0,0,.5);
  color:var(--text);font:600 calc(16px*var(--ts,1))/1.2 var(--disp);transition:rotate .2s cubic-bezier(.65,0,.35,1),scale .2s cubic-bezier(.65,0,.35,1)}
.wdghost.lift{rotate:-2deg;scale:1.02}
.wdghost s{text-decoration:none;font:400 calc(13.5px*var(--ts,1))/1.2 var(--mono);color:var(--muted);margin-left:auto}
.wdbar{position:fixed;z-index:89;pointer-events:none;opacity:0;background:var(--a1);border-radius:3px;box-shadow:0 0 14px var(--a1);
  transition:left .16s cubic-bezier(.65,0,.35,1),top .16s cubic-bezier(.65,0,.35,1),width .16s cubic-bezier(.65,0,.35,1),height .16s cubic-bezier(.65,0,.35,1),opacity .16s}
.shelf [data-wtoggle]{cursor:grab}
@media (prefers-reduced-motion:reduce){ .wdghost,.wdbar{transition:none} }

/* ── v35 · the Team map's tools, down the left side of the map ── */
.tmstage{position:relative}
.tmtools{position:absolute;left:8px;top:8px;z-index:5;display:flex;flex-direction:column;gap:4px;padding:5px;
  background:color-mix(in srgb,var(--page) 82%,transparent);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);backdrop-filter:blur(6px)}
.tmtools .tmzoom{display:flex;flex-direction:column;gap:4px}
.tmtools .fbtn,.tmtools .tmflyb{width:32px;min-width:32px;height:32px;min-height:32px;padding:0;display:grid;place-items:center}
.tmtools [data-tmzoom="fit"]{font-size:calc(12.5px*var(--ts,1));letter-spacing:.04em}
.tmtools [data-tmtidy]{font-size:calc(12.5px*var(--ts,1));letter-spacing:.02em}
.tmflyb{border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--text);cursor:pointer}
.tmflyb svg{width:20px;height:20px} .tmflyb .tmauto{font:600 calc(14px*var(--ts,1))/1 var(--mono)}
.tmflyb:hover,.tmflyb:focus-visible{border-color:var(--a1)}
.tmfly{position:relative}
.tmflyp{position:absolute;left:calc(100% + 8px);top:-6px;display:flex;gap:4px;padding:6px;white-space:nowrap;
  background:color-mix(in srgb,var(--page) 94%,transparent);border:1px solid color-mix(in srgb,var(--a1) 40%,transparent);box-shadow:0 10px 26px rgba(0,0,0,.4);
  opacity:0;translate:-6px 0;pointer-events:none;transition:opacity .18s cubic-bezier(.65,0,.35,1),translate .18s cubic-bezier(.65,0,.35,1)}
.tmfly:hover>.tmflyp,.tmfly:focus-within>.tmflyp{opacity:1;translate:0 0;pointer-events:auto}
.tmflyp .tmstyles{display:flex;gap:4px}
@media (prefers-reduced-motion:reduce){ .tmflyp{transition:none} }

/* ── v35 · the Team map's view fills its widget, however tall it is ── */
.wgt[data-wgt="teammap"]>.wb{display:flex;flex-direction:column;container-type:inline-size}
.wgt[data-wgt="teammap"] .tmx{flex:1 1 auto;min-height:0}
.wgt[data-wgt="teammap"] .tmbody{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)}
.wgt[data-wgt="teammap"] .tmstage{display:flex;min-height:0}
.wgt[data-wgt="teammap"] .tmmap{flex:1 1 auto;width:auto;height:auto;aspect-ratio:auto;max-height:none;min-height:420px}
@media (min-width:901px){
  /* a widget of its own natural height gives the map the panel's old height; a sized one shares out what it has */
  .wgt[data-wgt="teammap"]:not([data-h]):not([style*="height"]) .tmbody{flex:none;height:min(860px,calc(100vh - 190px))}
  .wgt[data-wgt="teammap"] .tmside{height:auto;min-height:0} }
/* in a narrow column the side panel goes under the map */
@container (max-width:720px){
  .wgt[data-wgt="teammap"] .tmbody{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;height:auto!important}
  .wgt[data-wgt="teammap"] .tmsplit{display:none}
  .wgt[data-wgt="teammap"] .tmmap{min-height:380px}
  .wgt[data-wgt="teammap"] .tmside{max-height:520px} }

/* ── v35 · while a widget is carried, every widget folds to its title bar ── */
body.wfold #spc .wgt,#spc .wgt.wunf{min-height:0!important;overflow:hidden}
body.wfold #spc .wgt .wgx{display:none}
#spc .wgt.wanim{transition:height .32s cubic-bezier(.65,0,.35,1)!important}
@media (prefers-reduced-motion:reduce){ #spc .wgt.wanim{transition:none!important} }
/* widgets keep their own height instead of stretching to the tallest in the row */
.spc{align-items:start}

/* ── v35 · dashboard layouts, page width and Quiet look ── */
/* Page width: the dashboard and its heading stay in a centred column */
:root[data-mode="space"]:not([data-pw="full"]) #mid{justify-self:center;width:min(100%,var(--pagew,1360px))}
.wgt>.wh{cursor:grab}

/* Work and rail: the work on the left, small widgets stacked on the right */
#spc[data-lay="rail"]{grid-template-columns:minmax(0,1fr) clamp(300px,30%,420px)}
.ybstk{display:flex;flex-direction:column;gap:inherit;min-width:0;min-height:140px}
.ybstk>.wgt{width:100%;margin:0!important}
body.wdragging .ybstk:empty{outline:1px dashed color-mix(in srgb,var(--a1) 50%,transparent);outline-offset:-1px}
#spc:is([data-lay="rail"],[data-free]) :is(.wgx,[data-wsize]){display:none}
@media(max-width:1000px){ #spc[data-lay="rail"]{grid-template-columns:minmax(0,1fr)} }

/* Free canvas: each widget at its own spot; the others make room */
#spc[data-free]{display:block;position:relative;overflow:auto}
#spc[data-free]::after{content:'';position:absolute;left:var(--freew,0);top:var(--freeh,0);width:1px;height:1px}
#spc[data-free]>.wgt{position:absolute;margin:0;
  transition:left .26s cubic-bezier(.65,0,.35,1),top .26s cubic-bezier(.65,0,.35,1),width .26s cubic-bezier(.65,0,.35,1),height .26s cubic-bezier(.65,0,.35,1)}
#spc[data-free]>.wgt.fmoving{transition:none;z-index:30;box-shadow:0 18px 50px rgba(0,0,0,.55);outline:1px solid var(--a1)}
#spc[data-free] .wgz{display:none}
.fgrip{display:none}
#spc[data-free] .fgrip{display:block;position:absolute;right:0;bottom:0;width:22px;height:22px;z-index:8;cursor:nwse-resize;border:0;padding:0;background:
  linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--a1) 70%,transparent) 50% 58%,transparent 58% 70%,color-mix(in srgb,var(--a1) 70%,transparent) 70% 78%,transparent 78%)}
.fghost{position:absolute;z-index:2;border:1px dashed var(--a1);background:color-mix(in srgb,var(--a1) 8%,transparent);pointer-events:none;
  transition:left .12s cubic-bezier(.65,0,.35,1),top .12s cubic-bezier(.65,0,.35,1),width .12s cubic-bezier(.65,0,.35,1),height .12s cubic-bezier(.65,0,.35,1)}
body.fdragging,body.fdragging *{cursor:grabbing!important;user-select:none}
@media (prefers-reduced-motion:reduce){ #spc[data-free]>.wgt,.fghost{transition:none} }

/* Quiet look: the frame steps back so the work can come forward */
:root.quiet :is(.scan,.grain,.ghost,.halo,#fx,.hud .bars,.hud .code,.hud .edge,.hud .ticks,.hud .tri,.stars,.orb,.neb,.band){display:none!important}
:root.quiet :is(#scene,#imgwrap,#vidwrap){filter:saturate(.55) brightness(.42) blur(2px)}
:root.quiet .spc{gap:22px;padding-top:6px}
:root.quiet #spc .wgt{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:color-mix(in srgb,var(--p1) 95%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.22);clip-path:none;border-radius:10px;overflow:hidden}
:root.quiet #spc .wh{border-bottom-color:transparent;background:transparent}
:root.quiet #spc .wh h3{text-transform:none;letter-spacing:.005em;font-size:calc(17px*var(--ts,1));font-weight:600;color:var(--text)}
:root.quiet #spc .wh :is(.gr,[data-wsize],.wpin:not(.on)){opacity:0;transition:opacity .2s}
:root.quiet #spc .wgt:is(:hover,:focus-within) .wh :is(.gr,[data-wsize],.wpin){opacity:1}
:root.quiet #spc .wb{padding:6px 18px 18px}


/* ══════════════ v35 · readability ══════════════ */
/* click targets of at least 24 by 24 (WCAG 2.2, 2.5.8) */
.wh button,.wbp,.kindsw button,.tmsty,.tmzoom .fbtn,.chip2,.bot button{min-height:28px;min-width:28px}
.wh{min-height:44px}
.fbtn{min-height:30px}
/* counts that were too faint to read on light skins */
.mb .t .kc,.card .kct{color:var(--text)!important;opacity:1;border-color:color-mix(in srgb,var(--fc,var(--a1)) 60%,transparent)!important}
.mb .c>h4 s{color:var(--text);opacity:.85}
.wbp s{opacity:1}
/* task names in the readable face, with room to breathe */
.mb .t{padding:9px 11px;line-height:1.35}
/* panels firm enough that a photo behind them never fights the text */
.wgt{background:color-mix(in srgb,var(--p1) 90%,transparent)}

/* ── v37 · page width by hand: a grip on each side of the dashboard ── */
.pwgrip{display:none;position:absolute;top:0;bottom:0;width:16px;z-index:6;padding:0;border:0;background:none;cursor:ew-resize;touch-action:none;align-items:center;justify-content:center}
:root[data-mode="space"] .pwgrip{display:flex}
.pwgrip.l{left:-22px} .pwgrip.r{right:-22px}
.pwgrip i{display:block;width:3px;height:64px;border-radius:3px;background:var(--a1);opacity:0;transition:opacity .2s cubic-bezier(.65,0,.35,1),height .2s cubic-bezier(.65,0,.35,1)}
#mid:hover>.pwgrip i{opacity:.3}
.pwgrip:hover i,.pwgrip:focus-visible i,body.pwdragging .pwgrip i{opacity:1;height:160px}
.pwgrip:focus-visible{outline:none}
.pwruler{position:fixed;z-index:60;height:30px;pointer-events:none;background:color-mix(in srgb,var(--page) 90%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 20%,transparent);backdrop-filter:blur(6px);
  animation:pwIn .22s cubic-bezier(.65,0,.35,1)}
.pwruler svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pwruler line{stroke:color-mix(in srgb,var(--text) 40%,transparent);stroke-width:1}
.pwruler line.mj{stroke:color-mix(in srgb,var(--text) 80%,transparent)}
.pwruler text{fill:var(--muted);font:500 10px var(--mono)}
.pwruler .ps line{stroke:var(--a1);stroke-width:2}
.pwshade{position:fixed;z-index:59;pointer-events:none;width:0;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--page) 72%,transparent) 0 8px,color-mix(in srgb,var(--page) 58%,transparent) 8px 16px)}
.pwmark{position:fixed;z-index:61;width:2px;pointer-events:none;background:var(--a1);box-shadow:0 0 12px var(--a1)}
.pwread{position:fixed;z-index:62;pointer-events:none;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:var(--p1);border:1px solid var(--a1);
  color:var(--text);font:600 calc(13px*var(--ts,1))/1 var(--disp);box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap;transition:background .15s,color .15s}
.pwread.snap{background:var(--a1);color:var(--page)}
body.pwdragging,body.pwdragging *{cursor:ew-resize!important;user-select:none}
@keyframes pwIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .pwruler{animation:none} .pwgrip i{transition:none} }
@media (max-width:1000px){ :root[data-mode="space"] .pwgrip{display:none} }

/* ── v38 · one colour per family, everywhere ── */
.ti.famc{border-left:3px solid var(--fc);background:color-mix(in srgb,var(--fc) 7%,color-mix(in srgb,var(--p1) 70%,transparent))}
.cev.famc{border-left:3px solid var(--fc);background:color-mix(in srgb,var(--fc) 14%,color-mix(in srgb,var(--p2) 92%,transparent))}
tr.famc>td.ttl{box-shadow:inset 3px 0 0 var(--fc)}
.rw.famc .lb{box-shadow:inset 3px 0 0 var(--fc);padding-left:8px}
.rw.famc .br{background:color-mix(in srgb,var(--fc) 60%,transparent);border-color:var(--fc)}
.rw.famc .br:hover{background:var(--fc)}
.wl .r.famc,.trow.famc{box-shadow:inset 3px 0 0 var(--fc);padding-left:10px}
.nx.famc>.t{box-shadow:inset 3px 0 0 var(--fc);padding-left:12px}
.tml li.famc{box-shadow:inset 3px 0 0 var(--fc)}
.tdk.famc{box-shadow:inset 3px 0 0 var(--fc)}

/* ── v38 · breathing room between the dashboard's heading row and its widgets ── */
:root[data-mode="space"] #spc:not([data-free]){padding-top:18px}

/* ── v38 · the Team map runs on under its side panel, which turns to frosted glass ── */
.wgt[data-wgt="teammap"] .tmmap{overflow:visible}
.wgt[data-wgt="teammap"] .tmbody{clip-path:inset(0 0 -80px 0)}
.wgt[data-wgt="teammap"] .tmside{position:relative;z-index:2;
  background:color-mix(in srgb,var(--p1) 58%,transparent);
  backdrop-filter:blur(9px) saturate(1.25);-webkit-backdrop-filter:blur(9px) saturate(1.25);
  border-left:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  box-shadow:-18px 0 40px -24px rgba(0,0,0,.6)}
.wgt[data-wgt="teammap"] .tml li{background:color-mix(in srgb,var(--p2) 55%,transparent)}
@container (max-width:720px){ .wgt[data-wgt="teammap"] .tmbody{clip-path:none} .wgt[data-wgt="teammap"] .tmmap{overflow:hidden} }

/* ── v38 · dropping beside a widget: the half it will take lights up ── */
.wdbar.half{background:color-mix(in srgb,var(--a1) 16%,transparent)!important;outline:2px dashed var(--a1);outline-offset:-2px;box-shadow:none!important;border-radius:4px}

/* ── v38 · fold a family on the board ── */
.fold{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:20px;height:20px;margin:0 5px 0 -3px;vertical-align:-4px;border-radius:4px;cursor:pointer;
  color:var(--fc,var(--muted));transition:background .15s}
.fold svg{transition:transform .22s cubic-bezier(.65,0,.35,1)}
.fold[aria-expanded="false"] svg{transform:rotate(-90deg)}
.fold:hover,.fold:focus-visible{background:color-mix(in srgb,var(--text) 12%,transparent)}
.fold:focus-visible{outline:2px solid var(--a1);outline-offset:1px}
@media (prefers-reduced-motion:reduce){ .fold svg{transition:none} }

/* ── v38 · the Calendar tab is the Marketing year, a full page of it ── */
.calmy{padding:4px 2px 24px}
.calmy>.wb{padding:0;overflow:visible}
.calmy .my-day{min-height:118px}
.calmy .my-day .cev{display:block;margin-top:3px;font-size:calc(12px*var(--ts,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calmy .my-day.over{outline:2px dashed var(--a1);outline-offset:-2px}

/* ── v40 · the main bar can sit on the left, the right or the bottom ── */
:root[data-bar="left"] #ui{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(18px,1.6vw,28px)}
:root[data-bar="right"] #ui{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;column-gap:clamp(18px,1.6vw,28px)}
:root[data-bar="bottom"] #ui{grid-template-rows:minmax(0,1fr) auto auto}
:root[data-bar="left"] #nav{grid-column:1;grid-row:1 / span 2}
:root[data-bar="left"] #mid,:root[data-bar="left"] #bot{grid-column:2}
:root[data-bar="right"] #nav{grid-column:2;grid-row:1 / span 2}
:root[data-bar="right"] #mid,:root[data-bar="right"] #bot{grid-column:1}
:root[data-bar="left"] #mid,:root[data-bar="right"] #mid{grid-row:1}
:root[data-bar="left"] #bot,:root[data-bar="right"] #bot{grid-row:2}
:root[data-bar="bottom"] #mid{grid-row:1}
:root[data-bar="bottom"] #nav{grid-row:2;padding-top:10px;margin-top:6px;border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
:root[data-bar="bottom"] #bot{grid-row:3}
/* standing on its side, the bar lists its links down a column */
:root:is([data-bar="left"],[data-bar="right"]) #nav{flex-direction:column;align-items:flex-start;gap:12px;width:clamp(140px,10vw,180px);min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 0}
:root[data-bar="left"] #nav{padding-right:14px;border-right:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
:root[data-bar="right"] #nav{padding-left:14px;border-left:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
:root:is([data-bar="left"],[data-bar="right"]) #nav .crumb{display:none}
:root:is([data-bar="left"],[data-bar="right"]) #nav .here{white-space:normal;line-height:1.3;margin:4px 0 2px}
:root:is([data-bar="left"],[data-bar="right"]) #nav .sp{flex:1;min-height:12px}
:root:is([data-bar="left"],[data-bar="right"]) #nav a::after{left:-8px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
:root:is([data-bar="left"],[data-bar="right"]) #nav a:hover::after,:root:is([data-bar="left"],[data-bar="right"]) #nav a[aria-current="page"]::after{transform:scaleY(1)}
:root:is([data-bar="left"],[data-bar="right"]) #nav .pzs{flex-wrap:wrap}

/* ── v40 · zoom a dashboard in and out, like a reference board ── */
:root[data-mode="space"] #spc{zoom:var(--dz,1)}
.dzpill{position:fixed;left:50%;bottom:86px;z-index:95;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 14px;border-radius:999px;
  background:var(--p1);border:1px solid var(--a1);color:var(--text);box-shadow:0 10px 28px rgba(0,0,0,.45);font:600 calc(13px*var(--ts,1))/1 var(--disp);
  opacity:0;translate:-50% 8px;pointer-events:none;transition:opacity .2s cubic-bezier(.65,0,.35,1),translate .2s cubic-bezier(.65,0,.35,1)}
.dzpill.on{opacity:1;translate:-50% 0;pointer-events:auto}
.dzpill button{font:600 calc(12px*var(--ts,1))/1 var(--disp);padding:6px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);background:transparent;color:var(--text);cursor:pointer}
.dzpill button:hover{border-color:var(--a1)}

/* ── v40 · glide handles on the canvas's side edges ── */
.fedge{display:none}
#spc[data-free] .fedge{display:flex;align-items:center;justify-content:center;position:absolute;top:28px;bottom:28px;width:12px;z-index:8;padding:0;border:0;background:none;cursor:ew-resize;touch-action:none}
#spc[data-free] .fedge.l{left:0} #spc[data-free] .fedge.r{right:0}
#spc[data-free] .fedge i{display:block;width:3px;height:48px;border-radius:3px;background:var(--a1);opacity:0;transition:opacity .2s cubic-bezier(.65,0,.35,1),height .2s cubic-bezier(.65,0,.35,1)}
#spc[data-free] .wgt:hover>.fedge i{opacity:.35}
#spc[data-free] .fedge:hover i,#spc[data-free] .fedge:focus-visible i,#spc[data-free] .wgt.fgliding>.fedge i{opacity:1;height:120px}
#spc[data-free]>.wgt.fgliding:not(.fmoving){transition:left .26s cubic-bezier(.65,0,.35,1),width .26s cubic-bezier(.65,0,.35,1)}

/* ── v41 · text keeps its size when a dashboard zooms out, and the Team map's names zoom with the map ── */
/* v43 · text keeps its size down to 50%; below that it shrinks with the board, so it never bursts out of its widget */
:root[data-mode="space"]:not([data-zt="zoom"]) #spc{--ts:calc(var(--tsu,1) / max(var(--dz,1), .5))}
:root[data-mode="space"] #spc .tmmap{--ts:var(--tsu,1)}
body.panning,body.panning *{cursor:grabbing!important;user-select:none}

/* ── v41 · the Feel menu in a dashboard's heading ── */
.feelpop{position:absolute;right:0;top:calc(100% + 7px);z-index:9;width:min(400px,92vw);padding:12px 12px 10px;
  background:color-mix(in srgb,var(--page) 97%,transparent);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.5);animation:dropIn var(--t-sm) var(--e-out) both;display:flex;flex-direction:column;gap:8px}
.feelpop h4{margin:0 0 2px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;color:var(--muted)}
.feelpop .fp-row{display:grid;grid-template-columns:1fr 1.6fr;align-items:center;gap:10px;font:500 calc(13.5px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.feelpop select{width:100%;min-height:32px;padding:5px 8px;font:500 calc(13.5px*var(--ts,1))/1 var(--disp);color:var(--text);
  background:color-mix(in srgb,var(--p2) 85%,transparent);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:4px;cursor:pointer}
.feelpop select:focus-visible{outline:2px solid var(--a1);outline-offset:1px}
.feelpop .fp-note{margin:4px 0 0;font:400 calc(12px*var(--ts,1))/1.45 var(--disp);color:var(--muted)}

/* ── v42 · a glide handle on the canvas's bottom edges too ── */
#spc[data-free] .fedge.b{top:auto;bottom:0;left:28px;right:28px;width:auto;height:12px;cursor:ns-resize}
#spc[data-free] .fedge.b i{width:48px;height:3px}
#spc[data-free] .fedge.b:hover i,#spc[data-free] .fedge.b:focus-visible i,#spc[data-free] .wgt.fgliding>.fedge.b i{width:120px;height:3px}
#spc[data-free]>.wgt.fgliding:not(.fmoving){transition:left .26s cubic-bezier(.65,0,.35,1),width .26s cubic-bezier(.65,0,.35,1),height .26s cubic-bezier(.65,0,.35,1)}

/* ── v42 · the free canvas is an open board with a map grid that pans and zooms with it ── */
#spc[data-free]{background-color:color-mix(in srgb,var(--page) 30%,transparent)}
/* v74 · the grid on a layer under the widgets (see arrangeDash), so a smooth zoom scales it with them */
#spc[data-free]>.fgrid{position:absolute;left:0;top:0;width:var(--freew,100%);height:var(--freeh,100%);z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--text) 38%,transparent) 1.2px,transparent 1.7px),
    linear-gradient(to right,color-mix(in srgb,var(--a1) 16%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--a1) 16%,transparent) 1px,transparent 1px);
  background-size:24px 24px,240px 240px,240px 240px;background-position:-12px -12px,0 0,0 0}
#spc[data-free]::-webkit-scrollbar{width:9px;height:9px}
.fcam{position:absolute;right:14px;bottom:14px;z-index:20;display:flex;gap:4px;padding:4px;border-radius:999px;
  background:color-mix(in srgb,var(--p1) 88%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.fcam button{font:600 calc(12.5px*var(--tsu,1))/1 var(--disp);padding:7px 12px;border-radius:999px;border:0;background:transparent;color:var(--text);cursor:pointer}
.fcam button:hover,.fcam button:focus-visible{background:color-mix(in srgb,var(--a1) 18%,transparent);outline:none}

/* ── v44 · the board settles without animating, and the browser never nudges its scroll ── */
#spc[data-free]{overflow-anchor:none}
#spc[data-free].fsettling>.wgt{transition:none!important}

/* ── v45 · the docked Hako fits its Team map ── */
/* the side area is exactly the map's height: the subtasks take up to 40% and scroll, the Hako has the rest */
.wgt[data-wgt="teammap"] .tmdock{height:100%;min-height:0}
.wgt[data-wgt="teammap"] .tmdock>.tmkids{flex:0 1 auto;max-height:30%;min-height:0;overflow-y:auto;overflow-x:hidden}
.wgt[data-wgt="teammap"] .tmdock>.tmdock-hako{flex:1 1 auto;min-height:150px}
/* drawn at the dashboard's zoom, with the same rule for text as the widgets */
body.tdDock #tdHost .tdwrap{zoom:var(--dkz,1)}
:root:not([data-zt="zoom"]) body.tdDock #tdHost .tdwrap{--ts:calc(var(--tsu,1) / max(var(--dkz,1), .5))}
body.tdDock #tdHost .td .bd{overflow-x:hidden}
/* a narrow Hako tightens up: one header line, closer padding, a one-line note beside Done */
/* (a class the dock sets, so the Hako's own layout stays free of size containment, which made it flicker) */
  .dknarrow .td .hd{gap:6px;padding:10px 12px 8px}
  .dknarrow .td .hd .pj{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dknarrow .td .hd .crumb{max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dknarrow .td .hd .tdhf{display:flex;gap:2px}
  .dknarrow .td .bd{padding:10px 14px 16px}
  .dknarrow .tdft{padding:8px 12px;gap:8px;flex-wrap:nowrap}
  .dknarrow .tdft .tdnote{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:calc(12px*var(--ts,1))}
  .dknarrow .tdft.ask,.dknarrow .tdft.bad{flex-wrap:wrap} .dknarrow .tdft.ask .tdnote,.dknarrow .tdft.bad .tdnote{white-space:normal}

/* the swap copy of a docked Hako carries the same zoom and text size */
.tdghost{zoom:var(--dkz,1)}
:root:not([data-zt="zoom"]) .tdghost{--ts:calc(var(--tsu,1) / max(var(--dkz,1), .5))}

/* ── v45 · the overlap switch, on the canvas only ── */
.wh .wover{display:none}
#spc[data-free] .wh .wover{display:inline-grid;place-items:center;width:24px;height:22px;padding:0;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;border-radius:4px}
#spc[data-free] .wh .wover:hover,#spc[data-free] .wh .wover:focus-visible{color:var(--text);border-color:color-mix(in srgb,var(--text) 22%,transparent)}
#spc[data-free] .wh .wover[aria-pressed="true"]{color:var(--a1);border-color:color-mix(in srgb,var(--a1) 55%,transparent)}
#spc[data-free]>.wgt.fover{z-index:6;box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent)}

/* ── v46 · the Team map's tools read at any zoom: the strip keeps one size on
   screen, buttons are as wide as their words, and the style menus are labelled lists ── */
:root:not([data-zt="zoom"]) .tmtools{zoom:calc(1 / max(var(--dz,1), .5));--ts:var(--tsu,1)}
.tmtools{align-items:stretch}
.tmtools .fbtn,.tmtools .tmflyb{width:auto;min-width:34px;height:34px;min-height:34px;padding:0 8px}
.tmtools [data-tmzoom="fit"],.tmtools [data-tmtidy]{font:600 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tmtools .tmzoom .fbtn{font-size:calc(16px*var(--ts,1))}
.tmflyp{flex-direction:column;align-items:stretch;gap:6px;padding:8px;min-width:170px}
.tmflyh{font:600 calc(11px*var(--ts,1))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.tmflyp .tmstyles{flex-direction:column;gap:2px;margin:0}
.tmflyp .tmsty{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:4px 10px 4px 6px;text-align:left;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer}
.tmflyp .tmsty svg{width:22px;height:22px;flex:none}
.tmflyp .tmsty .tmauto{width:22px;flex:none;text-align:center;font:600 calc(13px*var(--ts,1))/1 var(--mono)}
.tmflyp .tmsty .tmsn{font:500 calc(13.5px*var(--ts,1))/1.2 var(--disp)}
.tmflyp .tmsty:hover,.tmflyp .tmsty:focus-visible{background:color-mix(in srgb,var(--a1) 14%,transparent);outline:none}
.tmflyp .tmsty.on{border-color:color-mix(in srgb,var(--a1) 60%,transparent);background:color-mix(in srgb,var(--a1) 10%,transparent)}
.tmtools .tmfly>.tmflyb{width:100%}
/* ── v46 · a family's levels read apart: the top task's row is the strongest
   wash of its colour and each level down is paler (the colour itself is shaded in famShade) ── */
.mb .t.fpar{background:color-mix(in srgb,var(--fc,var(--a1)) calc(38% - var(--kd,0) * 13%),color-mix(in srgb,var(--p2) 88%,transparent))}
.mb .t.fpar,.mb .t.fkid{border-left-width:calc(5px - var(--kd,0) * 1px)}
.card.fpar{background:color-mix(in srgb,var(--fc,var(--a1)) calc(34% - var(--kd,0) * 11%),color-mix(in srgb,var(--p2) 92%,transparent))}

/* ── v46 · Marketing year: the beat panel folds to one line, beats carry tags, and a filter narrows the year ── */
.my-q{flex:1 1 200px;max-width:320px;display:flex}
.my-q input{width:100%;min-height:30px;padding:4px 10px;font:inherit;font-size:calc(13px*var(--ts,1));color:var(--text);background:color-mix(in srgb,var(--page) 70%,transparent);border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.my-q input:focus-visible{outline:none;border-color:var(--a1)}
.my-qline{margin:-2px 0 8px;font-size:calc(12.5px*var(--ts,1));color:var(--muted)}
.my-fold{order:-1;width:26px;height:26px;padding:0;display:inline-grid;place-items:center;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--text);cursor:pointer;
  font:600 calc(16px*var(--ts,1))/1 var(--mono);rotate:90deg;transition:rotate .18s cubic-bezier(.65,0,.35,1);align-self:center}
.my-fold:hover,.my-fold:focus-visible{border-color:var(--kc,var(--a1));outline:none}
.my-dh{align-items:center}
.my-dh .fx{margin-left:auto}
.my-shut .my-fold{rotate:0deg}
.my-shut{gap:0;padding-top:6px;padding-bottom:6px}
.my-shut>:not(.my-dh){display:none!important}
.my-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.my-tagsm{display:inline-flex;flex-wrap:wrap;gap:4px}
.my-tagw{display:inline-flex;align-items:center}
.my-tag{min-height:24px;padding:2px 9px;border:1px solid color-mix(in srgb,var(--kc,var(--a1)) 45%,transparent);background:color-mix(in srgb,var(--kc,var(--a1)) 12%,transparent);
  color:var(--text);font:500 calc(12px*var(--ts,1))/1.2 var(--disp);cursor:pointer;border-radius:999px}
.my-tag:hover,.my-tag:focus-visible{background:color-mix(in srgb,var(--kc,var(--a1)) 26%,transparent);outline:none}
.my-tagw .my-tag{border-radius:999px 0 0 999px;border-right:0}
.my-tagx{min-height:24px;padding:0 7px;border:1px solid color-mix(in srgb,var(--kc,var(--a1)) 45%,transparent);border-radius:0 999px 999px 0;background:transparent;color:var(--muted)}
.my-tagadd input{min-height:26px;width:190px;padding:2px 8px;font:inherit;font-size:calc(12.5px*var(--ts,1));color:var(--text);background:transparent;border:1px dashed color-mix(in srgb,var(--text) 25%,transparent)}
.my-tagadd input:focus-visible{outline:none;border-style:solid;border-color:var(--kc,var(--a1))}
.my-add input[name="g"]{flex:1 1 150px;min-width:0}
.my-addbar{display:flex;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){ .my-fold{transition:none} }

/* ── v46 · the Hako in sections: each part in its own box with its own heading, any of them folds ── */
.td .tdtop{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.td .tdsec{margin:0 0 10px;padding:10px 12px 12px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  background:color-mix(in srgb,var(--text) 3.5%,transparent);border-left:3px solid color-mix(in srgb,var(--pc,var(--a1)) 55%,transparent)}
.td .tdsec>h3{margin:0 0 10px;display:flex;align-items:center}
.td .tdsec>h3:first-child{margin-top:0}
.td .tdsec.shut{padding-bottom:10px}
.td .tdsec.shut>h3{margin-bottom:0}
.td .tdsec.shut>.tdsb{display:none}
.td .tdsf{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;outline:none;min-height:22px;color:inherit}
.td .tdsf:hover,.td .tdsf:focus-visible{color:var(--text)}
.td .tdsf:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--a1) 60%,transparent)}
.td .tdsc{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .18s cubic-bezier(.65,0,.35,1),translate .18s cubic-bezier(.65,0,.35,1)}
.td .tdsec.shut .tdsc{rotate:-45deg;translate:0 0}
.td .tdsb>.frow{margin:0}
.td .tdsb>.notes{width:100%;margin:0}
.td .tdsb>.miniadd,.td .tdsb .miniadd{margin-top:8px}
.td .tdsb>p.none{margin:0 0 4px;color:var(--muted);font-size:calc(12.5px*var(--ts,1))}
.td .tdsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;counter-reset:st}
.td .tdsteps li{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.td .tdsteps li .cin.t{flex:1 1 auto;min-width:0;background:transparent;border:1px solid transparent;color:var(--text);font:inherit;font-size:calc(14px*var(--ts,1));padding:4px 6px}
.td .tdsteps li .cin.t:hover{border-color:color-mix(in srgb,var(--text) 14%,transparent)}
.td .tdsteps li .cin.t:focus-visible{outline:none;border-color:var(--a1)}
.td .tdsteps li.done .cin.t{text-decoration:line-through;color:var(--muted)}
.td .tdsteps li .mini.danger{opacity:.45}
.td .tdsteps li:hover .mini.danger,.td .tdsteps li:focus-within .mini.danger{opacity:1}
@media (prefers-reduced-motion:reduce){ .td .tdsc{transition:none} }
.td .tdsteps li .ck{width:16px;height:16px;flex:0 0 auto;cursor:pointer;padding:0;display:grid;place-items:center;background:none;position:relative;
  border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent);color:var(--page)}
.td .tdsteps li.done .ck{background:var(--a1);border-color:var(--a1)}
.td .tdsteps li .ck:focus-visible{outline:2px solid color-mix(in srgb,var(--a1) 70%,transparent);outline-offset:2px}

/* ── v47 · the onion skin: a see-through sheet of your own notes over the Hako ── */
.td{position:relative}
.td .onionb{display:inline-grid;place-items:center;width:28px;height:26px;padding:0;color:var(--muted)}
.td .onionb.has{color:var(--text)}
.td .onionb.on{color:var(--page);background:var(--oc,#C4B5FD);border-color:var(--oc,#C4B5FD)}
.td.onion-on>.bd{opacity:.32;filter:saturate(.6);pointer-events:none;user-select:none;transition:opacity .22s cubic-bezier(.65,0,.35,1)}
.td>.onion{position:absolute;left:10px;right:10px;top:var(--onT,58px);bottom:62px;z-index:4;display:flex;flex-direction:column;gap:8px;padding:12px 14px;overflow:auto;
  --oc:#C4B5FD;background:color-mix(in srgb,var(--oc) 12%,color-mix(in srgb,var(--page) 80%,transparent));backdrop-filter:blur(3px);
  border:1px solid color-mix(in srgb,var(--oc) 55%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.35);animation:onionIn .26s cubic-bezier(.16,1,.3,1) both}
@keyframes onionIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.onion .onh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.onion .ong{color:var(--oc);display:inline-grid}
.onion .onh b{font:600 calc(13px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.onion .ons{font-size:calc(12px*var(--ts,1));color:var(--muted)}
.onion .onsay{margin-left:auto;font-size:calc(11.5px*var(--ts,1));color:var(--muted)}
.onion .onbody{min-height:140px;flex:1 0 auto;resize:vertical;padding:10px 12px;font:inherit;font-size:calc(14.5px*var(--ts,1));line-height:1.5;color:var(--text);
  background:color-mix(in srgb,var(--page) 55%,transparent);border:1px dashed color-mix(in srgb,var(--oc) 50%,transparent)}
.onion .onbody:focus-visible{outline:none;border-style:solid;border-color:var(--oc)}
.onion h4{margin:4px 0 0;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.onion h4 s{text-decoration:none;color:var(--oc);margin-left:6px}
.onlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.onlist li{display:flex;align-items:center;gap:8px;min-height:30px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.onlist li span{flex:1;min-width:0}
.onlist li.done span{text-decoration:line-through;color:var(--muted)}
.onlist .ck{width:16px;height:16px;flex:0 0 auto;padding:0;position:relative;background:none;cursor:pointer;border:1.5px solid color-mix(in srgb,var(--text) 40%,transparent)}
.onlist li.done .ck{background:var(--oc,var(--a1));border-color:var(--oc,var(--a1))}
.onion .onfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:auto}
.oncols,.nwcols{display:inline-flex;gap:5px;align-items:center}
.oncols button,.nwcols button{width:16px;height:16px;padding:0;border-radius:50%;background:var(--k,transparent);border:1px solid color-mix(in srgb,var(--text) 30%,transparent);cursor:pointer;color:var(--muted);font-size:11px;line-height:1}
.oncols button[aria-pressed="true"],.nwcols button[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:1px}
@media (prefers-reduced-motion:reduce){ .td>.onion{animation:none} .td.onion-on>.bd{transition:none} }
/* your own ghost on cards and map nodes where you left an onion note; nobody else's screen has it */
.card.ghost,.mb .t.ghost{position:relative}
.card.ghost::after,.mb .t.ghost::after{content:'';position:absolute;right:6px;top:6px;width:9px;height:11px;border-radius:5px 5px 2px 2px;
  background:color-mix(in srgb,#C4B5FD 85%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--page) 70%,transparent);pointer-events:none}
.tmt.ghost .tmg{filter:drop-shadow(0 0 4px color-mix(in srgb,#C4B5FD 80%,transparent))}

/* ── v47 · the Notes widget: one widget, seven kinds of notes ── */
.nw{display:flex;flex-direction:column;gap:10px;min-height:0}
.nwmodes{display:flex;flex-wrap:wrap;gap:4px}
.nwmodes button{min-height:30px;padding:4px 10px;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:transparent;color:var(--muted);cursor:pointer;
  font:600 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.nwmodes button:hover,.nwmodes button:focus-visible{color:var(--text);border-color:var(--a1);outline:none}
.nwmodes button[aria-selected="true"]{color:var(--page);background:var(--a1);border-color:var(--a1)}
.nwbody{display:flex;flex-direction:column;gap:10px;min-height:0}
.nwbar{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.nwbar input[type="search"]{flex:1 1 200px;max-width:340px;min-height:30px;padding:4px 10px;font:inherit;color:var(--text);background:color-mix(in srgb,var(--page) 70%,transparent);border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.nwhelp{margin:0;font-size:calc(12.5px*var(--ts,1));color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nwsay{font-size:calc(11.5px*var(--ts,1));color:var(--muted);margin-left:auto}
.nwrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nwbig{width:100%;min-height:220px;resize:vertical;padding:12px 14px;font:inherit;font-size:calc(14.5px*var(--ts,1));line-height:1.55;color:var(--text);
  background:color-mix(in srgb,var(--page) 60%,transparent);border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.nwbig:focus-visible{outline:none;border-color:var(--a1)}
.nwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.nwst{display:flex;flex-direction:column;min-height:170px;background:color-mix(in srgb,var(--nc) 24%,var(--p2,var(--page)));border:1px solid color-mix(in srgb,var(--nc) 55%,transparent);border-top:4px solid var(--nc)}
.nwst.pin{box-shadow:0 0 0 1px var(--nc),0 10px 24px rgba(0,0,0,.28)}
.nwst textarea{flex:1;min-height:110px;resize:none;padding:10px 12px;font:inherit;font-size:calc(14px*var(--ts,1));line-height:1.45;color:var(--text);background:transparent;border:0}
.nwst textarea:focus-visible{outline:none;background:color-mix(in srgb,var(--page) 25%,transparent)}
.nwft{display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid color-mix(in srgb,var(--nc) 35%,transparent)}
.nwft .mini.danger{margin-left:auto}
.nwpin{width:24px;height:24px;padding:3px;display:grid;place-items:center;background:none;border:1px solid transparent;color:var(--muted);cursor:pointer}
.nwpin svg{width:14px;height:14px;fill:currentColor}
.nwpin[aria-pressed="true"]{color:var(--text);border-color:color-mix(in srgb,var(--text) 30%,transparent)}
.nwsh{min-height:22px;padding:1px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.nwsh.on{color:var(--page);background:var(--a1);border-color:var(--a1)}
.nwby{font-size:calc(11.5px*var(--ts,1));color:var(--muted)}
.nwday{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nwday h4{margin:0;font:600 calc(16px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.nwday h4 s{text-decoration:none;font:400 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--a1t);margin-left:6px}
.nwsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,260px);gap:12px}
@container (max-width:620px){ .nwsplit{grid-template-columns:1fr} }
.nwdue{padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.nwdue h5,.nwmt h5{margin:0 0 6px;font:400 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nwdue h5 s{text-decoration:none;color:var(--a1t);margin-left:6px}
.nwdue ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.nwdue li.done .lnk{text-decoration:line-through;opacity:.6}
.nwcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.nwcl,.nwmt{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:color-mix(in srgb,var(--text) 3.5%,transparent)}
.nwch{display:flex;align-items:center;gap:8px}
.nwch input{flex:1 1 auto;min-width:0;min-height:30px;padding:3px 6px;font:600 calc(15px*var(--ts,1))/1.2 var(--disp);color:var(--text);background:transparent;border:1px solid transparent}
.nwch input[type="date"]{flex:0 0 auto;font:inherit;font-size:calc(13px*var(--ts,1))}
.nwch input:hover,.nwch input:focus-visible{border-color:color-mix(in srgb,var(--text) 18%,transparent);outline:none}
.nwch s{text-decoration:none;font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--a1t)}
.nwprog{height:4px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.nwprog i{display:block;height:100%;background:var(--a1)}
.nwmt{margin-bottom:10px}
.nwatt{display:flex;flex-wrap:wrap;gap:4px}
.nwatt button{min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 22%,transparent);background:transparent;color:var(--muted);cursor:pointer}
.nwatt button[aria-pressed="true"]{color:var(--page);background:var(--a1);border-color:var(--a1)}
.nwtwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@container (max-width:620px){ .nwtwo{grid-template-columns:1fr} }
.nwtwo label{display:flex;flex-direction:column;gap:4px;font:400 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nwtwo textarea{min-height:90px;resize:vertical;padding:8px 10px;font:inherit;font-size:calc(14px*var(--ts,1));letter-spacing:normal;text-transform:none;color:var(--text);background:color-mix(in srgb,var(--page) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.nwact{display:grid;grid-template-columns:minmax(0,1fr) 130px 140px auto;gap:6px;align-items:center}
@container (max-width:620px){ .nwact{grid-template-columns:1fr 1fr} }
.nwact input,.nwact select{min-height:30px;padding:3px 8px;font:inherit;font-size:calc(13.5px*var(--ts,1));color:var(--text);background:color-mix(in srgb,var(--page) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.nwact.made input,.nwact.made select{opacity:.6}
.nwmd{padding:12px 16px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);line-height:1.55}
.nwmd h4{margin:.4em 0;font:600 calc(19px*var(--ts,1))/1.25 var(--disp)}
.nwmd h5{margin:.5em 0 .3em;font:600 calc(15.5px*var(--ts,1))/1.3 var(--disp)}
.nwmd p{margin:.35em 0}
.nwmd ul{margin:.3em 0;padding-left:1.2em}
.nwmd li.ck{list-style:none;margin-left:-1.2em}
.nwmd li.ck::before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:1.5px solid color-mix(in srgb,var(--text) 45%,transparent)}
.nwmd li.ck.on::before{background:var(--a1);border-color:var(--a1)}
.nwmd a{color:var(--a1t)}
.nwmd .none{color:var(--muted)}
.nwfeed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nwfeed li{--oc:#C4B5FD;border-left:3px solid var(--oc)}
.nwfo{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:8px 12px;background:color-mix(in srgb,var(--oc) 8%,transparent);border:1px solid color-mix(in srgb,var(--oc) 25%,transparent);border-left:0;color:var(--text);cursor:pointer}
.nwfo:hover,.nwfo:focus-visible{background:color-mix(in srgb,var(--oc) 16%,transparent);outline:none}
.nwfo b{font:600 calc(14.5px*var(--ts,1))/1.25 var(--disp)}
.nwfo span{font-size:calc(13px*var(--ts,1));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwfo em{font-style:normal;font-size:calc(11.5px*var(--ts,1));color:var(--muted)}
.wgt[data-wgt="notes"]>.wb{container-type:inline-size}
.nwft{flex-wrap:wrap;row-gap:6px}
.nwft .nwcols button{width:13px;height:13px}
/* the onion skin stays see-through: the task shows faintly under your notes */
.td>.onion{background:color-mix(in srgb,var(--oc) 10%,color-mix(in srgb,var(--page) 42%,transparent));backdrop-filter:blur(1.5px)}
.td.onion-on>.bd{opacity:.5}
.onion .onbody{background:color-mix(in srgb,var(--page) 22%,transparent);min-height:120px;flex:0 0 auto;height:200px}
.nwtwo textarea{font-family:var(--disp)}

/* ── v48 · the rich text editor, Slack's way ── */
.rtew{display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:color-mix(in srgb,var(--page) 55%,transparent);min-width:0}
.rtew:focus-within{border-color:color-mix(in srgb,var(--a1) 70%,transparent)}
.rtew.ro{border-color:transparent;background:transparent}
.rtebar,.rtefoot{display:flex;align-items:center;gap:2px;padding:4px 6px;flex-wrap:wrap}
.rtebar{border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.rtefoot{border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.rteb{width:28px;height:26px;padding:0;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:4px;font:600 calc(14px*var(--ts,1))/1 var(--disp)}
.rteb svg{width:16px;height:16px}
.rteb:hover{color:var(--text);background:color-mix(in srgb,var(--text) 10%,transparent)}
.rtesep{width:1px;height:16px;margin:0 4px;background:color-mix(in srgb,var(--text) 15%,transparent)}
.rtehint{margin-left:auto;font-size:calc(11px*var(--ts,1));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rte{min-height:90px;padding:10px 12px;outline:none;font:inherit;font-size:calc(14.5px*var(--ts,1));line-height:1.5;color:var(--text);overflow-wrap:anywhere;cursor:text}
.rte:empty::before,.rte:has(> p:only-child > br:only-child)::before{content:attr(data-ph);color:var(--muted);opacity:.8;pointer-events:none;position:absolute}
.rte{position:relative}
.rte p{margin:0 0 .35em}
.rte ul,.rte ol{margin:.2em 0 .45em;padding-left:1.5em}
.rte li{margin:.1em 0}
.rte blockquote{margin:.3em 0;padding:.1em 0 .1em .8em;border-left:3px solid color-mix(in srgb,var(--text) 35%,transparent);color:color-mix(in srgb,var(--text) 85%,transparent)}
.rte code{font:calc(13px*var(--ts,1))/1.4 var(--mono);padding:.1em .35em;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent);color:#f0a5a5}
.rte pre{margin:.35em 0;padding:.6em .8em;border-radius:4px;background:color-mix(in srgb,var(--page) 75%,#000);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);font:calc(13px*var(--ts,1))/1.45 var(--mono);white-space:pre-wrap}
.rte pre code{background:none;padding:0;color:inherit}
.rte a{color:var(--a1t);text-decoration:underline}
.rte h4{margin:.3em 0;font:600 calc(18px*var(--ts,1))/1.25 var(--disp)}
.rte h5{margin:.4em 0 .2em;font:600 calc(15.5px*var(--ts,1))/1.3 var(--disp)}
.rte li.ck{list-style:none;margin-left:-1.2em}
.rte li.ck::before{content:'';display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border:1.5px solid color-mix(in srgb,var(--text) 45%,transparent)}
.rte li.ck.on::before{background:var(--a1);border-color:var(--a1)}
.rtepop{position:fixed;z-index:99990;translate:0 -100%;display:flex;flex-wrap:wrap;gap:2px;max-width:252px;max-height:220px;overflow:auto;padding:6px;
  background:color-mix(in srgb,var(--page) 96%,transparent);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.rtepop button{width:34px;height:32px;border:0;background:transparent;font-size:18px;cursor:pointer;border-radius:4px;color:var(--text)}
.rtepop button.wide{width:100%;text-align:left;font-size:calc(13.5px*var(--ts,1));padding:0 8px}
.rtepop button:hover,.rtepop button:focus-visible{background:color-mix(in srgb,var(--a1) 18%,transparent);outline:none}
.rtepop span{padding:6px 8px;color:var(--muted);font-size:13px}
/* inside each note box */
.nwst .rtew{flex:1;border:0;background:transparent}
.nwst .rtebar{opacity:0;max-height:0;padding:0 6px;overflow:hidden;transition:opacity .15s,max-height .15s}
.nwst .rtefoot{display:none}
.nwst:focus-within .rtebar{opacity:1;max-height:40px;padding:4px 6px}
.nwst .rte{min-height:110px;padding:10px 12px}
.onion .onrte{flex:0 0 auto;background:color-mix(in srgb,var(--page) 22%,transparent);border-style:dashed;border-color:color-mix(in srgb,var(--oc) 50%,transparent)}
.onion .onrte .rte{min-height:150px;max-height:320px;overflow:auto}
.nwlab{display:flex;flex-direction:column;gap:4px;min-width:0}
.nwlab>span{font:400 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nwlab .rte{min-height:80px}
.nwsplit .rtew .rte,.nw-page .rte{min-height:220px}
.td .tdsb .rtew .rte{min-height:110px}
@media (prefers-reduced-motion:reduce){ .nwst .rtebar{transition:none} }

/* ── v49 · Due soon gathers everything with a date ── */
.wl .dueh{margin:8px 0 4px;font:400 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wl .dueh:first-child{margin-top:0}
.wl .r.dueo{cursor:pointer}
.wl .r .t em{font-style:normal;color:var(--muted);font-size:.88em;margin-left:4px}
.wl .duek{width:10px;height:10px;flex:0 0 auto;border-radius:2px;background:var(--kc,var(--a1));margin:0 3px}
.wl .duek.act{background:#C4B5FD;border-radius:50%}
.wl .duek.my-release{--kc:var(--a1)} .wl .duek.my-event{--kc:var(--a2)} .wl .duek.my-sale{--kc:var(--a3)} .wl .duek.my-moment{--kc:var(--muted)}

/* ── v49 · nothing animates where nobody can see it ── */
.tmmap.tmoff *,.tmmap.tmoff{animation-play-state:paused!important}

/* ── v50 · only the selected family's lines flow; every other line holds still,
   same colour and dash, so a map at rest draws nothing frame after frame ── */
.tmx[data-links="circuit"] .tmsub:not(.br):not(.fam0),
.tmx[data-shape="trace"] :is(.tmsp,.tmsub):not(.br):not(.fam0){animation:none}

/* ── v52 · the Widgets list by category ── */
.shelf .shcats{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0 0 8px;flex-basis:100%}
.shelf .shcats button{min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.shelf .shcats button[aria-pressed="true"]{color:var(--page);background:var(--a1);border-color:var(--a1)}
.shelf .shq{margin-left:auto;min-height:28px;min-width:160px;padding:2px 10px;font:inherit;color:var(--text);background:color-mix(in srgb,var(--page) 60%,transparent);border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.shelf .shg{flex-basis:100%;margin:10px 0 4px;font:400 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* ── v52 · game dev widgets ── */
.gdchips{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.gdchips button{min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.gdchips button[aria-pressed="true"]{color:var(--page);background:var(--a1);border-color:var(--a1)}
.gdbar2{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.gdbar2 .gdchips{flex:1 1 auto}
.gdfind{min-height:28px;padding:2px 10px;font:inherit;font-size:calc(13px*var(--ts,1));color:var(--text);background:color-mix(in srgb,var(--page) 60%,transparent);border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.gdlist{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.gdrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.gdrow.done{opacity:.6}
.gdmain{flex:1 1 220px;display:flex;gap:6px;min-width:0}
.gdmain .gdin{flex:1 1 0;min-width:0}
.gdin{min-height:28px;min-width:0;padding:2px 7px;font:inherit;font-size:calc(13px*var(--ts,1));color:var(--text);background:transparent;border:1px solid transparent}
.gdin:hover{border-color:color-mix(in srgb,var(--text) 14%,transparent)}
.gdin:focus-visible{outline:none;border-color:var(--a1);background:color-mix(in srgb,var(--page) 50%,transparent)}
.gdin.mono{font-family:var(--mono);font-size:calc(12px*var(--ts,1))}
select.gdin{background:color-mix(in srgb,var(--page) 40%,transparent)}
.gdnum{display:inline-flex;align-items:center;gap:3px;font-size:calc(11px*var(--ts,1));color:var(--muted)}
.gdnum .gdin{width:58px}
.gddate{display:inline-flex;align-items:center;gap:4px;font-size:calc(11px*var(--ts,1));color:var(--muted)}
.gddate.late .gdin{color:#ff8a8a;border-color:color-mix(in srgb,#ff8a8a 50%,transparent)}
.gdlate{color:#ff8a8a;font-weight:600}
.gdlink{font-size:calc(12.5px*var(--ts,1));color:var(--a1t)}
.gdpill{min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--text);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.gdpill.s1{border-color:color-mix(in srgb,var(--a2) 55%,transparent);background:color-mix(in srgb,var(--a2) 14%,transparent)}
.gdpill.s2{border-color:color-mix(in srgb,var(--a3) 55%,transparent);background:color-mix(in srgb,var(--a3) 14%,transparent)}
.gdpill.last{color:var(--page);background:var(--a1);border-color:var(--a1)}
.gdbar{height:6px;margin:-2px 0 10px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.gdbar i{display:block;height:100%;background:var(--a1)}
.gdbar.over i{background:#ff8a8a}
.gdshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:8px}
.gdshot{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.gdshot.done{border-color:color-mix(in srgb,var(--a1) 45%,transparent)}
.gdthumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--page) 70%,#000);color:var(--muted);font:600 calc(26px*var(--ts,1))/1 var(--mono)}
.gdthumb img{width:100%;height:100%;object-fit:cover}
.gdthumb b{position:absolute;left:6px;top:5px;font:600 calc(11px*var(--ts,1))/1 var(--mono);color:#fff;text-shadow:0 1px 3px #000}
.gdtext{min-height:52px;resize:vertical;font:inherit;font-size:calc(13.5px*var(--ts,1));line-height:1.4}
.gdft{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.gdft .fx{margin-left:auto}
.gdmv{width:24px;height:24px;padding:0;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:transparent;color:var(--text);cursor:pointer}
.gdmv:disabled{opacity:.3;cursor:default}
.gdno{font:600 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted);min-width:28px}
.gdgrid{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;overflow-x:auto}
.gdgh,.gdgr{display:grid;grid-template-columns:minmax(220px,2fr) repeat(var(--n),minmax(46px,1fr));gap:3px;align-items:center;min-width:min-content}
.gdgh span{font:400 calc(10.5px*var(--ts,1))/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gdgh span:first-child{text-align:left}
.gdga{display:flex;flex-direction:column;gap:2px;padding:4px 6px;border-left:3px solid transparent}
.gdgr.blk .gdga{border-left-color:#ff8a8a}
.gdmeta{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.gdcell{height:30px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);background:transparent;cursor:pointer;padding:0}
.gdcell.past{background:color-mix(in srgb,var(--a1) 35%,transparent)}
.gdcell.cur{background:var(--a1);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--page) 40%,transparent)}
.gdcell:hover,.gdcell:focus-visible{outline:2px solid color-mix(in srgb,var(--a1) 60%,transparent);outline-offset:-2px}
.gdflag{width:26px;height:26px;padding:0;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:transparent;color:var(--muted);cursor:pointer}
.gdflag.on{color:var(--page);background:#ff8a8a;border-color:#ff8a8a}
.gdbug{border:1px solid color-mix(in srgb,var(--text) 9%,transparent)}
.gdbug .gdrow{border:0}
.gdbug.done{opacity:.6}
.gdsev{min-width:30px;text-align:center;padding:3px 6px;border-radius:3px;font:700 calc(11px*var(--ts,1))/1 var(--mono)}
.gdsev.s1{background:#ff5d5d;color:#1a0000}.gdsev.s2{background:#ffa64d;color:#1a0d00}.gdsev.s3{background:color-mix(in srgb,var(--a1) 60%,transparent);color:var(--page)}.gdsev.s4{background:color-mix(in srgb,var(--text) 22%,transparent);color:var(--text)}
.gdexp{flex:1 1 200px;text-align:left;padding:2px 4px;background:none;border:0;cursor:pointer}
.gdexp:hover{color:var(--a1t,var(--a1))}
.gdtg{padding:2px 6px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:3px;white-space:nowrap}
.gddet{display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px;border-top:1px solid color-mix(in srgb,var(--text) 9%,transparent)}
.gddet label{display:flex;flex-direction:column;gap:4px;font:400 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gddet textarea.gdin{font-family:inherit;letter-spacing:normal;text-transform:none;border-color:color-mix(in srgb,var(--text) 14%,transparent);background:color-mix(in srgb,var(--page) 45%,transparent);resize:vertical}
.gdtwo{display:flex;flex-wrap:wrap;gap:6px}
.gdby{margin-left:auto}
.gdadd{flex-wrap:wrap}
.gdbugadd textarea{flex:1 1 100%;min-height:44px;resize:vertical;padding:6px 8px;font:inherit;color:var(--text);background:color-mix(in srgb,var(--page) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent)}

/* ── v52 · Theme is a dropdown: the old drawer opens under the top bar like a menu,
   and the layout settings that were Feel sit in its first tab ── */
.drawer.thpop{top:64px;right:16px;bottom:auto;width:min(440px,calc(100% - 32px));max-height:calc(100% - 88px);
  border:1.5px solid color-mix(in srgb,var(--a1) 70%,transparent);border-radius:6px;box-shadow:0 22px 60px rgba(0,0,0,.55);
  animation:thIn .2s cubic-bezier(.16,1,.3,1) both}
@keyframes thIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.drawer.thpop .dh{padding:12px 16px}
.drawer.thpop .tabs{flex-wrap:wrap}
.drawer .feelpop.fp-in{position:static;width:auto;padding:14px 16px;border:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;gap:10px}
.drawer .feelpop.fp-in .fp-row{display:grid;grid-template-columns:1fr 1.6fr;align-items:center;gap:10px;font:500 calc(13.5px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.drawer .feelpop.fp-in select{width:100%;min-height:32px;padding:5px 8px;font:500 calc(13.5px*var(--ts,1))/1 var(--disp);color:var(--text);background:color-mix(in srgb,var(--page) 70%,transparent);border:1px solid color-mix(in srgb,var(--text) 22%,transparent)}
.drawer .feelpop.fp-in .fp-note{margin:4px 0 0;font:400 calc(12px*var(--ts,1))/1.45 var(--disp);color:var(--muted)}
#drawerHost .scrim2{background:transparent}
@media (max-width:640px){ .drawer.thpop{top:56px;right:8px;width:calc(100% - 16px)} }
@media (prefers-reduced-motion:reduce){ .drawer.thpop{animation:none} }
.gdshot .gdnum .gdin{width:46px}
.gdshot .gdft{flex-wrap:nowrap}
.gdshot .gdpill{padding:2px 8px;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.gdexp.lnk{background:none;border:0;padding:2px 4px;text-decoration:none}
.gdexp.lnk:hover,.gdexp.lnk:focus-visible{text-decoration:underline;outline:none}
.shelf{width:min(440px,92vw)}
.shelf .shcats{flex-direction:row;display:flex;flex-wrap:wrap}
.shelf .shcats button{width:auto;flex:0 0 auto;display:inline-flex;justify-content:center}
.shelf .shcats .shq{flex:1 1 140px;margin-left:0;min-width:0}

/* ── v53 · text roles ──
   Five kinds of text, one look each, so the eye lands on the main item in a
   row first and its facts step back. A row leads with its title. The facts
   about it (owner, type, date, contact) are detail, set smaller in a muted
   mono. Labels name a column or a field. Numbers and statuses keep their own
   classes (.fbig, .famt, .gdpill, .fstate). Widgets take these classes
   rather than setting sizes of their own. r-none marks an empty value. */
.r-title{font-family:inherit;font-size:calc(14.5px*var(--ts,1));font-weight:600;line-height:1.3;letter-spacing:normal;text-transform:none;color:var(--text)}
.r-detail{font:400 calc(12.5px*var(--ts,1))/1.35 var(--mono);letter-spacing:.02em;text-transform:none;color:var(--muted)}
.r-label{font:400 calc(10.5px*var(--ts,1))/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.r-code{font-family:var(--mono);letter-spacing:.01em}
select.r-none,input[type=date].r-none{color:color-mix(in srgb,var(--muted) 60%,transparent)}
/* a field you can edit reads as text until you point at it */
.gdin.r-detail:hover,.gdin.r-detail:focus,.gdin.r-title:focus{color:var(--text)}
select.gdin.r-detail{appearance:none;-webkit-appearance:none;field-sizing:content;max-width:16em;padding-right:15px;background-color:transparent;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 8px) 55%,calc(100% - 4px) 55%;background-size:4px 4px;background-repeat:no-repeat}
input.gdin.r-detail[type=date]{field-sizing:content}
.gdin[type=date]::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
.gdin[type=date]:hover::-webkit-calendar-picker-indicator,.gdin[type=date]:focus::-webkit-calendar-picker-indicator{opacity:1}
.gdnum .r-label,.gddate .r-label{white-space:nowrap}
.gddate.late .gdin{color:#ff8a8a}
.gdlink.r-detail{color:var(--a1t,var(--a1))}
/* each row keeps its title with its first detail under it */
.gdstack{flex-direction:column;gap:0}
.gdstack .gdin{flex:0 0 auto;min-height:24px}
.gdrow{gap:4px 10px;padding:6px 8px 7px}
.gdpress .gdmain,.gdcue .gdmain{flex:1 1 200px}
.gdcue .gdin[data-key="f"]{flex:0 1 150px}
.gdsep{font-style:normal;color:color-mix(in srgb,var(--muted) 55%,transparent)}
.gdga{gap:0;padding:5px 6px 6px}
.gdgt{display:flex;align-items:center;gap:4px}
.gdgt .gdin{flex:1 1 auto;min-width:0}
.gdgr{padding-bottom:2px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.gdmeta{gap:0 2px;flex-wrap:wrap}
.gdmeta .gdin{min-height:24px}
.gdgh span{font-size:calc(10.5px*var(--ts,1))}
/* row tools stay out of the way until you point at the row; a blocked flag always shows */
@media (hover:hover){
  .gdgr .gdflag:not(.on),.gdgr .fx,.gdshot .gdtools,.gdrow .fx{opacity:0;transition:opacity .12s}
  .gdgr:hover .gdflag,.gdgr:focus-within .gdflag,.gdgr:hover .fx,.gdgr:focus-within .fx,
  .gdshot:hover .gdtools,.gdshot:focus-within .gdtools,.gdrow:hover .fx,.gdrow:focus-within .fx{opacity:1}
}
.gdflag{width:24px;height:24px;flex:0 0 auto}
/* in a storyboard card the frame carries the move and remove buttons, so the footer has room for the length and the stage */
.gdtools{position:absolute;right:4px;top:4px;display:flex;gap:2px}
.gdtools .gdmv,.gdtools .fx{width:24px;height:24px;padding:0;display:grid;place-items:center;border:0;opacity:1;
  background:color-mix(in srgb,var(--page) 75%,transparent);color:var(--text);font:400 calc(15px*var(--ts,1))/1 var(--mono)}
.gdtools .fx:hover{color:var(--a3t,var(--a3))}
.gdshot .gdtext{min-height:44px;padding:4px 6px}
.gdshot .r-detail{min-height:24px}
.gdft{gap:8px;padding-top:2px}
.gdft .gdpill{max-width:none}
.gdno.r-label{min-width:28px}
.gdnum .gdin.r-detail{flex:0 0 auto;width:3.8em;text-align:right;appearance:textfield;-moz-appearance:textfield}
.gdnum .gdin.r-detail::-webkit-inner-spin-button,.gdnum .gdin.r-detail::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.gdgh,.gdgr{grid-template-columns:minmax(300px,2.4fr) repeat(var(--n),minmax(46px,1fr))}
.gdsep{font-size:calc(12.5px*var(--ts,1));padding:0 1px}
.gdpress .gdin[data-key="url"]{flex:0 1 200px}
/* in the family widgets a row's name is its title and the line under it is detail */
.fnm,.fnm.lnk{font-size:calc(14.5px*var(--ts,1));font-weight:600}
.fnm small{font:400 calc(12.5px*var(--ts,1))/1.45 var(--mono);letter-spacing:.02em;font-weight:400}
.fitm.done .fnm{font-weight:500}
.fnote,.fnone{font-size:calc(12.5px*var(--ts,1))}
.fsettle{font-size:calc(13.5px*var(--ts,1))}
.tmbar .fsm{flex:0 1 auto}
.tmbar .fbig{font-size:clamp(22px,2.2vw,28px)}
/* a task panel section heading reads brighter and a step bigger than the field labels inside it */
.td .tdsec>h3{font-size:calc(13px*var(--ts,1));letter-spacing:.12em;color:var(--text)}
.td .tdsec>h3.chg{color:var(--a1t)}
.td .tdsec .frow>label{font-size:calc(11px*var(--ts,1))}
/* in the Theme menu a setting's name steps back so its value reads first */
.feelpop .fp-row>span,.drawer .feelpop.fp-in .fp-row>span{color:var(--muted)}
/* late and blocked use a red mixed toward the text colour, so it stays light on dark themes and turns deep on light ones */
.gdlate,.gddate.late .gdin{color:color-mix(in srgb,#ff4d4d 70%,var(--text))}
.gddate.late .gdin{border-color:color-mix(in srgb,#ff4d4d 45%,transparent)}
.gdgr.blk .gdga{border-left-color:color-mix(in srgb,#ff4d4d 70%,var(--text))}
.gdflag.on{background:color-mix(in srgb,#ff4d4d 70%,var(--text));border-color:transparent}
.gdbar.over i{background:color-mix(in srgb,#ff4d4d 70%,var(--text))}
/* in the Table the task name leads, and its cells stay quiet until you point at the row */
.tbl tr:hover .cin.r-detail,.tbl .cin.r-detail:focus{color:var(--text)}
.tbl td input.cin.r-none[type=date]:not(:focus){color:color-mix(in srgb,var(--muted) 50%,transparent)}
.tbl td.late .cin{color:var(--a3t,var(--a3))}
.tbl td .cin.p0{color:var(--a2t,var(--a2))}
.tbl td .cin.p1{color:var(--a3t,var(--a3))}
/* v53 · Content requests: the type tag leads the row, the title sits over who makes it and who asked */
.rqrow .rqty{flex:0 0 7.6em;overflow:hidden;text-overflow:ellipsis;text-align:center;text-transform:uppercase;letter-spacing:.06em;font-size:calc(11px*var(--ts,1))}
.rqrow .gdexp{flex:0 1 auto;padding:0 4px}
.rqsub{padding:0 4px}
.rqrow.done .rqsub{opacity:.8}
.rqrow .gddet .gdtwo .gdin{flex:1 1 220px}

/* ── v53 · game production widgets ── */
.fam .gdbar{margin:0}
.gxok{color:var(--a2t,var(--a2))}
.gxwarn,.gxwarnc{color:color-mix(in srgb,#ffb347 72%,var(--text))}
.gxsp{flex:1}
.gxrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gxpill{display:inline-flex;align-items:center;min-height:22px;padding:2px 9px;border-radius:999px;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--text)}
.gxpill.ok{border-color:color-mix(in srgb,var(--a2) 55%,transparent);background:color-mix(in srgb,var(--a2) 14%,transparent);color:var(--a2t,var(--a2))}
.gxpill.warn{border-color:color-mix(in srgb,#ffb347 55%,transparent);background:color-mix(in srgb,#ffb347 12%,transparent);color:color-mix(in srgb,#ffb347 72%,var(--text))}
.gxpill.bad{border-color:color-mix(in srgb,#ff4d4d 55%,transparent);background:color-mix(in srgb,#ff4d4d 12%,transparent);color:color-mix(in srgb,#ff4d4d 70%,var(--text))}
.gxpanel{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.gxpanel.gxrow{flex-direction:row}
.gxph{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gxspark{display:block;width:100%;height:auto;max-height:64px}
/* milestone gates */
.gxtrack{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative;margin:4px 0 6px}
.gxtrack::before{content:'';position:absolute;left:8%;right:8%;top:15px;height:2px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.gxgate{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;cursor:pointer;padding:0 4px;text-align:center;color:var(--text);min-width:0}
.gxgate .r-title{font-size:calc(13px*var(--ts,1))}
.gxdot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--muted);background:var(--p1,var(--page));font:600 calc(12px*var(--ts,1)) var(--mono);color:var(--muted);z-index:1}
.gxgate.passed .gxdot{border-color:var(--a2);background:var(--a2);color:var(--page)}
.gxgate.ready .gxdot{border-color:var(--a2);color:var(--a2t,var(--a2))}
.gxgate.risk .gxdot,.gxgate.late .gxdot{border-color:#ffb347;color:color-mix(in srgb,#ffb347 72%,var(--text))}
.gxgate[aria-pressed="true"] .gxdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--a1) 30%,transparent)}
.gxcrit{display:flex;align-items:center;gap:9px;padding:2px 0}
.gxcrit .r-title{flex:1;min-width:0}
.gxcrit.done .r-title{color:var(--muted);text-decoration:line-through;font-weight:500}
@media (hover:hover){.gxcrit .fx{opacity:0}.gxcrit:hover .fx,.gxcrit:focus-within .fx{opacity:.6}}
/* scope */
.gxcap{display:flex;flex-direction:column;gap:5px}
.gxcap .gdbar{height:10px;position:relative;overflow:visible}
.gxcap .gdbar i{position:absolute;top:0;bottom:0;left:0}
.gxcap .gdbar i.b{background:color-mix(in srgb,var(--a1) 45%,transparent)}
.gxcap .gdbar b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text)}
.gxcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:760px){.gxcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gxcol{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:8px;display:flex;flex-direction:column;gap:6px;min-height:110px;min-width:0}
.gxch{display:flex;justify-content:space-between}
.gxcard{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--p2,var(--page)) 70%,transparent);padding:4px 6px;display:flex;flex-direction:column;gap:2px;min-width:0}
.gxcard .gdin.r-title{width:100%}
.gxcr{display:flex;align-items:center;gap:3px}
.gxcol.cut .gxcard .r-title{text-decoration:line-through;color:var(--muted)}
/* bug triage */
.gxtri{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;margin-bottom:8px}
@media (max-width:860px){.gxtri{grid-template-columns:1fr}}
.gxmx{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:3px;align-items:center}
.gxmx>.r-label{text-align:center;padding:2px}
.gxmx .gxrh{text-align:right}
.gxcell{height:44px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:transparent;color:var(--text);cursor:pointer;font:600 calc(18px*var(--ts,1)) var(--disp)}
.gxcell.z{color:color-mix(in srgb,var(--muted) 45%,transparent);font-weight:400}
.gxcell[aria-pressed="true"]{outline:2px solid var(--a1);outline-offset:-2px}
.gxinbox{display:flex;flex-direction:column;gap:6px}
.gxib{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:6px 9px;display:flex;flex-direction:column;gap:4px}
.gxset{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.gxset button{min-width:32px;height:24px;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1)) var(--mono)}
.gxset button:hover{color:var(--text);border-color:var(--a1)}
.gxnopri{color:color-mix(in srgb,#ffb347 72%,var(--text))}
.lnk2{background:none;border:0;padding:0;color:var(--a1t,var(--a1));cursor:pointer;font:inherit;text-decoration:underline}
/* performance */
.gxperf{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.gxperf{grid-template-columns:1fr}}
.gxstack{height:26px;display:flex;position:relative;margin-top:18px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.gxstack span{height:100%}
.gxstack b{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--text)}
.gxstack b em{position:absolute;top:-17px;left:4px;font:400 calc(10.5px*var(--ts,1)) var(--mono);font-style:normal;white-space:nowrap}
.gxsys{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:4px 10px;align-items:center;margin-top:8px}
.gxsys i{width:10px;height:10px}
.gxsys .r-title{font-size:calc(13.5px*var(--ts,1))}
.gxside{display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.gxside>.fx{position:absolute;right:0;top:0}
/* build health */
.gxplats{display:flex;flex-direction:column}
.gxplat{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.gxruns{display:flex;gap:3px;flex-wrap:wrap}
.gxrun{width:16px;height:16px;border:0;padding:0;cursor:pointer;background:color-mix(in srgb,var(--a2) 75%,transparent)}
.gxrun.f{background:color-mix(in srgb,#ff4d4d 70%,var(--text))}.gxrun.w{background:#ffb347}
.gxrun.cur{outline:2px solid var(--text);outline-offset:1px}
.gxbroke{display:flex;flex-direction:column;gap:2px;border-left:3px solid color-mix(in srgb,#ff4d4d 70%,var(--text));padding:6px 10px;background:color-mix(in srgb,#ff4d4d 7%,transparent)}
.gxbow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--a1) 40%,transparent);background:color-mix(in srgb,var(--a1) 7%,transparent);padding:8px 10px}
/* playtest */
.gxpt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:14px}
@media (max-width:860px){.gxpt{grid-template-columns:1fr}}
.gxsess{display:flex;flex-direction:column;gap:6px;min-width:0}
.gxsc{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:7px 10px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;cursor:pointer;text-align:left;color:var(--text)}
.gxsc[aria-pressed="true"]{border-color:var(--a1)}
.gxagain{font:600 calc(19px*var(--ts,1)) var(--disp);color:var(--a2t,var(--a2));grid-row:span 2;align-self:center}
.gxfind{display:flex;flex-direction:column;gap:6px;min-width:0}
.gxtg{display:grid;grid-template-columns:96px minmax(0,1fr) 30px;gap:8px;align-items:center}
.gxtg .gdbar{height:9px}
.gxfi{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.gxfi .r-title{font-size:calc(13.5px*var(--ts,1));min-width:0}
.gxtag{flex:0 0 auto;padding:2px 7px;border:1px solid var(--c);color:var(--c);font:600 calc(10.5px*var(--ts,1)) var(--mono);letter-spacing:.05em;text-transform:uppercase}
.gxrec{display:flex;flex-direction:column;gap:4px}
.gxrc{display:flex;gap:9px;align-items:center;padding:5px 8px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent)}
.gxrc .r-title{flex:1;min-width:0;font-size:calc(13.5px*var(--ts,1))}
.gxdots{display:flex;gap:3px}
.gxdots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text) 15%,transparent)}
.gxdots i.on{background:var(--a3)}
/* localization */
.gxlmx{display:grid;grid-template-columns:minmax(150px,1.3fr) repeat(3,minmax(90px,1fr)) minmax(110px,1fr) 24px;gap:6px 12px;align-items:center;overflow-x:auto}
.gxcode{display:inline-block;width:3.4em;font:400 calc(11px*var(--ts,1)) var(--mono);color:var(--muted)}
.gxpc{display:flex;flex-direction:column;gap:2px}
.gxpc .gdbar{height:6px}
.gxpc .gdin{width:4.5em;padding:0 2px;min-height:20px}
/* certification */
.gxcert{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:700px){.gxcert{grid-template-columns:1fr}}
.gxring{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text)}
.gxreq{display:grid;grid-template-columns:70px minmax(0,1fr) auto 24px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.gxreq .r-title{font-size:calc(13.5px*var(--ts,1))}
.gxseg{display:inline-flex;border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.gxseg button{border:0;background:transparent;color:var(--muted);padding:3px 8px;cursor:pointer;font:600 calc(10.5px*var(--ts,1)) var(--mono);letter-spacing:.04em}
.gxseg button[aria-pressed="true"]{background:color-mix(in srgb,var(--text) 16%,transparent);color:var(--text)}
.gxseg button[aria-pressed="true"].pa,.gxseg button[aria-pressed="true"].te{background:var(--a2);color:var(--page)}
.gxseg button[aria-pressed="true"].fa{background:color-mix(in srgb,#ff4d4d 70%,var(--text));color:var(--page)}
.gxseg button[aria-pressed="true"].wa,.gxseg button[aria-pressed="true"].bu{background:var(--a1);color:var(--page)}
/* review queue */
.gxrq{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gxcard2{border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);display:flex;flex-direction:column;min-width:0}
.gxcard2.approved{border-color:color-mix(in srgb,var(--a2) 50%,transparent)}
.gxcard2.changes{border-color:color-mix(in srgb,#ffb347 50%,transparent)}
.gxthumb{aspect-ratio:16/9;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--a1) 22%,var(--page)),color-mix(in srgb,var(--a3) 22%,var(--page)))}
.gxthumb img{width:100%;height:100%;object-fit:cover}
.gxthumb b{position:absolute;left:6px;top:6px;padding:2px 6px;background:color-mix(in srgb,var(--page) 80%,transparent);font:600 calc(11px*var(--ts,1)) var(--mono);color:var(--text)}
.gxcb{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.gxnotes{display:flex;flex-direction:column;gap:3px;border-left:2px solid color-mix(in srgb,var(--text) 12%,transparent);padding-left:8px}
.gxnotes b{color:var(--text);font-weight:400}
.gxacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.gxacts input{flex:1 1 100%;min-height:28px;padding:2px 8px;font:inherit;font-size:calc(13px*var(--ts,1));color:var(--text);background:color-mix(in srgb,var(--page) 55%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent)}
/* wishlists */
.gxwl{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.gxwl{grid-template-columns:1fr}}
.gxchart{width:100%;height:190px;color:var(--text)}
.gxfc{display:flex;flex-direction:column;gap:7px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:10px 12px}
.gxbig2{font:600 calc(24px*var(--ts,1)) var(--disp)}
.gxfc input[type=range]{width:100%;accent-color:var(--a1)}
.gxevs{display:flex;flex-direction:column;gap:2px}
.gxevs .gxrow{padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.gxevs .r-title{font-size:calc(13.5px*var(--ts,1))}
/* events */
.gxevl{display:flex;flex-direction:column}
.gxev{display:grid;grid-template-columns:62px minmax(0,1fr) auto 24px;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.gxcd{display:flex;flex-direction:column;align-items:center;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);padding:4px 0}
.gxcd b{font:600 calc(19px*var(--ts,1)) var(--disp)}
.gxcd.soon{border-color:#ffb347}
.gxcd.soon b{color:color-mix(in srgb,#ffb347 72%,var(--text))}
.gxev .r-detail .gdin{min-height:20px;padding:0 2px}
.gxreqs{grid-column:2/5;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.gxreqs button{min-height:22px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:400 calc(11.5px*var(--ts,1)) var(--mono)}
.gxreqs button[aria-pressed="true"]{color:var(--a2t,var(--a2));border-color:color-mix(in srgb,var(--a2) 50%,transparent);background:color-mix(in srgb,var(--a2) 10%,transparent)}
.gxreqs button[aria-pressed="true"]::before{content:'\2713  '}
.gxreqs form input{width:140px;min-height:22px;padding:1px 6px;font:400 calc(11.5px*var(--ts,1)) var(--mono);color:var(--text);background:transparent;border:1px dashed color-mix(in srgb,var(--text) 18%,transparent)}
/* age ratings */
.gxrt{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.gxbadge{border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:8px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;text-align:center;color:var(--text)}
.gxbadge b{font:700 calc(20px*var(--ts,1)) var(--disp);min-width:46px;padding:2px 6px;border:2px solid currentColor}
.gxbadge.pend b{color:var(--muted);border-style:dashed}
.gxbadge.no{opacity:.5}
.gxbadge[aria-pressed="true"]{border-color:var(--a1)}
.gxbadge .r-title{font-size:calc(13px*var(--ts,1))}
.gxdesc{display:flex;gap:5px;flex-wrap:wrap}
.gxpanel>.gdin{width:100%}
/* dialogue and voice over */
.gxleg{display:flex;gap:12px;flex-wrap:wrap}
.gxleg span{display:inline-flex;gap:5px;align-items:center}
.gxleg i{width:10px;height:10px;display:inline-block}
.gxvo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.gxvo{grid-template-columns:1fr}}
.gxchr{display:grid;grid-template-columns:110px minmax(60px,1fr) auto 24px;gap:8px;align-items:center;padding:4px 0}
.gxst4{display:flex;height:12px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.gxst4 span{height:100%}
.gxcounts{display:flex;gap:2px}
.gxcounts .gdin{width:3.6em;text-align:right;padding:0 3px;min-height:22px;appearance:textfield;-moz-appearance:textfield}
.gxcounts .gdin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gxses{position:relative;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:7px 30px 7px 10px;display:flex;flex-direction:column;gap:2px}
.gxses.past{opacity:.6}
.gxses .fx{position:absolute;right:4px;top:4px}
/* accessibility */
.gxax{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.gxaxg{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.gxaxi{display:flex;align-items:center;gap:8px}
.gxaxi .r-title{flex:1;min-width:0;font-size:calc(13.5px*var(--ts,1))}
@media (hover:hover){.gxaxi .fx{opacity:0}.gxaxi:hover .fx,.gxaxi:focus-within .fx{opacity:.6}}
/* tuning sheet */
.gxtune{display:grid;grid-template-columns:minmax(150px,1.4fr) 110px minmax(150px,1.4fr) 100px 24px;gap:5px 12px;align-items:center;overflow-x:auto}
.gxtune .r-title{font-size:calc(13.5px*var(--ts,1))}
.gxtune .gxnum{width:100%;text-align:right;color:var(--text)}
.gxtg2{grid-column:1/-1;margin-top:6px;color:var(--a1t,var(--a1))}
/* crash rate */
.gxcrash{display:flex;align-items:flex-end;gap:6px;height:130px;padding-top:16px;position:relative;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.gxcrb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end;min-width:0}
.gxcrb i{width:100%;max-width:44px;background:var(--a2)}
.gxcrb.bad i{background:color-mix(in srgb,#ff4d4d 70%,var(--text))}
.gxcrb .r-detail{font-size:calc(11px*var(--ts,1))}
.gxline{position:absolute;left:0;right:0;border-top:1px dashed var(--text);opacity:.6}
.gxsig{display:flex;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent);flex-wrap:wrap}
.gxsig .r-title{flex:1;min-width:140px;font-size:calc(13.5px*var(--ts,1));font-family:var(--mono)}
/* live ops */
.gxlo{--lw:96px;position:relative;display:flex;flex-direction:column;gap:3px;overflow-x:auto}
.gxlh,.gxlane{display:grid;grid-template-columns:var(--lw) minmax(560px,1fr);align-items:center}
.gxlw{display:grid;grid-template-columns:repeat(12,1fr)}
.gxlw .r-label{text-align:left;padding-left:2px;border-left:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.gxlt{position:relative;height:36px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 0 1px,transparent 1px calc(100%/12))}
.gxbar{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;gap:6px;padding:0 6px;overflow:hidden;white-space:nowrap;border:1px solid color-mix(in srgb,var(--a1) 60%,transparent);background:color-mix(in srgb,var(--a1) 14%,transparent)}
.gxbar.near{border-color:#ffb347}
.gxbar .r-title{font-size:calc(12.5px*var(--ts,1));overflow:hidden;text-overflow:ellipsis;min-width:0}
.gxbar .fx{padding:0 2px;font-size:calc(14px*var(--ts,1))}
.gxrd{display:flex;gap:3px;margin-left:auto}
.gxrd button{width:9px;height:9px;border-radius:50%;padding:0;border:0;cursor:pointer;background:color-mix(in srgb,var(--text) 22%,transparent)}
.gxrd button.on{background:var(--a2)}
.gxpin{position:absolute;bottom:2px;transform:translateX(-4px);display:flex;align-items:center;gap:4px;font:400 calc(10.5px*var(--ts,1)) var(--mono);color:var(--a3t,var(--a3));white-space:nowrap}
.gxpin i{width:8px;height:8px;transform:rotate(45deg);background:var(--a3)}
.gxnow{position:absolute;top:0;bottom:0;width:2px;background:var(--a3);opacity:.8;pointer-events:none}
/* player feedback */
.gxfb{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.gxfb{grid-template-columns:1fr}}
.gxfil{display:flex;flex-direction:column;gap:6px;min-width:0}
.gxfil>.gxfi{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);padding:7px 10px;flex-direction:column;align-items:stretch;gap:5px}
.gxfi.sent{opacity:.55}
.gxsrc{font:600 calc(10.5px*var(--ts,1)) var(--mono);letter-spacing:.06em;padding:2px 6px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);text-transform:uppercase}
.gxq{font-size:calc(13.5px*var(--ts,1));line-height:1.45}
.gxfil .gxrow .gdin{max-width:12em}
/* fixes from the first look */
.gxcol>.gxcard{flex:0 0 auto}
.gxring .gddate{flex-direction:column;align-items:flex-start;gap:2px}
.gxaxi{flex-wrap:wrap;padding:3px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.gxaxi .r-title{flex:1 1 150px}
.gxpin.r{transform:translateX(calc(-100% + 4px));flex-direction:row-reverse}
.gxwl>div:first-child{min-width:0}
.gxax2{display:flex;justify-content:space-between;gap:8px;padding:0 4px}
/* v54 · an empty widget shows a faded example of itself; a full one folds its add form */
.gxex{position:relative;opacity:.42;margin-top:10px!important;padding-top:14px!important;pointer-events:none;user-select:none;margin:2px 0 4px;padding:8px;border:1px dashed color-mix(in srgb,var(--text) 18%,transparent);overflow:hidden;max-height:420px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.gxex>.fam{display:flex;flex-direction:column;gap:8px}
.gxexl{position:absolute;right:10px;top:-1px;background:var(--p1,var(--page));z-index:2;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text);padding:3px 7px;border:1px solid color-mix(in srgb,var(--text) 30%,transparent)}
.gxaddw>summary{display:inline-flex;align-items:center;min-height:28px;padding:3px 12px;cursor:pointer;list-style:none;border:1px dashed color-mix(in srgb,var(--a1) 50%,transparent);color:var(--a1t,var(--a1));font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.gxaddw>summary::-webkit-details-marker{display:none}
.gxaddw>summary:hover{background:color-mix(in srgb,var(--a1) 10%,transparent)}
.gxaddw[open]>summary{margin-bottom:6px}
.gxex .fx{visibility:hidden}
.fam>[data-gx="seed"]{align-self:flex-start}
/* v55 · the free canvas runs to the screen edges: at full page width its board takes the side
   gutters, and the frame's side rails step aside so nothing sits over the widgets */
:root[data-pw="full"]:has(#spc[data-lay="free"]):not([data-bar="left"]) #mid{margin-left:calc(-1*var(--uix))}
:root[data-pw="full"]:has(#spc[data-lay="free"]):not([data-bar="right"]) #mid{margin-right:calc(-1*var(--uix))}
:root:has(#spc[data-lay="free"]) :is(.rail,.stack,.hud .ticks,.edge){display:none}
:root[data-pw="full"]:has(#spc[data-lay="free"]):not([data-bar="left"]) #mid>.shead{padding-left:var(--uix)}
:root[data-pw="full"]:has(#spc[data-lay="free"]):not([data-bar="right"]) #mid>.shead{padding-right:var(--uix)}
/* v55 · the selected task's Steps on the Team map */
.tmsteps text{fill:var(--text);font-family:var(--disp);font-weight:500}
.tmsteps .tmsh{fill:var(--muted);font-family:var(--mono);letter-spacing:.1em}
.tmstep{cursor:pointer}
.tmsbox{fill:color-mix(in srgb,var(--page) 70%,transparent);stroke:var(--a1);stroke-width:1.2}
.tmstep.done .tmsbox{fill:var(--a1)}
.tmstick{fill:none;stroke:var(--page);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tmstep.done text{fill:var(--muted);text-decoration:line-through}
.tmstep:hover text,.tmstep:focus-visible text{fill:var(--a1t,var(--a1))}
.tmstep:focus-visible{outline:none}.tmstep:focus-visible .tmsbox{stroke-width:2.4}
.tmsbg{fill:color-mix(in srgb,var(--p1,var(--page)) 88%,transparent);stroke:color-mix(in srgb,var(--a1) 30%,transparent);stroke-width:1}

/* ── v57 · ink: the Whiteboard, the Doodle board and the onion skin layer ── */
.inkw{display:flex;flex-direction:column;gap:6px;min-height:0;height:100%}
.inkbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.inkgrp{display:inline-flex;gap:2px;align-items:center}
.inkbar [data-inktool]{min-height:26px;padding:2px 9px;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.inkbar [data-inktool][aria-pressed="true"]{background:var(--a1);border-color:var(--a1);color:var(--page)}
.inksz{width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:transparent;cursor:pointer}
.inksz i{width:var(--d);height:var(--d);border-radius:50%;background:var(--text)}
.inksz[aria-pressed="true"]{border-color:var(--a1);box-shadow:inset 0 0 0 1px var(--a1)}
.inkcol{width:22px;height:22px;padding:0;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 25%,transparent)}
.inkcol[aria-pressed="true"]{border-color:var(--page);box-shadow:0 0 0 2px var(--a1)}
.inkbar button:disabled{opacity:.4;cursor:default}
.inkpad{position:relative;flex:1 1 auto;min-height:220px;aspect-ratio:16/10;max-height:100%;
  background-color:color-mix(in srgb,var(--page) 55%,transparent);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--text) 14%,transparent) 1px,transparent 1.2px);background-size:24px 24px;
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.inkcv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;color:var(--text)}
.inkro{position:absolute;left:10px;bottom:8px;margin:0;font:400 calc(12px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.ocard{position:absolute;width:min(220px,44%);pointer-events:auto;display:flex;flex-direction:column;background:#fef3a7;color:#2a2410;
  box-shadow:0 6px 18px rgba(0,0,0,.28);border-top:3px solid #e9c74a;transform:rotate(-.6deg)}
.ocard.shared{background:#d6f5ee;border-top-color:#3dbfa0}
.ocard header{display:flex;align-items:center;gap:4px;padding:3px 4px 2px 7px;cursor:grab;touch-action:none}
.ocard header.ro{cursor:default}
.ocard header .r-label{color:#5d5330}
.ocard header button{min-height:20px;padding:1px 6px;border:1px solid rgba(42,36,16,.3);background:transparent;color:#2a2410;cursor:pointer;font:600 calc(10px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.ocard header button[aria-pressed="true"]{background:#2a2410;color:#fef3a7}
.ocard header .fx{border:0;color:#5d5330;font-size:calc(15px*var(--ts,1))}
.ocard textarea{min-height:64px;resize:vertical;border:0;background:transparent;color:inherit;padding:2px 8px 8px;font:500 calc(13.5px*var(--ts,1))/1.4 var(--disp)}
.ocard textarea:focus{outline:none}
[data-osk="1"][aria-pressed="true"]{background:var(--a2);border-color:var(--a2);color:var(--page)}

/* ── v58 · music production widgets ── */
.mxscroll{overflow-x:auto;min-width:0}
.mxmono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mxpad{padding:0 8px}
.mxwide{width:100%}
.mxsm{min-height:24px;padding:2px 8px;font-size:calc(11.5px*var(--ts,1))}
.mxkey{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 8px}
.mxkey span{display:inline-flex;align-items:center;gap:6px}
.mxkey b{font-weight:600;color:var(--text)}
.mxtwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,.42fr);gap:12px;align-items:start;margin-bottom:8px}
@container (max-width:620px){.mxtwo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.mxtwo{grid-template-columns:minmax(0,1fr)}}
.mxchip{min-height:24px;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 20%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.03em;white-space:nowrap}
.mxchip[aria-pressed="true"]{background:color-mix(in srgb,var(--a2) 18%,transparent);border-color:color-mix(in srgb,var(--a2) 60%,transparent);color:var(--a2t,var(--a2))}
.mxchip:disabled{cursor:default;opacity:.7}
button.gxpill{cursor:pointer}
button.gxpill:disabled{cursor:default}
.mxn.r-detail{width:5.2em;text-align:right}
.mxlen{width:4.4em;text-align:right;font-family:var(--mono)}
.mxneedr{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.mxneedr b{font:600 calc(11px*var(--ts,1))/1 var(--mono);color:var(--a1t,var(--a1));margin-left:4px}
/* the palette for shares and categories */
.mxb0{--c:var(--a1)}.mxb1{--c:var(--a2)}.mxb2{--c:var(--a3)}.mxb3{--c:#b48cff}.mxb4{--c:#ffb347}.mxb5{--c:#5ec8e5}
.mxsw{flex:0 0 auto;width:10px;height:10px;border-radius:2px;background:var(--c)}

/* Song tracker */
.mxsheet{display:flex;flex-direction:column;gap:3px;min-width:560px}
.mxgr{display:grid;grid-template-columns:minmax(150px,1.5fr) repeat(var(--n),minmax(34px,1fr)) 70px;gap:3px;align-items:center}
.mxgr.done .mxsong .gdin{color:var(--muted)}
.mxhd{align-items:end;padding-bottom:3px;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.mxch{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;min-width:0}
.mxch .r-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mxch b{font-weight:400}
.mxsong{display:flex;flex-direction:column;min-width:0}
.mxsong .r-detail{padding:0 7px}
.mxcell{height:28px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:color-mix(in srgb,var(--text) 4%,transparent);cursor:pointer;padding:0;position:relative}
.mxcell.c1{background:color-mix(in srgb,var(--a3) 30%,transparent);border-color:color-mix(in srgb,var(--a3) 60%,transparent);background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--a3) 35%,transparent) 5px 7px)}
.mxcell.c2{background:var(--a1);border-color:var(--a1)}
.mxcell.c3{background:transparent;border-style:dashed;opacity:.5}
.mxcell.c3::after{content:'';position:absolute;left:20%;right:20%;top:50%;height:1px;background:var(--muted)}
.mxcell:hover:not(:disabled){outline:2px solid color-mix(in srgb,var(--a1) 50%,transparent);outline-offset:1px}
.mxcell:disabled{cursor:default}
i.mxcell{display:inline-block;width:14px;height:14px}
.mxend{display:flex;align-items:center;justify-content:flex-end;gap:2px}

/* Parts and overdubs */
.mxparts{border-collapse:collapse;width:100%;min-width:480px}
.mxparts th,.mxparts td{padding:2px 3px;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.mxparts thead th{vertical-align:bottom;padding-bottom:5px}
.mxparts thead .r-label{display:inline-block;max-width:70px;line-height:1.2;white-space:normal}
.mxparts th[scope="row"]{text-align:left;min-width:140px}
.mxparts th[scope="row"] .gdin{width:100%}
.mxpt{width:30px;height:30px;border-radius:50%;border:1px solid transparent;background:transparent;cursor:pointer;font-size:calc(17px*var(--ts,1));line-height:1;color:var(--muted)}
.mxpt.v0{color:var(--a3t,var(--a3))}
.mxpt.v1{color:var(--a2t,var(--a2))}
.mxpt.v2{color:var(--a1t,var(--a1))}
.mxpt.v3{opacity:.4}
.mxpt:hover:not(:disabled){border-color:color-mix(in srgb,var(--text) 25%,transparent)}
.mxpt:disabled{cursor:default}

/* Arrangement map */
.f-marr .mxsec{--c:color-mix(in srgb,var(--text) 30%,transparent)}
.f-marr [data-t="intro"],.f-marr [data-t="outro"]{--c:color-mix(in srgb,var(--text) 38%,transparent)}
.f-marr [data-t="verse"]{--c:var(--a1)}
.f-marr [data-t="pre"]{--c:var(--a3)}
.f-marr [data-t="chorus"]{--c:var(--a2)}
.f-marr [data-t="bridge"]{--c:#b48cff}
.f-marr [data-t="drop"]{--c:#ff7b4a}
.f-marr [data-t="break"]{--c:#5ec8e5}
.f-marr [data-t="solo"]{--c:#ffd166}
.mxarrs{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.mxarr{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr) 46px;gap:10px;align-items:center;padding:5px 8px;border:1px solid transparent;background:none;cursor:pointer;color:var(--text);text-align:left}
.mxarr[aria-pressed="true"]{border-color:color-mix(in srgb,var(--a1) 45%,transparent);background:color-mix(in srgb,var(--a1) 7%,transparent)}
.mxarr .r-detail{text-align:right;font-family:var(--mono)}
.mxstrip{display:flex;gap:2px;height:16px;min-width:0}
.mxstrip.big{height:46px;margin:2px 0 6px}
.mxsec{display:flex;flex-direction:column;justify-content:center;flex-basis:0;min-width:3px;background:var(--c);overflow:hidden;padding:0 5px;color:var(--page);border-radius:2px}
.mxsec b{font:600 calc(10px*var(--ts,1))/1.1 var(--mono);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxstrip.big .mxsec b{font-size:calc(11px*var(--ts,1))}
.mxsec i{font:400 calc(10.5px*var(--ts,1))/1 var(--mono);font-style:normal;opacity:.85}
.mxsecs{display:flex;flex-direction:column;gap:2px}
.mxsecr{display:flex;align-items:center;gap:6px;padding:2px 0}
.mxsecr>i{flex:0 0 auto;width:4px;align-self:stretch;background:var(--c);border-radius:2px}
.mxsecr .mxmono{width:3.2em}
.mxsecr .gdin.r-title{flex:0 1 180px}
.mxsecr .gdnum .gdin{width:3.4em}
.mxquick{display:flex;flex-wrap:wrap;gap:4px;padding-top:4px}
.mxq{min-height:26px;padding:2px 9px;border:1px solid var(--c);border-left-width:4px;background:transparent;color:var(--text);cursor:pointer;font:500 calc(12px*var(--ts,1))/1 var(--disp)}
.mxq span{font-family:var(--mono);color:var(--muted);font-size:calc(11px*var(--ts,1))}
.mxq:hover:not(:disabled){background:color-mix(in srgb,var(--c) 14%,transparent)}
.mxq:disabled{display:none}

/* Studio sessions */
.mxbks{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px;margin-bottom:8px}
.mxbk{display:flex;gap:10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.mxbk.past{opacity:.65}
.mxday{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 0;background:color-mix(in srgb,var(--a1) 14%,transparent);border-top:3px solid var(--a1)}
.mxday b{font:600 calc(26px*var(--ts,1))/1 var(--disp);color:var(--a1t,var(--a1))}
.mxbkb{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.mxbkb .gxph{gap:4px 8px}
.mxbkb .gdin[type=time]{width:8.6em}

/* Mix notes and split sheets share a list on the left */
.mxlist{display:flex;flex-direction:column;gap:3px}
.mxlb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);cursor:pointer;color:var(--text);text-align:left}
.mxlb[aria-pressed="true"]{border-color:var(--a1);box-shadow:inset 3px 0 0 var(--a1)}
.mxlb .mxsb{width:100%}
.mxtwo:has(.mxlist){grid-template-columns:minmax(170px,.36fr) minmax(0,1fr)}
@media (max-width:700px){.mxtwo:has(.mxlist){grid-template-columns:minmax(0,1fr)}}
.mxtl{position:relative;height:44px;margin:4px 6px 2px}
.mxtlbar{position:absolute;left:0;right:0;top:20px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--a1) 35%,transparent) 0 2px,color-mix(in srgb,var(--a1) 14%,transparent) 2px 5px)}
.mxtk{position:absolute;top:28px;width:1px;height:6px;background:color-mix(in srgb,var(--text) 30%,transparent)}
.mxtk i{position:absolute;top:7px;left:0;transform:translateX(-50%);font:400 calc(9.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}
.mxmk{position:absolute;top:0;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--a3);color:var(--page);display:grid;place-items:center;font:600 calc(10px*var(--ts,1))/1 var(--mono)}
.mxmk.done{background:color-mix(in srgb,var(--text) 25%,transparent);color:var(--text)}
.mxnotes{display:flex;flex-direction:column;gap:2px}
.mxnote{display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.mxnote .mxmono{flex:0 0 auto;color:var(--a3t,var(--a3));font-size:calc(12px*var(--ts,1))}
.mxnote .r-title{flex:1 1 auto;min-width:0}
.mxnote.done .r-title{text-decoration:line-through;color:var(--muted)}
.mxnote.done .mxmono{color:var(--muted)}
.fadd input.mxtime{flex:0 0 64px;font-family:var(--mono)}

/* Masters and deliverables */
.mxms{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px;margin-bottom:8px}
.mxm{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.mxm.done{border-color:color-mix(in srgb,var(--a2) 50%,transparent)}
.mxm .gxph{gap:4px 8px}
.mxm .gxph .gdin.r-title{flex:1 1 120px;min-width:0}
.mxmeter{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--a2) 22%,transparent),color-mix(in srgb,#ffb347 22%,transparent) 70%,color-mix(in srgb,#ff4d4d 25%,transparent))}
.mxmeter i{display:block;height:100%;border-radius:5px;background:var(--a2)}
.mxmeter.hot i{background:linear-gradient(90deg,var(--a2),#ffb347 80%,#ff6b4a)}
.mxmeter b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--text)}
.mxdl{display:flex;flex-wrap:wrap;gap:4px}

/* Sample clearance */
.mxkan{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:8px;min-width:720px;margin-bottom:8px}
.mxcol{display:flex;flex-direction:column;gap:6px;padding:6px;background:color-mix(in srgb,var(--text) 3%,transparent);border-top:3px solid color-mix(in srgb,var(--text) 18%,transparent)}
.mxcol.ok{border-top-color:var(--a2)}
.mxcard{display:flex;flex-direction:column;gap:1px;padding:6px;background:var(--p1,var(--page));border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.mxcard.ok{border-color:color-mix(in srgb,var(--a2) 45%,transparent)}
.mxcard .gxph{gap:4px}
.mxcard .gdin{width:100%}
.mxcard .gdnum .gdin{width:5em}
.mxside{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}

/* Recording budget */
.mxstack{position:relative;display:flex;height:18px;margin:2px 0 10px;background:color-mix(in srgb,var(--text) 8%,transparent)}
.mxstack i{display:block;height:100%;background:var(--c)}
.mxstack b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text)}
.mxbud{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px 16px;margin-bottom:8px}
.mxbc{display:flex;flex-direction:column;gap:3px}
.mxbc .gdbar{margin:0 0 2px}
.mxbc .gdbar i{background:var(--a1)}
.mxbi{display:flex;align-items:center;gap:6px;min-width:0}
.mxbi .gdin.r-detail:not(.mxn){flex:1 1 auto;min-width:0}

/* Release plan */
.mxroll{position:relative;height:56px;margin:6px 14px 10px}
.mxrline{position:absolute;left:0;right:0;top:22px;height:2px;background:color-mix(in srgb,var(--text) 15%,transparent)}
.mxrw{position:absolute;top:14px;width:1px;height:18px;background:color-mix(in srgb,var(--text) 22%,transparent)}
.mxrw i{position:absolute;top:22px;left:0;transform:translateX(-50%);font:400 calc(10px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.mxrd{position:absolute;top:17px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--p1,var(--page));border:2px solid var(--a1)}
.mxrd.done{background:var(--a2);border-color:var(--a2)}
.mxrd.late{background:#ff6b5a;border-color:#ff6b5a}
.mxrnow{position:absolute;top:0;bottom:6px;width:2px;margin-left:-1px;background:var(--a3)}
.mxrnow i{position:absolute;top:-2px;left:5px;font:600 calc(10px*var(--ts,1))/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--a3t,var(--a3))}
.mxrels{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.mxrels>.r-label{margin-top:6px}
.mxrel{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:5px 8px;border-left:3px solid color-mix(in srgb,var(--text) 15%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.mxrel.late{border-left-color:#ff6b5a}
.mxrel.done{opacity:.55}
.mxrel.done .r-title{text-decoration:line-through}

/* Credits and codes */
.mxmeta{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.mxmr{border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent)}
.mxmr>.gdrow{border:0;background:none}
.mxmr.done{border-color:color-mix(in srgb,var(--a2) 45%,transparent)}
.mxno{color:var(--muted);font-size:calc(12px*var(--ts,1))}
.mxring{flex:0 0 auto;width:24px;height:24px}
.mxring circle{fill:none;stroke:color-mix(in srgb,var(--text) 14%,transparent);stroke-width:3}
.mxring circle.f{stroke:var(--a1);stroke-linecap:round}
.mxring.ok circle.f{stroke:var(--a2)}
.mxisrc .gdin{width:13em}
.mxisrc.bad .gdin{color:color-mix(in srgb,#ffb347 72%,var(--text));border-color:color-mix(in srgb,#ffb347 50%,transparent)}

/* Split sheets */
.mxsb{display:flex;height:8px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden;border-radius:4px}
.mxsb i{display:flex;align-items:center;justify-content:center;background:var(--c);height:100%;min-width:0}
.mxsb.big{height:30px;border-radius:3px;margin:2px 0 4px}
.mxsb b{font:600 calc(11px*var(--ts,1))/1 var(--mono);color:var(--page)}
.mxwr{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:3px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.mxwr .gdin.r-title{flex:1 1 130px;min-width:0}
.mxwr .gdin.mxmono{width:9em}
.mxwr .gdnum .gdin{width:4.2em}

/* Tracklist */
.mxflow{display:block;width:100%;height:auto;max-height:96px;margin:2px 0 6px;overflow:visible}
.mxflow polyline{fill:none;stroke:var(--a2);stroke-width:2;stroke-linejoin:round}
.mxflow circle{fill:var(--p1,var(--page));stroke:var(--a2);stroke-width:2}
.mxflow text{fill:var(--muted);font:500 11px var(--mono);text-anchor:middle}
.mxtrk{display:flex;flex-direction:column;margin-bottom:6px}
.mxtrr{gap:4px 8px}
.mxtr{display:flex;align-items:center;gap:6px;height:22px;padding-left:22px;position:relative}
.mxtr::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:2px;background:color-mix(in srgb,var(--a2) 55%,transparent)}
.mxtr.bad::before{background:#ffb347;width:3px}
.mxtr .r-detail{font-size:calc(11.5px*var(--ts,1))}
.mxtr.bad .r-detail{color:color-mix(in srgb,#ffb347 72%,var(--text))}
.mxcam{flex:0 0 auto;min-width:34px;padding:3px 6px;border-radius:4px;text-align:center;font:600 calc(12px*var(--ts,1))/1 var(--mono);background:color-mix(in srgb,var(--a1) 18%,transparent);color:var(--a1t,var(--a1))}
.mxcam[data-l="A"]{background:color-mix(in srgb,var(--a3) 18%,transparent);color:var(--a3t,var(--a3))}
.mxcam.none{background:none;color:var(--muted);border:1px dashed color-mix(in srgb,var(--text) 25%,transparent)}
.mxkeyin{width:4.6em}

/* Setlist */
.mxsetl{display:flex;flex-direction:column;gap:4px}
.mxsr{gap:4px 10px}
.mxclock{flex:0 0 auto;width:3.4em;color:var(--a1t,var(--a1));font-size:calc(14px*var(--ts,1))}
.mxrdy{display:inline-flex;gap:3px}
.mxrdy button{width:12px;height:20px;padding:0;border:1px solid color-mix(in srgb,var(--a2) 55%,transparent);background:transparent;cursor:pointer;border-radius:2px}
.mxrdy button.on{background:var(--a2)}
.mxrdy button:disabled{cursor:default}
.mxenc{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.mxenc::after{content:'';flex:1;height:1px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.mxgauge{width:110px;height:110px;align-self:center}
.mxgauge circle{fill:none;stroke:color-mix(in srgb,var(--text) 12%,transparent);stroke-width:7}
.mxgauge circle.f{stroke:var(--a1);stroke-linecap:round}
.mxgauge.over circle.f{stroke:#ff6b5a}
.mxgauge text{fill:var(--text);font:600 16px var(--disp);text-anchor:middle}

/* Sync pitches */
.mxfun{display:flex;flex-direction:column;gap:3px;margin:2px 0 10px}
.mxfs{position:relative;display:flex;align-items:center;gap:8px;height:24px;padding:0 8px}
.mxfs i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--a1) 22%,transparent);border-left:3px solid var(--a1);z-index:0}
.mxfs:nth-child(4) i{background:color-mix(in srgb,var(--a2) 26%,transparent);border-left-color:var(--a2)}
.mxfs span,.mxfs b{position:relative;z-index:1}
.mxfs b{font:600 calc(13px*var(--ts,1))/1 var(--mono)}
.mxsub{display:flex;flex-wrap:wrap;gap:0 6px}
.mxsub .gdin{flex:1 1 140px}

/* ── v59 · the Shot list and the Asset pipeline in the newer style ── */
.gdedit{margin-bottom:10px;border-color:color-mix(in srgb,var(--a1) 40%,transparent)}
.gdedit .gdtwo>.gdin{flex:1 1 180px}
/* the strip: every shot at its length, against the target */
.gdstripw{position:relative;height:52px;margin:0 0 12px}
.gdstrip{display:flex;gap:2px;height:30px;min-width:40px}
.gdsb{display:grid;place-items:center;flex-basis:0;min-width:6px;padding:0;border:1px solid transparent;cursor:pointer;overflow:hidden;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--text);background:color-mix(in srgb,var(--text) 10%,transparent);border-radius:2px}
.gdsb.new{background:transparent;border:1px dashed color-mix(in srgb,var(--text) 35%,transparent);color:var(--muted)}
.gdsb.mid{background:color-mix(in srgb,var(--a1) 35%,transparent);border-color:color-mix(in srgb,var(--a1) 55%,transparent)}
.gdsb.fin{background:var(--a2);color:var(--page)}
.gdsb[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:1px}
.gdtgt{position:absolute;top:-4px;height:38px;width:2px;margin-left:-1px;background:var(--a3)}
.gdtgt.over{background:#ff6b5a}
.gdtgt i{position:absolute;bottom:-15px;right:5px;white-space:nowrap;font:600 calc(10px*var(--ts,1))/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.05em;color:var(--a3t,var(--a3))}
.gdtc0,.gdtc1{position:absolute;top:36px;font-family:var(--mono);font-size:calc(10.5px*var(--ts,1))}
.gdtc0{left:0}
.gdtc1{transform:translateX(-100%)}
/* the storyboard */
.gdsbd{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:8px}
.gdsc{display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--text) 11%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);border-top:3px solid color-mix(in srgb,var(--text) 22%,transparent)}
.gdsc.mid{border-top-color:var(--a1)}
.gdsc.fin{border-top-color:var(--a2)}
.gdsc.on{border-color:var(--a1);box-shadow:0 0 0 1px var(--a1)}
.gdscb{display:flex;flex-direction:column;gap:3px;padding:0 0 6px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer}
.gdscb>.r-title,.gdscb>.r-detail{padding:0 9px;overflow:hidden;text-overflow:ellipsis}
.gdscb>.r-title{padding-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
.gdscb>.r-detail{white-space:nowrap}
.gdsc .gdthumb{display:grid;width:100%}
.gdsn{font:600 calc(30px*var(--ts,1))/1 var(--disp);color:color-mix(in srgb,var(--text) 35%,transparent)}
.gdthumb .gdtc,.gdthumb .gddur{position:absolute;top:auto;bottom:5px;padding:2px 5px;background:rgba(0,0,0,.6);color:#fff;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);text-shadow:none}
.gdthumb .gdtc{left:5px}
.gdthumb .gddur{left:auto;right:5px}
.gdsc .gdft{padding:0 9px 8px}
.gdsl.on{border-color:var(--a1)}
.gdslt{flex:0 0 auto;width:3.4em}
.gdslb{flex:1 1 220px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;padding:2px 4px}
/* the asset board */
.gdkan{display:grid;grid-template-columns:repeat(var(--n),minmax(150px,1fr));gap:6px;min-width:calc(var(--n) * 156px);margin-bottom:8px}
.gdkc{display:flex;flex-direction:column;gap:5px;min-width:0;padding:6px;background:color-mix(in srgb,var(--text) 3%,transparent);border-top:3px solid color-mix(in srgb,var(--text) 18%,transparent);min-height:90px}
.gdkc.hot{border-top-color:#ffb347;background:color-mix(in srgb,#ffb347 6%,transparent)}
.gdkc.fin{border-top-color:var(--a2)}
.gdkh{display:flex;align-items:center;justify-content:space-between;gap:6px}
.gdkh b{font:600 calc(13px*var(--ts,1))/1 var(--mono);color:var(--text)}
.gdkc.hot .gdkh b{color:color-mix(in srgb,#ffb347 72%,var(--text))}
.gdac{position:relative;display:flex;flex-direction:column;background:var(--p1,var(--page));border:1px solid color-mix(in srgb,var(--text) 11%,transparent)}
.gdac.blk{border-left:3px solid #ff6b5a}
.gdac.on{border-color:var(--a1);box-shadow:0 0 0 1px var(--a1)}
.gdacb{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:6px 7px;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;min-width:0}
.gdacb .r-title{font-size:calc(13.5px*var(--ts,1));line-height:1.25;overflow-wrap:anywhere}
.gdty{display:inline-block;padding:2px 6px;border-radius:3px;font:600 calc(9.5px*var(--ts,1))/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;background:color-mix(in srgb,var(--c) 20%,transparent);color:color-mix(in srgb,var(--c) 75%,var(--text))}
.gdwhy{color:color-mix(in srgb,#ff6b5a 70%,var(--text))}
.gdacm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.gdacm .fav{width:20px;height:20px;font-size:calc(10px*var(--ts,1))}
.gdacm .gxpill{min-height:18px;padding:1px 6px;font-size:calc(10px*var(--ts,1))}
.gdacmv{position:absolute;right:3px;top:3px;display:flex;gap:2px;opacity:0;transition:opacity .15s}
.gdac:hover .gdacmv,.gdac:focus-within .gdacmv,.gdac.on .gdacmv{opacity:1}
.gdacmv .gdmv{width:20px;height:20px;background:var(--p1,var(--page))}
@media (hover:none){.gdacmv{opacity:1}}
.gdstages{display:flex;flex-wrap:wrap;gap:3px}
.gdstg{min-height:26px;padding:2px 9px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.03em}
.gdstg.past{background:color-mix(in srgb,var(--a1) 22%,transparent);color:var(--text);border-color:transparent}
.gdstg.cur{background:var(--a1);border-color:var(--a1);color:var(--page)}
.gdstg:disabled{cursor:default}

/* ── v59 · each widget title is bold and takes its category's colour, so
   widgets read apart at a glance. The colour is mixed with the text colour,
   which keeps it readable on light and dark themes. ── */
.wgt{--wc:var(--a1)}
.wgt[data-wcat="plan"]{--wc:var(--a2)}
.wgt[data-wcat="harada"]{--wc:var(--a3)}
.wgt[data-wcat="group"]{--wc:#ffb347}
.wgt[data-wcat="game"]{--wc:#b48cff}
.wgt[data-wcat="gameq"]{--wc:#ff7b6b}
.wgt[data-wcat="gamel"]{--wc:#5ec8e5}
.wgt[data-wcat="music"]{--wc:#f472b6}
.wgt[data-wcat="musicr"]{--wc:#ffd166}
.wgt[data-wcat="date"]{--wc:#ff6f91}
#spc .wgt>.wh{background:linear-gradient(90deg,color-mix(in srgb,var(--wc) 16%,transparent),color-mix(in srgb,var(--wc) 4%,transparent) 70%);
  border-bottom-color:color-mix(in srgb,var(--wc) 35%,transparent);box-shadow:inset 3px 0 0 var(--wc)}
#spc .wgt>.wh h3,:root.quiet #spc .wgt>.wh h3{font-weight:700;font-size:calc(13.5px*var(--ts,1));-webkit-text-stroke:0;
  color:color-mix(in srgb,var(--wc) 72%,var(--text))}
#spc .wgt>.wh .gr{color:var(--wc);opacity:.8}
/* on a light palette the title takes more of the text colour, so a pale hue stays dark enough to read */
:root[data-tod="day"]:not([data-smode="dark"]) #spc .wgt>.wh h3,:root[data-smode="light"] #spc .wgt>.wh h3{color:color-mix(in srgb,var(--wc) 44%,#000);font-weight:800}
:root[data-tod="day"]:not([data-smode="dark"]) #spc .wgt>.wh,:root[data-smode="light"] #spc .wgt>.wh{background:linear-gradient(90deg,color-mix(in srgb,var(--wc) 22%,transparent),color-mix(in srgb,var(--wc) 6%,transparent) 70%)}
/* v62 · the tinted header needs its size and close buttons darker too, to keep 4.5 to 1 */
:root[data-tod="day"]:not([data-smode="dark"]) #spc .wgt>.wh button,:root[data-smode="light"] #spc .wgt>.wh button{color:color-mix(in srgb,var(--muted) 55%,var(--text))}

/* ── v59 · the onion skin layer over the whole Space ── */
:root.osk-on #spc{position:relative}
.olay{position:absolute;left:0;top:0;width:100%;height:100%;z-index:60;pointer-events:none}
#spc[data-free]>.olay{width:var(--freew,100%);height:var(--freeh,100%)}
.ocatch{position:absolute;inset:0;pointer-events:none}
.olay:is([data-tool="pen"],[data-tool="brush"],[data-tool="marker"]) .ocatch{pointer-events:auto;cursor:crosshair;touch-action:none;background:color-mix(in srgb,var(--a2) 3%,transparent)}
.olay[data-tool="eraser"] .ocatch{pointer-events:auto;cursor:cell;touch-action:none;background:color-mix(in srgb,#ff6b5a 3%,transparent)}
.olay:is([data-tool="note"],[data-tool="sticky"]) .ocatch{pointer-events:auto;cursor:copy;background:color-mix(in srgb,var(--a2) 4%,transparent)}
.ocv,.olive{position:absolute;pointer-events:none;color:var(--text)}
.olive{z-index:5}
.osel{position:absolute;pointer-events:none;outline:1.5px dashed var(--a1);outline-offset:4px}
.oact{position:absolute;z-index:6;pointer-events:auto;display:flex;align-items:center;gap:4px;padding:4px 6px;white-space:nowrap;background:var(--p1,var(--page));border:1px solid var(--a1);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.oact .r-label{padding:0 4px}
.oact button,.ocard header button{min-height:24px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--text) 22%,transparent);background:transparent;color:var(--text);cursor:pointer;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.oact button[aria-pressed="true"]{background:var(--a2);border-color:var(--a2);color:var(--page)}
.oact button:disabled{opacity:.4;cursor:default}
.ocard{z-index:4;width:220px}
.ocard.on{box-shadow:0 0 0 2px var(--a1),0 6px 18px rgba(0,0,0,.28)}
/* the toolbar sits on screen while the layer is open */
.obar{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:400;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;
  width:max-content;max-width:calc(100vw - 32px);padding:8px 12px;background:color-mix(in srgb,var(--p1,var(--page)) 95%,transparent);
  border:1px solid var(--a2);box-shadow:0 14px 36px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.obar .obt{color:var(--a2t,var(--a2))}
.obar :is([data-otool],[data-oundo],[data-oredo]){min-height:28px;padding:2px 10px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--text);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.obar [data-otool][aria-pressed="true"]{background:var(--a2);border-color:var(--a2);color:var(--page)}
.obar :is([data-oundo],[data-oredo]):disabled{opacity:.35;cursor:default}
.obar .obst{white-space:nowrap}
@media (max-width:700px){.obar{bottom:12px}.obar .obst{display:none}}

/* ── v59 · names and titles wrap onto more lines instead of being cut ── */
.rtb .rn{max-width:320px}
:is(.rtb .rn .tx,.rtb .rn small,.myr .nm,.fnm,.fnm.lnk,.nm1,.my-sn,.tmkn,.chd-rt b,.chd-head h3,.hpin span,.gxbar .r-title,.gdscb>.r-title,.gdscb>.r-detail,
  .fent span,.munow b,.lnk .n,.lnk .n s,.dep .t,.pr .nm b,.cmd .r .lb,.mdh .mt,.gdt,.nwfo span,.fprow .fnm small,.mxch .r-label,.my-names button,.chd-rt small){
  white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;max-width:none}
.rtb .rn .tx{line-height:1.25}
.gdscb>.r-title{display:block;-webkit-line-clamp:unset}
.tmtrail .tmtr-up,.tmtrail .tmtr-me{white-space:normal;overflow-wrap:anywhere}
.hp{max-width:none}
.tmtools [data-tm3d][aria-pressed="true"]{background:var(--a1);border-color:var(--a1);color:var(--page)}
.tmtools [data-tm3d]{font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.04em}

/* ── v59 · the empty canvas, its suggestions, and the questions ── */
.wrec{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;max-width:1180px;width:100%;box-sizing:border-box;margin:24px auto;padding:22px;text-align:left;background:color-mix(in srgb,var(--p1,var(--page)) 92%,transparent);border:1px solid color-mix(in srgb,var(--a1) 30%,transparent)}
.wrec>b{font:600 calc(22px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.wrecg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.wrecc{--wc:var(--a1);display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid color-mix(in srgb,var(--wc) 35%,transparent);border-top:3px solid var(--wc);background:color-mix(in srgb,var(--wc) 5%,transparent)}
.wrecc[data-wcat="plan"]{--wc:var(--a2)}.wrecc[data-wcat="harada"]{--wc:var(--a3)}.wrecc[data-wcat="group"]{--wc:#ffb347}.wrecc[data-wcat="game"]{--wc:#b48cff}
.wrecc[data-wcat="gameq"]{--wc:#ff7b6b}.wrecc[data-wcat="gamel"]{--wc:#5ec8e5}.wrecc[data-wcat="music"]{--wc:#f472b6}.wrecc[data-wcat="musicr"]{--wc:#ffd166}
.wrecc b{font:700 calc(15px*var(--ts,1))/1.25 var(--disp);color:color-mix(in srgb,var(--wc) 70%,var(--text))}
.wrecc p{margin:0;flex:1;font-size:calc(13.5px*var(--ts,1));line-height:1.45;color:var(--text)}
.wrecc .fbtn{align-self:flex-start}
.wrecp{aspect-ratio:16/9;background:color-mix(in srgb,var(--wc) 10%,transparent) center/cover no-repeat;border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.wrecp:not([style]){display:none}
.wrec .inf,.intake .inf{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.intake{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.inkc{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--p1,var(--page));border:1px solid var(--a1);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.inkc h2{margin:0;font:600 calc(22px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.inkc fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:6px}
.inopts{display:flex;flex-wrap:wrap;gap:6px}
.inopts .mxchip{min-height:30px;padding:4px 12px;font-size:calc(12px*var(--ts,1))}
.gdik{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.gdikq{display:flex;flex-direction:column;gap:5px}
.gdikq b{font:600 calc(13px*var(--ts,1))/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--a1t,var(--a1))}
.gdikq span{display:flex;flex-wrap:wrap;gap:5px}
.gdikc{min-height:28px;padding:3px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);background:transparent;color:var(--text);cursor:pointer;font:500 calc(13px*var(--ts,1))/1 var(--disp)}
.gdikc[aria-pressed="true"]{background:var(--a1);border-color:var(--a1);color:var(--page)}
/* the widget guide */
.wguide{position:fixed;inset:0;z-index:480;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.wgc{width:min(1240px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--p1,var(--page));border:1px solid var(--a1);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.wgh{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.wgh h2{margin:0;font:700 calc(22px*var(--ts,1))/1.2 var(--disp);color:var(--text)}
.wgg{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:2px}
.wgcard .wrecp:not([style]){display:block}
.wgcard .r-label{color:color-mix(in srgb,var(--wc) 70%,var(--text))}
.wrecp{background-position:top center}

/* ── v60 · a task with your private onion notes gets a small lilac mark.
   It used the class "ghost" before, which the home page's background word
   already owns, so the card floated out of its column as a faint watermark. ── */
.mb .t.onioned,.card.onioned{position:relative}
.mb .t.onioned::after,.card.onioned::after{content:'';position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--oc,#C4B5FD);box-shadow:0 0 0 2px color-mix(in srgb,var(--oc,#C4B5FD) 30%,transparent)}
.tmmap .tmt.onioned .tmhit{stroke:var(--oc,#C4B5FD);stroke-width:1.6;stroke-dasharray:3 2}
/* v60 · the open Team map node comes forward in 3D */
.tmmap .tmt.lift>:is(.tmg,text,.tmring){translate:var(--lx,0) var(--ly,0);scale:var(--ls,1);transform-box:fill-box;transform-origin:center}
.tmmap .tmt.lift>.tmg{filter:drop-shadow(0 5px 6px rgba(0,0,0,.35))}
.tmmap .tmt.lift>text{transform-origin:center;transform-box:view-box;scale:1}
/* v61 · with a task open, its parent, the line above it, its siblings and its
   subtasks keep their names on the map; only tasks outside that family fade */
.tmt.kin{opacity:.92}
.tmt.kin text{opacity:1}

/* ── v61 · training ── */
.wgt[data-wcat="train"]{--wc:#fb923c}
.wrecc[data-wcat="train"]{--wc:#fb923c}
.trch{display:block;width:100%;height:auto;max-height:200px;overflow:visible}
.trgl{stroke:var(--a3);stroke-dasharray:5 4;stroke-width:1.5}
.trgt{fill:var(--a3t,var(--a3));font:600 11px var(--mono)}
.trvt{fill:var(--text);font:600 11px var(--mono)}
.trxt{fill:var(--muted);font:11px var(--mono)}
.trdot{fill:var(--p1,var(--page));stroke-width:2}
.trtb{width:100%;border-collapse:collapse;font-size:calc(13px*var(--ts,1))}
.trtb th{font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.trtb td{padding:5px 6px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent);font-family:var(--mono);white-space:nowrap}
.trtb tr.pb td{color:var(--a1t,var(--a1));font-weight:700}
.trtb tr.on td{background:color-mix(in srgb,var(--a1) 8%,transparent)}
.trlk{all:unset;cursor:pointer;color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.trlk:hover,.trlk:focus-visible{color:var(--a1t,var(--a1))}
.trrun{margin:8px 0}
.trfs{display:flex;flex-wrap:wrap;gap:6px}
.trf{display:flex;flex-direction:column;gap:2px}
.trf .gdin{width:7em}
.trform{margin-top:8px}
.trmore{flex:1 1 100%}
.trmore summary{cursor:pointer;color:var(--muted);font-size:calc(12.5px*var(--ts,1));padding:4px 0}
.trmore textarea{width:100%;min-height:60px;margin:4px 0 6px;font:inherit;font-size:calc(13px*var(--ts,1));color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid color-mix(in srgb,var(--text) 14%,transparent);padding:6px}
.trmore .trfs input{flex:1 1 110px}
.trsp{display:flex;flex-direction:column;gap:6px}
.trspr{display:grid;grid-template-columns:64px repeat(var(--n),minmax(40px,1fr)) 130px;gap:6px;align-items:end;height:46px}
.trspr>.r-label{align-self:center}
.trspr>.r-detail{align-self:center}
.trsb{position:relative;height:100%;display:flex;align-items:flex-end}
.trsb i{display:block;width:100%;height:var(--h);background:color-mix(in srgb,var(--a1) 45%,transparent);border-top:2px solid var(--a1)}
.trsb.best i{background:var(--a2);border-color:var(--a2)}
.trsb em{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:600 calc(11px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--text)}
.ok{color:var(--a2t,var(--a2))}.bad{color:color-mix(in srgb,#ff6b5a 75%,var(--text))}
.trhz{display:flex;flex-direction:column;gap:6px}
.trhzr{display:grid;grid-template-columns:64px 1fr 150px;gap:8px;align-items:center}
.trzb{display:flex;height:16px;gap:1px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.trzb i{display:block;height:100%}
.trzk{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:calc(11.5px*var(--ts,1));color:var(--muted)}
.trzk i{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}
.trff{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:center}
.trvo{display:flex;flex-direction:column;gap:4px}
.trvo b{font:700 calc(34px*var(--ts,1))/1 var(--mono);color:var(--text)}
.trivs{display:flex;gap:2px;height:44px;margin-top:6px}
.trivs i{display:block;min-width:2px;background:color-mix(in srgb,var(--k) 65%,transparent);border-top:3px solid var(--k)}
.trivx{display:flex;justify-content:space-between;font:calc(11px*var(--ts,1)) var(--mono);color:var(--muted)}
.kvs{display:flex;flex-wrap:wrap;gap:4px 16px}
.kvs b{color:var(--text);font-family:var(--mono)}
.trlp{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center}
.trlr circle{fill:none;stroke:color-mix(in srgb,var(--text) 10%,transparent);stroke-width:4}
.trlr circle.on{stroke:var(--a2);opacity:.85}
.trlr circle.part{stroke:var(--a3);transform:rotate(-90deg);transform-origin:70px 70px}
.trlr text{fill:var(--text);font:700 18px var(--mono)}
.trcn{display:flex;flex-direction:column;gap:6px}
.trcni{display:grid;grid-template-columns:64px 64px 1fr 92px 76px 96px;gap:8px;align-items:center;font:calc(12px*var(--ts,1)) var(--mono);color:var(--muted)}
.trcni b{color:var(--text)}
.trcni.best b{color:var(--a1t,var(--a1))}
.trcni i{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--a1),#ffb347 60%,#ff6b5a);-webkit-mask:linear-gradient(90deg,#000 var(--t),transparent var(--t));mask:linear-gradient(90deg,#000 var(--t),transparent var(--t))}
.trrings{display:flex;gap:16px;justify-content:space-around;flex-wrap:wrap}
.trring{--k:var(--a1);width:120px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--k) calc(var(--p)*1%),color-mix(in srgb,var(--text) 10%,transparent) 0);display:grid;place-items:center;text-align:center;position:relative}
.trring::before{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--p1,var(--page))}
.trring b,.trring span{position:relative}
.trring b{font:700 calc(17px*var(--ts,1)) var(--mono);align-self:end}
.trring span{font-size:calc(11px*var(--ts,1));color:var(--muted);align-self:start;padding:0 14px}
.trwk{position:relative;display:flex;gap:6px;align-items:flex-end;height:70px;margin:12px 0 4px;padding-bottom:16px}
.trwkd{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.trwkd i{display:block;width:70%;background:color-mix(in srgb,var(--a1) 40%,transparent);border-top:2px solid var(--a1)}
.trwkd i.met{background:var(--a2);border-color:var(--a2)}
.trwkd span{position:absolute;bottom:-16px;font:calc(11px*var(--ts,1)) var(--mono);color:var(--muted)}
.trwk>b{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--a3);margin-bottom:16px}
.trgoal{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.trgb{display:flex;align-items:center;gap:8px;font-family:var(--mono)}
.trbar{position:relative;flex:1;height:10px;border-radius:5px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.trbar i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:linear-gradient(90deg,var(--a3),var(--a1))}
.trbar em{position:absolute;top:-18px;transform:translateX(-50%);font:600 calc(11.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--a1t,var(--a1))}
.trgo{color:var(--a3t,var(--a3))}
/* the routine sheet's week plan */
.rtb .rpl{display:block;font:500 calc(9px*var(--ts,1))/1 var(--mono);color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.02em}
.rtb .rpt{display:block;color:var(--a1t,var(--a1))}
.rtb tr.rplan td{padding:6px 4px 10px;text-align:left}
.rplf{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end}
.rplf label{display:flex;flex-direction:column;gap:2px}
.rplf .gdin{width:8.5em;border-color:color-mix(in srgb,var(--text) 16%,transparent)}
@media (max-width:640px){.trff,.trlp{grid-template-columns:1fr}.trcni{grid-template-columns:56px 56px 1fr 80px}.trcni span:last-child,.trcni span:nth-last-child(2){display:none}}

/* ── v62 · onion skin sticky notes and text ── */
.olay[data-tool="text"] .ocatch{pointer-events:auto;cursor:text;background:color-mix(in srgb,var(--a2) 4%,transparent)}
.ocard.ostk{width:184px;min-height:176px;background:var(--sc);color:#2a2410;border-top:0;transform:rotate(var(--rot,0deg));box-shadow:0 1px 0 rgba(0,0,0,.08),0 12px 24px -6px rgba(0,0,0,.4)}
.ocard.ostk header{opacity:.3;transition:opacity .15s}
.ocard.ostk:is(:hover,:focus-within,.on) header{opacity:1}
.ocard.ostk header .r-label{color:#4a4128}
.ocard.ostk header button{color:#2a2410;border-color:rgba(42,36,16,.3)}
.ocard.ostk header button[aria-pressed="true"]{background:#2a2410;color:var(--sc);border-color:#2a2410}
.ocard.ostk textarea{flex:1 1 auto;min-height:118px;resize:none;padding:4px 12px 6px;font:600 calc(16px*var(--ts,1))/1.35 var(--disp);color:#2a2410}
.ocard.ostk textarea::placeholder{color:rgba(42,36,16,.45)}
.ostkc{display:flex;gap:5px;padding:0 10px 8px;opacity:0;transition:opacity .15s}
.ocard.ostk:is(:hover,:focus-within) .ostkc{opacity:1}
.ostkc button{width:14px;height:14px;padding:0;border:1px solid rgba(42,36,16,.35);background:var(--c);cursor:pointer}
.ostkc button[aria-pressed="true"]{outline:2px solid #2a2410;outline-offset:1px}
.otxt{position:absolute;z-index:4;pointer-events:auto}
.otxt textarea{display:block;field-sizing:content;min-width:4ch;max-width:560px;min-height:0;resize:none;overflow:hidden;border:0;background:transparent;
  color:var(--oc);padding:2px 6px;font:700 calc(var(--ofs)*var(--ts,1))/1.2 var(--disp);text-shadow:0 1px 2px color-mix(in srgb,var(--page) 70%,transparent)}
.otxt textarea::placeholder{color:color-mix(in srgb,var(--oc) 45%,transparent)}
.otxt textarea:focus{outline:1px dashed color-mix(in srgb,var(--a1) 75%,transparent);outline-offset:2px}
.otxt.on textarea{outline:1.5px dashed var(--a1);outline-offset:2px}
.otxt header{position:absolute;left:0;bottom:calc(100% + 4px);display:none;align-items:center;gap:4px;padding:3px 5px;white-space:nowrap;cursor:grab;touch-action:none;
  background:var(--p1,var(--page));border:1px solid var(--a1);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.otxt header.ro{cursor:default}
.otxt:is(:hover,:focus-within,.on) header{display:flex}
.otxt header button{min-height:22px;padding:1px 7px;border:1px solid color-mix(in srgb,var(--text) 22%,transparent);background:transparent;color:var(--text);cursor:pointer;font:600 calc(10px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.otxt header button[aria-pressed="true"]{background:var(--a2);border-color:var(--a2);color:var(--page)}
.otxt header .fx{border:0;font-size:calc(15px*var(--ts,1))}

/* ── v62 · Commonplace book ── */
.cptabs{display:flex;gap:4px;margin:2px 0 10px}
.cptabs button{min-height:28px;padding:2px 12px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.cptabs button[aria-selected="true"]{color:var(--page);background:var(--a2);border-color:var(--a2)}
.cpbar{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.cpbar input,.cpuse input{flex:1 1 auto;min-width:0;min-height:32px;padding:4px 10px;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);color:var(--text);font:400 calc(13px*var(--ts,1))/1.3 var(--disp)}
.cpbar input:focus,.cpuse input:focus,.cpform textarea:focus{outline:none;border-color:var(--a1)}
.cplist{display:grid;gap:8px}
.cpe{padding:10px 12px 8px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-left:3px solid #e8b86b;background:color-mix(in srgb,var(--text) 3%,transparent)}
.cpe.on{border-color:color-mix(in srgb,#e8b86b 60%,transparent)}
.cpe header{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:6px}
.cpk{font:600 calc(10px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cph{min-height:22px;padding:1px 8px;border:1px solid color-mix(in srgb,#e8b86b 45%,transparent);background:transparent;color:var(--text);cursor:pointer;font:500 calc(12px*var(--ts,1))/1.2 var(--disp);border-radius:999px}
.cph i{font-style:normal;color:var(--muted);margin-left:2px}
.cph.on,.cph:hover{background:color-mix(in srgb,#e8b86b 22%,transparent)}
.cpu{font:600 calc(10px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--a1t,var(--a1))}
.cpx{display:block;width:100%;padding:0;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;font:italic 500 calc(15.5px*var(--ts,1))/1.45 Georgia,'Times New Roman',serif}
.cpe.big .cpx{font-size:calc(20px*var(--ts,1));line-height:1.4}
.cps{margin:6px 0 0;color:var(--muted);font-size:calc(12.5px*var(--ts,1))}
.cpno{color:var(--warn,#f59e0b);font-weight:600}
.cpn{margin:8px 0 0;padding-left:10px;border-left:2px solid color-mix(in srgb,var(--text) 20%,transparent);font-size:calc(13px*var(--ts,1))}
.cpul{margin:8px 0 0;padding-left:18px;font-size:calc(12.5px*var(--ts,1))}
.cpuse{display:flex;gap:6px;margin-top:8px}
.cpturn{display:flex;gap:8px;margin-top:10px}
.cpix{display:grid;gap:2px;margin:6px 0 8px;overflow-x:auto}
.cpixr{display:grid;grid-template-columns:28px repeat(6,minmax(70px,1fr));gap:2px;align-items:start}
.cpixr>*{min-height:28px;padding:3px;display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;background:color-mix(in srgb,var(--text) 3%,transparent)}
.cpixr.hd>*{min-height:0;justify-content:center;background:none;font:600 calc(11px*var(--ts,1))/1 var(--mono);color:var(--muted);text-transform:uppercase}
.cpixr b{justify-content:center;align-items:center;font:700 calc(14px*var(--ts,1))/1 Georgia,serif;color:#e8b86b}
.cpsee{font-size:calc(13px*var(--ts,1))}
.cpform{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.cpform textarea{grid-column:1/-1;resize:vertical;padding:6px 8px;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);color:var(--text);font:italic 500 calc(14px*var(--ts,1))/1.4 Georgia,serif}
.cpform input[name="w"],.cpform input[name="n"]{grid-column:span 2}
@media (max-width:640px){ .cpform{grid-template-columns:1fr} .cpform input[name="w"],.cpform input[name="n"]{grid-column:auto} }

/* v62 · the free canvas runs edge to edge, so the page width grips have nothing to set there */
#mid:has(#spc[data-lay="free"]) > .pwgrip{display:none}
/* v62 · Modern pairs a purple page with a pale lavender accent, so its tinted widget headers take the plain text colour to keep 4.5 to 1 */
:root[data-skin="modern"] #spc .wgt>.wh h3{color:var(--text)}
:root[data-skin="modern"] .av{background:color-mix(in srgb,var(--a1) 12%,transparent)}
/* v62 · the task window sits darker than the panels a skin tunes its muted grey for, so muted text there leans toward the text colour */
.td{--muted:color-mix(in srgb,var(--muted) 82%,var(--text))}
/* v62 · two skins sit a hair under 4.5 to 1 in the task window and chat: Modern's chosen chip, and the orange accent text on Skeuomorphism's pale panels */
:root[data-skin="modern"] .chip2.on{background:color-mix(in srgb,var(--a1) 25%,#2a1f45)}
/* skins.js sets each skin's colours with !important, so this override needs the extra .skinned to outrank it */
:root.skinned[data-skin="skeumorphism"]{--a1:#b42b00 !important;--a1t:#b42b00 !important;--a3:#a24200 !important;--a3t:#a24200 !important}

/* ── v62 · the Widgets panel: fixed head and foot, a list that scrolls between them ── */
.shelf{width:min(760px,calc(100vw - 32px));display:flex;flex-direction:column;padding:0;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);overflow:hidden}
.shelf .shhd{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px 10px;border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
.shelf .shhd h4{margin:0}
.shelf .shcount{font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--a1t,var(--a1))}
.shelf button.shx{width:auto;margin-left:auto;padding:2px 8px;min-height:28px;font-size:calc(18px*var(--ts,1));color:var(--muted)}
.shelf .shhd .shcats{margin:0}
.shelf .shhd .shq{flex:1 1 100%;margin:0;min-width:0;min-height:32px}
.shelf .shlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 12px;scrollbar-gutter:stable}
.shelf .shg{display:flex;align-items:baseline;gap:8px;position:sticky;top:-4px;z-index:1;margin:0;padding:10px 0 6px;background:color-mix(in srgb,var(--page) 97%,transparent)}
:root.skinned .shelf .shg{background:color-mix(in srgb,var(--p1) 97%,transparent)}
.shelf .shg span{letter-spacing:.04em;text-transform:none;font-family:var(--disp);opacity:.85}
.shelf .shgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.shelf .shgrid button{align-items:flex-start;padding:8px 9px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.shelf .shgrid button.on{border-color:color-mix(in srgb,var(--a1) 55%,transparent);background:color-mix(in srgb,var(--a1) 8%,transparent)}
.shelf .shgrid button i{margin-top:3px}
.shelf .shn{display:flex;flex-direction:column;gap:3px;min-width:0}
.shelf .shn b{font:600 calc(14px*var(--ts,1))/1.2 var(--disp)}
.shelf .shn small{font:400 calc(12px*var(--ts,1))/1.35 var(--disp);color:var(--muted);white-space:normal}
.shelf .rs{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:8px 14px 10px}
.shelf .rs button{width:auto;flex:1 1 auto;justify-content:center;border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
@media (max-width:640px){ .shelf .shgrid{grid-template-columns:1fr} .shelf{max-height:calc(100dvh - 120px)} }

/* ── v62 · task window sections: each heading is a full-width bar, the open ones lit, the folded ones saying what they hold ── */
.td .tdsec{padding:0;overflow:hidden;border-left-width:4px}
.td .tdsec:not(.shut){border-left-color:var(--pc,var(--a1));border-color:color-mix(in srgb,var(--pc,var(--a1)) 32%,transparent);border-left-color:var(--pc,var(--a1))}
.td .tdsec>h3,.td .tdsec.shut>h3{margin:0}
.td .tdsec>h3 .tdsf{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px}
.td .tdsec:not(.shut)>h3 .tdsf{background:color-mix(in srgb,var(--pc,var(--a1)) 12%,transparent);border-bottom:1px solid color-mix(in srgb,var(--pc,var(--a1)) 25%,transparent);color:var(--text)}
.td .tdsec>h3 .tdsf:hover{background:color-mix(in srgb,var(--pc,var(--a1)) 16%,transparent)}
.td .tdsec>.tdsb{padding:12px}
.td .tdst{flex:0 0 auto}
.td .tdsum{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 calc(13px*var(--ts,1))/1.2 var(--disp);letter-spacing:0;text-transform:none;color:var(--muted);-webkit-text-stroke:0}
.td .tdsec:not(.shut) .tdsum{display:none}
.td .tdsc{margin-left:auto;flex:0 0 auto}
.td .tdfold{margin-left:auto}
.td .tdsec.shut{padding:0}
.rtesave{font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--a1t,var(--a1));white-space:nowrap}
.rtesave:empty{display:none}
/* v62 · notecards and sticky notes resize from their corner in both directions, and their header buttons stay dark on the paper */
.olay .ocard{resize:both;overflow:hidden;min-width:150px;min-height:90px;max-width:640px;max-height:900px}
.olay .ocard textarea{flex:1 1 auto;resize:none;min-height:0}
.olay .ocard header button{color:#2a2410;border-color:rgba(42,36,16,.35);background:transparent}
.olay .ocard header button[aria-pressed="true"]{background:#2a2410;color:#fef3a7;border-color:#2a2410}
.olay .ocard.ostk header button[aria-pressed="true"]{color:var(--sc)}
.olay .ocard header .r-label{color:#4a4128}
.olay .ocard header .fx{color:#4a4128}
.olay .ocard.ostk{min-height:176px}
/* v62 · a blurred panel over a canvas that is moving under it has to re-blur every frame, and on some graphics cards that flickered; the blur rests while you pan */
body.panning *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* v62 · screenshots in notes */
.rte img[data-file]{display:block;max-width:100%;max-height:360px;margin:6px 0;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);border-radius:4px;cursor:zoom-in;background:color-mix(in srgb,var(--text) 6%,transparent)}
.rte img.rteup{min-width:120px;min-height:70px;opacity:.5;animation:fadeIn .6s ease-in-out infinite alternate}
.rte img.rtegone{min-width:120px;min-height:40px}
.rte.rtedrop{outline:2px dashed var(--a1);outline-offset:-4px}

/* ── v62 · Ongoing ── */
.f-ongo{--late:#ff6b6b}
.f-ongo button[data-ongo-t]{font:inherit;color:inherit;cursor:pointer;border:0;padding:0;background:none;text-align:left}
.og-sw{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 12px}
.og-sw button{min-height:26px;padding:2px 10px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.og-sw button[aria-pressed="true"]{background:var(--a2);border-color:var(--a2);color:var(--page)}
.og-line{position:absolute;top:0;bottom:0;width:2px;background:var(--a2);box-shadow:0 0 8px color-mix(in srgb,var(--a2) 70%,transparent);pointer-events:none;z-index:2}
.og-line b{position:absolute;top:-16px;left:5px;font:400 calc(10px*var(--ts,1))/1 var(--mono);color:var(--a2t,var(--a2));letter-spacing:.06em}
/* now line */
.og-now{--nw:clamp(110px,26%,200px)}
.og-axis{position:relative;height:16px;margin:0 6px 4px var(--nw);font:400 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.og-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.og-axis span:first-child{transform:none} .og-axis span:last-child{transform:translateX(-100%)}
.og-rows{position:relative;padding-top:18px}
.og-rows>.og-line{left:calc(var(--nw) + (100% - var(--nw) - 6px)*.3333)!important}
.og-row{display:grid;grid-template-columns:var(--nw) 1fr;align-items:center;min-height:30px;margin-right:6px}
.og-row .og-n{font-weight:500;font-size:calc(13.5px*var(--ts,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:10px}
.og-tr{position:relative;height:30px}
.og-bar{position:absolute!important;top:8px;height:14px;border-radius:7px!important;overflow:hidden;background:color-mix(in srgb,var(--c) 30%,transparent)!important;border:1px solid var(--c)!important}
.og-bar i{position:absolute;inset:0 auto 0 0;background:var(--c)}
.og-bar.open{border-right-style:dashed!important;-webkit-mask:linear-gradient(90deg,#000 70%,transparent);mask:linear-gradient(90deg,#000 70%,transparent)}
.og-bar.late{border-color:var(--late)!important}
.og-bar s{position:absolute;right:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--late) 0 4px,transparent 4px 8px)}
/* lanes */
.og-lane{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed color-mix(in srgb,var(--text) 12%,transparent)}
.og-lane:last-child{border-bottom:0}
.og-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 calc(12px*var(--ts,1))/1 var(--disp);background:color-mix(in srgb,var(--a1) 22%,transparent);color:var(--text)}
.og-ltr{position:relative}
.og-pill{position:absolute!important;height:19px;border-radius:4px!important;padding:0 7px!important;font:600 calc(11.5px*var(--ts,1))/19px var(--disp)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#120d1b!important;background:var(--c)!important}
.og-pill.late{box-shadow:inset 0 0 0 2px var(--late)}
/* river */
.og-it{display:grid;grid-template-columns:14px 1fr;gap:12px;position:relative;padding-bottom:14px}
.og-it::before{content:'';position:absolute;left:6px;top:16px;bottom:0;width:2px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.og-it:last-child::before{display:none}
.og-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--c);margin-top:3px;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.og-t{display:flex;gap:8px;align-items:baseline}
.og-t .og-tt{font-weight:600;font-size:calc(14.5px*var(--ts,1));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-t>span{margin-left:auto;font:400 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--muted);letter-spacing:.06em;white-space:nowrap}
.og-rail{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent);margin:6px 0 5px;overflow:hidden}
.og-rail i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 45%,transparent),var(--c))}
.og-rail.late i{background:var(--late)}
.og-meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:calc(12.5px*var(--ts,1))}
.og-meta .late{color:var(--late);font-weight:600}
.og-subs{display:inline-flex;gap:3px}.og-subs i{width:7px;height:7px;border-radius:2px;background:color-mix(in srgb,var(--text) 22%,transparent)}.og-subs i.d{background:var(--c)}
/* pills */
.og-pills{display:flex;flex-wrap:wrap;gap:8px}
.og-chip{display:flex!important;align-items:center;gap:9px;padding:5px 12px 5px 5px!important;border:1px solid color-mix(in srgb,var(--c) 50%,transparent)!important;background:color-mix(in srgb,var(--c) 10%,transparent)!important;border-radius:999px!important}
.og-chip.late{border-color:var(--late)!important}
.og-ring{width:30px;height:30px;border-radius:50%;flex:0 0 auto;background:conic-gradient(var(--c) calc(var(--p)*1%),color-mix(in srgb,var(--text) 12%,transparent) 0);-webkit-mask:radial-gradient(circle,transparent 10px,#000 11px);mask:radial-gradient(circle,transparent 10px,#000 11px)}
.og-chip.late .og-ring{background:var(--late)}
.og-chip b{display:block;font-weight:600;font-size:calc(13.5px*var(--ts,1));max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-chip small{display:block;font:400 calc(10.5px*var(--ts,1))/1.3 var(--mono);color:var(--muted);letter-spacing:.05em}
.og-chip.late small{color:var(--late)}
/* this week */
.og-wh,.og-wr,.og-wbg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.og-wh span{font:400 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--muted);text-align:center;padding:0 0 6px}
.og-wh span.t{color:var(--a2t,var(--a2));font-weight:600}
.og-wb{position:relative}
.og-wbg{position:absolute;inset:0;pointer-events:none}
.og-wbg i{background:color-mix(in srgb,var(--text) 3%,transparent)}
.og-wbg i.t{background:color-mix(in srgb,var(--a2) 9%,transparent);outline:1px solid color-mix(in srgb,var(--a2) 40%,transparent)}
.og-wr{position:relative;margin-bottom:5px}
.og-wbar{height:26px;border-radius:5px!important;padding:0 8px!important;font:500 calc(12px*var(--ts,1))/26px var(--disp)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--c) 26%,transparent)!important;border-left:3px solid var(--c)!important}
.og-wbar.cont{border-radius:0 5px 5px 0!important;border-left-style:dashed!important}
.og-wbar.late{border-left-color:var(--late)!important;background:color-mix(in srgb,var(--late) 22%,transparent)!important}
@media (max-width:640px){ .og-now{--nw:96px} }

/* ── v79 · Timeline: every dated task on one chart ── */
.f-tline{--late:#ff6b6b;--lw:clamp(calc(150px*var(--ts,1)),30%,calc(270px*var(--ts,1)));--rh:calc(34px*var(--ts,1))}
.tl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 10px}
.tl-bar .og-sw{margin:0}
.tl-nav{display:flex;gap:2px}
.tl-nav button{min-height:26px;min-width:28px;padding:2px 9px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tl-nav button:hover,.tl-nav button:focus-visible{color:var(--text);border-color:var(--a2);outline:none}
.tl-nav button[aria-pressed="true"]{color:var(--a2t,var(--a2));border-color:var(--a2)}
.tl-rng{margin-left:auto;font:400 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--muted);letter-spacing:.06em}
.tl-g{position:relative}
.tl-hd,.tl-r{display:grid;grid-template-columns:var(--lw) minmax(0,1fr)}
.tl-hd{position:sticky;top:-12px;z-index:4;background:color-mix(in srgb,var(--p1) 94%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.tl-tr{position:relative;min-width:0}
.tl-hd .tl-tr{height:calc(38px*var(--ts,1));font:400 calc(10px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted)}
.tl-mo span,.tl-dy span{position:absolute;white-space:nowrap}
.tl-mo span{top:3px;color:var(--text);font-weight:600;padding-left:3px;border-left:1px solid color-mix(in srgb,var(--text) 30%,transparent)}
.tl-dy span{top:calc(21px*var(--ts,1));transform:translateX(-50%)}
.tl-dy span.t{color:var(--a2t,var(--a2));font-weight:600}
.tl-bd{position:relative}
.tl-bg{position:absolute;inset:0;display:grid;grid-template-columns:var(--lw) minmax(0,1fr);pointer-events:none}
.tl-bg .tl-tr{grid-column:2}
.tl-bg i{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--text) 5%,transparent)}
.tl-now{position:absolute;top:calc(-38px*var(--ts,1));bottom:0;width:2px;margin-left:-1px;background:var(--a2);box-shadow:0 0 8px color-mix(in srgb,var(--a2) 70%,transparent);z-index:2}
.tl-r{min-height:var(--rh);align-items:center;border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent)}
.tl-r .tl-tr{height:var(--rh)}
.tl-l{display:flex;align-items:center;gap:4px;min-width:0;padding:0 8px 0 calc(var(--d,0)*14px)}
.tl-f,.tl-f0{flex:none;width:calc(18px*var(--ts,1));height:calc(18px*var(--ts,1))}
.tl-f{display:grid;place-items:center;border:0;padding:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:3px}
.tl-f svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tl-f:hover,.tl-f:focus-visible{color:var(--text);background:color-mix(in srgb,var(--text) 10%,transparent);outline:none}
.tl-n{flex:1;min-width:0;border:0;padding:0;background:none;color:var(--text);text-align:left;cursor:pointer;font-weight:500;font-size:calc(13px*var(--ts,1));line-height:1.25;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-r:not(.sub) .tl-n{font-weight:600}
.tl-r.sub .tl-n{font-size:calc(12.5px*var(--ts,1));color:color-mix(in srgb,var(--text) 86%,var(--muted))}
.tl-n:hover,.tl-n:focus-visible{color:var(--a1t,var(--a1));outline:none;text-decoration:underline}
.tl-r.done .tl-n{color:var(--muted);text-decoration:line-through}
.tl-av{flex:none;font:600 calc(9.5px*var(--ts,1))/1 var(--mono);color:var(--muted);border:1px solid color-mix(in srgb,var(--text) 22%,transparent);border-radius:99px;padding:3px 5px}
.tl-gh{min-height:calc(28px*var(--ts,1));background:color-mix(in srgb,var(--text) 5%,transparent)}
.tl-gh .tl-l{font:600 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-left:6px}.tl-gh em{font-style:normal;color:var(--muted);font-weight:400}
.tl-b{position:absolute;top:calc(50% - calc(9px*var(--ts,1)));height:calc(18px*var(--ts,1));min-width:6px;padding:0;border:1px solid var(--c);border-radius:4px;background:color-mix(in srgb,var(--c) 28%,transparent);cursor:pointer;overflow:visible;z-index:1;touch-action:none}
.tl-b>i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:3px 0 0 3px;pointer-events:none}
.tl-b:hover,.tl-b:focus-visible{outline:2px solid var(--c);outline-offset:2px;z-index:3}
.tl-b.cl{border-left-style:dashed;border-radius:0 4px 4px 0}.tl-b.cr{border-right-style:dashed;border-radius:4px 0 0 4px}
.tl-b.open{border-right-style:dashed;-webkit-mask:linear-gradient(90deg,#000 65%,transparent);mask:linear-gradient(90deg,#000 65%,transparent)}
.tl-b.late{border-color:var(--late);box-shadow:inset 0 0 0 1px var(--late)}
.tl-b.done{opacity:.45}
/* v83 · a parent with no dates of its own is a full bar across its subtasks, filling as they get done */
.tl-b.sum{cursor:pointer;background:color-mix(in srgb,var(--c) 18%,transparent);border-width:1.5px}
/* a guessed start fades in from the left */
.tl-b.est{border-left-color:transparent;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.3),#000 45%);mask:linear-gradient(90deg,rgba(0,0,0,.3),#000 45%)}
.tl-b.pt{top:calc(50% - calc(8px*var(--ts,1)));height:calc(16px*var(--ts,1));width:calc(16px*var(--ts,1))!important;min-width:0;margin-left:calc(-8px*var(--ts,1));border-radius:2px;transform:rotate(45deg);background:var(--c)}
.tl-b.tl-ms::after{content:"";position:absolute;right:calc(-7px*var(--ts,1));top:calc(2px*var(--ts,1));width:calc(13px*var(--ts,1));height:calc(13px*var(--ts,1));transform:rotate(45deg);background:var(--c);border:1px solid var(--p1)}
.tl-b.pt.late{background:var(--late)}
.tl-h{position:absolute;top:-3px;bottom:-3px;width:9px;cursor:ew-resize;z-index:2}
.tl-h[data-tl-h="s"]{left:-5px}.tl-h[data-tl-h="e"]{right:-5px}
.tl-b:hover .tl-h::after,.tl-b:focus-visible .tl-h::after,.tl-b.drag .tl-h::after{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--text)}
.tl-b.drag{z-index:5;cursor:grabbing;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.tl-b[data-tip]::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:3px 7px;border-radius:3px;background:var(--text);color:var(--page);font:600 calc(10.5px*var(--ts,1))/1 var(--mono);white-space:nowrap}
.tl-quarter .tl-dy span{font-size:calc(9.5px*var(--ts,1))}
@media (max-width:640px){ .f-tline{--lw:110px} .tl-rng{display:none} }
/* v82 · every other row is shaded, and a task's name sits on the chart beside its bar or diamond */
.tl-bd>.tl-r:nth-of-type(odd){background:color-mix(in srgb,var(--text) 3.5%,transparent)}
.tl-tt{position:absolute;top:50%;transform:translateY(-50%);margin-left:calc(10px*var(--ts,1));white-space:nowrap;font-size:calc(12px*var(--ts,1));line-height:1;color:var(--text);pointer-events:none;text-shadow:0 1px 3px var(--p1),0 0 6px var(--p1)}
.tl-tt.lft{transform:translate(-100%,-50%);margin-left:calc(-10px*var(--ts,1))}
.tl-tt.pt{margin-left:calc(18px*var(--ts,1))}.tl-tt.pt.lft{margin-left:calc(-18px*var(--ts,1))}
.tl-tt em{font-style:normal;font-family:var(--mono);font-size:calc(10.5px*var(--ts,1));color:var(--muted);margin-left:6px}
.tl-r.done .tl-tt{color:var(--muted);text-decoration:line-through}
.tl-r.sub .tl-tt{color:color-mix(in srgb,var(--text) 88%,var(--muted))}
/* ── v81 · pick a task: the chart glides to its family and a panel opens beside it ── */
.wgt[data-wgt="tline"]>.wb{container-type:inline-size}
.tl-tr{overflow-x:clip}
.tl-main{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.tl-main.open{grid-template-columns:minmax(0,1fr) clamp(240px,32%,360px)}
@container (max-width:760px){ .tl-main.open{grid-template-columns:minmax(0,1fr)} }
.tl-r{transition:opacity .3s,background-color .2s}
.tl-r.fade{opacity:.3}
.tl-r.fade:hover,.tl-r.fade:focus-within{opacity:.75}
.tl-r.on{background:color-mix(in srgb,var(--a2) 9%,transparent)}
.tl-r.on .tl-n{color:var(--a2t,var(--a2))}
.tl-b.on{outline:2px solid var(--c);outline-offset:3px;z-index:3;box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}
.tl-g.glide .tl-b{pointer-events:none}
.tl-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font:600 calc(11px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl-trail button{border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;padding:4px 8px;font:inherit;letter-spacing:inherit;text-transform:inherit;max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-trail button:hover,.tl-trail button:focus-visible{color:var(--text);border-color:var(--a2);outline:none}
.tl-trail b{color:var(--a2t,var(--a2));max-width:22em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-trail i,.tl-path i{font-style:normal;opacity:.6}
.tl-hint{font:400 calc(9.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted);padding-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-hd>.tl-l{align-self:end;padding-bottom:4px}
.tl-side{position:sticky;top:0;padding:14px;border:1px solid color-mix(in srgb,var(--c,var(--a2)) 45%,transparent);background:color-mix(in srgb,var(--c,var(--a2)) 7%,color-mix(in srgb,var(--p1) 92%,transparent));box-shadow:inset 3px 0 0 var(--c,var(--a2));animation:tlIn .32s cubic-bezier(.2,.7,.2,1) both}
@keyframes tlIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .tl-side{animation:none} }
.tl-path{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:calc(11.5px*var(--ts,1));color:var(--muted);margin-bottom:4px}
.tl-path button{border:0;background:none;padding:0;color:var(--muted);cursor:pointer;font:inherit}.tl-path button:hover,.tl-path button:focus-visible{color:var(--text);text-decoration:underline;outline:none}
.tl-side h4{margin:0 0 8px;font:600 calc(18px*var(--ts,1))/1.25 var(--disp);color:var(--text)}
.tl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tl-meta select{min-height:28px;padding:2px 8px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--text) 22%,transparent);font:inherit;font-size:calc(12.5px*var(--ts,1))}
.tl-who{display:flex;align-items:center;gap:6px;font-size:calc(12.5px*var(--ts,1));color:var(--muted)}
.tl-when{margin:10px 0 0;font-size:calc(13px*var(--ts,1));color:var(--muted)}
.tl-when b{color:var(--text)}.tl-when b.late{color:var(--late)}.tl-when b.fin{color:var(--a2t,var(--a2))}
.tl-sec{margin-top:14px}
.tl-sec .lab{display:block;font:600 calc(10px*var(--ts,1))/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tl-prog{height:6px;margin-top:6px;background:color-mix(in srgb,var(--text) 12%,transparent)}.tl-prog i{display:block;height:100%;background:var(--c,var(--a2))}
.tl-list{list-style:none;margin:6px 0 0;padding:0;font-size:calc(13px*var(--ts,1))}
.tl-list li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.tl-list li>span,.tl-kn{flex:1;min-width:0}
.tl-kn{border:0;background:none;padding:0;text-align:left;color:var(--text);cursor:pointer;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-kn:hover,.tl-kn:focus-visible{color:var(--a2t,var(--a2));text-decoration:underline;outline:none}
.tl-list li.d .tl-kn,.tl-list li.d>span{color:var(--muted);text-decoration:line-through}
.tl-list li em{font:600 calc(10.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}
.tl-notes{margin:6px 0 0;font-size:calc(13px*var(--ts,1));line-height:1.45;color:var(--text);white-space:pre-line}
.tl-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.og-axis span.t{color:var(--a2t,var(--a2));font-weight:600}
.og-lanes .og-axis{margin-right:0}

/* v63 · Task Percentage */
.tp-body{min-width:0}
.tp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:28px;margin:0 0 10px;font:400 calc(10.5px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;color:var(--muted)}
.tp-back{min-height:26px;padding:2px 9px;border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);background:transparent;color:var(--a1t,var(--a1));cursor:pointer;font:600 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tp-back:hover{background:color-mix(in srgb,var(--a1) 14%,transparent)}
.tp-name{border:0;background:none;padding:0;cursor:pointer;color:var(--text);font:600 calc(13.5px*var(--ts,1))/1.2 var(--cond,inherit);letter-spacing:0;text-decoration:underline dotted color-mix(in srgb,var(--text) 40%,transparent);text-underline-offset:3px}
.tp-in.anim{animation:tpIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes tpIn{from{opacity:0;transform:scale(.975)}}
@media (prefers-reduced-motion:reduce){.tp-in.anim{animation:none}}
.tp-dim{opacity:.16}
/* pie and two rings */
.tp-donut{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.tp-svg{flex:0 0 auto;width:clamp(150px,34%,200px);height:auto;overflow:visible}
.tp-svg path{cursor:pointer;transition:opacity .2s}
.tp-svg path:hover{opacity:.85}
.tp-svg text{text-anchor:middle;pointer-events:none}
.tp-svg .tp-big{font:700 30px var(--disp);fill:var(--text)}
.tp-svg .tp-big.md{font-size:22px}
.tp-svg .tp-sm{font:400 10.5px var(--mono);fill:var(--muted);letter-spacing:.08em}
/* legend */
.tp-leg{flex:1 1 220px;max-width:520px;min-width:0;display:flex;flex-direction:column;gap:1px}
.f-tpct .tp-li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 3.2em;gap:9px;align-items:center;width:100%;min-height:30px;padding:4px 6px;border:0;border-radius:4px;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.tp-li:hover,.tp-li.tp-hot{background:color-mix(in srgb,var(--text) 8%,transparent)}
.tp-li i{width:10px;height:10px;border-radius:2px;background:var(--c)}
.tp-li span{font-weight:500;font-size:calc(13.5px*var(--ts,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-li em{font:400 calc(11.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}
.tp-li b{font:700 calc(14px*var(--ts,1))/1 var(--disp);text-align:right}
.tp-hl :is(path,.tp-bar>button,.tp-blocks>button,.tp-grid>i)[data-tpk]:not(.tp-hot):not(.tp-dim){opacity:.45}
/* strip */
.tp-ctx{display:flex;gap:2px;height:6px;margin-bottom:6px}
.tp-ctx i{border-radius:3px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.tp-bar{display:flex;gap:2px;height:48px;border-radius:6px;overflow:hidden;margin-bottom:5px}
.f-tpct .tp-bar>button{flex-basis:0;min-width:4px;border:0;padding:0 7px 6px;background:var(--c);color:var(--ink);display:flex;align-items:flex-end;cursor:pointer;transition:filter .15s,opacity .2s;font:inherit}
.tp-bar>button:hover,.tp-blocks>button:hover{filter:brightness(1.1)}
.tp-bar b{font:700 calc(13px*var(--ts,1))/1 var(--disp);white-space:nowrap;overflow:hidden}
.tp-scale{max-width:none;display:flex;justify-content:space-between;font:400 calc(10px*var(--ts,1))/1 var(--mono);color:var(--muted);margin-bottom:10px}
/* blocks */
.tp-blocks{position:relative;height:clamp(200px,30vw,280px)}
.f-tpct .tp-blocks>button{position:absolute;border:0;border-radius:3px;background:var(--c);color:var(--ink);padding:6px 8px;overflow:hidden;cursor:pointer;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:2px;transition:filter .15s,opacity .2s;font:inherit}
.tp-blocks strong{font:700 calc(20px*var(--ts,1))/1.05 var(--disp)}
.tp-blocks b{font-weight:600;font-size:calc(12.5px*var(--ts,1));line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tp-blocks small{font:400 calc(10.5px*var(--ts,1))/1 var(--mono)}
/* hour grid */
.tp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,28px));gap:4px;margin-bottom:6px}
.tp-grid i{aspect-ratio:1;border-radius:3px;background:var(--c);cursor:pointer;transition:opacity .2s,transform .15s}
.tp-grid i:hover{transform:scale(1.12)}
.tp-key{font:400 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
/* ranked */
.tp-rank{display:flex;flex-direction:column;gap:2px}
.f-tpct .tp-rh{display:grid;grid-template-columns:minmax(0,1fr) 3.4em;column-gap:12px;row-gap:5px;width:100%;padding:6px 4px;border:0;border-radius:4px;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.tp-rh:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.tp-rn{display:flex;align-items:baseline;gap:7px;min-width:0;font-weight:500;font-size:calc(13.5px*var(--ts,1))}
.tp-rn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-rn em{margin-left:auto;font:400 calc(11px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}
.tp-tr{grid-column:1;height:9px;border-radius:5px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.tp-tr i{display:block;height:100%;border-radius:5px;background:var(--c)}
.tp-rh>b{grid-column:2;grid-row:1/3;align-self:center;text-align:right;font:700 calc(16px*var(--ts,1))/1 var(--disp)}
.tp-car{font-style:normal;color:var(--muted)}
.tp-car::before{content:'\25B8'}
.tp-rh[aria-expanded="true"] .tp-car::before{content:'\25BE'}
.tp-rsub{margin:0 0 6px 14px;padding-left:10px;border-left:2px solid var(--c)}
.tp-rh.sm .tp-rn{font-size:calc(12.5px*var(--ts,1))}
.tp-rh.sm .tp-tr{height:6px}
.tp-rh.sm>b{font-size:calc(13.5px*var(--ts,1))}
.tp-note{margin:10px 0 0;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--text) 16%,transparent);font-size:calc(12.5px*var(--ts,1));color:var(--muted)}
.tp-note b{color:var(--a3t,var(--a3));font-weight:600}
/* the hours box on a subtask row in the task window */
.subrow .hrw{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px}
.subrow .cin.hr{width:52px;text-align:right}
.subrow .hrw span{font:400 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--muted);letter-spacing:.04em}

/* v63 · free sticky board */
.nwfree{position:relative;isolation:isolate;min-height:240px}
.nwst.nwfl{position:absolute;min-height:0;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.nwst.nwfl.pin{box-shadow:0 0 0 1px var(--nc),0 10px 24px rgba(0,0,0,.32)}
.nwst.nwfl .rtew{min-height:0;overflow:auto}
.nwst.nwfl .rte{min-height:0}
.nwst.nwfl .nwft{flex-wrap:wrap;row-gap:4px}
.nwgrip{flex:0 0 auto;height:14px;margin-top:-4px;cursor:grab;touch-action:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--nc) 80%,var(--text)) 1.1px,transparent 1.6px) center/7px 5px repeat-x;background-size:7px 5px;opacity:.55;transition:opacity .15s}
.nwst:hover .nwgrip,.nwgrip:active{opacity:1}
.nwst.nwmove{box-shadow:0 18px 40px rgba(0,0,0,.45);transition:none}
.nwst.nwmove .nwgrip{cursor:grabbing}
.nwrs{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;touch-action:none;z-index:2;
  background:linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--nc) 85%,transparent) 50%,color-mix(in srgb,var(--nc) 85%,transparent) 60%,transparent 60%,transparent 72%,color-mix(in srgb,var(--nc) 85%,transparent) 72%,color-mix(in srgb,var(--nc) 85%,transparent) 82%,transparent 82%)}

/* ══════════════ v64 · phones ══════════════
   Under 640px: a tab bar at the bottom for the places, a short top row,
   filters folded behind one button, and every control at least 40px. */
#mtHost .mtabs,#mtHost .mtsh,#mtHost .mtscrim,.nav .mhere,.fbar [data-fmore]{display:none}
@media (max-width:640px){
  :root{--mtab:58px;--mtab-b:calc(var(--mtab) + env(safe-area-inset-bottom,0px))}
  /* the tab bar */
  #mtHost .mtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;
    height:var(--mtab-b);padding:0 4px env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--page) 93%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
    border-top:1px solid color-mix(in srgb,var(--a1) 32%,transparent)}
  body:has(#tdHost .td) #mtHost,body:has(.cmd) #mtHost{display:none}
  .mt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:var(--mtab);
    border:0;padding:0;background:none;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;
    font:600 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
  .mt .mtl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mt[aria-current="page"]{color:var(--a1t,var(--a1))}
  .mt[aria-current="page"]::before{content:'';position:absolute;top:0;left:24%;right:24%;height:2px;background:var(--a1);box-shadow:0 0 10px var(--a1)}
  .mt:active{background:color-mix(in srgb,var(--a1) 10%,transparent)}
  .mtrun{font-weight:700;color:var(--a2t,var(--a2))}
  .mti{display:grid;place-items:center}
  .mti svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  /* the More sheet */
  #mtHost .mtscrim{display:block;position:fixed;inset:0;z-index:43;border:0;padding:0;background:rgba(0,0,0,.5);animation:fadeIn var(--t-sm,150ms) ease both}
  #mtHost .mtsh{display:block;position:fixed;left:0;right:0;bottom:var(--mtab-b);z-index:44;max-height:calc(100dvh - var(--mtab-b) - 40px);overflow-y:auto;
    padding:6px 16px 16px;background:color-mix(in srgb,var(--page) 97%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid color-mix(in srgb,var(--a1) 40%,transparent);animation:mshUp var(--t-md,230ms) var(--e-out,ease-out) both}
  @keyframes mshUp{from{transform:translateY(24px);opacity:0}}
  .mtshh{display:flex;align-items:center;justify-content:space-between;min-height:48px}
  .mtshh b{font:700 15px/1.2 var(--disp);color:var(--text)}
  .mtshx{width:44px;height:44px;border:0;background:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
  .mtsh h3{margin:10px 0 8px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mtg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .mtk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:76px;padding:10px 4px;cursor:pointer;
    border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:color-mix(in srgb,var(--text) 4%,transparent);color:var(--text);
    font:600 10.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:center}
  .mtk[aria-current="page"]{border-color:var(--a1);color:var(--a1t,var(--a1));background:color-mix(in srgb,var(--a1) 10%,transparent)}
  .mtk:active{background:color-mix(in srgb,var(--a1) 16%,transparent)}
  @media (prefers-reduced-motion:reduce){#mtHost .mtsh,#mtHost .mtscrim{animation:none}}

  /* the top row: where you are and the icons; the places moved to the tab bar */
  .nav > a,.nav .crumb,.nav .here,.nav .addlink,#helpBtn{display:none}
  .nav{overflow:visible;gap:6px}
  .nav .mhere{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font:700 15px/1.2 var(--disp);color:var(--text);padding-left:4px}
  .nav .sp{display:none}
  .nav .ico{width:42px;height:42px;flex:0 0 auto}
  /* the old bottom dock lives in More now */
  .bot{display:none !important}
  #ui{padding-bottom:calc(var(--mtab-b) + 6px)}
  #chdock{bottom:calc(var(--mtab-b) + 8px) !important}
  #undo,#toast{bottom:calc(var(--mtab-b) + 10px)}

  /* home: the clock up top, projects below it, nothing on top of anything */
  :root:not([data-mode="space"]) .ghost{top:92px;font-size:clamp(40px,15vw,72px)}
  .hud .bars,.hud .code,.hud .reg{display:none}
  :root:not([data-mode="space"]) .mid{padding-top:min(30vh,210px)}
  .gateway{position:static !important;width:auto !important;margin:6px 2px 0;opacity:.8}
  .call .hint{display:none}

  /* a Space: the header buttons on one line */
  .shead .tools{display:flex;flex-wrap:nowrap;gap:6px;width:100%}
  .shead .tools > .fbtn{flex:1 1 auto;white-space:nowrap;min-height:42px;padding-inline:8px}
  .shead .tools > #themeBtn{display:none}
  .shelf{position:fixed !important;left:8px !important;right:8px !important;top:auto !important;bottom:calc(var(--mtab-b) + 8px) !important;width:auto !important;max-height:calc(100dvh - var(--mtab-b) - 80px)}

  /* views: one line of view tabs, one line of filters */
  .ws{bottom:var(--mtab-b)}
  .wsh{min-height:52px;padding-top:6px;padding-bottom:6px}
  .wsh h2 ~ .kk{display:none}
  .vtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
  .vtabs::-webkit-scrollbar{display:none}
  .vtabs > button{flex:0 0 auto;min-height:40px}
  .fbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;gap:8px}
  .fbar > *{display:none}
  .fbar > #fQ{display:block;grid-column:1 / 5;min-width:0;height:42px}
  .fbar > [data-fmore]{display:block;grid-column:5 / 7;min-height:42px;padding-inline:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .fbar > #fAdd{display:block;grid-column:1 / -1;min-height:42px}
  .fbar.fopen > .lb{display:block;grid-column:1 / 2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fbar.fopen > select{display:block;grid-column:2 / -1;min-height:42px;width:100%}
  .fbar.fopen > .fbtn:not(#fAdd):not([data-fmore]){display:block;grid-column:span 2;min-height:42px;padding-inline:4px}
  /* every table scrolls sideways inside its own box, task names stay put */
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{white-space:nowrap}
  .tbl .ttl{min-width:190px;white-space:normal}
  /* search sits under the top row, full width */
  .cmd{left:8px !important;right:8px;width:auto !important;transform:none !important;top:12px}
  /* the onion skin toolbar wraps above the tab bar */
  .obar{left:8px !important;right:8px;transform:none !important;bottom:calc(var(--mtab-b) + 8px) !important;max-height:46vh;overflow-y:auto}
  /* the theme menu clears the tab bar */
  .drawer{bottom:var(--mtab-b)}

  /* thumbs: every control at least 40px tall */
  .fbtn,.seg button,.wsx,.ico{min-height:40px}
  .wgt .wh button,.wgt .whd button,.wgt header button{min-width:40px;min-height:40px}
  .nwmodes button,.og-sw button,.tp-back{min-height:40px}
  .nwcols button{width:26px;height:26px}
  .ti .ck,.ti .pick,.tbl .pick,.tbl .ck{min-width:32px;min-height:32px}
  .my-mh{min-height:40px}
  .tmsty{min-width:40px;min-height:40px}
  .tdsb .frow > label{min-height:40px;display:flex;align-items:center}
  .obar .inkgrp button{min-width:36px;min-height:36px}
  .rtebar .rteb{min-width:38px;min-height:38px}
  select,input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],input:not([type]){min-height:40px;font-size:16px}
}
@media (max-width:640px){
  /* the task window: close always in the top corner, the header wraps under it */
  .td > .hd{flex-wrap:wrap;row-gap:6px;position:relative;padding-right:56px}
  .td > .hd #tdClose{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:44px;height:44px;margin:0}
  .td > .hd .hdgap,.td > .hd .sp{display:none}
  .td > .hd .mini{min-width:38px;min-height:38px}
  .tdnote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}
  .tdbtns .fbtn{min-height:44px}
  /* tables: the task name keeps its width and the rest scrolls */
  .tbl td.ttl{min-width:220px}
  .tbl td.ttl .cin.t{min-width:170px;width:100%}
  /* one column of widgets, so width controls have nothing to do */
  .wgt .wh [data-wsize],.wgt .wh .wover{display:none}
}
@media (max-width:640px){
  /* the Space header scrolls away with the dashboard, so widgets get the screen. v93 · the stacked grid only;
     a narrow desktop window keeps the free canvas, which scrolls itself */
  :root[data-mode="space"] .mid:not(:has(#spc[data-free])){overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  :root[data-mode="space"] #spc:not([data-free]){height:auto;overflow:visible;flex:none;padding-bottom:12px}
  /* tables: no bulk tick boxes, and the task name stays pinned while the rest scrolls */
  .tbl th.pk,.tbl td.pk{display:none}
  .tbl td.ttl,.tbl thead th:nth-child(2){position:sticky;left:0;z-index:1;background:color-mix(in srgb,var(--page) 96%,var(--p1,var(--page)))}
}
@media (max-width:640px){
  /* board widget: one status per screen, swipe between them */
  .mb{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;height:auto;padding-bottom:6px;scrollbar-width:thin}
  .mb > .c{scroll-snap-align:start}
}
/* v64 · tablets: the full top row fits without clipping the account button */
@media (min-width:641px) and (max-width:900px){
  .nav{gap:5px}
  .nav > a{letter-spacing:.03em;padding-inline:4px}
  .nav .ico{width:34px;height:34px}
  .nav .crumb,.nav .here,.nav .addlink{display:none}
}
@media (max-width:640px){
  .ti .pick{display:none}
  .gateway{max-width:none !important;width:auto !important;columns:auto}
}

/* ══════════════ v70 · Steady graphics ══════════════
   For screens that flicker under the moving, blurred wallpaper. The scene is held still by the freeze
   (see sceneFreeze), and no layer blurs what is behind it, so nothing is recomputed frame to frame.
   The v20 pulse keeps running, so the refresh rate stays steady. */
:root[data-gfx="steady"] *,:root[data-gfx="steady"] *::before,:root[data-gfx="steady"] *::after{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* v72 · a widget clicked into on the free canvas, where the wheel scrolls its list instead of zooming */
/* drawn inside the edge: the widget's cut-corner clip hides anything outside it, an outline included */
#spc[data-free] > .wgt.wengaged{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--a1) 70%,transparent)}
/* v72 · the bare canvas can be dragged; widgets keep their own pointers. With Space held, all of it can */
#spc[data-free]{cursor:grab}
#spc[data-free]>*{cursor:auto}
body.spacepan #spc[data-free],body.spacepan #spc[data-free] *{cursor:grab!important}
body.panning #spc[data-free],body.panning #spc[data-free] *{cursor:grabbing!important}
/* v75 · Invite to Yuubako, in the account menu for admins */
.acct .ayi{border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);margin-top:8px;padding-top:14px}
.acct .ayi .kk{display:block;margin-top:10px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:0.09em;text-transform:uppercase;color:var(--a1t)}
.acct .ayi .ivr{margin-top:6px}

/* ── v80 · Dating: Next date and the Idea jar ── */
.f-ndate,.f-jar{--late:#ff6b6b}
.f-ndate .lab,.f-jar .lab{display:block;font:600 calc(10px*var(--ts,1))/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nd-tix{--stub:clamp(92px,22%,150px);display:grid;grid-template-columns:var(--stub) 1fr;position:relative;border:1px solid color-mix(in srgb,var(--wc) 50%,transparent);background:color-mix(in srgb,var(--wc) 10%,transparent)}
.nd-tix::before,.nd-tix::after{content:"";position:absolute;left:calc(var(--stub) - 9px);width:18px;height:18px;border-radius:50%;background:var(--p1);border:1px solid color-mix(in srgb,var(--wc) 50%,transparent)}
.nd-tix::before{top:-10px}.nd-tix::after{bottom:-10px}
.nd-stub{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 8px;border-right:2px dashed color-mix(in srgb,var(--wc) 50%,transparent);text-align:center}
.nd-stub b{font:700 calc(46px*var(--ts,1))/1 var(--disp);color:var(--wc)}.nd-stub b.w{font-size:calc(19px*var(--ts,1));letter-spacing:.04em}
.nd-stub span{font:600 calc(10px*var(--ts,1))/1.6 var(--mono);letter-spacing:.14em;color:var(--muted)}
.nd-main{padding:12px 14px;min-width:0}
.nd-when{display:block;font:600 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;color:color-mix(in srgb,var(--wc) 75%,var(--text))}
.nd-t{display:block;margin:4px 0 2px;padding:0;border:0;background:none;color:var(--text);text-align:left;font:600 calc(20px*var(--ts,1))/1.2 var(--disp);cursor:pointer}
.nd-t:hover,.nd-t:focus-visible{text-decoration:underline;outline:none}
.nd-main p{margin:0;font-size:calc(13px*var(--ts,1));color:var(--muted)}
.nd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,34%);gap:14px;margin-top:14px}
@container (max-width:460px){ .nd-cols{grid-template-columns:1fr} }
.nd-prep{list-style:none;margin:6px 0 8px;padding:0}
.nd-prep li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.nd-prep li .fnm{flex:1;min-width:0}.nd-prep li.d .fnm{color:var(--muted);text-decoration:line-through}
.nd-prep li em{font:600 calc(10.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}.nd-prep li em.soon{color:#ffc46b}.nd-prep li em.late{color:var(--late)}
.nd-turn{padding:10px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);font-size:calc(12.5px*var(--ts,1));color:var(--muted);align-self:start}
.nd-turn b{display:block;color:var(--text);font-size:calc(14px*var(--ts,1));margin:4px 0 2px}
.nd-dots{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.nd-dots i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 calc(9px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--page)}
.nd-dots .y{background:var(--a1)}.nd-dots .a{background:var(--wc)}.nd-dots .n{border:1.5px dashed var(--muted);color:var(--muted)}
.nd-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.nd-plan{flex-wrap:wrap}.nd-plan input[name="t"],.nd-plan input[name="place"]{flex:1 1 160px}
.jar-chips{display:flex;flex-wrap:wrap;gap:6px}
.jar-chip{min-height:26px;padding:3px 10px;border:1px solid color-mix(in srgb,var(--text) 22%,transparent);border-radius:99px;background:transparent;color:var(--muted);cursor:pointer;font-weight:500;font-size:calc(12px*var(--ts,1));line-height:1;font-family:inherit}
.jar-chip[aria-pressed="true"]{border-color:var(--wc);color:var(--text);background:color-mix(in srgb,var(--wc) 16%,transparent)}
.jar-chip:hover,.jar-chip:focus-visible{border-color:var(--wc);outline:none}
.jar-body{display:grid;grid-template-columns:clamp(110px,30%,190px) 1fr;gap:16px;align-items:center;margin-top:12px}
@container (max-width:460px){ .jar-body{grid-template-columns:1fr} .jar-svg{max-width:150px;margin:0 auto} }
.jar-svg{width:100%;height:auto;display:block}
.jar-lid{fill:color-mix(in srgb,var(--text) 22%,transparent)}.jar-lid2{fill:color-mix(in srgb,var(--text) 30%,transparent)}
.jar-glass{fill:color-mix(in srgb,var(--wc) 7%,transparent);stroke:color-mix(in srgb,var(--wc) 60%,transparent);stroke-width:2}
.jar-slip{padding:14px;border:1px solid color-mix(in srgb,var(--wc) 50%,transparent);background:color-mix(in srgb,var(--wc) 9%,transparent);transform:rotate(-1deg)}
.jar-slip.empty{transform:none;border-style:dashed}.jar-slip.empty p{margin:4px 0 10px;color:var(--muted);font-size:calc(13px*var(--ts,1))}
.jar-slip h4{margin:4px 0 8px;font:600 calc(18px*var(--ts,1))/1.25 var(--disp);color:var(--text)}
.jar-who{font-size:calc(12px*var(--ts,1));color:var(--muted)}
.jar-tags{display:flex;flex-wrap:wrap;gap:5px}.jar-tags span{font:600 calc(10.5px*var(--ts,1))/1 var(--mono);padding:4px 7px;background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text)}
.jar-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.jar-slip .nd-plan{margin-top:12px}
.jar-stat{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:calc(12.5px*var(--ts,1));color:var(--muted)}.jar-stat b{color:var(--text);font:600 calc(15px*var(--ts,1)) var(--mono);margin-right:4px}
.jar-all{margin-top:10px;font-size:calc(13px*var(--ts,1))}.jar-all summary{cursor:pointer;color:var(--muted);font:600 calc(10.5px*var(--ts,1))/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.jar-all ul{list-style:none;margin:6px 0 0;padding:0}.jar-all li{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.jar-all li span{flex:1;min-width:0}.jar-all li em{font:600 calc(10.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted)}
.jar-all .fx{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px}.jar-all .fx:hover,.jar-all .fx:focus-visible{color:var(--late);outline:none}
.wgt[data-wgt="ndate"]>.wb,.wgt[data-wgt="jar"]>.wb{container-type:inline-size}
/* the text says the most, so it takes the room; the pickers take what they need */
.f-jar .fadd,.f-ndate .fadd{flex-wrap:wrap}
.f-jar .fadd input[name="t"],.f-ndate .fadd input[name="t"],.f-ndate .fadd input[name="place"]{flex:3 1 180px;min-width:0}
.f-jar .fadd select{flex:0 1 auto;width:auto;min-width:0}
.f-ndate .fadd input[type="date"],.f-ndate .fadd input[type="time"],.f-jar .fadd input[type="date"],.f-jar .fadd input[type="time"]{flex:0 1 auto;width:auto}

/* ── v82 · Both free: two people's evenings laid over each other ── */
.wgt[data-wgt="bfree"]>.wb,.wgt[data-wgt="mile"]>.wb{container-type:inline-size}
.f-bfree{--you:var(--a1);--them:var(--wc);--both:#b8f26b;--late:#ff6b6b}
.bf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.bf-bar .og-sw{margin:0}
.bf-bar .tl-nav button:disabled{opacity:.35;cursor:default}
.bf-grid{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.bf-day{display:grid;grid-template-columns:62px minmax(0,1fr) 74px;gap:8px;align-items:center}
.bf-ax{grid-template-columns:62px minmax(0,1fr) 74px;height:14px}
.bf-hrs{position:relative;height:14px;font:400 calc(10px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.bf-hrs span{position:absolute;transform:translateX(-50%);white-space:nowrap}.bf-hrs span:first-child{transform:none}.bf-hrs span:last-child{transform:translateX(-100%)}
.bf-dl{font:600 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.bf-day.now .bf-dl{color:var(--text)}
.bf-trk{display:flex;flex-direction:column;gap:2px;padding:3px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.bf-lane{display:grid;grid-template-columns:repeat(var(--S),minmax(0,1fr));gap:1px;height:12px}
.bf-c{display:block;height:100%;padding:0;border:0;background:color-mix(in srgb,var(--text) 7%,transparent);min-width:0}
button.bf-c{cursor:pointer}button.bf-c:hover,button.bf-c:focus-visible{outline:1px solid var(--you);outline-offset:-1px}
.bf-lane.me .bf-c.on{background:color-mix(in srgb,var(--you) 75%,transparent)}
.bf-lane.them .bf-c.on{background:color-mix(in srgb,var(--them) 75%,transparent)}
.bf-c.past{opacity:.3}
.bf-mid{position:relative;height:22px}
.bf-f,.bf-bk{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.bf-f{padding:0 6px;border:0;border-left:2px solid var(--both);border-right:2px solid var(--both);background:color-mix(in srgb,var(--both) 20%,transparent);cursor:pointer;font:inherit}
.bf-f.best{background:color-mix(in srgb,var(--both) 36%,transparent);box-shadow:0 0 0 1px var(--both)}
.bf-f:hover,.bf-f:focus-visible{background:color-mix(in srgb,var(--both) 45%,transparent);outline:none}
.bf-f:disabled{cursor:default}
.bf-f em{font:700 calc(10.5px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--both);text-overflow:ellipsis;overflow:hidden}
:root[data-tod="day"]:not([data-smode="dark"]) .bf-f em,:root[data-smode="light"] .bf-f em{color:color-mix(in srgb,var(--both) 40%,#000)}
.bf-bk{padding:0 6px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--wc) 30%,transparent) 0 6px,transparent 6px 12px);border:1px solid var(--wc);font:600 calc(10px*var(--ts,1))/1 var(--mono);color:var(--text);text-overflow:ellipsis}
.bf-all{min-height:24px;padding:2px 6px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font:600 calc(9.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.bf-all[aria-pressed="true"]{background:color-mix(in srgb,var(--you) 30%,transparent);color:var(--text);border-color:var(--you)}
.bf-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:calc(12px*var(--ts,1));color:var(--muted)}
.bf-key i{display:inline-block;width:12px;height:8px;margin-right:5px;vertical-align:0}
.bf-key .me{background:var(--you)}.bf-key .them{background:var(--them)}.bf-key .free{background:color-mix(in srgb,var(--both) 45%,transparent);outline:1px solid var(--both)}.bf-key .bk{background:repeating-linear-gradient(45deg,var(--wc) 0 3px,transparent 3px 6px);outline:1px solid var(--wc)}
.bf-best{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--both) 45%,transparent);background:color-mix(in srgb,var(--both) 8%,transparent);font-size:calc(13.5px*var(--ts,1))}
.bf-best b{font-family:var(--mono);color:var(--both)}.bf-best .fbtn{margin-left:auto}
:root[data-tod="day"]:not([data-smode="dark"]) .bf-best b,:root[data-smode="light"] .bf-best b{color:color-mix(in srgb,var(--both) 40%,#000)}
@container (max-width:520px){ .bf-day,.bf-ax{grid-template-columns:44px minmax(0,1fr) 44px} .bf-dl{font-size:calc(10px*var(--ts,1))} }

/* ── v82 · Milestones ── */
.f-mile .lab{display:block;font:600 calc(10px*var(--ts,1))/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ml-big{font:700 calc(36px*var(--ts,1))/1.05 var(--disp);color:var(--wc)}.ml-big small{font-weight:600;font-size:calc(13px*var(--ts,1));font-family:inherit;color:var(--muted);margin:0 6px 0 3px}
.ml-rail{position:relative;height:150px;margin:14px 8px 4px}
.ml-ln{position:absolute;left:0;right:0;top:70px;height:2px;background:linear-gradient(90deg,var(--wc) var(--now),color-mix(in srgb,var(--text) 20%,transparent) var(--now))}
.ml-yr{position:absolute;top:78px;transform:translateX(-50%);font:600 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.ml-yr::before{content:"";position:absolute;left:50%;top:-12px;width:1px;height:8px;background:color-mix(in srgb,var(--text) 25%,transparent)}
.ml-mk{position:absolute;top:63px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--wc);box-shadow:0 0 0 3px var(--p1)}
.ml-mk.first{background:var(--text)}
.ml-mk.up{background:var(--p1);border:2px dashed #ffc46b}
.ml-mk.now{width:10px;height:10px;top:66px;margin-left:-5px;background:var(--a2);box-shadow:0 0 0 3px var(--p1),0 0 10px var(--a2)}
.ml-lb{position:absolute;width:112px;margin-left:-56px;text-align:center;font-size:calc(12px*var(--ts,1));line-height:1.25}
.ml-lb b{display:block;color:var(--text);font-size:calc(12.5px*var(--ts,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ml-lb span{font:400 calc(10.5px*var(--ts,1))/1.3 var(--mono);color:var(--muted)}
.ml-lb.a{top:10px}.ml-lb.b{top:98px}
.ml-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:6px}
.ml-card{position:relative;padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);font-size:calc(12.5px*var(--ts,1));color:var(--muted);display:flex;flex-direction:column;gap:3px}
.ml-card.hot{border-color:color-mix(in srgb,#ffc46b 60%,transparent);background:color-mix(in srgb,#ffc46b 7%,transparent)}
.ml-card b{color:var(--text);font-size:calc(15px*var(--ts,1));padding-right:44px}
.ml-n{position:absolute;right:12px;top:8px;font:700 calc(22px*var(--ts,1))/1 var(--mono);color:#ffc46b}
:root[data-tod="day"]:not([data-smode="dark"]) .ml-n,:root[data-smode="light"] .ml-n{color:#b06d00}
.ml-gift{align-self:flex-start;margin-top:4px;padding:0;border:0;background:none;color:var(--a2t,var(--a2));cursor:pointer;font:inherit;text-decoration:underline}
.ml-addg{align-self:flex-start;margin-top:6px}
.f-mile .fadd{flex-wrap:wrap}.f-mile .fadd input[name="t"]{flex:3 1 180px}.f-mile .fadd input[type="date"],.f-mile .fadd select{flex:0 1 auto;width:auto}
.tl-out{margin:10px 0 0;font-size:calc(12px*var(--ts,1));color:var(--muted)}

/* ── v84 · Events: Talent scout and Run of show ── */
.wgt[data-wcat="event"]{--wc:#ffb020}
.wgt[data-wgt="scout"]>.wb,.wgt[data-wgt="show"]>.wb{container-type:inline-size}
.f-scout .jar-chips,.f-show .jar-chips{margin-top:2px}
.sc-board{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.sc-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.sc-col h5{margin:0 0 2px;display:flex;justify-content:space-between;padding:4px 2px;border-bottom:2px solid var(--k);font:600 calc(10.5px*var(--ts,1))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sc-col h5 b{color:var(--text)}
.sc-c0{--k:color-mix(in srgb,var(--text) 35%,transparent)}.sc-c1{--k:var(--a1)}.sc-c2{--k:#ffc46b}.sc-c3{--k:#b8f26b}.sc-c4{--k:#ff6b6b}
.sc-card{position:relative;padding:8px 9px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-left:3px solid var(--k);background:color-mix(in srgb,var(--text) 4%,transparent);display:flex;flex-direction:column;gap:4px;font-size:calc(12px*var(--ts,1))}
.sc-c4 .sc-card{opacity:.6}
.sc-card.stale{border-color:color-mix(in srgb,#ffc46b 55%,transparent);border-left-color:#ffc46b}
.sc-n{border:0;background:none;padding:0 34px 0 0;text-align:left;color:var(--text);cursor:pointer;font-weight:600;font-size:calc(13.5px*var(--ts,1));line-height:1.25;font-family:inherit}
.sc-n:hover,.sc-n:focus-visible{text-decoration:underline;outline:none}
.sc-meta{display:flex;flex-wrap:wrap;gap:4px 8px;font:600 calc(10px*var(--ts,1))/1.2 var(--mono);color:var(--muted)}
.sc-k{color:var(--wc)}
.sc-st{font:600 calc(10px*var(--ts,1))/1.2 var(--mono);font-style:normal;color:#ffc46b}
.sc-mv{position:absolute;top:6px;right:6px;display:flex;gap:2px}
.sc-mv button{width:18px;height:18px;padding:0;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1}
.sc-mv button:hover,.sc-mv button:focus-visible{color:var(--text);border-color:var(--wc);outline:none}.sc-mv button:disabled{opacity:.25;cursor:default}
.sc-ed{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.sc-two{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.sc-in{min-width:0;min-height:26px;padding:3px 7px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);font-size:calc(12px*var(--ts,1));font-family:inherit}
.sc-in:focus{outline:none;border-color:var(--wc)}
.sc-a{color:var(--a2t,var(--a2));font-size:calc(12px*var(--ts,1))}.sc-last{color:var(--muted);font-size:calc(11px*var(--ts,1))}
.sc-acts{display:flex;align-items:center;gap:6px}.sc-acts .fx{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px}.sc-acts .fx:hover{color:#ff6b6b}
.sc-none{margin:4px 2px;color:color-mix(in srgb,var(--muted) 70%,transparent);font-size:calc(11.5px*var(--ts,1))}
.f-scout .fadd,.f-show .fadd{flex-wrap:wrap}.f-scout .fadd input[name="t"],.f-show .fadd input[name="t"]{flex:3 1 180px}.f-scout .fadd select,.f-show .fadd select,.f-show .fadd input[type="time"],.f-show .fadd input[type="number"]{flex:0 1 auto;width:auto}
.f-show .fadd input[type="number"]{width:70px}
.sh-strip{margin:10px 0 4px}
.sh-hrs{position:relative;height:14px;font:400 calc(10px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.sh-hrs span{position:absolute;transform:translateX(-50%);white-space:nowrap}.sh-hrs span:first-child{transform:none}.sh-hrs span:last-child{transform:translateX(-100%)}
.sh-bar{position:relative;height:calc(16px*var(--ts,1));background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--text) 6%,transparent) 0 6px,transparent 6px 12px);border:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.sh-bar i{position:absolute;top:0;bottom:0;background:var(--wc);border-right:1px solid var(--p1)}
.sh-bar i.k-host{background:var(--a1)}.sh-bar i.k-break{background:color-mix(in srgb,var(--text) 30%,transparent)}.sh-bar i.k-other{background:#a78bfa}.sh-bar i.over{background:#ff6b6b}
.sh-pool{margin-top:10px}.sh-pool .lab{display:block;margin-bottom:4px;font:600 calc(10px*var(--ts,1))/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sh-list{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.sh-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-left:3px solid var(--wc)}
.sh-row.k-host{border-left-color:var(--a1)}.sh-row.k-break{border-left-color:color-mix(in srgb,var(--text) 30%,transparent)}.sh-row.k-other{border-left-color:#a78bfa}
.sh-row.bad{border-color:color-mix(in srgb,#ff6b6b 55%,transparent);background:color-mix(in srgb,#ff6b6b 7%,transparent)}
.sh-t{display:flex;flex-direction:column;font:600 calc(12px*var(--ts,1))/1.2 var(--mono)}.sh-t small{font-weight:400;color:var(--muted)}
.sh-t input{font:inherit;background:transparent;color:var(--text);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:2px 4px}
.sh-w b{display:block;font-size:calc(14px*var(--ts,1))}.sh-w span{font-size:calc(11.5px*var(--ts,1));color:var(--muted)}.sh-w em{font-style:normal;color:#ff6b6b;font-weight:600}
.sh-m{width:60px;font:inherit;font-size:calc(12px*var(--ts,1));background:transparent;color:var(--text);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:2px 4px}
.sh-row .fx{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:16px}.sh-row .fx:hover{color:#ff6b6b}
.sh-mm{font:calc(11px*var(--ts,1)) var(--mono);color:var(--muted)}
.sh-gap{padding:3px 8px;font:600 calc(10.5px*var(--ts,1))/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px dashed color-mix(in srgb,var(--text) 18%,transparent)}
@container (max-width:620px){ .sc-board{grid-template-columns:repeat(5,minmax(140px,1fr))} }

/* ══════════════ v85 · Light on plaster, the default scenery ══════════════
   One photograph per time of day (wall/plaster-*.webp, made with GPT Image 2.5 on 22 October 2026).
   wallPaint in app.js cross-fades the two layers. The city stays a choice under Theme, Source, Scenery. */
#scene > .wall{inset:0;background:var(--page)}
.wall i{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.1s ease}
.wall i.on{opacity:1}
:root[data-scn="plaster"] #scene > :not(.wall){display:none}
:root[data-scn="city"] #scene > .wall{display:none}
@media (prefers-reduced-motion:reduce){.wall i{transition:none}}
/* the photograph is the texture, so the CRT lines and the old plates step aside */
:root[data-scn="plaster"][data-bg="scene"]:not(.skinned) :is(.scan,.band){display:none}
:root[data-scn="plaster"][data-bg="scene"]:not(.skinned) .ws::before{display:none}
:root[data-scn="plaster"][data-bg="scene"]:not(.skinned) .scrim{opacity:1;
  background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 22%,transparent 68%,rgba(0,0,0,.38))}
:root[data-scn="plaster"][data-bg="scene"][data-tod="day"]:not(.skinned) .scrim{
  background:linear-gradient(180deg,rgba(255,250,240,.2),transparent 30%,transparent 70%,rgba(60,40,20,.16))}
/* warmer surfaces, picked from each photograph */
:root[data-scn="plaster"][data-tod="dawn"]{--void:#0b0709;--page:#150e12;--p1:#1f161a;--p2:#2b1f24;--text:#fff1ec;--muted:#c9aea8}
:root[data-scn="plaster"][data-tod="day"]{--void:#a89a86;--page:#ece4d6;--p1:#faf5ec;--p2:#ddd2c1;--text:#1c140c;--muted:#5d5144}
:root[data-scn="plaster"][data-tod="dusk"]{--void:#0b0705;--page:#150e09;--p1:#1f1610;--p2:#2b2017;--text:#fbefe3;--muted:#c4ab95}
:root[data-scn="plaster"][data-tod="night"]{--void:#04060a;--page:#080b10;--p1:#0f141b;--p2:#161d26;--text:#e9f0f7;--muted:#9aaabb}
/* panels let the wall through; the blur under them was already there. Steady graphics has no blur, so it keeps them firm */
:root[data-scn="plaster"][data-bg="scene"]:not(.skinned) .wgt{background:color-mix(in srgb,var(--p1) 72%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 46px rgba(0,0,0,.3)}
:root[data-scn="plaster"][data-bg="scene"][data-tod="day"]:not(.skinned) .wgt{background:color-mix(in srgb,var(--p1) 70%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 22px 46px rgba(60,40,20,.14)}
:root[data-gfx="steady"][data-scn="plaster"][data-bg="scene"]:not(.skinned) .wgt{background:color-mix(in srgb,var(--p1) 92%,transparent)}
/* the canvas dots sit back so the plaster reads */
:root[data-scn="plaster"][data-bg="scene"]:not(.skinned) #spc>.fgrid{opacity:.3}
/* Wall, the accent taken from the photographs. a3 is the warning tone, for Late and Overdue. a1t is the text tone, checked at 4.5 to 1 or better on p1 */
:root[data-tod="dawn"][data-acc="wall"]{--a1:#f6b3a0;--a2:#e8c6bc;--a3:#ff9a7a;--a1t:#f6b3a0;--a2t:#e8c6bc;--a3t:#ff9a7a}
:root[data-tod="day"][data-acc="wall"]{--a1:#8a4f1c;--a2:#6b4a2e;--a3:#9e4221;--a1t:#74411a;--a2t:#5a3e26;--a3t:#793219}
:root[data-tod="dusk"][data-acc="wall"]{--a1:#ffb06a;--a2:#f0cfae;--a3:#ff8a6b;--a1t:#ffb06a;--a2t:#f0cfae;--a3t:#ff8a6b}
:root[data-tod="night"][data-acc="wall"]{--a1:#9ccaff;--a2:#cfdcef;--a3:#ffa07a;--a1t:#9ccaff;--a2t:#cfdcef;--a3t:#ffa07a}

/* v85 · the shortcut sheet: each key its own keycap, a hand movement a pill, two ways joined by "or" */
.kr{align-items:flex-start}
.kr .kk{flex:0 0 158px;display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.kr .kk + span{padding-top:3px}
.kr .kk kbd{flex:0 0 auto;min-width:24px;padding:4px 7px}
.kr .kk kbd.gs{border-radius:999px;font-family:inherit;font-size:calc(12.5px*var(--ts,1));color:var(--a1t);
  background:color-mix(in srgb,var(--a1) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent)}
.kr .kk i{font-style:normal;font:400 calc(11px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.kr .kk .ko{margin:0 3px;text-transform:uppercase;letter-spacing:.06em}
.help .hnote{margin:0;padding:6px 22px 20px;font:400 calc(12.5px*var(--ts,1))/1.5 var(--mono);color:var(--muted)}

/* v85 · the hover note beside the pointer */
#ctip{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:flex;align-items:center;gap:9px;
  max-width:320px;padding:6px 9px;font-weight:500;font-size:calc(13px*var(--ts,1));line-height:1.35;font-family:inherit;color:var(--text);
  background:color-mix(in srgb,var(--page) 94%,transparent);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.32);opacity:0;transition:opacity .12s ease}
#ctip.on{opacity:1}
#ctip .ck{display:flex;align-items:center;gap:3px;flex:0 0 auto}
#ctip kbd{padding:2px 6px;font:400 calc(12px*var(--ts,1))/1.2 var(--mono);color:var(--a1t);
  background:color-mix(in srgb,var(--a1) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent)}
#ctip kbd.gs{border-radius:999px}
#ctip i{font-style:normal;font:400 calc(11px*var(--ts,1))/1 var(--mono);color:var(--muted)}
@media (prefers-reduced-motion:reduce){#ctip{transition:none}}

/* ══════════════ v85 · focus mode ══════════════ */
#fzone{position:fixed;inset:0;z-index:70;display:grid;place-items:center;--fza:var(--a1);--fzi:var(--page)}
/* by day the accent is dark, made for light panels; on the dark disc it takes a lighter tone */
:root[data-tod="day"] #fzone{--fza:color-mix(in srgb,var(--a1) 45%,#ffd9a8);--fzi:#1a120a}
#fzone[hidden]{display:none}
#fzone .fz-dim{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 48%,rgba(4,4,6,.74),rgba(4,4,6,.88));cursor:pointer}
:root[data-tod="day"] #fzone .fz-dim{background:radial-gradient(70% 70% at 50% 48%,rgba(20,14,8,.82),rgba(20,14,8,.92))}
#fzone.out .fz-dim{opacity:0;transition:opacity .34s ease}
#fzone .fz-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;will-change:transform}
/* a soft dark disc under the ring, so nothing behind it ever fights the digits */
#fzone .fz-box::before{content:"";position:absolute;left:50%;top:calc(min(340px,70vw,52vh)/2);width:calc(min(340px,70vw,52vh)*1.5);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(6,5,8,.9) 0 46%,rgba(6,5,8,.55) 58%,rgba(6,5,8,0) 70%)}
#fzone .fz-ring,#fzone .fz-mid{z-index:1}#fzone .fz-ring{position:relative}
#fzone .fz-ring{width:min(340px,70vw,52vh);height:auto;overflow:visible;transform:rotate(-90deg)}
#fzone .fz-trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:6}
#fzone .fz-arc{fill:none;stroke:var(--fza);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--fza) 55%,transparent))}
#fzone .fz-mid{position:absolute;top:0;left:0;right:0;height:min(340px,70vw,52vh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#fff;text-align:center;pointer-events:none}
#fzone .fz-k{font:400 calc(13px*var(--ts,1))/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fza)}
#fzone .fz-t{font-weight:700;font-family:var(--disp);font-size:clamp(56px,min(15vw,11vh),104px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 4px 30px rgba(0,0,0,.45)}
#fzone .fz-p{max-width:240px;font:400 calc(13.5px*var(--ts,1))/1.35 var(--mono);color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fzone .fz-ctl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#fzone .fz-ctl .fbtn{min-width:120px}
#fzone .fz-go{background:var(--fza);color:var(--fzi)}
#fzone .fz-go kbd{margin-left:8px;padding:1px 6px;font:400 11px/1.3 var(--mono);background:rgba(0,0,0,.18);border-radius:2px}
#fzone .fz-ctl .fbtn.quiet{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* a slow breath on the ring while the block runs; a pause holds it still and dims the digits */
#fzone:not(.paused):not(.done) .fz-ring{animation:fzBreath 5s ease-in-out infinite}
@keyframes fzBreath{0%,100%{transform:rotate(-90deg) scale(1)}50%{transform:rotate(-90deg) scale(1.025)}}
#fzone.paused .fz-t{opacity:.55}
#fzone.done .fz-arc{stroke:var(--a2)}
.tmr[data-fzopen]{cursor:pointer}
.tmr[data-fzopen]:hover,.tmr[data-fzopen]:focus-visible{color:var(--a1t);outline:0}
@media (prefers-reduced-motion:reduce){#fzone .fz-ring{animation:none!important}#fzone .fz-arc{transition:none}}
:root[data-gfx="steady"] #fzone .fz-ring{animation:none}

/* ══════════════ v85 · drawn guides and the trackpad line in tutorial cards ══════════════ */
.gdpics{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.gdpic{margin:0;flex:1 1 0;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 7px;
  background:color-mix(in srgb,var(--text) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent)}
.gdpic svg{width:72px;height:56px;overflow:visible}
.gdpic svg .o{fill:none;stroke:color-mix(in srgb,var(--text) 70%,transparent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.gdpic svg .a{fill:none;stroke:var(--a1);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gdpic svg .a.f{fill:var(--a1);stroke:none}
.gdpic svg .t{fill:var(--text);font:400 8px/1 var(--mono);text-anchor:middle}
.gdpic figcaption{font:400 calc(11.5px*var(--ts,1))/1.2 var(--mono);color:var(--muted);text-align:center}
.gdkeys{justify-content:center;min-height:44px}
.gdkeys span{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px}
.gdkeys kbd{padding:4px 8px;font:400 calc(13px*var(--ts,1))/1 var(--mono);color:var(--text);
  background:color-mix(in srgb,var(--text) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 18%,transparent),0 2px 0 color-mix(in srgb,var(--text) 14%,transparent)}
.gdkeys i{font-style:normal;font:400 calc(11px*var(--ts,1))/1 var(--mono);color:var(--muted);text-transform:uppercase}
.gdpad{margin:10px 0 0;padding:8px 10px;border-left:2px solid var(--a2)}
.gdpad p{margin:0;font-size:calc(14px*var(--ts,1));line-height:1.5}
.gdpad p b{display:block;margin-bottom:3px;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.11em;color:var(--a2t)}
/* the hand movements play slowly, a few pixels at a time */
.gdpic .mv-x{animation:gdMvX 2.4s ease-in-out infinite}
.gdpic .mv-y{animation:gdMvY 2.4s ease-in-out infinite}
.gdpic .mv-d{animation:gdMvD 2.4s ease-in-out infinite}
.gdpic .mv-pinch circle:first-child{animation:gdPinA 2.4s ease-in-out infinite}
.gdpic .mv-pinch circle:last-child{animation:gdPinB 2.4s ease-in-out infinite}
@keyframes gdMvX{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
@keyframes gdMvY{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@keyframes gdMvD{0%,100%{transform:translate(-2px,2px)}50%{transform:translate(3px,-3px)}}
@keyframes gdPinA{0%,100%{transform:translate(2px,-2px)}50%{transform:translate(-4px,4px)}}
@keyframes gdPinB{0%,100%{transform:translate(-2px,2px)}50%{transform:translate(4px,-4px)}}
@media (prefers-reduced-motion:reduce){.gdpic *{animation:none!important}}
:root[data-gfx="steady"] .gdpic *{animation:none}
/* a long step on a short screen: the card stops at the screen edge and its middle scrolls, the buttons stay put */
.gdcard:not([hidden]){display:flex;flex-direction:column;max-height:calc(100vh - 28px)}
.gdcard .gdb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.gdcard .gdh,.gdcard .gdf,.gdcard .gdbar{flex:0 0 auto}
@media (max-height:820px){.gdpic svg{width:56px;height:44px}.gdpic{padding:6px 4px 5px}.gdpad,.gdw{margin-top:8px}}

/* ══════════════ v86 · the live wall, and the sign-in box on it ══════════════ */
.wall canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s ease}
.wall canvas.on{opacity:1}
@media (prefers-reduced-motion:reduce){.wall canvas{transition:none}}
/* signed out, only the scenery shows behind the sign-in box */
:root.gated #frame > :not(#scene){visibility:hidden}
:root.gated[data-scn="plaster"] #gate{background:radial-gradient(70% 70% at 50% 50%,rgba(0,0,0,.08),rgba(0,0,0,.42))}
:root.gated[data-scn="plaster"] .gatebox{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 34%,transparent),0 30px 70px rgba(0,0,0,.45)}
/* v86 · the arrow bobbed 1px past the bottom of the scrolling middle, which switched a Windows scrollbar on and
   off each bob and made the text jump between two widths. It bobs upward now, and the scrollbar's room is kept */
.gdcard .gdb{scrollbar-gutter:stable;overflow-x:hidden}
.gdcard .gdmore{bottom:5px}
.gdcard.typed .gdmore{animation-name:gdBobUp}
@keyframes gdBobUp{50%{transform:translateY(-3px)}}

/* ══════════════ v87 · the theme fades with the light ══════════════
   The colour tokens are registered as colours, so changing the time of day fades them instead of switching.
   --todT is set from app.js to the time the light takes to get there, with the same easing. */
@property --void{syntax:'<color>';inherits:true;initial-value:#000}
@property --page{syntax:'<color>';inherits:true;initial-value:#000}
@property --p1{syntax:'<color>';inherits:true;initial-value:#000}
@property --p2{syntax:'<color>';inherits:true;initial-value:#000}
@property --text{syntax:'<color>';inherits:true;initial-value:#000}
@property --muted{syntax:'<color>';inherits:true;initial-value:#000}
@property --a1{syntax:'<color>';inherits:true;initial-value:#000}
@property --a2{syntax:'<color>';inherits:true;initial-value:#000}
@property --a3{syntax:'<color>';inherits:true;initial-value:#000}
@property --a1t{syntax:'<color>';inherits:true;initial-value:#000}
@property --a2t{syntax:'<color>';inherits:true;initial-value:#000}
@property --a3t{syntax:'<color>';inherits:true;initial-value:#000}
:root{transition-property:--void,--page,--p1,--p2,--text,--muted,--a1,--a2,--a3,--a1t,--a2t,--a3t;
  transition-duration:var(--todT,0ms);transition-timing-function:cubic-bezier(.65,0,.35,1)}

/* ══════════════ v87 · getting around the canvas ══════════════ */
#navtags{position:fixed;inset:0;z-index:52;pointer-events:none;transition:opacity .25s ease}
/* v94 · a still canvas lets the tags fade slowly; they stay clickable until the fade ends */
#navtags.idle:not(:focus-within){opacity:0;visibility:hidden;transition:opacity 1.4s ease,visibility 0s linear 1.4s}
.navtag{position:fixed;translate:-50% -50%;pointer-events:auto;display:flex;align-items:center;gap:6px;max-width:190px;
  padding:5px 10px 5px 7px;border:0;border-radius:999px;cursor:pointer;color:var(--text);
  font-weight:500;font-size:calc(12.5px*var(--ts,1));line-height:1.2;font-family:inherit;
  background:color-mix(in srgb,var(--p1) 88%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 45%,transparent),0 6px 18px rgba(0,0,0,.22);
  opacity:.82;transition:opacity .15s ease,box-shadow .15s ease}
.navtag:hover,.navtag:focus-visible{opacity:1;outline:0;box-shadow:inset 0 0 0 1.5px var(--a1),0 8px 22px rgba(0,0,0,.28)}
.navtag i{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;color:var(--a1t)}
.navtag i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.navtag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navtag b{flex:0 0 auto;font:400 calc(11px*var(--ts,1))/1 var(--mono);color:var(--muted)}
#spc > .wgt.navflash{animation:navFlash 1.5s ease-out}
@keyframes navFlash{0%,30%{box-shadow:0 0 0 3px var(--a1),0 22px 46px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 0 transparent}}
/* the first-canvas card */
#navcue{position:fixed;z-index:60;width:min(330px,calc(100vw - 32px));padding:12px 14px 12px;color:var(--text);
  background:color-mix(in srgb,var(--page) 94%,transparent);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);
  box-shadow:0 18px 44px rgba(0,0,0,.32);animation:navIn .35s cubic-bezier(.2,.9,.25,1) both}
#navcue.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
@keyframes navIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#navcue .nch{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#navcue .nch b{flex:1;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a1t)}
#navcue .ncx{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
#navcue ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#navcue li{display:flex;align-items:center;gap:10px;padding:6px 8px;background:color-mix(in srgb,var(--text) 5%,transparent);transition:background .3s}
#navcue li svg{flex:0 0 40px;height:32px;overflow:visible}
#navcue li svg .o{fill:none;stroke:color-mix(in srgb,var(--text) 70%,transparent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#navcue li svg .a{fill:none;stroke:var(--a1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#navcue li svg .a.f{fill:var(--a1);stroke:none}
#navcue li span{flex:1;font-size:calc(13px*var(--ts,1));line-height:1.35;color:var(--muted)}
#navcue li span b{display:block;color:var(--text);font-weight:600}
#navcue li .ck{flex:0 0 18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 30%,transparent)}
#navcue li.ok{background:color-mix(in srgb,var(--a1) 12%,transparent)}
#navcue li.ok .ck{background:var(--a1);box-shadow:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9'/%3E%3C/svg%3E")}
#navcue li.ok .ck::after{content:'';display:block;width:5px;height:9px;margin:3px 0 0 6px;border:solid var(--page);border-width:0 2px 2px 0;transform:rotate(45deg)}
#navcue .ncn{margin:9px 0 0;font:400 calc(12px*var(--ts,1))/1.45 var(--mono);color:var(--muted)}
#navcue.all .ncn{color:var(--a1t)}
/* the moves in the drawings play slowly */
#navcue li[data-cue="zoom"] svg .a:last-child{animation:gdMvY 2.4s ease-in-out infinite}
#navcue li[data-cue="move"] svg .a{animation:gdMvX 2.4s ease-in-out infinite}
/* Fit all pulses while the card waits for it */
:root.navfit .fcam [data-fcam="fit"]{animation:navPulse 1.6s ease-in-out infinite}
@keyframes navPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a1) 60%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--a1) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){#navcue,#navcue *,:root.navfit .fcam [data-fcam="fit"]{animation:none!important}}
:root[data-gfx="steady"] #navcue *,:root[data-gfx="steady"].navfit .fcam [data-fcam="fit"]{animation:none!important}

/* ══════════════ v88 · Sheet ══════════════ */
[data-wgt="sheet"] > .wb{display:flex;flex-direction:column;padding:0}
.shx{position:relative;display:flex;flex-direction:column;flex:1;min-height:360px;height:100%;font-size:calc(13.5px*var(--ts,1));color:var(--text);outline:0}
.shx > .fnone{padding:14px}
.shx-bar{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent);flex-wrap:wrap}
.shx-addr{min-width:64px;padding:4px 8px;font:400 calc(12.5px*var(--ts,1))/1.2 var(--mono);color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent)}
.shx-fx{font:italic 600 calc(13px*var(--ts,1))/1 Georgia,serif;color:var(--muted)}
.shx-in{flex:1 1 220px;min-width:120px;padding:5px 8px;border:0;color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent);font:inherit;font-family:var(--mono);outline:0}
.shx-in:focus{box-shadow:inset 0 0 0 1.5px var(--a1)}
.shx-tools{display:flex;align-items:center;gap:2px}
.shx-tools button{min-width:28px;height:26px;padding:0 7px;border:0;background:none;color:var(--text);font:inherit;cursor:pointer}
.shx-tools button:hover{background:color-mix(in srgb,var(--text) 9%,transparent)}
.shx-tools button[aria-pressed="true"]{background:color-mix(in srgb,var(--a1) 24%,transparent);color:var(--a1t)}
.shx-sep{width:1px;height:18px;margin:0 4px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.shx-scroll{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.shx-t{border-collapse:separate;border-spacing:0;table-layout:fixed;width:max-content}
.shx-t col.shx-rh{width:44px}
.shx-t th,.shx-t td{height:24px;padding:0 6px;border-right:1px solid color-mix(in srgb,var(--text) 11%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 11%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:24px;box-sizing:border-box}
.shx-t td{cursor:cell;background:color-mix(in srgb,var(--p1) 40%,transparent)}
.shx-t td.n{text-align:right;font-variant-numeric:tabular-nums}
.shx-t td.bo{text-align:center}
.shx-t td.e{color:var(--a3t);text-align:center;font-family:var(--mono);font-size:calc(12px*var(--ts,1))}
.shx-t td.b{font-weight:700}.shx-t td.i{font-style:italic}.shx-t td.u{text-decoration:underline}
.shx-t thead th{position:sticky;top:0;z-index:3;font:400 calc(11.5px*var(--ts,1))/24px var(--mono);color:var(--muted);text-align:center;cursor:s-resize;
  background:color-mix(in srgb,var(--p2) 96%,transparent)}
.shx-t tbody th{position:sticky;left:0;z-index:2;font:400 calc(11.5px*var(--ts,1))/24px var(--mono);color:var(--muted);text-align:center;cursor:e-resize;
  background:color-mix(in srgb,var(--p2) 96%,transparent)}
.shx-t thead th.shx-corner{left:0;z-index:4;cursor:pointer}
.shx-t th.on{color:var(--a1t);background:color-mix(in srgb,var(--a1) 18%,var(--p2))}
.shx-rz{position:absolute;right:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}
.shx-sel,.shx-act,.shx-clip,.shx-fill{position:absolute;pointer-events:none;z-index:1}
.shx-clip{display:none}
.shx-sel.multi{background:color-mix(in srgb,var(--a1) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 70%,transparent)}
.shx-act{box-shadow:inset 0 0 0 2px var(--a1)}
.shx:not(.focus) .shx-act{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--a1) 50%,transparent)}
.shx-clip{outline:2px dashed var(--a1);outline-offset:-2px}
.shx-clip.fillprev{outline:1.5px dashed color-mix(in srgb,var(--text) 60%,transparent);display:block}
.shx-fill{width:8px;height:8px;background:var(--a1);border:1.5px solid var(--page);pointer-events:auto;cursor:crosshair;z-index:5}
.shx.ro .shx-fill{display:none!important}
.shx-ed{position:absolute;z-index:6;margin:0;padding:0 6px;border:0;font:inherit;color:var(--text);background:var(--p1);box-shadow:0 0 0 2px var(--a1),0 6px 16px rgba(0,0,0,.25);outline:0;box-sizing:border-box}
.shx-ed.n{text-align:right}
.shx-sink{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;padding:0;border:0;resize:none;pointer-events:none}
.shx-menu{position:fixed;z-index:400;display:flex;flex-direction:column;min-width:180px;padding:4px;background:var(--page);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.shx-menu button{padding:8px 10px;border:0;background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.shx-menu button:hover,.shx-menu button:focus-visible{background:color-mix(in srgb,var(--a1) 16%,transparent);outline:0}
/* v88 · the Sheet, phase 2: menus, tabs, panels and the cell looks */
.shx-menus{display:flex;align-items:center;gap:1px;padding:4px 6px;border-bottom:1px solid color-mix(in srgb,var(--text) 14%,transparent);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.shx-menus > *{flex:none}
.shx-menus > [data-menu]{height:26px;padding:0 9px;border:0;background:none;color:var(--text);font:inherit;cursor:pointer}
.shx-menus > [data-menu]:hover,.shx-menus > [data-menu]:focus-visible{background:color-mix(in srgb,var(--text) 9%,transparent);outline:0}
.shx-menus .shx-tools{margin-left:8px;flex-wrap:nowrap}
.shx-fgi{font-weight:700;border-bottom:3px solid var(--a3);line-height:1}
.shx-bgi{display:inline-block;width:13px;height:11px;background:var(--a2);border:1px solid color-mix(in srgb,var(--text) 50%,transparent)}
.shx-bdi{display:inline-block;width:13px;height:13px;border:1.5px solid currentColor;background:linear-gradient(currentColor,currentColor) center/1px 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;opacity:.85}
.shx-al{display:inline-block;width:14px;height:11px;background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) var(--x,0) 50%/60% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
.shx-al.c{--x:50%}.shx-al.r{--x:100%}
.shx-fi{display:inline-block;width:0;height:0;border:6px solid transparent;border-top:8px solid currentColor;border-bottom:0;vertical-align:middle}
.shx-open{border:0;background:none;color:var(--a1t);font:inherit;cursor:pointer;padding:3px 6px}
.shx-ed{resize:none;overflow:hidden;white-space:pre;line-height:24px;font-family:inherit}
.shx-t td.x{text-decoration:line-through}.shx-t td.u.x{text-decoration:underline line-through}
.shx-t td.w{white-space:pre-wrap;word-break:break-word;line-height:1.35;padding-top:3px;padding-bottom:3px;height:auto}
.shx-t td.al-l{text-align:left}.shx-t td.al-c{text-align:center}.shx-t td.al-r{text-align:right}
.shx-t td.bd-b{border-bottom-color:var(--text)}.shx-t td.bd-r{border-right-color:var(--text)}
.shx-t td.bd-t{box-shadow:inset 0 1px 0 var(--text)}.shx-t td.bd-l{box-shadow:inset 1px 0 0 var(--text)}.shx-t td.bd-l.bd-t{box-shadow:inset 0 1px 0 var(--text),inset 1px 0 0 var(--text)}
.shx-t td .lnk{color:var(--a1t);text-decoration:underline;text-underline-offset:2px}
.shx-t td.cbx{text-align:center}
.shx-cb{display:inline-block;width:14px;height:14px;vertical-align:middle;border:1.5px solid color-mix(in srgb,var(--text) 60%,transparent);border-radius:2px;cursor:pointer;position:relative}
.shx-cb.on{background:var(--a1);border-color:var(--a1)}
.shx-cb.on::after{content:"";position:absolute;left:3.5px;top:0;width:4px;height:8px;border:solid var(--page);border-width:0 2px 2px 0;transform:rotate(45deg)}
.shx-t td.dvc{position:relative;padding-right:20px}
.shx-chip{display:inline-block;max-width:100%;padding:0 7px;line-height:18px;border-radius:9px;background:color-mix(in srgb,var(--a1) 18%,transparent);overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.shx-chip:empty{display:none}.shx-chip.bad{background:none;box-shadow:inset 0 0 0 1px var(--a3t);color:var(--a3t)}
.shx-dv{position:absolute;right:3px;top:0;font-style:normal;color:var(--muted);cursor:pointer;padding:0 3px}
.shx-t td.note{position:relative}
.shx-t td.note::after{content:"";position:absolute;right:0;top:0;border:4px solid transparent;border-top-color:var(--a3);border-right-color:var(--a3)}
.shx-t td.fh{position:relative;padding-right:20px;font-weight:600}
.shx-fb{position:absolute;right:2px;top:3px;width:16px;height:16px;line-height:16px;text-align:center;font-style:normal;font-size:11px;color:var(--muted);cursor:pointer;border-radius:2px}
.shx-fb:hover{background:color-mix(in srgb,var(--text) 12%,transparent)}.shx-fb.on{color:var(--page);background:var(--a1)}
.shx-sp{display:block;width:100%;height:18px;margin-top:3px;color:var(--a1)}
.shx-t td.spill{color:color-mix(in srgb,var(--text) 88%,var(--a1))}
.shx-t tr.gone{display:none}
.shx-t .fz{position:sticky;z-index:1;background:color-mix(in srgb,var(--p1) 40%,var(--page))}
.shx-t tbody th.fz{z-index:3}.shx-t thead th.fz{z-index:4}
.shx-t td.fzr:not(.fzc){box-shadow:0 1px 0 color-mix(in srgb,var(--text) 22%,transparent)}
.shx-sel,.shx-act,.shx-clip{z-index:2}.shx-fill{z-index:5}
.shx-unh{position:absolute;left:-7px;top:2px;font-style:normal;font-size:9px;line-height:1;padding:2px;color:var(--page);background:var(--a1);cursor:pointer;z-index:5}
.shx-t tbody th .shx-unh{left:auto;right:2px;top:-6px}
.shx-foot{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 6px;border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent)}
.shx-tabs{display:flex;align-items:stretch;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:thin}
.shx-tabs button{flex:none;height:28px;padding:0 12px;border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;white-space:nowrap}
.shx-tabs .shx-tadd,.shx-tabs .shx-tall{padding:0 9px;font-size:calc(16px*var(--ts,1))}
.shx-tabs button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.shx-tab[aria-selected="true"]{color:var(--a1t);background:color-mix(in srgb,var(--a1) 14%,transparent);box-shadow:inset 0 -2px 0 var(--a1)}
.shx-tren{height:26px;width:140px;padding:0 8px;border:0;font:inherit;color:var(--text);background:var(--p1);box-shadow:inset 0 0 0 1.5px var(--a1);outline:0}
.shx-stat{flex:none;font-variant-numeric:tabular-nums;color:var(--muted);white-space:pre;font-size:calc(12.5px*var(--ts,1))}
.shx-panel{position:absolute;right:8px;top:70px;z-index:20;width:min(320px,calc(100% - 16px));max-height:calc(100% - 80px);overflow:auto;padding:12px;box-sizing:border-box;background:var(--page);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.shx-ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.shx-px{width:28px;height:28px;border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer}
.shx-pl{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.shx-pl > span{color:var(--muted);font-size:calc(12px*var(--ts,1))}
.shx-pl[hidden]{display:none}
.shx-pin{width:100%;box-sizing:border-box;padding:6px 8px;border:0;color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent);font:inherit;outline:0;resize:vertical}
.shx-pin:focus{box-shadow:inset 0 0 0 1.5px var(--a1)}
select.shx-pin{background:var(--p1)}
.shx-pck{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer}
.shx-pa{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.shx-pn{color:var(--muted);margin:6px 0}
.shx-panel hr,.shx-menu hr{border:0;border-top:1px solid color-mix(in srgb,var(--text) 14%,transparent);margin:6px 0;width:100%}
.shx-cfr{display:flex;align-items:center;gap:8px;padding:5px 0}
.shx-cfs{flex:none;width:34px;line-height:22px;text-align:center;font-weight:700}
.shx-cfr > span:nth-child(2){flex:1;min-width:0}
.shx-cfx{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}
.shx-cfp{display:flex;gap:6px}.shx-cfp button{width:34px;height:26px;border:0;font-weight:700;cursor:pointer}
.shx-cfp button[aria-pressed="true"]{outline:2px solid var(--a1);outline-offset:2px}
.shx-kl{display:grid;gap:2px}.shx-kl > div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.shx-kl kbd,.shx-menu kbd{font:400 calc(11.5px*var(--ts,1))/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.shx-menu{max-height:calc(100vh - 16px);overflow:auto}
.shx-menu button{display:flex;align-items:center;gap:10px}.shx-menu button > span{flex:1}
.shx-menu button[disabled]{opacity:.4;cursor:default}
.shx-ck{width:12px;font-style:normal;color:var(--a1t)}
.shx-mh{margin:6px 10px 2px;color:var(--muted);font-size:calc(11.5px*var(--ts,1))}
.shx-pal{padding:8px}.shx-pnone{align-self:flex-start;margin-bottom:6px}
.shx-sw{display:grid;grid-template-columns:repeat(6,22px);gap:4px}
.shx-sw button{width:22px;height:22px;padding:0;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);cursor:pointer}
.shx-flt{width:240px}
.shx-fa{display:flex;gap:12px;padding:0 10px 4px}
.shx-fv{display:flex;flex-direction:column;max-height:220px;overflow:auto;padding:0 6px}
.shx-fv label{display:flex;align-items:center;gap:8px;padding:3px 4px;cursor:pointer}.shx-fv i{margin-left:auto;font-style:normal;color:var(--muted)}
.shx-flt .shx-pa{padding:0 6px 4px}
.shx-help{position:absolute;z-index:7;max-width:380px;padding:6px 0;background:var(--page);border:1px solid color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:0 10px 26px rgba(0,0,0,.3);font-size:calc(12.5px*var(--ts,1))}
.shx-hi{display:flex;gap:10px;padding:4px 10px;cursor:pointer}.shx-hi.on{background:color-mix(in srgb,var(--a1) 16%,transparent)}
.shx-hi b{font-family:var(--mono);font-weight:500;min-width:92px}.shx-hi span{color:var(--muted)}
.shx-hn{margin:4px 10px 0;color:var(--muted);font-size:calc(11px*var(--ts,1))}
.shx-sig{padding:2px 10px;font-family:var(--mono)}.shx-sig u{text-decoration:none;color:var(--a1t);font-weight:700}
.shx-help > p{margin:4px 10px 2px;color:var(--muted)}
/* v89 · merged cells: the top-left cell draws over the cells it covers */
.shx-t td.mga{position:relative;overflow:visible;z-index:1}
.shx-mg{position:absolute;left:0;top:0;box-sizing:border-box;display:grid;align-content:center;padding:0 6px;overflow:hidden;white-space:inherit;pointer-events:none}
.shx-t td.mgr{border-right-color:transparent}.shx-t td.mgb{border-bottom-color:transparent}
.shx-t td.mgc{color:transparent}
.shx-mgi{display:inline-block;width:14px;height:11px;border:1.5px solid currentColor;position:relative}
.shx-mgi::before,.shx-mgi::after{content:"";position:absolute;top:50%;width:4px;height:0;border-top:1.5px solid currentColor}
.shx-mgi::before{left:1px}.shx-mgi::after{right:1px}
/* v89 · charts float over the grid; pivot tables read as their own table */
.shx-chl{position:absolute;left:0;top:0;width:0;height:0;z-index:2}
.shx-ch{position:absolute;box-sizing:border-box;padding:4px 6px;background:var(--page);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);box-shadow:0 8px 22px rgba(0,0,0,.28);cursor:move;user-select:none}
.shx.ro .shx-ch{cursor:default}
.shx-ch.on{outline:2px solid var(--a1);outline-offset:1px}
.shx-cht{height:22px;line-height:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.shx-chb{position:relative}.shx-chs{display:block}
.shx-chn{margin:24px 8px;color:var(--muted)}
.shx-chrz{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--a1) 50%)}
.shx-ch:not(.on) .shx-chrz{opacity:0}
.shx-t td.pv{background:color-mix(in srgb,var(--a1) 5%,color-mix(in srgb,var(--p1) 40%,transparent))}
.shx-t td.pvh{background:color-mix(in srgb,var(--a1) 16%,transparent);color:var(--text)}
.shx-t td.pvt{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 50%,transparent)}
.shx-pvv{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shx-mg .shx-cb,.shx-mg .shx-dv,.shx-mg .shx-fb,.shx-mg .lnk{pointer-events:auto}
/* v89 · comment threads */
.shx-t td.cmt{position:relative}
.shx-t td.cmt::before{content:"";position:absolute;right:0;top:0;border:5px solid transparent;border-top-color:var(--a1);border-right-color:var(--a1);z-index:1}
.shx-cml{display:flex;flex-direction:column;gap:10px}
.shx-cmt{padding:8px;background:color-mix(in srgb,var(--text) 5%,transparent);border-left:3px solid var(--a1)}
.shx-cmt.done{border-left-color:color-mix(in srgb,var(--text) 25%,transparent);opacity:.75}
.shx-cm + .shx-cm{margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.shx-cmh{display:flex;align-items:baseline;gap:8px}.shx-cmh span{color:var(--muted);font-size:calc(11.5px*var(--ts,1))}
.shx-cm p{margin:4px 0 0;white-space:pre-wrap;word-break:break-word}
.shx-cmx{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer;font-size:16px}
.shx-cmr{margin-top:8px}.shx-cmr .shx-pa{margin-top:6px}
.shx-cmgo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px;border:0;border-left:3px solid var(--a1);background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.shx-cmgo:hover{background:color-mix(in srgb,var(--a1) 12%,transparent)}.shx-cmgo span{color:var(--muted)}.shx-cmgo i{font-style:normal;color:var(--a1t);font-size:calc(11.5px*var(--ts,1))}
/* v89 · protected ranges show stripes, stronger where this person cannot edit; saved versions */
.shx-t td.prot{background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--a2) 9%,transparent) 6px 8px)}
.shx-t td.protx{background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--a2) 22%,transparent) 5px 7px)}
.shx-prr,.shx-ver{display:flex;flex-direction:column;gap:4px;padding:8px;background:color-mix(in srgb,var(--text) 5%,transparent);border-left:3px solid var(--a2)}
.shx-ver{border-left-color:var(--a1)}
.shx-prr span,.shx-ver > span:not(.shx-pa){color:var(--muted);font-size:calc(12px*var(--ts,1))}
.shx-prr .fbtn,.shx-ver .fbtn{align-self:flex-start;padding:3px 9px}
.shx-ver .shx-pa{margin-top:4px}

/* ── v92 · Pets: eleven widgets for a dog ── */
.wgt[data-wcat="pet"],.wrecc[data-wcat="pet"]{--wc:#f2a65a;--pt-green:#7dd87d;--pt-amber:#ffc46b;--pt-rose:#f47272;--pt-sky:#60a5fa;--pt-violet:#b39dfb;--pt-cream:#efe2cc;--pt-mute:color-mix(in srgb,var(--text) 30%,transparent);--pt-off:color-mix(in srgb,var(--text) 14%,transparent);--pt-line:color-mix(in srgb,var(--text) 13%,transparent)}
:root[data-tod="day"]:not([data-smode="dark"]) .wgt[data-wcat="pet"],:root[data-smode="light"] .wgt[data-wcat="pet"]{--wc:#b8661c;--pt-green:#2e8b3a;--pt-amber:#a86a00;--pt-rose:#c43c3c;--pt-sky:#2563eb;--pt-violet:#6d4fd8}
.wgt[data-wcat="pet"]>.wb{container-type:inline-size}
[data-wcat="pet"] .lab{display:block;font:600 calc(10px*var(--ts,1))/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[data-wcat="pet"] .fadd{flex-wrap:wrap;margin-top:12px}
[data-wcat="pet"] .fadd input[name="t"]{flex:3 1 180px}
[data-wcat="pet"] .fadd select,[data-wcat="pet"] .fadd input[type="date"],[data-wcat="pet"] .fadd input[type="time"]{flex:0 1 auto;width:auto}
[data-wcat="pet"] .fadd input[type="number"]{flex:0 1 110px}
[data-wcat="pet"] .fadd input[name="kg"]{flex:0 1 140px}
.pt-dl{display:flex;align-items:center;gap:6px;flex:0 1 auto;font:600 calc(10px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.pt-dl input{width:auto}
.pt-pbox.late{border-color:color-mix(in srgb,var(--pt-amber) 60%,transparent);background:color-mix(in srgb,var(--pt-amber) 8%,transparent)}.pt-pbox.late b{color:var(--pt-amber)}
[data-wcat="pet"] .warn{color:var(--pt-amber);font-weight:600}
.pt-who{display:inline-grid;place-items:center;width:calc(19px*var(--ts,1));height:calc(19px*var(--ts,1));border-radius:50%;background:color-mix(in srgb,var(--wc) 80%,var(--text));color:#1a120a;font:700 calc(9px*var(--ts,1))/1 var(--mono);vertical-align:middle;flex:0 0 auto}

/* Fed today */
.pt-bowls{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px;margin-top:10px}
.pt-bowl{position:relative;padding:10px;border:1px solid var(--pt-line);text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pt-bowl svg{width:min(120px,100%);height:auto;display:block}
.pt-rim{fill:color-mix(in srgb,var(--wc) 70%,var(--text))}.pt-body{fill:color-mix(in srgb,var(--wc) 45%,transparent)}.pt-in{fill:color-mix(in srgb,var(--text) 10%,var(--p1,#1a1612))}.pt-kib circle{fill:#9a6a3a}
.pt-bowl h4{margin:0;font:600 calc(16px*var(--ts,1))/1.2 var(--disp)}
.pt-bowl p{margin:0;font-size:calc(12px*var(--ts,1));color:var(--muted);line-height:1.5}
.pt-bowl .fbtn{margin-top:4px}
.pt-bowl .fx{position:absolute;right:4px;bottom:4px}
.pt-bowl.done{border-color:color-mix(in srgb,var(--pt-green) 55%,transparent);background:color-mix(in srgb,var(--pt-green) 7%,transparent)}
.pt-bowl.due{border-color:color-mix(in srgb,var(--wc) 60%,transparent);background:color-mix(in srgb,var(--wc) 8%,transparent)}
.pt-bowl.twice{border-color:color-mix(in srgb,var(--pt-rose) 60%,transparent);background:color-mix(in srgb,var(--pt-rose) 8%,transparent)}
.pt-tag{position:absolute;right:8px;top:8px;font:700 calc(10.5px*var(--ts,1))/1 var(--mono);color:var(--pt-green)}.twice .pt-tag{color:var(--pt-rose)}
.pt-warn{color:var(--pt-rose)!important;font-weight:600}
.pt-treats{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px;padding:9px 12px;border:1px solid var(--pt-line)}
.pt-bones{display:flex;gap:4px}.pt-bones i{width:20px;height:9px;border-radius:5px;background:var(--pt-cream)}.pt-bones i.off{background:var(--pt-off)}
.pt-treats b{font:600 calc(14px*var(--ts,1))/1 var(--mono)}
.pt-tl{font-size:calc(12px*var(--ts,1));color:var(--muted)}
.pt-treats .fbtn{margin-left:auto}
.pt-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0 8px}
.pt-week div{text-align:center;font:600 calc(10px*var(--ts,1))/1 var(--mono);color:var(--muted)}.pt-week div.today{color:var(--text)}
.pt-week span{display:flex;justify-content:center;gap:3px;margin-top:5px}.pt-week i{width:11px;height:11px;border-radius:50%;background:var(--pt-green)}.pt-week i.x{background:var(--pt-off)}.pt-week i.two{background:var(--pt-rose)}

/* Dog walks */
.pt-slots{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;margin-top:10px}
.pt-slot{padding:9px 10px;border:1px solid var(--pt-line);display:flex;flex-direction:column;gap:3px;min-width:0}
.pt-slot b{font:600 calc(15px*var(--ts,1))/1.2 var(--disp)}
.pt-t{font:calc(10.5px*var(--ts,1))/1.2 var(--mono);color:var(--muted)}
.pt-s{margin-top:4px;font-size:calc(12.5px*var(--ts,1));display:flex;align-items:center;gap:6px}
.pt-sa{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:6px;align-items:center}
.pt-slot.done{border-color:color-mix(in srgb,var(--pt-green) 50%,transparent)}.pt-slot.done .pt-s{color:var(--pt-green)}
.pt-slot.next{border-color:color-mix(in srgb,var(--wc) 60%,transparent);background:color-mix(in srgb,var(--wc) 7%,transparent)}
.pt-slot.open{border-style:dashed}
.pt-hm{display:grid;grid-template-columns:40px repeat(7,1fr);gap:4px;margin-top:12px;font:600 calc(10px*var(--ts,1))/1 var(--mono);color:var(--muted);align-items:center;text-align:center}
.pt-hm i{height:14px;background:var(--pt-off)}.pt-hm i.on{background:var(--pt-green)}.pt-hm i.tk{background:color-mix(in srgb,var(--wc) 35%,transparent);outline:1px dashed var(--wc)}
.pt-stat{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:calc(12.5px*var(--ts,1));color:var(--muted);align-items:center}
.pt-stat b{color:var(--text);font:600 calc(17px*var(--ts,1))/1 var(--mono);margin-right:5px}

/* Meds and preventives */
.pt-meds{display:grid;gap:8px;margin-top:10px}
.pt-med{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:9px 11px;border:1px solid var(--pt-line)}
.pt-med svg{width:52px;height:52px;display:block}
.pt-track{stroke:var(--pt-off)}.pt-rt{font:700 11px var(--mono);fill:var(--text)}
.pt-med h4{margin:0;font:600 calc(15px*var(--ts,1))/1.2 var(--disp)}.pt-med p{margin:2px 0 0;font-size:calc(12px*var(--ts,1));color:var(--muted)}
.pt-when{text-align:right;font:600 calc(10.5px*var(--ts,1))/1.3 var(--mono);color:var(--muted)}.pt-when b{display:block;font-size:calc(16px*var(--ts,1));color:var(--text)}
.pt-ma{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;align-items:center}
.pt-med.now{border-color:color-mix(in srgb,var(--pt-amber) 60%,transparent);background:color-mix(in srgb,var(--pt-amber) 7%,transparent)}.pt-med.now .pt-when b{color:var(--pt-amber)}
.pt-med.ok .pt-when b{color:var(--pt-green)}.pt-med.off{opacity:.6}
.pt-ds{margin:10px 0 0;font-size:calc(12.5px*var(--ts,1));color:var(--muted);padding:7px 10px;border-left:3px solid var(--pt-amber);background:color-mix(in srgb,var(--pt-amber) 6%,transparent)}.pt-ds b{color:var(--text)}

/* Vet and vaccines */
.pt-vax{width:100%;border-collapse:collapse;font-size:calc(13px*var(--ts,1));margin-top:10px}
.pt-vax th{font:600 calc(10px*var(--ts,1))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--pt-line)}
.pt-vax td{padding:7px 6px;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent);vertical-align:middle}
.pt-d{font:600 calc(11.5px*var(--ts,1))/1.3 var(--mono)}
.pt-vb{height:8px;background:var(--pt-off);position:relative;min-width:70px}.pt-vb i{position:absolute;left:0;top:0;bottom:0;background:var(--pt-green)}
.pt-vax tr.warn .pt-vb i{background:var(--pt-amber)}.pt-vax tr.warn .pt-d:last-of-type{color:var(--pt-amber)}
.pt-vax tr.late .pt-vb i{background:var(--pt-rose);width:100%!important}.pt-vax tr.late td{color:var(--pt-rose)}
.pt-vet2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.pt-vbox{padding:9px 11px;border:1px solid var(--pt-line);font-size:calc(12.5px*var(--ts,1));color:var(--muted);display:flex;flex-direction:column;gap:2px}
.pt-vbox b{color:var(--text);font-size:calc(14.5px*var(--ts,1))}.pt-vbox.next{border-color:color-mix(in srgb,var(--pt-sky) 50%,transparent)}
.pt-vn{font-size:calc(11.5px*var(--ts,1))}.pt-va{display:flex;gap:6px;align-items:center;margin-top:4px}
.pt-kennel{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:12px 0 0;font-size:calc(12px*var(--ts,1));color:var(--muted)}

/* Dog weight */
.pt-wchg{margin-top:6px;font-size:calc(13px*var(--ts,1));color:var(--pt-green);display:flex;flex-wrap:wrap;gap:4px 14px}.pt-wchg span{color:var(--muted)}.pt-wchg.up{color:var(--pt-amber)}
.pt-chart{width:100%;height:auto;display:block;margin-top:8px}
.pt-band{fill:color-mix(in srgb,var(--pt-green) 12%,transparent)}.pt-bl{font:600 10px var(--mono);fill:var(--pt-green)}
.pt-ax{font:600 10.5px var(--mono);fill:var(--muted)}.pt-gl{stroke:var(--pt-off);stroke-width:1}
.pt-line{fill:none;stroke:var(--wc);stroke-width:2.5;stroke-linejoin:round}
.pt-pt{fill:var(--wc)}.pt-last{fill:var(--wc);stroke:var(--text);stroke-width:2}

/* Dog training */
.pt-board{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.pt-col{display:flex;flex-direction:column;gap:6px;min-width:0;padding:7px;border:1px solid color-mix(in srgb,var(--text) 8%,transparent);background:color-mix(in srgb,var(--text) 2.5%,transparent)}
.pt-col h5{margin:0 0 2px;display:flex;justify-content:space-between;font:600 calc(10.5px*var(--ts,1))/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.pt-col h5 b{color:var(--text)}
.pt-tc{position:relative;padding:8px 9px;border:1px solid var(--pt-line);background:color-mix(in srgb,var(--text) 4%,transparent);display:flex;flex-direction:column;gap:5px}
.pt-tc.rel{border-color:color-mix(in srgb,var(--pt-green) 45%,transparent)}
.pt-tn{border:0;background:none;padding:0 42px 0 0;text-align:left;color:var(--text);cursor:pointer;font:600 calc(14px*var(--ts,1))/1.25 var(--disp)}
.pt-tn:hover,.pt-tn:focus-visible{text-decoration:underline;outline:none}
.pt-pr{display:flex;gap:3px}.pt-pr i{flex:1;height:6px;background:var(--pt-off)}.pt-pr i.y{background:var(--wc)}.pt-pr i.n{background:color-mix(in srgb,var(--pt-rose) 55%,transparent)}.pt-tc.rel .pt-pr i.y{background:var(--pt-green)}
.pt-tc p{margin:0;font-size:calc(11.5px*var(--ts,1));color:var(--muted)}.pt-tq{font-style:italic}
.pt-tlog{margin-top:2px!important;gap:5px}.pt-tlog input{flex:1 1 100%!important}
.pt-tm{display:flex;justify-content:flex-end}
.pt-mv{position:absolute;top:6px;right:6px;display:flex;gap:2px}
.pt-mv button{width:18px;height:18px;padding:0;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1}
.pt-mv button:hover,.pt-mv button:focus-visible{color:var(--text);border-color:var(--wc);outline:none}.pt-mv button:disabled{opacity:.25;cursor:default}

/* Puppy potty log */
.pt-day{position:relative;height:112px;margin:6px 12px 0}
.pt-base{position:absolute;left:0;right:0;top:56px;height:2px;background:var(--pt-off)}
.pt-hr{position:absolute;top:68px;font:600 calc(10px*var(--ts,1))/1 var(--mono);color:var(--muted);transform:translateX(-50%)}
.pt-hr::before{content:"";position:absolute;left:50%;top:-10px;width:1px;height:7px;background:var(--pt-off)}
.pt-ev{position:absolute;top:45px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--mono)}
.pt-ev.ok{background:var(--pt-green);color:#10200f}.pt-ev.acc{background:var(--pt-rose);color:#2a0f0f}
.pt-meal{position:absolute;top:10px;transform:translateX(-50%);font:600 calc(10px*var(--ts,1))/1 var(--mono);color:var(--pt-amber)}
.pt-meal::after{content:"";display:block;width:1px;height:18px;background:color-mix(in srgb,var(--pt-amber) 50%,transparent);margin:3px auto 0}
.pt-now{position:absolute;top:30px;bottom:34px;width:2px;background:var(--text);transform:translateX(-50%)}
.pt-nx{position:absolute;top:41px;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;border:2px dashed var(--wc);color:var(--wc);display:grid;place-items:center;font:700 10.5px/1 var(--mono);background:var(--p1,transparent)}
.pt-pb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.pt-acc{border-color:color-mix(in srgb,var(--pt-rose) 55%,transparent)!important;color:var(--pt-rose)!important}
.pt-pt2{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:12px}
.pt-pbox{padding:9px 11px;border:1px solid color-mix(in srgb,var(--wc) 55%,transparent);background:color-mix(in srgb,var(--wc) 7%,transparent)}
.pt-pbox b{display:block;font:700 calc(21px*var(--ts,1))/1.1 var(--disp);color:var(--wc)}.pt-pbox p{margin:3px 0 0;font-size:calc(12px*var(--ts,1));color:var(--muted)}
.pt-pst{padding:9px 11px;border:1px solid var(--pt-line);font-size:calc(12px*var(--ts,1));line-height:1.9;color:var(--muted)}.pt-pst b{color:var(--text);font:600 calc(14px*var(--ts,1))/1 var(--mono);margin-right:5px}

/* Food left */
.pt-food{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:start;margin-top:10px}
.pt-bag{width:120px;height:auto;display:block}
.pt-bagbg{fill:color-mix(in srgb,var(--text) 5%,transparent)}.pt-fill{fill:color-mix(in srgb,var(--wc) 60%,transparent)}.pt-lvl{stroke:var(--wc);stroke-width:2}
.pt-bagl{fill:none;stroke:color-mix(in srgb,var(--wc) 80%,var(--text));stroke-width:3;stroke-linejoin:round}.pt-bagt{fill:none;stroke:color-mix(in srgb,var(--wc) 80%,var(--text));stroke-width:3}
.pt-bn{font:700 12px var(--mono);fill:var(--text)}.pt-bs{font:600 10px var(--mono);fill:var(--muted)}
.pt-fl{margin:0;font-size:calc(13px*var(--ts,1));color:var(--muted)}
.pt-fg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pt-fg div{padding:8px 10px;border:1px solid var(--pt-line);font-size:calc(12px*var(--ts,1));color:var(--muted)}.pt-fg b{display:block;color:var(--text);font:600 calc(15px*var(--ts,1))/1.2 var(--mono)}
.pt-reorder{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 12px;border:1px solid var(--pt-line);font-size:calc(13px*var(--ts,1));color:var(--muted)}
.pt-reorder b{color:var(--text)}.pt-reorder .fbtn{margin-left:auto}
.pt-reorder.late{border-color:color-mix(in srgb,var(--pt-amber) 55%,transparent);background:color-mix(in srgb,var(--pt-amber) 7%,transparent)}
@container (max-width:420px){.pt-food{grid-template-columns:1fr}.pt-bag{width:96px}}

/* Sitter card: a paper card, in both themes */
.pt-card{background:#efe2cc;color:#2a2018;padding:14px 16px;margin-top:10px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pt-ctop{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center}
.pt-ctop svg{width:72px;height:72px;display:block}
.pt-card h4{margin:0;font:700 calc(22px*var(--ts,1))/1.1 var(--disp);color:#2a2018}
.pt-sub{font-size:calc(12px*var(--ts,1));color:#6b5a48}
.pt-ccols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:10px}
.pt-card h6{margin:0 0 4px;font:700 calc(10px*var(--ts,1))/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a0522d}
.pt-card ul{margin:0;padding:0;list-style:none;font-size:calc(12.5px*var(--ts,1))}
.pt-card li{padding:3px 0;border-bottom:1px solid #dccbb0;display:flex;gap:8px;align-items:baseline}
.pt-card li b{font:600 calc(11.5px*var(--ts,1))/1.4 var(--mono);min-width:44px}
.pt-card .fx{margin-left:auto;color:#8a7560}
.pt-cn{margin:0;font-size:calc(12px*var(--ts,1));color:#6b5a48}
.pt-cadd{margin-top:6px!important}.pt-cadd .fbtn{color:#8a4320!important;border-color:#c99a6a!important;background:#f8efe0!important}.pt-cadd input{background:#f8efe0!important;color:#2a2018!important;border-color:#d8c4a4!important}
.pt-em{margin-top:10px;padding:7px 10px;background:#f8efe0;border:1px solid #e3d2b6;font-size:calc(12.5px*var(--ts,1))}.pt-em b{color:#a0522d}
.pt-share{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px;align-items:center;font-size:calc(12px*var(--ts,1));color:var(--muted)}
@media print{
  body.pt-printing *{visibility:hidden!important}
  body.pt-printing #ptCard,body.pt-printing #ptCard *{visibility:visible!important}
  body.pt-printing #ptCard{position:fixed;left:0;top:0;width:100%;box-shadow:none;margin:0}
  body.pt-printing #ptCard .fx,body.pt-printing #ptCard .pt-cadd{display:none!important}
}

/* Dog costs */
.pt-ctop2{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:8px;align-items:flex-end}
.pt-ctop2>div{display:flex;flex-direction:column;gap:2px;font-size:calc(12px*var(--ts,1));color:var(--muted)}.pt-ctop2 b{font:600 calc(17px*var(--ts,1))/1.1 var(--mono);color:var(--text)}
.pt-split{padding-left:14px;border-left:2px solid var(--pt-line)}
.pt-bars{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;align-items:end;height:140px;margin-top:14px;border-bottom:1px solid var(--pt-line)}
.pt-bars div{display:flex;flex-direction:column-reverse;height:100%}.pt-bars div i{display:block}
.pt-bars div.now{outline:1px solid var(--wc);outline-offset:2px}
.pt-mo{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;font:600 calc(9.5px*var(--ts,1))/1 var(--mono);color:var(--muted);text-align:center;margin-top:5px}
.pt-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:calc(12px*var(--ts,1));color:var(--muted)}.pt-leg i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}.pt-leg b{color:var(--text);font-family:var(--mono)}
.pt-c-food{background:var(--wc)}.pt-c-vet{background:var(--pt-sky)}.pt-c-ins{background:var(--pt-violet)}.pt-c-groom{background:var(--pt-rose)}.pt-c-toys{background:var(--pt-green)}.pt-c-other{background:var(--pt-mute)}

/* Dog recipes */
.pt-rc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:10px}
.pt-rc h4{margin:2px 0 4px;font:600 calc(19px*var(--ts,1))/1.2 var(--disp)}
.pt-rmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 calc(10.5px*var(--ts,1))/1.3 var(--mono);color:var(--muted)}.pt-rmeta .on{color:var(--wc)}
.pt-ing{list-style:none;margin:8px 0 0;padding:0;font-size:calc(13px*var(--ts,1))}
.pt-ing li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}.pt-ing li b{font:600 calc(12px*var(--ts,1))/1.4 var(--mono)}
.pt-cook{margin-top:10px!important}
.pt-ra{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.pt-ra [aria-pressed="true"]{border-color:var(--wc);color:var(--wc)}
.pt-safe{padding:9px 11px;border:1px solid color-mix(in srgb,var(--pt-green) 50%,transparent);background:color-mix(in srgb,var(--pt-green) 7%,transparent);font-size:calc(12.5px*var(--ts,1));line-height:1.5}
.pt-safe+.pt-safe{margin-top:6px}
.pt-safe b{color:var(--pt-green)}
.pt-safe.bad{border-color:color-mix(in srgb,var(--pt-rose) 55%,transparent);background:color-mix(in srgb,var(--pt-rose) 8%,transparent)}.pt-safe.bad b{color:var(--pt-rose)}
.pt-safe.care{border-color:color-mix(in srgb,var(--pt-amber) 55%,transparent);background:color-mix(in srgb,var(--pt-amber) 7%,transparent)}.pt-safe.care b{color:var(--pt-amber)}
.pt-batch{margin-top:8px;padding:9px 11px;border:1px solid var(--pt-line);font-size:calc(12.5px*var(--ts,1));color:var(--muted)}.pt-batch b{display:block;color:var(--text);font:700 calc(20px*var(--ts,1))/1.1 var(--disp)}
.pt-rl{margin-top:12px}
.pt-rlist{list-style:none;margin:4px 0 0;padding:0;font-size:calc(13px*var(--ts,1))}
.pt-rlist li{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.pt-rlist li i{width:9px;height:9px;border-radius:50%;background:var(--pt-green);flex:0 0 auto}.pt-rlist li i.bad{background:var(--pt-rose)}.pt-rlist li i.care{background:var(--pt-amber)}
.pt-rlist li .lnk{border:0;background:none;padding:0;color:inherit;cursor:pointer;font:inherit;text-align:left}.pt-rlist li .lnk:hover,.pt-rlist li .lnk:focus-visible{text-decoration:underline;outline:none}
.pt-rlist li.on .lnk{font-weight:600}
.pt-rlist li em{margin-left:auto;font:600 calc(10px*var(--ts,1))/1 var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.pt-radd textarea{flex:1 1 100%;min-height:84px;resize:vertical;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);padding:6px 8px;font:calc(13px*var(--ts,1))/1.45 inherit;font-family:inherit}
.pt-radd textarea:focus{outline:none;border-color:var(--a1)}
@container (max-width:460px){.pt-bowls,.pt-slots{grid-template-columns:1fr}.pt-med{grid-template-columns:44px minmax(0,1fr)}.pt-med svg{width:44px;height:44px}.pt-when{grid-column:2;text-align:left}}

/* v96 · a widget more than a screen away skips drawing its insides until it comes near (freeSkipWatch) */
#spc[data-free]>.wgt.fskip{content-visibility:auto}

/* v97 · accounts on this browser: in the account menu and on the sign-in screen */
.acct .aacc{display:flex;flex-direction:column;margin-top:14px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.acct .aacc .kk{margin:0 15px;font:500 calc(10.5px*var(--ts,1))/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.acct .aacc .arow{margin-top:8px}
.acct .aaccr .av{flex:0 0 auto}
.acct .aaccr s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .arow i.aaccsw{font:500 calc(11px*var(--ts,1))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.av.aplus{font-weight:600}
.acct .arow i.acicon{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;font-size:0;color:var(--a1t)}
.acct .arow i.acicon svg{width:17px;height:17px}
.gacc{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.gaccb{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid color-mix(in srgb,var(--text) 16%,transparent);background:color-mix(in srgb,var(--p1) 60%,transparent);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.gaccb:hover,.gaccb:focus-visible{border-color:var(--a1);outline:0}
.gaccb > span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.gaccb s{text-decoration:none;color:var(--muted);font-size:.9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v100 · projects you can find and manage: New project, Manage projects, a Space's Settings, Import tasks */
.nav a.addlink{padding:7px 11px;color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 60%,transparent);
  background:color-mix(in srgb,var(--a1) 16%,transparent);white-space:nowrap}
.nav a.addlink:hover{background:color-mix(in srgb,var(--a1) 30%,transparent)}
.step.add .nm{padding:6px 9px;background:var(--a1);color:var(--page);font-weight:700}
.step.man .rd{border-color:color-mix(in srgb,var(--text) 55%,transparent)}
.step.man .nm{max-width:240px;opacity:1;padding:6px 9px;background:color-mix(in srgb,var(--page) 82%,transparent);color:var(--text)}
.step.add:hover .nm,.step.add:focus-visible .nm{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--page) 55%,transparent)}
.step.man:hover .nm,.step.man:focus-visible .nm{box-shadow:inset 0 0 0 1px var(--a1)}
.pjnone{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));padding:26px 26px 24px;--ch:14px;
  display:flex;flex-direction:column;gap:12px;text-align:left;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--page) 82%,transparent);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent)}
.pjnone .kk{font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--a1t)}
.pjnone h2{margin:0;font:700 calc(24px*var(--ts,1))/1.1 var(--disp)}
.pjnone p{margin:0;font-size:calc(15px*var(--ts,1));line-height:1.5;color:color-mix(in srgb,var(--text) 82%,transparent)}
.pjbt{display:flex;gap:8px;flex-wrap:wrap}

.pjx{text-align:left}
.pjx.pjwide{width:min(860px,calc(100vw - 32px))}
.pjx.pjw2{width:min(1020px,calc(100vw - 32px))}
.pjx .pb{gap:16px}
.pjx h3{margin:0 0 9px}
.pjx .gf .ivf input{font-size:calc(16px*var(--ts,1))}
.pjch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pjo{display:flex;flex-direction:column;gap:5px;padding:12px 14px;--ch:8px;text-align:left;cursor:pointer;border:0;color:var(--text);font:inherit;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent);background:color-mix(in srgb,var(--text) 3%,transparent);transition:background .15s,box-shadow .15s}
.pjo b{font:600 calc(15px*var(--ts,1))/1.3 var(--disp)}
.pjo s{text-decoration:none;font:400 calc(12.5px*var(--ts,1))/1.45 var(--mono);color:var(--muted)}
.pjo:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 60%,transparent)}
.pjo:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--a1)}
.pjo[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--a1);background:color-mix(in srgb,var(--a1) 12%,transparent)}
.pjo[aria-pressed="true"] b::before{content:'\25C6  ';color:var(--a1t)}
.pjsw{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pjsw button{width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pjsw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--text)}
.pjsw button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--page),0 0 0 4px var(--a1)}
.pjft{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding-top:4px}
.pjft .rn{margin:0 0 0 auto}
.pjban{display:flex;gap:12px;align-items:center;padding:12px 14px;--ch:9px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--a1) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent)}
.pjban p{flex:1;margin:0;font:400 calc(13.5px*var(--ts,1))/1.5 var(--mono);color:var(--text)}
.pjr{gap:10px}
.pjr.drag{position:relative;z-index:2;background:color-mix(in srgb,var(--a1) 10%,transparent);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.pjgrip{width:16px;flex:0 0 auto;padding:4px 0;border:0;background:none;color:var(--muted);font:700 15px/1 var(--mono);letter-spacing:-2px;cursor:grab;touch-action:none}
.pjgrip:hover,.pjgrip:focus-visible{color:var(--a1t);outline:0}
.pjr.drag .pjgrip{cursor:grabbing}
.pjdot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;background:var(--pc,var(--a1))}
.pjcode{width:24px;flex:0 0 auto;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);color:var(--muted)}
.pjnm{all:unset;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjnm:hover b,.pjnm:focus-visible b{color:var(--a1t);text-decoration:underline;text-underline-offset:3px}
.pjr .pa .fbtn{padding:6px 10px;font-size:calc(12px*var(--ts,1))}
.pjr.arch .nm b{color:color-mix(in srgb,var(--text) 72%,transparent)}
.pjren input{padding:7px 9px}
.pjconf{margin:4px 0 8px 50px;padding:11px 13px;display:flex;flex-direction:column;gap:9px;--ch:8px;
  clip-path:polygon(var(--ch) 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%,0 var(--ch));
  background:color-mix(in srgb,var(--a2) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a2) 50%,transparent);
  animation:popIn var(--t-md,.2s) var(--e-pop,ease) both}
.pjban+.pjconf{margin-left:0}
.pjconf p{margin:0;font-size:calc(14px*var(--ts,1));line-height:1.45}
.pjconf .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pjconf input{flex:1 1 180px;min-width:0;padding:8px 10px;border:0;background:var(--p2);color:var(--text);
  font:400 calc(14px*var(--ts,1))/1.2 var(--mono);box-shadow:inset 0 0 0 1.5px var(--a2)}
.pjconf input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--a2)}
.fbtn.solid{background:#c62f4a;color:#fff;border-color:#c62f4a}
.fbtn.solid:hover{background:#d93a57;color:#fff}
.fbtn.solid:disabled{opacity:.45;cursor:not-allowed}

.pjset{width:min(390px,calc(100vw - 32px));padding:16px;display:flex;flex-direction:column;gap:14px}
.pjsr{display:flex;gap:12px;align-items:flex-start}
.pjsr .pjcd{width:84px;flex:0 0 auto}
.pjsr .pjsw{padding-top:6px}
.pjset .ivf input{padding:8px 10px}
.pjdz{border-top:1px solid color-mix(in srgb,var(--text) 12%,transparent);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.pjdz>div{display:flex;gap:10px;align-items:center}
.pjdz p{flex:1}
.pjdz .fbtn{flex:0 0 auto}

.pjsteps{display:flex;gap:6px;font:400 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.pjsteps .on{color:var(--a1t)}
.pjerr{margin:0;padding:10px 12px;font:400 calc(13.5px*var(--ts,1))/1.5 var(--mono);color:var(--text);
  background:color-mix(in srgb,var(--a2) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a2) 50%,transparent)}
.pjdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:170px;padding:16px;text-align:center;cursor:pointer;
  border:1.5px dashed color-mix(in srgb,var(--a1) 60%,transparent);background:color-mix(in srgb,var(--a1) 6%,transparent);transition:background .15s,border-color .15s}
.pjdrop:hover,.pjdrop.over,.pjdrop:focus-within{background:color-mix(in srgb,var(--a1) 14%,transparent);border-color:var(--a1)}
.pjdrop b,.pjpaste b{font:600 calc(15px*var(--ts,1))/1.3 var(--disp)}
.pjdrop s{text-decoration:none;font:400 calc(12.5px*var(--ts,1))/1.45 var(--mono);color:var(--muted);max-width:300px}
.pjdrop .ic{font-size:26px;color:var(--a1t);line-height:1}
.pjpaste{display:flex;flex-direction:column;gap:8px}
.pjpaste textarea{flex:1;min-height:110px;resize:vertical;padding:10px;border:0;background:var(--p2);color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent);font:400 calc(13px*var(--ts,1))/1.5 var(--mono)}
.pjpaste textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--a1)}
.pjpaste .fbtn{align-self:flex-start}
.pjtpl{padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent)}
.pjtw{overflow-x:auto}
.pjx table{width:100%;border-collapse:collapse;font:400 calc(12.5px*var(--ts,1))/1.3 var(--mono)}
.pjx th{text-align:left;padding:7px 8px;color:var(--a1t);font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:calc(11px*var(--ts,1));
  border-bottom:1px solid color-mix(in srgb,var(--text) 18%,transparent);white-space:nowrap}
.pjx td{padding:7px 8px;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.pjx td.sub{padding-left:calc(8px + 16px*var(--d,1))}
.pjx td.sub::before{content:'\21B3  ';color:var(--muted)}
.pjx td .m{color:var(--muted)}
.pjbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pjpill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;font:400 calc(12.5px*var(--ts,1))/1 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 18%,transparent)}
.pjpill select{padding:4px 6px;border:0;background:var(--p2);color:var(--text);font:inherit}
.pjtwo{display:grid;grid-template-columns:minmax(0,450px) minmax(0,1fr);gap:26px;align-items:start}
.pjmap{display:grid;grid-template-columns:minmax(0,1.15fr) 18px minmax(0,1fr);gap:7px 10px;align-items:center}
.pjmap .src{display:flex;align-items:baseline;gap:8px;min-width:0;padding:9px 10px;font:400 calc(13.5px*var(--ts,1))/1 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent)}
.pjmap .src b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjmap .src s{text-decoration:none;color:var(--muted);font-size:calc(11.5px*var(--ts,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjmap .ar{color:var(--muted);text-align:center}
.pjmap select{width:100%;padding:8px 9px;border:0;background:var(--p2);color:var(--text);font:400 calc(13.5px*var(--ts,1))/1 var(--mono);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.pjmap select.skip{color:var(--muted)}
.pjmap select:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--a1)}
.pjsum{padding:11px 13px;background:color-mix(in srgb,var(--a1) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 35%,transparent);
  font:400 calc(13.5px*var(--ts,1))/1.6 var(--mono)}
.pjsum b{color:var(--a1t)}
.pjsum .w{color:var(--a3t,var(--a3))}
@media (max-width:760px){
  .pjch,.pjtwo{grid-template-columns:1fr}
  .pjban{flex-direction:column;align-items:flex-start}
  .pjconf{margin-left:0}
  .pjr{flex-wrap:wrap}
  .pjr .pa{width:100%;justify-content:flex-start;padding-left:62px}
  .pjft .rn{margin:0}
}

/* v101 · Home on a laptop (Ximmy, Zenbook Duo). The hint sat 7px into the box above it at every size, and the left card
   covered the rail's New project and Manage projects. The hint gives way on a short screen, where the box says the same. */
@media(min-width:1001px){
  .blurb{bottom:78px}
  .call.flip .cbox{width:min(27vw,220px)}
}
@media(min-width:1801px){ .call.flip .cbox{width:min(27vw,268px)} }
@media(min-width:1001px) and (max-height:820px){
  .gateway{display:none}
  .blurb{bottom:22px}
}
/* v102 · habit chips can wrap the focus bar to two rows, which leaves this box no room under the left card; the cards say the same */
@media(min-width:1001px) and (max-height:820px){ .blurb p{display:none} }

/* v102 · Open Window 64: Themes, one theme open, and fewer themes (Ximmy, on a laptop) */
.owfill{height:100%;display:flex;flex-direction:column;gap:8px;min-height:0}
.owt{flex:1;min-height:max-content;display:grid;gap:8px;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));grid-auto-rows:minmax(96px,1fr)}
.owcard{justify-content:flex-start;gap:4px;padding:9px 12px;min-height:0;cursor:pointer;background:color-mix(in srgb,var(--p1) 72%,transparent)}
button.owcard:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 60%,transparent)}
button.owcard:focus-visible{outline:2px solid var(--a1);outline-offset:-2px}
.owcard.on{box-shadow:inset 0 0 0 2px var(--ac,var(--a1))}
.owcard .tx{font:600 calc(19px*var(--ts,1))/1.15 var(--disp);-webkit-line-clamp:1}
.owcard .nx,.owcard .ct{font:400 calc(12.5px*var(--ts,1))/1.3 var(--mono);color:color-mix(in srgb,var(--text) 86%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owcard .pb{display:block;margin-top:auto;height:4px;flex:0 0 auto;background:color-mix(in srgb,var(--text) 14%,transparent)}
.owcard .pb i{display:block;height:100%;background:var(--ac,var(--a1))}
.owcard.new{justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,var(--a1)) 45%,transparent)}
.owcard.new .tx{font-size:calc(15px*var(--ts,1));-webkit-line-clamp:2}
.owcard.ed input{width:100%;background:none;border:0;border-bottom:1px solid var(--a1);color:var(--text);font:600 calc(16px*var(--ts,1))/1.3 var(--disp)}
.owt>.oc.goal{min-height:0}
.owban .oc.goal{flex-direction:row;align-items:center;justify-content:center;gap:12px;min-height:40px;width:100%;padding:6px 12px}
.owban .oc.goal .tx{font-size:calc(16px*var(--ts,1));-webkit-line-clamp:1}
.owban.sm{grid-column:1/-1}.owban.sm .oc.goal{min-height:34px;padding:3px 8px}.owban.sm .oc.goal .tx{font-size:calc(13px*var(--ts,1))}
.owop{flex:1;min-height:max-content;display:grid;grid-template-columns:minmax(210px,27%) minmax(0,1fr);gap:12px}
.owmap{gap:4px;grid-auto-rows:minmax(64px,1fr)}
.owmap .owcard{padding:6px 8px;gap:2px;justify-content:center}
.owmap .owcard .tx{font-size:calc(14px*var(--ts,1))}.owmap .owcard .n{font-size:calc(11px*var(--ts,1))}.owmap .owcard .ct{font-size:calc(11.5px*var(--ts,1))}.owmap .owcard .pb{margin-top:1px}
.owmap>.oc.goal{padding:5px}.owmap>.oc.goal .tx{font-size:calc(13px*var(--ts,1))}
.owbig{display:flex;flex-direction:column;gap:8px;min-width:0}
.owbh{display:flex;align-items:baseline;gap:9px;min-width:0;padding:0 2px}
.owbh b{font:600 calc(16px*var(--ts,1))/1.2 var(--disp);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.owbh s{text-decoration:none;font:400 calc(12px*var(--ts,1))/1.2 var(--mono);color:var(--muted);white-space:nowrap}
.owbh .mini{padding:0 3px;background:none;border:0;color:var(--muted);cursor:pointer}
.owbh .mini:hover{color:var(--a1t)}
.owbh .owbk{margin-left:auto;display:block;padding:4px 9px;box-shadow:none;flex:0 0 auto}
.owbh input{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--a1);color:var(--text);font:600 calc(16px*var(--ts,1))/1.2 var(--disp)}
.owbig .owbh b{font-size:calc(22px*var(--ts,1))}
.owc8{flex:1;min-height:max-content;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(58px,1fr);gap:4px}
.owc8 .oc{min-height:0}
.owbig .owc8 .oc .tx{font-size:calc(15px*var(--ts,1));-webkit-line-clamp:4}
.owbs{flex:1;min-height:max-content;display:grid;gap:6px;grid-template-columns:repeat(var(--c,2),minmax(0,1fr));grid-auto-rows:minmax(118px,1fr)}
.owbs .owc8{grid-auto-rows:minmax(42px,1fr);gap:3px}
.owbs .oc .tx{font-size:calc(13px*var(--ts,1));line-height:1.2;-webkit-line-clamp:2}
.owbs .oc .ot{padding:4px 18px 4px 6px}.owbs .oc .ok{top:5px;right:4px}
.owbs .oc.rt .ot{padding:4px 6px 14px}.owbs .oc .rg{left:6px;bottom:2px;font-size:calc(11px*var(--ts,1))}.owbs .oc .rs{right:5px;bottom:2px;font-size:calc(11px*var(--ts,1))}
.owbs .oc.add button{min-height:0;font-size:calc(11px*var(--ts,1))}
.owbs .owbh b{font-size:calc(14px*var(--ts,1))}
.owbk{display:flex;flex-direction:column;gap:4px;min-height:0;min-width:0;padding:4px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent)}
.owbk>.owcard{flex:1}
@container (max-width:639px){
  .owop,.owbs{grid-template-columns:minmax(0,1fr)}
  .owc8{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.owsw{display:inline-flex;flex:0 0 auto}
.wh .owsw button{padding:3px 8px;min-height:24px;font:400 calc(11.5px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent)}
.wh .owsw button[aria-pressed="true"]{background:var(--a1);color:var(--page)}
.wh .wset{font:700 calc(14px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;color:var(--muted)}

/* v102 · the widget settings menu */
#wsetm{position:fixed;z-index:9000;width:264px;padding:7px 0;color:var(--text);background:color-mix(in srgb,var(--page) 96%,#000);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--a1) 55%,transparent),0 14px 36px rgba(0,0,0,.55);font:400 calc(13.5px*var(--ts,1))/1.2 var(--mono)}
#wsetm .wsh{padding:5px 13px 7px;font-size:calc(11.5px*var(--ts,1));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wsetm>button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 13px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
#wsetm>button:hover:not(:disabled),#wsetm>button:focus-visible{background:color-mix(in srgb,var(--a1) 14%,transparent);outline:0}
#wsetm>button:disabled{color:var(--muted);cursor:default}
#wsetm hr{border:0;height:1px;margin:6px 0;background:color-mix(in srgb,var(--text) 14%,transparent)}
#wsetm .wsrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 13px}
#wsetm .wsseg{display:inline-flex}
#wsetm .wsseg button{padding:4px 8px;min-height:24px;min-width:26px;background:none;border:0;color:var(--text);font:400 calc(12px*var(--ts,1))/1 var(--mono);cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 22%,transparent)}
#wsetm .wsseg button[aria-pressed="true"]{background:var(--a1);color:var(--page)}
#wsetm .wsseg button:focus-visible{outline:2px solid var(--a1);outline-offset:1px}
#wsetm .wstg{width:26px;height:13px;border-radius:7px;background:color-mix(in srgb,var(--text) 22%,transparent);position:relative;flex:0 0 auto}
#wsetm .wstg::after{content:'';position:absolute;left:2px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--text)}
#wsetm .wstg.on{background:var(--a1)}#wsetm .wstg.on::after{left:15px;background:var(--page)}
#wsetm .wsren{padding:4px 13px 6px}
#wsetm .wsren input{width:100%;box-sizing:border-box;padding:6px 8px;background:var(--p2);border:0;color:var(--text);font:inherit;box-shadow:inset 0 0 0 1.5px var(--a1)}

/* v102 · routines in the List */
.lrr{display:grid;grid-template-columns:20px minmax(150px,1fr) minmax(0,190px) minmax(0,80px) auto 104px 44px;align-items:center;gap:12px;padding:8px 10px;
  border-bottom:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:color-mix(in srgb,var(--p1) 62%,transparent)}
.lrn{font:500 calc(14.5px*var(--ts,1))/1.25 var(--disp);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lrs,.lrk2,.lrp{font:400 calc(12.5px*var(--ts,1))/1.2 var(--mono);white-space:nowrap}
.lrs{color:var(--muted);letter-spacing:.05em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.lrk2{color:var(--a1t)}.lrp{color:var(--muted);text-align:right}
.lrd{display:flex;gap:3px}.lrd .rc{width:18px;height:18px;margin:0}
.lrk{margin:0}
@media(max-width:760px){
  .lrr{grid-template-columns:20px minmax(0,1fr) auto;row-gap:6px}
  .lrs,.lrp,.lrfor{display:none}
  .lrd{grid-column:2/4;grid-row:2}
}

/* v103 · routines linked to a task */
.rtnote,.rtdone{margin:0 0 7px;font:400 calc(12px*var(--ts,1))/1.45 var(--mono);color:var(--muted)}
.rtdone{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:7px 9px;color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 45%,transparent)}
.rtr{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto 22px;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--text) 9%,transparent)}
.rtr .lrd .rc{width:15px;height:15px}
.rtr .rm{background:none;border:0;color:var(--muted);cursor:pointer;padding:0;min-height:22px}
.rtr .rm:hover{color:var(--a1t)}
.rtbt{display:flex;flex-wrap:wrap;gap:8px;padding-top:9px}
.rtpick{margin-top:8px;padding:6px 0 8px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 40%,transparent)}
.rtpick .rtpn{padding:4px 12px}
.rtp{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;width:100%;padding:7px 12px;background:none;border:0;color:var(--text);text-align:left;cursor:pointer}
.rtp:hover,.rtp:focus-visible{background:color-mix(in srgb,var(--a1) 12%,transparent);outline:0}
.rtp i{width:14px;height:14px;margin-top:1px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--text) 40%,transparent)}
.rtp[aria-pressed="true"] i{background:var(--a1);box-shadow:none}
.rtp b{display:block;font:500 calc(14px*var(--ts,1))/1.25 var(--disp)}
.rtp s{display:block;margin-top:2px;text-decoration:none;font:400 calc(11.5px*var(--ts,1))/1.3 var(--mono);color:var(--muted)}
.rtpick .miniadd{margin:6px 12px 0}
.rtc{display:inline-block;margin-left:10px;padding:1px 6px;font:400 calc(11.5px*var(--ts,1))/1.5 var(--mono);letter-spacing:.04em;color:var(--a1t);white-space:nowrap;vertical-align:1px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a1) 45%,transparent)}
.rtc i{font-style:normal}
.ti .rtc{cursor:pointer}.ti .rtc:hover{background:color-mix(in srgb,var(--a1) 14%,transparent)}
.oc .ot:has(.rtc),.oc .ot:has(.rtfor){flex-direction:column}
.oc .rtc{margin:3px 0 0;padding:0 4px;font-size:calc(10.5px*var(--ts,1))}.oc .rtc i{display:none}
.owbig .oc .rtc{margin-top:6px;padding:1px 6px;font-size:calc(11.5px*var(--ts,1))}.owbig .oc .rtc i{display:inline}
.rtfor{display:none}
.owbig .rtfor{display:block;margin-top:6px;font:400 calc(11.5px*var(--ts,1))/1.3 var(--mono);color:var(--a1t)}
.lrfor{min-width:0;padding:0;background:none;border:0;font:400 calc(12px*var(--ts,1))/1.2 var(--mono);color:var(--a1t);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
button.lrfor:hover{text-decoration:underline}
.lrfor.off{color:var(--muted);cursor:default}
@media(max-width:520px){ .rtr{grid-template-columns:20px minmax(0,1fr) auto 22px}.rtr .lrd{display:none} }