/* Martin: app.css. Part 1 is the v3 component CSS (spec-v3.md, spec-desk.md; the source of truth was v3.py) ported verbatim; part 2, after the "app layer" mark, is the shell: the phone column, the desktop columns, the scrolling regions and the flow overrides that let the same components stack instead of sitting at fixed y. Teal (--accent, #4fe7d2) is allowed only inside .lens, .btn-yes, .watch, :focus-visible, .composer[data-listening], .brain-map, .haze and .vault-map .sat. */

:root{--n1:#0c0c0d;--n2:#121214;--n3:#19191c;--n4:#1f1f23;--n5:#26262b;--n6:#222226;--n7:#2e2e33;--n8:#44444b;--n10:#7a7a84;--n11:#8f8f97;--n12:#e9e9ec;--accent:#4fe7d2;--on-accent:#06211d;--ask:#dcb36b;--fail:#e07a8c;--ok:#6ec58a;
--teal-deep:#0d6f66;--teal-light:#b9f6ee;--amber-deep:#6e5126;--amber-light:#f0d6a0;--rose-deep:#5a2a35;--rose-light:#f3b3c0;--lens-body:#121316;--lens-rim:rgba(255,255,255,.14);
--glass-fill:rgba(255,255,255,.045);--glass-edge:1px solid rgba(255,255,255,.08);--glass-rim:inset 0 1px 0 rgba(255,255,255,.10);--line-soft:rgba(255,255,255,.06);--line:rgba(255,255,255,.12);
--yes-fill:linear-gradient(180deg,#5eeedb 0%,#4fe7d2 55%,#3fd9c4 100%);--door-wa-out:#005c4b;--door-tg-out:#2b5278;--bubble-ink:#e9edef;
--ui:"Inter",system-ui,sans-serif;--serif:"Newsreader",Georgia,serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--n1);color:var(--n12);font-family:var(--ui);font-optical-sizing:auto}
button{font-family:var(--ui);cursor:pointer;color:inherit}
.abs{position:absolute}
.num,.mono,.mono-l,.figure,.cap{font-feature-settings:"tnum"}
.greeting{font:400 30px/36px var(--serif);letter-spacing:-.01em;color:var(--n12)}
.title{font:500 22px/28px var(--serif);color:var(--n12);margin:0}
.ask-title{font:500 20px/26px var(--serif);color:var(--n12)}
.heading{font:600 17px/24px var(--ui);letter-spacing:-.01em;color:var(--n12)}
.body{font:400 16px/24px var(--ui);color:var(--n12)}
.control{font:500 15px/20px var(--ui);color:var(--n12)}
.meta{font:400 13px/18px var(--ui);color:var(--n11)}
.mono{font:400 13px/18px var(--mono);color:var(--n11)}
.mono-l{font:500 15px/20px var(--mono);color:var(--n12)}
.num{font:500 24px/28px var(--mono);color:var(--n12)}
.figure{font:500 32px/36px var(--mono);letter-spacing:-.01em;color:var(--n12)}
.cap{font:500 13px/16px var(--ui);color:var(--n11)}
.n12{color:var(--n12)}.n11{color:var(--n11)}.ask{color:var(--ask)}.fail{color:var(--fail)}
.glass{background:var(--glass-fill);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border:var(--glass-edge);box-shadow:var(--glass-rim),0 12px 32px -16px rgba(0,0,0,.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:#141416;border-color:#2e2e33}}
.grain::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;filter:url(#grain);opacity:.05;mix-blend-mode:overlay}
.haze{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(260px 260px at 195px 330px,rgba(79,231,210,.08),transparent 70%);filter:blur(40px)}
.edge-top{position:absolute;left:0;right:0;top:110px;height:24px;background:linear-gradient(180deg,var(--n1),transparent);pointer-events:none;z-index:2}
.glyph16 svg,.g16 svg{width:16px;height:16px}
.mono-glyph{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ic{display:inline-flex;align-items:center;justify-content:center;color:var(--n11)}
.ic svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hit44{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0}

/* ---------- The Lens ---------- */
@property --lit{syntax:'<angle>';inherits:true;initial-value:0deg}
.lens{--d:168px;--lit:0deg;--aur:.18;--rim-soft:rgba(255,255,255,.75);--rim-hot:#b9f6ee;--veil-a:#0d6f66;--veil-b:#4fe7d2;position:relative;width:var(--d);height:var(--d);isolation:isolate;flex:none;--dur:.2s;--ease:cubic-bezier(.16,1,.3,1)}
.lens .body{position:absolute;inset:0;border-radius:50%;background:#121316;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 2px 8px rgba(255,255,255,.08),inset 0 -10px 22px rgba(0,0,0,.55),0 12px 32px -12px rgba(0,0,0,.6)}
.lens[data-size=L] .body,.lens[data-size=M] .body{animation:breathe 5.5s cubic-bezier(.645,.045,.355,1) infinite}
.lens[data-state=thinking][data-size=L] .body,.lens[data-state=working][data-size=L] .body,.lens[data-state=thinking][data-size=M] .body,.lens[data-state=working][data-size=M] .body{animation-duration:3.2s}
.lens .body>.veil{position:absolute;inset:-10%;border-radius:50%;opacity:var(--aur);transition:opacity .4s,background .4s}
.lens .body>.veil.back{background:radial-gradient(60% 50% at 30% 70%,var(--veil-a),transparent 70%);filter:blur(calc(var(--d)*.09))}
.lens .body>.veil.front{background:radial-gradient(45% 40% at 65% 35%,var(--veil-b),transparent 70%);filter:blur(calc(var(--d)*.06))}
.lens[data-size=L] .body>.veil.back,.lens[data-size=M] .body>.veil.back{animation:swayA 17.9s ease-in-out -7.3s infinite}
.lens[data-size=L] .body>.veil.front,.lens[data-size=M] .body>.veil.front{animation:swayB 13.3s ease-in-out -4.1s infinite}
.lens[data-size=S] .body>.veil.back,.lens[data-size=XS] .body>.veil.back{display:none}
.lens .rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from calc(var(--lit) - 60deg),transparent 0deg,var(--rim-soft) 40deg,var(--rim-hot) 75deg,transparent 150deg,transparent 360deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));transition:--lit .4s cubic-bezier(.16,1,.3,1),background .4s,opacity .3s}
.lens .spec{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--lit));transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lens .spec::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(7% 5% at 31% 25%,rgba(255,255,255,.55) 60%,transparent 100%),radial-gradient(18% 12% at 33% 28%,rgba(255,255,255,.16),transparent 74%);animation:drift 12s ease-in-out infinite alternate}
.lens[data-size=S] .spec,.lens[data-size=XS] .spec{display:none}
.lens .glyph{position:absolute;inset:30%;opacity:0;color:rgba(255,255,255,.92);transition:opacity .2s}
.lens .glyph svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lens .glyph svg *{transform-box:fill-box;transform-origin:center}
.lens[data-state=working] .glyph,.lens[data-state=failed] .glyph,.lens[data-state=paused] .glyph{opacity:1}
.lens .arc{position:absolute;inset:-8%;border-radius:50%;opacity:0;background:conic-gradient(from 0deg,transparent 0deg,var(--rim-hot) 14deg,var(--veil-b) 46deg,transparent 60deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 calc(100% - .5px),transparent);mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px),#000 calc(100% - .5px),transparent);animation:rot 2.6s linear infinite reverse;transition:opacity .2s}
.lens[data-state=thinking] .arc{opacity:1}
.lens[data-size=XS] .arc{inset:-10%;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px),#000 calc(100% - .5px),transparent);mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px),#000 calc(100% - .5px),transparent)}
.lens[data-size=XS][data-state=listening] .arc,.lens[data-size=XS][data-state=working] .arc,.lens[data-size=XS][data-state=writing] .arc{opacity:1}
.lens[data-size=XS] .ring{display:none}
.lens[data-size=XS] .glyph svg *{animation:none!important}
.lens .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(79,231,210,.55);opacity:0}
.lens[data-state=listening] .ring{animation:emit 2.7s cubic-bezier(.16,.84,.44,1) infinite reverse}
.lens[data-state=writing] .ring{animation:emit 1.8s cubic-bezier(.16,.84,.44,1) infinite}
.lens .ring:nth-of-type(2){animation-delay:-1.1s}
.lens .sat{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#4fe7d2;transform:rotate(var(--lit)) translateY(calc(var(--d)/-2));transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s;z-index:3}
.lens[data-size=XS] .sat{width:4px;height:4px;margin:-2px}
.lens .sat[data-brain=asleep]{background:#44444b}
.lens .sat[data-brain=unreachable]{background:#e07a8c}
.lens .sat[data-brain=unset]{background:transparent;box-shadow:inset 0 0 0 1px #44444b}
.lens .orbit{position:absolute;inset:-11%;border-radius:50%;border:1px dashed rgba(255,255,255,.12);opacity:0}
.lens[data-rented][data-size=L] .orbit,.lens[data-rented][data-size=M] .orbit{opacity:1}
.lens .sat.gpu{transform:rotate(60deg) translateY(calc(var(--d)/-2 - var(--d)*.11))}
.lens:not([data-rented]) .sat.gpu,.lens[data-size=S] .orbit,.lens[data-size=XS] .orbit,.lens[data-size=S] .sat.gpu,.lens[data-size=XS] .sat.gpu{display:none}
.brain-map .lens .sat,.brain-map .lens .orbit,.brain-map .lens .arc{display:none}
.lens .ping{position:absolute;inset:0;border-radius:50%;border:1.5px solid #4fe7d2;opacity:0}
.lens[data-state=done] .ping{animation:ping-done .65s cubic-bezier(.16,.84,.44,1) 1}
.lens[data-state=waiting] .ping{border-color:#dcb36b;animation:ping-wait 1.2s cubic-bezier(.16,.84,.44,1) 1 forwards}
.lens[data-state=listening]{--aur:.30}.lens[data-state=thinking]{--aur:.35}.lens[data-state=working]{--aur:.40}.lens[data-state=writing]{--aur:.35}
.lens[data-state=waiting]{--aur:.22;--rim-soft:rgba(220,179,107,.8);--rim-hot:#f0d6a0;--veil-a:#6e5126;--veil-b:#dcb36b}
.lens[data-state=waiting] .body,.lens[data-state=waiting] .veil,.lens[data-state=waiting] .spec::before{animation:none!important}
.lens[data-state=failed]{--aur:.18;--rim-soft:rgba(224,122,140,.8);--rim-hot:#f3b3c0;--veil-a:#5a2a35;--veil-b:#e07a8c}
.lens[data-state=failed] .veil{filter:saturate(.6)}
.lens[data-state=asleep]{--aur:0;opacity:.55}
.lens[data-state=paused]{--aur:0}
.lens[data-state=reconnecting]{--aur:.18}
.lens[data-state=reconnecting] .rim{opacity:.4;animation:rot 1.4s linear infinite}
.lens.still *{animation:none!important}
:root[data-waiting] .lens *,:root[data-waiting] .lens{animation-play-state:paused!important}
.lens[data-state=waiting] .ping{animation-play-state:running!important}
@keyframes breathe{50%{transform:scale(1.035)}}
@keyframes swayA{0%,100%{transform:translate(-6%,-2%) rotate(-3deg)}50%{transform:translate(5%,4%) rotate(2deg)}}
@keyframes swayB{0%,100%{transform:translate(4%,3%) rotate(2deg)}50%{transform:translate(-5%,-4%) rotate(-3deg)}}
@keyframes drift{from{transform:translate(-.6%,.4%)}to{transform:translate(.6%,-.4%)}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes emit{0%{transform:scale(1);opacity:0}14%{opacity:.6}100%{transform:scale(1.9);opacity:0}}
@keyframes emit-xl{0%{transform:scale(1);opacity:0}14%{opacity:.6}100%{transform:scale(1.6);opacity:0}}
@keyframes ping-done{from{transform:scale(1);opacity:.9}to{transform:scale(1.5);opacity:0}}
@keyframes ping-wait{0%{transform:scale(1);opacity:0}30%{opacity:.9}100%{transform:scale(1.12);opacity:.9}}
/* verb micro-motions (S and up) */
.lens .glyph .hand{transform-box:view-box;transform-origin:12px 12px;animation:rot 2.4s linear infinite}
.lens .glyph .mer{animation:mer 1.6s ease-in-out infinite}
@keyframes mer{0%,100%{transform:scaleX(0)}50%{transform:scaleX(1)}}
.lens .glyph .flap{stroke-dasharray:28;animation:flap 1.6s ease-out infinite}
@keyframes flap{0%{stroke-dashoffset:28}75%,100%{stroke-dashoffset:0}}
.lens .glyph .ptr{animation:ptr 2.4s infinite}
@keyframes ptr{0%,30%{transform:translate(0,0)}33%,63%{transform:translate(5px,-2px)}66%,96%{transform:translate(2px,2px)}100%{transform:translate(0,0)}}
.lens .glyph .tap{animation:tap 1.2s infinite}
@keyframes tap{0%,73%,100%{transform:scale(1)}86%{transform:scale(.6)}}
.lens .glyph .core{animation:core 1.6s ease-in-out infinite}
@keyframes core{0%,100%{opacity:.4}50%{opacity:1}}
.lens .glyph.write svg{animation:nudge .32s ease-in-out infinite alternate}
@keyframes nudge{to{transform:translateY(1px)}}
.lens .glyph .cur{animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.lens *,.lens{animation:none!important}.lens[data-state=thinking] .arc,.lens[data-size=XS] .arc{background:conic-gradient(from 45deg,transparent 0deg,var(--rim-hot) 10deg,var(--veil-b) 50deg,transparent 60deg)}}

/* ---------- XXS grammar ---------- */
.xxs{width:16px;height:16px;border-radius:50%;position:relative;flex:none;display:inline-block}
.xxs.idle{border:1.5px solid var(--n8)}
.xxs.asleep{border:1.5px solid var(--n8);opacity:.5}
.xxs.working{border:1.5px solid var(--n8)}
.xxs.working::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:conic-gradient(from 0deg,var(--n12) 0deg 60deg,transparent 60deg 360deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1.5px));animation:rot 2.6s linear infinite}
:root[data-waiting] .xxs.working::after,.xxs.working.still::after{animation:none;transform:rotate(45deg)}
.xxs.waiting{border:1.5px solid rgba(220,179,107,.4)}
.xxs.waiting::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--ask)}
.xxs.done,.xxs.failed,.xxs.paused{display:inline-flex;align-items:center;justify-content:center}
.xxs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xxs.done{color:var(--n11)}.xxs.failed{color:var(--fail)}.xxs.paused{color:var(--n11)}
@media (prefers-reduced-motion:reduce){.xxs.working::after{animation:none;transform:rotate(45deg)}}

/* ---------- chrome ---------- */
.hdr{position:absolute;left:0;right:0;top:54px;height:56px}
.menu-btn{position:absolute;left:8px;top:6px;width:44px;height:44px;border:0;background:transparent;padding:0}
.menu-btn i{position:absolute;left:12px;width:18px;height:1.5px;background:var(--n11);border-radius:1px}
.menu-btn i:first-child{top:23px}.menu-btn i:last-child{top:32px}
.back-btn{position:absolute;left:8px;top:6px;width:44px;height:44px;border:0;background:transparent;padding:0;display:grid;place-items:center;color:var(--n11)}
.tname{position:absolute;left:60px;top:16px;height:24px;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:0;font:600 17px/24px var(--ui);letter-spacing:-.01em;color:var(--n12)}
.tname svg{width:12px;height:12px;color:var(--n11)}
.pill{position:absolute;right:20px;top:12px;height:32px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font:400 13px/18px var(--mono);color:var(--n12);font-feature-settings:"tnum"}
.capsule{position:absolute;left:20px;width:350px;bottom:46px;border-radius:26px;padding:6px;display:flex;flex-direction:column;overflow:hidden}
.capsule .srow{height:32px;display:flex;align-items:center;gap:8px;padding:0 6px 0 6px}
.capsule .slot{width:28px;height:28px;display:grid;place-items:center;flex:none}
.capsule .dot{width:6px;height:6px;border-radius:50%;background:var(--n12)}
.capsule .words{flex:1;min-width:0;font:400 13px/18px var(--ui);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.capsule .words.hidden{visibility:hidden}
.capsule .words .fact{font-family:var(--mono)}
.capsule .right{flex:none;font:400 13px/18px var(--mono);color:var(--n11);font-feature-settings:"tnum"}
.capsule .ans{flex:none;font:500 15px/20px var(--ui);color:var(--n12);min-width:44px;height:44px;margin:-6px 0;border:0;background:transparent;padding:0 0 0 6px;text-align:right}
.capsule .frow{height:40px;display:flex;align-items:center;gap:0}
.capsule .disc{width:40px;height:40px;border:0;background:transparent;color:var(--n11);display:grid;place-items:center;padding:0;border-radius:20px;flex:none}
.capsule .disc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.capsule .field{flex:1;min-width:0;font:400 16px/24px var(--ui);color:var(--n11);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capsule .field.text{color:var(--n12)}
.capsule .send{width:36px;height:36px;border-radius:18px;border:0;background:var(--n12);color:var(--n1);display:grid;place-items:center;padding:0;margin:0 2px;flex:none}
.capsule .send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.capsule .stop{width:36px;height:36px;border-radius:18px;border:0;background:var(--n3);color:var(--n12);display:grid;place-items:center;padding:0;margin:0 2px;flex:none}
.capsule .stop i{width:12px;height:12px;border-radius:3px;background:var(--n12);display:block}
.user{position:absolute;left:20px;width:350px;border-left:2px solid var(--n8);padding-left:14px;font:400 16px/24px var(--ui);color:var(--n12)}
.live{position:absolute;left:20px;width:350px;height:44px;display:flex;align-items:center;gap:0}
.live .verb{margin-left:12px;flex:1;min-width:0;font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live .verb .fact{font:400 15px/20px var(--mono);color:var(--n11)}
.live .verb.ask{color:var(--ask)}
.live .el{flex:none;font:400 13px/18px var(--mono);color:var(--n11);font-feature-settings:"tnum";padding-left:12px}
.live .eye{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;padding:0;color:var(--n11)}
.live .eye.on span{width:36px;height:36px;border-radius:18px;background:var(--n5);display:grid;place-items:center;color:var(--n12)}
.live .eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.strip{position:absolute;left:20px;width:350px;height:24px;display:flex;align-items:center}
.strip .gs{margin-left:56px;display:flex;align-items:center;gap:8px}
.strip .gs .ic{width:16px;height:16px;color:var(--n11);position:relative}
.strip .gs .ic svg{width:16px;height:16px}
.strip .gs .ic.failed{color:var(--fail)}
.strip .gs .ic.failed::after{content:"";position:absolute;left:-2px;top:-2px;width:20px;height:20px;border-radius:50%;border:1px solid var(--fail)}
.strip .gs .crop{width:16px;height:16px;border-radius:3px;border:1px solid var(--n7);background:#f4f4f2;position:relative;overflow:hidden}
.strip .gs .crop i{position:absolute;left:2px;height:2px;background:#d0d0cc;border-radius:1px}
.strip .mach{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:400 13px/18px var(--ui);color:var(--n11)}
.strip .mach .ic{width:16px;height:16px}
.mach-g{display:inline-flex;align-items:center;gap:4px;font:400 13px/18px var(--ui);color:var(--n11)}
.mach-g svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mach-g.s12 svg{width:12px;height:12px}
.failrow{position:absolute;left:20px;width:350px;height:32px;display:flex;align-items:center;gap:8px}
.lrow{position:absolute;left:20px;width:350px;height:40px;display:flex;align-items:center}
.lrow .tile{width:28px;height:28px;border-radius:8px;background:var(--n3);display:grid;place-items:center;color:var(--n11);flex:none}
.lrow .tile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lrow .tile.cur{color:var(--n12)}.lrow .tile.fail{color:var(--fail)}
.lrow .v{margin-left:12px;flex:1;min-width:0;font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .v.fail{color:var(--fail)}.lrow .v.dim{color:var(--n11)}
.lrow .f{flex:none;max-width:160px;font:400 13px/18px var(--mono);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.lrow .st{flex:none;width:16px;height:16px;margin-left:4px;display:grid;place-items:center;color:var(--n11)}
.lrow .st svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lrow .st.fail{color:var(--fail)}
.lrow.sub{padding-left:16px;height:40px}
.lrow.sub::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--n6)}
.fold{position:absolute;left:20px;width:350px;height:44px;display:flex;align-items:center;gap:8px}
.fold .ic{width:16px;height:16px;color:var(--n11)}
.fold .ic svg{width:16px;height:16px}
.fold .t{margin-left:12px;font:400 13px/18px var(--mono);color:var(--n11)}
.fold .stack{margin-left:auto;display:flex;align-items:center}
.fold .stack .d{width:20px;height:20px;border-radius:50%;background:var(--n1);display:grid;place-items:center;color:var(--n11);margin-left:-6px;box-shadow:0 0 0 1px var(--n1)}
.fold .stack .d:first-child{margin-left:0}
.fold .stack .d svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fold .stack .n{margin-left:8px;font:400 13px/18px var(--mono);color:var(--n11)}
.reply{position:absolute;left:20px;width:350px;font:400 16px/24px var(--ui);color:var(--n12)}
.think-wait{display:flex;align-items:center;gap:10px;margin-top:12px;font:400 14px/20px var(--ui);color:var(--n11)}.think-wait .xxs{flex:none;width:16px;height:16px}.think-wait .msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}.think-wait .peek{flex:none;margin-left:auto;background:none;border:0;padding:0;font:500 13px/20px var(--ui);color:var(--n12);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.reply.peeking{max-height:200px;overflow:auto;opacity:.75;border-left:2px solid var(--n7);padding-left:12px}
.reply sup{font:400 13px/1 var(--ui);color:var(--n11);vertical-align:2px;padding:0 1px}
.srule{position:absolute;left:20px;width:350px;height:36px;display:flex;align-items:center;gap:8px}
.srule .ic{width:16px;height:16px;color:var(--n11)}.srule .ic svg{width:16px;height:16px}
.srule .t{font:500 15px/20px var(--ui);color:var(--n11)}
.srule .tm{margin-left:auto;font:400 13px/18px var(--mono);color:var(--n11)}
.acts{position:absolute;left:20px;width:350px;height:44px;display:flex;align-items:center;justify-content:flex-end}
.acts button{width:44px;height:44px;border:0;background:transparent;color:var(--n11);display:grid;place-items:center;padding:0}
.acts button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.filerow{position:absolute;left:20px;width:350px;height:44px;display:flex;align-items:center}
.thumb{width:20px;height:26px;border-radius:2px;background:linear-gradient(180deg,#dedcd6,#cfcdc7);opacity:.9;position:relative;flex:none}
.thumb i{position:absolute;left:3px;right:3px;height:1px;background:#b4b1aa}
.thumb i:nth-child(1){top:6px}.thumb i:nth-child(2){top:10px}.thumb i:nth-child(3){top:14px}
.thumb .badge{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:var(--n3);display:grid;place-items:center;color:var(--n12)}
.thumb .badge svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.filerow .p{margin-left:12px;font:400 13px/18px var(--mono);color:var(--n12)}

/* ---------- objects ---------- */
.obj{position:absolute;left:20px;width:350px;background:var(--n2);border:1px solid var(--n7);border-radius:12px;padding:16px}
.page{width:72px;height:94px;border-radius:3px;background:linear-gradient(180deg,#dedcd6 0%,#cfcdc7 100%);box-shadow:0 1px 2px rgba(0,0,0,.35);position:relative;flex:none}
.page i{position:absolute;background:#b4b1aa;border-radius:1px}
.daychip{display:inline-flex;align-items:center;gap:8px}
.daychip .cal{width:28px;height:28px;border-radius:5px;border:1.5px solid var(--n11);position:relative;display:grid;place-items:center;font:500 13px/18px var(--mono);color:var(--n12);padding-top:2px}
.daychip .cal::before{content:"";position:absolute;left:-1.5px;right:-1.5px;top:-1.5px;height:4px;border-radius:5px 5px 0 0;background:var(--n11)}
.plate{position:absolute;left:20px;width:350px;background:var(--n3);border-radius:12px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:500 16px/20px var(--ui);color:var(--n12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);flex:none}
.av1{background:linear-gradient(135deg,#3b4556,#1f2530)}.av2{background:linear-gradient(135deg,#3a4a3e,#1e2a22)}.av3{background:linear-gradient(135deg,#5a3f3a,#2b1f1d)}.av4{background:linear-gradient(135deg,#5a4d36,#2b2519)}.av5{background:linear-gradient(135deg,#2f4650,#182329)}.av6{background:linear-gradient(135deg,#4a3b55,#241c2a)}
.door{width:28px;height:28px;border-radius:8px;background:var(--n2);display:grid;place-items:center;color:var(--n12)}
.door svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bubble{position:absolute;background:var(--door-wa-out);color:var(--bubble-ink);border-radius:12px 2px 12px 12px;padding:8px 12px;font:400 15px/22px var(--ui)}
.bubble .tm{float:right;margin:6px 0 0 8px;display:inline-flex;align-items:center;gap:4px;font:400 13px/16px var(--mono);color:rgba(255,255,255,.72);font-feature-settings:"tnum"}
.bubble .tm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bubble .tm svg.ticks{width:14px;height:14px}
.meter{display:flex;gap:3px}
.meter i{flex:1;height:100%;border-radius:2px;background:var(--n3);display:block;transition:background 120ms var(--ease-out);transition-delay:calc(var(--i,0)*30ms)}
.meter i.on{background:var(--n12)}
.meter i.part{background:linear-gradient(90deg,var(--n12) var(--pct),var(--n3) var(--pct))}
.meter i.hatch{background:repeating-linear-gradient(135deg,#7a7a84 0 2px,transparent 2px 6px);border:1px solid #7a7a84}
.ringsvg{display:block;flex:none}
.ringsvg .tr{fill:none;stroke:rgba(255,255,255,.06)}
.ringsvg .v{fill:none;stroke:currentColor;stroke-linecap:round}
.ticket{position:absolute;left:20px;width:350px}
.ticket svg.edge{position:absolute;inset:0;width:350px;overflow:visible}
.ticket .stub{position:absolute;left:14px;width:36px;height:36px;border-radius:50%;background:var(--n3);display:grid;place-items:center;color:var(--n12);z-index:1}
.ticket .stub svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ticket .tb{position:absolute;left:80px;width:254px;top:16px;z-index:1}
.ticket .fact{font:400 13px/18px var(--mono);color:var(--n12);margin-top:8px;font-feature-settings:"tnum"}
.ticket .l4{position:absolute;left:80px;width:254px;height:36px;display:flex;align-items:center;gap:8px;z-index:1}
.ticket .chev{margin-left:auto;width:36px;height:36px;border-radius:18px;background:var(--n3);display:grid;place-items:center;color:var(--n11)}
.ticket .chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ticket .undo{margin-left:auto;height:44px;border-radius:22px;background:var(--n3);padding:0 12px;display:inline-flex;align-items:center;gap:8px;border:0;margin-top:-4px;margin-bottom:-4px}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--n2);border-radius:20px 20px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.5);z-index:5}
.sheet .handle{position:absolute;left:177px;top:8px;width:36px;height:4px;border-radius:2px;background:var(--n8)}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:4}
.pinned{position:absolute;left:0;right:0;bottom:0;height:98px;padding:12px 20px;border-radius:0}
.btn{height:48px;border-radius:10px;font:500 15px/20px var(--ui);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;padding:0}
.btn.sec{background:var(--n3);color:var(--n12);border-color:var(--n7)}
.btn.btn-yes{background:var(--yes-fill);color:var(--on-accent);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12)}
.btn.btn-yes:disabled,.btn.btn-yes.off{opacity:.35}
.tc{border:0;background:transparent;padding:0;font:500 15px/20px var(--ui);color:var(--n12);min-height:44px;display:inline-flex;align-items:center}
.tc.dim{color:var(--n11)}
a.tc{text-decoration:none}
.rrow{position:absolute;left:20px;width:350px;display:flex;align-items:center;border-bottom:1px solid var(--n6)}
.rrow.nb{border-bottom:0}
.rrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;margin-left:12px}
.rrow .t{font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .m{font:400 13px/18px var(--ui);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.rrow .m .mono{color:inherit}.rrow .m .fail{color:var(--fail)}.rrow .m .ask{color:var(--ask)}
.rrow .right{flex:none;margin-left:8px;display:inline-flex;align-items:center;gap:8px}
.chev16{width:16px;height:16px;color:var(--n11)}
.chev16 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.watch{position:absolute;left:20px;width:350px;height:197px;border-radius:8px;border:1px solid var(--n7);overflow:hidden;background:#f4f4f2;box-shadow:inset 0 0 0 1.5px rgba(79,231,210,.55),inset 0 0 24px rgba(79,231,210,.16)}
.watch .blk{position:absolute;background:#e3e3e0;border-radius:3px}
.watch .blk.sel{box-shadow:0 0 0 1.5px #4fe7d2}
.watch .plate{position:absolute;left:8px;top:8px;width:auto;height:20px;padding:0 8px;border-radius:6px;background:rgba(12,12,13,.72);display:inline-flex;align-items:center;gap:6px;font:400 13px/18px var(--mono);color:var(--n12)}
.watch .plate i{width:6px;height:6px;border-radius:50%;background:#4fe7d2;animation:wping 2.2s infinite}
@keyframes wping{0%{box-shadow:0 0 0 0 rgba(79,231,210,.6)}100%{box-shadow:0 0 0 6px rgba(79,231,210,0)}}
.watch .ptr{position:absolute;width:12px;height:12px;border-radius:50%;border:1.5px solid #4fe7d2}
@media (prefers-reduced-motion:reduce){.watch .plate i{animation:none}}
.seg{height:36px;border-radius:999px;background:var(--n3);padding:4px;display:flex}
.seg>span{flex:1;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:500 15px/20px var(--ui);color:var(--n11)}
.seg>span.on{background:var(--n5);color:var(--n12)}
.seg>span .mono{color:inherit;flex:none}.seg>span .xxs{flex:none}
.places{display:grid;grid-template-columns:repeat(3,85px);gap:8px}
.places button{width:85px;height:64px;border:0;background:transparent;border-radius:10px;padding:0;position:relative;color:var(--n11)}
.places button svg{position:absolute;left:31.5px;top:12px;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.places button span{position:absolute;left:0;right:0;top:44px;font:400 13px/18px var(--ui);color:var(--n11)}
.switch{width:44px;height:24px;border-radius:12px;background:var(--n3);position:relative;border:0;padding:0;flex:none;transition:background var(--t-fade) var(--ease-out)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:10px;background:var(--n12);transition:transform var(--t-snap) var(--spring-snap),background var(--t-fade) var(--ease-out)}
.switch.on{background:var(--n12)}.switch.on::after{transform:translateX(20px);background:var(--n1)}
.tabs{position:absolute;left:20px;width:350px;height:32px;display:flex;gap:20px;align-items:center}
.tabs span{font:500 15px/20px var(--ui);color:var(--n11);height:28px;border-bottom:1px solid transparent;display:inline-flex;align-items:center}
.tabs span.on{color:var(--n12);border-bottom-color:var(--n12)}
.sfield{height:44px;border-radius:8px;background:var(--n3);display:flex;align-items:center;gap:8px;padding:0 12px;font:400 16px/24px var(--ui);color:var(--n11)}
.sfield svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ctile{position:absolute;border-radius:8px;overflow:hidden}
.cover-dusk{background:radial-gradient(90% 70% at 30% 20%,#3a3d4a 0%,#15161b 60%,#121214 100%)}
.cover-ember{background:radial-gradient(80% 70% at 70% 90%,#4a4036 0%,#1a1814 55%,#121214 100%)}
.cover-sea{background:radial-gradient(90% 80% at 40% 100%,#1e3a3d 0%,#101a1c 60%,#121214 100%)}
.cover-slate{background:linear-gradient(160deg,#26262b 0%,#121214 100%)}
.tplate{position:absolute;right:8px;bottom:8px;height:20px;padding:0 6px;border-radius:5px;background:rgba(12,12,13,.72);font:400 13px/20px var(--mono);color:var(--n12);font-feature-settings:"tnum"}

.day-btn{position:absolute;right:20px;top:6px;width:44px;height:44px;border:0;background:transparent;padding:0;display:grid;place-items:center}
.day-btn .cal{width:24px;height:24px;box-sizing:border-box;border:1.5px solid var(--n11);border-radius:5px;position:relative;font:500 13px/18px var(--mono);color:var(--n12);text-align:center;padding-top:3px;font-feature-settings:"tnum"}
.day-btn .cal::before{content:"";position:absolute;left:-1.5px;right:-1.5px;top:-1.5px;height:4.5px;background:var(--n11);border-radius:5px 5px 0 0}
.hdr.has-slot .pill{right:76px}
.slot-btn{position:absolute;right:20px;top:6px;width:44px;height:44px;border:0;background:transparent;padding:0;display:grid;place-items:center;color:var(--n11)}
.slot-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.slot-btn.on span{width:36px;height:36px;border-radius:18px;background:var(--n5);display:grid;place-items:center;color:var(--n12)}
.sched{width:6px;height:6px;border-radius:50%;border:1px solid var(--n8);box-sizing:border-box;display:inline-block}
.desk .thumb{opacity:.8}
.thumb.l{width:28px;height:36px}
.thumb.l i{left:6px;right:6px}.thumb.l i:nth-child(1){top:8px}.thumb.l i:nth-child(2){top:14px}.thumb.l i:nth-child(3){top:20px}
.thumb.xlsx::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:#b4b1aa}
.thumb.mp4{background:linear-gradient(160deg,#26262b 0%,#121214 100%);border:1px solid var(--n7)}
.thumb.mp4 i{display:none}
.thumb.mp4::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-4px 0 0 -3px;border-left:7px solid var(--n12);border-top:4px solid transparent;border-bottom:4px solid transparent}
.thumb.m4a{background:radial-gradient(80% 70% at 70% 90%,#4a4036 0%,#1a1814 55%,#121214 100%);border:1px solid var(--n7)}
.thumb.m4a i{top:auto;bottom:4px;width:2px;height:auto;background:rgba(233,233,236,.7);left:auto;right:auto}
.thumb.m4a i:nth-child(1){left:4px;height:6px}.thumb.m4a i:nth-child(2){left:8px;height:10px}.thumb.m4a i:nth-child(3){left:12px;height:7px}.thumb.m4a i:nth-child(4){left:16px;height:12px}.thumb.m4a i:nth-child(5){left:20px;height:4px}
.thumb.jpg{background:radial-gradient(90% 70% at 30% 20%,#3a3d4a 0%,#15161b 60%,#121214 100%);border:1px solid var(--n7)}
.thumb.jpg i{display:none}
.redact{width:140px;height:8px;border-radius:2px;background:var(--n3);display:block}
.vault-map .n{fill:#44444b;stroke:none}.vault-map .n.person,.vault-map .n.project{fill:#8f8f97}
.vault-map .n.sel{fill:#e9e9ec;stroke:none}.vault-map .halo{fill:none;stroke:rgba(233,233,236,.6);stroke-width:1}
.vault-map .n.priv{fill:none;stroke:#44444b;stroke-width:1;stroke-dasharray:2 2}
.vault-map .e{stroke:rgba(255,255,255,.12);stroke-width:1}.vault-map .e.hi{stroke:rgba(233,233,236,.3)}
.vault-map .rim{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.vault-map .sat{fill:#44444b}.vault-map[data-writing] .sat{fill:#4fe7d2}
.vault-map text{font:400 13px var(--ui);fill:var(--n11)}.vault-map text.mono{font-family:var(--mono)}.vault-map text.sel{font:500 15px var(--ui);fill:var(--n12)}
.vault-map[data-sel] .dim{opacity:.5}
.agenda{position:absolute;left:20px;width:350px;height:56px;display:flex;align-items:center;border-bottom:1px solid var(--n6)}
.agenda .tm{width:60px;flex:none;font:500 15px/20px var(--mono);color:var(--n12)}
.agenda .tm.cap{font:500 13px/16px var(--ui);color:var(--n11)}
.agenda .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.agenda .t{font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda .m{font:400 13px/18px var(--ui);color:var(--n11);display:flex;align-items:center;gap:6px}
.agenda .right{flex:none;margin-left:8px;display:inline-flex;align-items:center;gap:8px}
.hrow{position:absolute;left:20px;width:350px;height:44px;display:flex;align-items:center;gap:8px}
.hrow .h{font:600 17px/24px var(--ui);letter-spacing:-.01em;color:var(--n12)}
.hrow .cnt{font:400 13px/18px var(--mono);color:var(--n11)}
.hrow .chev16{margin-left:auto}
.menu240{position:absolute;width:240px;background:var(--n2);border-radius:10px;box-shadow:0 -8px 32px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.5);padding:4px 0;z-index:6}
.menu240 .mi{height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;font:500 15px/20px var(--ui);color:var(--n12)}
.menu240 .mi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--n11)}
.rrow .sl{width:28px;height:28px;display:grid;place-items:center;flex:none}
.rrow .t.dim{color:var(--n11)}
.thumb.l.m4a i{top:auto}
.thumb.l.m4a i:nth-child(1){left:6px;height:8px}.thumb.l.m4a i:nth-child(2){left:10px;height:14px}.thumb.l.m4a i:nth-child(3){left:14px;height:10px}.thumb.l.m4a i:nth-child(4){left:18px;height:16px}.thumb.l.m4a i:nth-child(5){left:22px;height:6px}

.dstrip{position:absolute;left:20px;width:350px;display:flex;gap:4px}
.dstrip .c{width:46px;height:72px;border-radius:8px;background:var(--n3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;box-sizing:border-box}
.dstrip .c .w{font:400 13px/18px var(--ui);color:var(--n11)}
.dstrip .c .d{font:500 15px/20px var(--ui);color:var(--n12)}
.dstrip .c.today{border:1px solid var(--n8)}
.dstrip .c.answer{background:var(--n12)}
.dstrip .c.answer .w,.dstrip .c.answer .d{color:var(--n1)}
.dstrip .c .ev{position:absolute;left:12px;right:12px;bottom:8px;height:2px;border-radius:1px;background:var(--n8)}
.dstrip .c.answer .ev{background:var(--n8)}
.graph text{font:400 13px var(--ui);fill:var(--n11)}
.graph text.sel{fill:var(--n12);font-weight:500}
.graph .e{stroke:rgba(255,255,255,.14);stroke-width:1}
.graph .e.hi{stroke:rgba(233,233,236,.55)}
.graph .n{fill:#2e2e33;stroke:rgba(255,255,255,.18);stroke-width:1}
.graph .n.hi{fill:#44444b;stroke:rgba(233,233,236,.7)}
.graph .n.sel{fill:#e9e9ec;stroke:none}
.graph .n.priv{fill:#19191c;stroke-dasharray:2 2}
.pcard{position:absolute;width:171px;background:var(--n2);border:1px solid var(--n7);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
.pcard .nm{font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .mt{font:400 13px/18px var(--ui);color:var(--n11);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}

/* ======================================================================
   app layer: the shell around the components
   ====================================================================== */

/* Boards drawn from gen_drawer_activity.py / gen_push_desktop.py / gen3.py (SignIn) */
.scrim.d{background:rgba(0,0,0,.5)}
.drawer{position:absolute;left:0;top:0;width:300px;height:100%;background:var(--n2);box-shadow:8px 0 32px rgba(0,0,0,.45);z-index:5}
.drawer .hair{position:absolute;left:20px;width:260px;height:1px;background:var(--n6)}
.drawer .nthread{position:absolute;left:20px;top:106px;height:44px;display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:0;width:260px}
.seg .adot,.cnt i.adot{width:8px;height:8px;border-radius:50%;background:var(--ask);display:inline-block;flex:none}
.seg span .xxs{flex:none;width:16px;height:16px;display:inline-block;padding:0}
.seg span .mono{flex:none}
.seg>span{border:0;background:transparent;padding:0;cursor:pointer}
.seg>span.on{background:var(--n5)}
.sheet .sc{position:absolute;left:0;right:0;top:0;bottom:0;overflow:auto;overscroll-behavior:contain}
.sheet .fade{position:absolute;left:0;right:0;bottom:0;height:24px;background:linear-gradient(180deg,rgba(18,18,20,0),var(--n2));pointer-events:none;z-index:3}
.sheet .hair{position:absolute;left:20px;width:350px;height:1px;background:var(--n6)}
.sheet .hd{position:absolute;left:20px;width:350px}
.cnt{display:inline-flex;align-items:center;gap:8px;font:400 13px/18px var(--mono);color:var(--n12);font-feature-settings:"tnum"}
.cost{position:absolute;left:20px;width:350px;height:56px;border-radius:8px;background:var(--n3);padding:0 12px;display:flex;align-items:center}
.cost .tile{width:28px;height:28px;border-radius:8px;background:var(--n2);display:grid;place-items:center;color:var(--n11);flex:none}
.cost .tile svg{width:16px;height:16px}
.cost .col{margin-left:12px;display:flex;flex-direction:column}
.cost .col .l2{display:inline-flex;align-items:baseline;gap:12px}
.cost .cap{position:absolute;right:12px;top:13px;font:400 13px/18px var(--mono);color:var(--n11);font-feature-settings:"tnum"}
.cost .meter i:not(.on):not(.part):not(.hatch){box-shadow:inset 0 0 0 1px var(--line-soft)}
.srule .t.fail{color:var(--fail)}
.srule .ic.fail{color:var(--fail)}
.srule .act{margin-left:auto;font:500 15px/20px var(--ui);color:var(--n12);border:0;background:transparent;padding:0;min-height:44px}
.col-l{position:absolute;left:0;top:0;width:280px;height:100%;background:var(--n2);overflow:hidden}
.col-l .pill{left:16px;top:16px;right:auto}
.search{position:absolute;left:16px;top:56px;width:248px;height:36px;border-radius:8px;background:var(--n3);display:flex;align-items:center;gap:8px;padding:0 12px;font:400 16px/24px var(--ui);color:var(--n11)}
.rail{position:absolute;left:16px;width:248px;height:36px;display:flex;align-items:center;border:0;background:transparent;padding:0;text-align:left}
.rail .g{width:18px;height:18px;display:grid;place-items:center;color:var(--n11);flex:none}
.rail .g svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rail .w{margin-left:10px;font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap}
.hair{position:absolute;left:16px;width:248px;height:1px;background:var(--n6)}
.col-l .rrow.cur,.col-l .rail.cur{background:var(--n3);border-radius:8px;left:8px;width:264px;padding:0 8px}
.col-l .rrow .m .ic{color:var(--n11)}
.pw{position:absolute;left:20px;width:350px;height:48px;border-radius:8px;background:var(--n3);display:flex;align-items:center;gap:12px;padding:0 16px;font:400 16px/24px var(--ui);color:var(--n11)}
.pw input{flex:1;min-width:0;border:0;background:transparent;color:var(--n12);font:400 16px/24px var(--ui);outline:0;padding:0}
.pw input::placeholder{color:var(--n11)}

/* ---------- tokens of the shell ---------- */
:root{color-scheme:dark;--inset-top:env(safe-area-inset-top,0px);--inset-bottom:env(safe-area-inset-bottom,0px);--kb:0px;--gutter:20px;--hdr-h:56px;--cap-h:52px;--t0:0s}
html,body{height:100%}
body{overflow:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{position:fixed;inset:0;background:var(--n1);color:var(--n12)}
button,input,textarea{font:inherit}
input,textarea{color:var(--n12)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain-defs{position:absolute;width:0;height:0}
#offline-banner{position:fixed;left:0;right:0;top:0;z-index:9;height:0;overflow:hidden}

/* ---------- the screen: one phone column ---------- */
.screen{position:absolute;inset:0;overflow:hidden;background:var(--n1);display:flex;flex-direction:column}
.screen>.haze{position:absolute;inset:0;background:radial-gradient(260px 260px at 50% calc(var(--inset-top) + 276px),rgba(79,231,210,.08),transparent 70%);will-change:transform}
.screen>.hdr{top:var(--inset-top);z-index:3}
.screen>.edge-top{top:calc(var(--inset-top) + var(--hdr-h))}
.screen>.scroll{position:absolute;left:0;right:0;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:calc(var(--inset-top) + var(--hdr-h)) 0 calc(var(--inset-bottom) + var(--kb) + 12px + var(--cap-h) + 24px);z-index:1;scrollbar-width:none}
.screen>.scroll::-webkit-scrollbar{display:none}
.screen>.scroll.no-hdr{padding-top:var(--inset-top)}
.screen>.scroll.no-cap{padding-bottom:calc(var(--inset-bottom) + 24px)}
.screen>.edge-bottom{position:absolute;left:0;right:0;bottom:calc(var(--inset-bottom) + var(--kb) + 12px + var(--cap-h) - 8px);height:24px;background:linear-gradient(0deg,var(--n1),transparent);pointer-events:none;z-index:2}
.screen>.capsule{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(var(--inset-bottom) + var(--kb) + 12px);z-index:3;transition:height .22s cubic-bezier(.23,1,.32,1)}
.capsule.composer{overflow:hidden}
.capsule.composer::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(79,231,210,.30) 35%,rgba(13,111,102,.40) 50%,rgba(79,231,210,.30) 65%,transparent 100%);background-size:220% 100%;filter:blur(10px)}
.composer[data-listening]::before{opacity:calc(.4 + .5*var(--lvl,0));animation:flow 2.4s ease-in-out infinite alternate}
.composer[data-listening] .field{color:var(--n12)}
@keyframes flow{from{background-position:110% 0}to{background-position:-10% 0}}
.capsule .field{display:block;border:0;background:transparent;outline:0;resize:none;height:24px;max-height:120px;line-height:24px;white-space:pre-wrap;overflow-y:auto}
.capsule textarea.field{color:var(--n12)}
.capsule textarea.field::placeholder{color:var(--n11)}
.capsule .frow{min-height:40px;align-items:flex-end}
.capsule .frow .disc,.capsule .frow .send,.capsule .frow .stop{align-self:flex-end}
.capsule .frow .send,.capsule .frow .stop{margin-bottom:2px}
.capsule .srow{flex:none}
.capsule.flat{position:relative;left:auto;right:auto;bottom:auto}

/* the hero (Main, Sign-in): the Lens L centred, the greeting under it */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:136px}
.hero .greeting{margin-top:26px;text-align:center}
.hero .brainline{margin-top:16px;display:flex;justify-content:center}
.hero .lens{view-transition-name:lens;will-change:transform}

/* ---------- flow: components stack instead of sitting at a fixed y ---------- */
.flow{position:relative;padding:0 var(--gutter);width:100%;max-width:100%}
.flow>.user,.flow>.live,.flow>.strip,.flow>.failrow,.flow>.lrow,.flow>.fold,.flow>.reply,.flow>.srule,.flow>.acts,.flow>.filerow,.flow>.obj,.flow>.plate,.flow>.ticket,.flow>.rrow,.flow>.watch,.flow>.tabs,.flow>.agenda,.flow>.hrow,.flow>.dstrip,.flow>.pcard,.flow>.cost,.flow>.meter,.flow>.seg,.flow>.sfield,.flow>.hair,.flow>.heading,.flow>.title,.flow>.sheet-hd{position:relative;left:auto;right:auto;top:auto;width:auto}
.flow>.hair{left:0;width:auto;height:1px;background:var(--n6)}
.flow>.bubble{position:relative;margin-left:auto;max-width:78%;width:fit-content}
.flow>.user{margin-top:48px}
.flow>.user+.live{margin-top:24px}
.flow>.live+.strip{margin-top:8px}
.flow>.strip+.failrow{margin-top:8px}
.flow>.strip+.lrow{margin-top:8px}
.flow>.reply{margin-top:16px}
.flow>.obj,.flow>.ticket,.flow>.plate{margin:16px 0}
.flow>.fold{margin-top:24px}
.flow>.srule{margin-top:4px}
.flow>.watch{margin:8px 0}
.flow>.pcard{width:auto}
.flow>.dstrip{margin:16px 0 0}
.flow>.ticket svg.edge{width:100%}
.flow>.meter{margin:12px 0 0}
.flow .stack-gap{height:4px}
.flow>.lrow.sub::before{left:8px}
.lrow .tile img{width:28px;height:28px;object-fit:cover;border-radius:8px;border:1px solid var(--n7)}
.user{word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap}
.reply{word-wrap:break-word;overflow-wrap:anywhere}
.reply p{margin:0 0 12px}.reply p:last-child{margin-bottom:0}
.reply pre{font:400 13px/18px var(--mono);color:var(--n12);background:#0a0a0b;border-radius:8px;padding:12px;overflow-x:auto;margin:8px 0}
.reply code{font:400 13px/18px var(--mono)}
.reply a{color:var(--n12);text-decoration:underline;text-underline-offset:2px}
.reply ul,.reply ol{margin:0 0 12px;padding-left:24px}
.reply blockquote{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--n6);color:var(--n11)}
.reply h1,.reply h2,.reply h3{font:600 17px/24px var(--ui);letter-spacing:-.01em;margin:16px 0 8px}
.reply img,.reply video{max-width:100%;border-radius:8px;display:block}
.reply hr{border:0;height:1px;background:var(--n6);margin:12px 0}
.reply table{border-collapse:collapse;font:400 13px/18px var(--ui)}
.reply td,.reply th{border-bottom:1px solid var(--n6);padding:6px 8px;text-align:left}
.md-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0;max-width:100%}
.md-table{border-collapse:collapse;font:400 13px/18px var(--ui)}
.md-table th,.md-table td{border:1px solid var(--n6);padding:6px 10px;text-align:left;vertical-align:top;white-space:nowrap}
.md-table th{background:var(--n3);font-weight:600;color:var(--n12)}
.md-table tbody tr:nth-child(even){background:var(--n2)}
.md-table .ta-right{text-align:right}
.md-table .ta-center{text-align:center}
.md-table .ta-left{text-align:left}
.md-dash{border:1px solid var(--n6);border-radius:12px;overflow:hidden;margin:12px 0;background:var(--n2)}
.md-dash-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--n6)}
.md-dash-label{color:var(--n11);font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.md-dash-spacer{flex:1}
.md-dash-btn{background:var(--n4);color:var(--n12);border:1px solid var(--n7);border-radius:7px;padding:5px 10px;font:500 12px var(--ui);cursor:pointer}
.md-dash-btn:hover{background:var(--n5)}
.md-dash-frame{width:100%;height:440px;border:0;display:block;background:#0E0E16}
.md-dash.expanded .md-dash-frame{height:80vh}
.space-nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px auto;max-width:720px;padding:10px 12px;border:1px solid var(--n6);border-radius:12px;background:var(--n2);font:400 13px/1.4 var(--ui)}
.space-nudge svg{flex:0 0 auto;color:var(--n11)}
.space-nudge .space-nudge-text{flex:1;min-width:140px;color:var(--n12)}
.space-nudge-btn{border:1px solid var(--n7);background:var(--n4);color:var(--n12);border-radius:8px;padding:5px 11px;font:500 12px var(--ui);cursor:pointer}
.space-nudge-btn.primary{background:var(--n12);color:var(--n1);border-color:transparent;font-weight:600}
.space-nudge-btn.ghost{background:transparent;color:var(--n11)}
.space-nudge-btn:hover{filter:brightness(1.08)}
.reply .wikilink{color:var(--n12)}
.reply .wikilink.missing{color:var(--n11);text-decoration:underline dotted}
.reply .task input{margin:0 6px 0 0;vertical-align:middle}
.reply .mermaid-box svg{max-width:100%;height:auto}
.reply .mermaid-box .mermaid-error{font:400 13px/18px var(--mono);color:var(--fail)}
.reply .code-copy{float:right;margin:-4px -4px 0 8px;border:0;background:transparent;color:var(--n11);width:44px;height:44px;display:grid;place-items:center;padding:0}
.reply .code-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* places: back header, title */
.screen>.hdr .title{position:absolute;left:60px;top:8px;white-space:nowrap;max-width:calc(100% - 140px);overflow:hidden;text-overflow:ellipsis}
/* a header with the Activity pill (and the day button) leaves the title less room */
.screen>.hdr:has(>.pill) .title{max-width:calc(100% - 150px)}
.screen>.hdr.has-slot:has(>.pill) .title{max-width:calc(100% - 206px)}
.screen>.hdr .title .tchev{display:inline-flex;vertical-align:middle;margin-left:6px;color:var(--n11)}
.screen>.hdr .title .tchev svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.screen>.hdr .meta.sub{position:absolute;left:60px;top:42px;display:inline-flex;align-items:center;gap:4px;z-index:3;white-space:nowrap}
.screen>.hdr .meta.sub svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tname{max-width:calc(100% - 150px);overflow:hidden;white-space:nowrap}
.tname>span{overflow:hidden;text-overflow:ellipsis}
.tname svg{flex:none}
.pill{border:0;cursor:pointer}
.pill>span:last-child{min-width:2ch;font-feature-settings:"tnum"}
.pill::before{content:"";position:absolute;inset:-6px;border-radius:999px}
.ring-btn{position:absolute;right:20px;top:6px;width:44px;height:44px;border:0;background:transparent;padding:0;display:grid;place-items:center;color:var(--n12)}

/* ---------- layers: scrim, drawer, sheets, menus ---------- */
.layer{position:absolute;inset:0;z-index:5}
.layer>.scrim{position:absolute;inset:0;z-index:0}
.layer>.drawer{z-index:1;padding-top:var(--inset-top)}
.drawer .sfield{position:absolute;left:14px;top:54px;width:272px}
.drawer .seg{position:absolute;left:14px;top:158px;width:272px}
.drawer .threads{position:absolute;left:0;right:0;top:206px;bottom:240px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.drawer .threads::-webkit-scrollbar{display:none}
.drawer .threads .rrow{position:relative;left:20px;width:260px;top:auto;cursor:pointer}
.drawer .threads .rrow.cur{background:var(--n3);border-radius:8px;left:12px;width:276px;padding:0 8px}
.drawer .foot{position:absolute;left:0;right:0;bottom:0;height:240px;padding-bottom:var(--inset-bottom);background:var(--n2)}
.drawer .foot .hair{top:0}
.drawer .foot .places{position:absolute;left:14px;top:16px}
.places button:active{background:var(--n4)}
.places button.cur{color:var(--n12)}
.places button.cur span{color:var(--n12)}
.layer>.sheet{z-index:1;max-height:calc(100% - var(--inset-top) - 56px);padding-bottom:var(--inset-bottom)}
.layer>.sheet.tall{top:calc(var(--inset-top) + 56px);bottom:0}
.sheet .handle{left:50%;margin-left:-18px}
.sheet .sc{position:relative;inset:auto;max-height:inherit;overflow:auto;padding:24px var(--gutter) 24px}
.sheet .sc .hd,.sheet .sc .hair,.sheet .sc .heading{position:relative;left:auto;width:auto}
.sheet .sc>.hair{height:1px;background:var(--n6);margin:16px 0}
.sheet .sc>.heading{margin:8px 0}
.sheet .sc>.srule,.sheet .sc>.rrow,.sheet .sc>.cost,.sheet .sc>.ticket,.sheet .sc>.agenda,.sheet .sc>.filerow,.sheet .sc>.plate,.sheet .sc>.meter{position:relative;left:auto;top:auto;width:auto}
.sheet .sc>.ticket{margin:8px 0 16px}
.sheet .sc>.ticket svg.edge{width:100%}
.sheet .tcs{display:flex;justify-content:flex-end;gap:24px;margin-top:16px}
.sheet .tc{padding:0 4px}
.sheet .head{height:32px;display:flex;align-items:center;margin-bottom:16px}
.sheet .head .cnt{margin-left:auto;gap:16px}
.sheet .empty{display:flex;align-items:center;gap:12px;height:44px;color:var(--n11);font:400 15px/20px var(--ui)}
.layer>.menu240{z-index:1}
.menu240 .mi{border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
.menu240 .mi:active{background:var(--n4)}
.menu240 .mi .r{margin-left:auto;font:400 13px/18px var(--mono);color:var(--n11)}
.menu240 .mi .ring-w{display:inline-grid;place-items:center;width:16px;height:16px}
@keyframes fadein{from{opacity:0}}
.enter{animation:enter var(--t-in) var(--ease-out)}
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
button:active:not(.disc):not(.send):not(.stop):not(.menu-btn):not(.back-btn){transform:scale(.97);transition:transform .1s}
.rrow[role=button],.rrow.tap,.hrow[role=button],.agenda[role=button]{cursor:pointer}
.rrow[role=button]:active,.hrow[role=button]:active,.agenda[role=button]:active,.lrow.tap:active,.live.tap:active,.strip.tap:active{background:var(--n4)}
.ticket.tap{cursor:pointer}
.btn-yes.cool{pointer-events:none}
.ticket-inline{display:none}

/* ---------- sign-in ---------- */
.signin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
.signin>.haze{background:radial-gradient(260px 260px at 50% calc(var(--inset-top) + 330px),rgba(79,231,210,.08),transparent 70%)}
.signin .lens{margin-top:calc(var(--inset-top) + 146px)}
.signin .greeting{margin-top:24px}
/* The user name, then the password: oskar's Martin or the demo user's made-up one */
.signin form{position:relative;width:100%;max-width:390px;height:200px;margin-top:40px}
.signin .pw{top:60px}
.signin .pw.who{top:0}
.signin .btn{position:absolute;left:20px;right:20px;top:124px;width:auto}
.signin .err{position:absolute;left:20px;right:20px;top:184px;text-align:center}

/* ---------- desktop ---------- */
.col-r{display:none}
@media (min-width:1024px){
  #app{display:grid;grid-template-columns:280px minmax(0,1fr)}
  .screen{position:relative;grid-column:2;inset:auto;height:100vh;--gutter:24px;--inset-top:0px;--inset-bottom:12px}
  .screen>.haze{background:radial-gradient(260px 260px at 50% 300px,rgba(79,231,210,.08),transparent 70%)}
  .screen>.hdr{height:56px;top:4px}
  .screen>.hdr .menu-btn,.screen>.hdr .day-btn{display:none}
  .screen>.hdr .tname,.screen>.hdr .title{left:24px}
  .screen>.hdr .meta.sub{left:24px}
  .screen>.hdr .back-btn{display:none}
  .screen>.hdr .pill{display:none}
  .hdr.has-slot .pill{right:76px}
  .screen>.edge-top{top:60px}
  .screen>.scroll{padding-top:60px;padding-bottom:calc(24px + var(--cap-h) + 24px)}
  .screen>.scroll.no-hdr{padding-top:24px}
  .screen>.capsule{max-width:620px;bottom:24px}
  .screen>.edge-bottom{bottom:calc(24px + var(--cap-h) - 8px)}
  .flow{max-width:calc(620px + 2*var(--gutter))}
  .hero{padding-top:100px}
  .col-l{position:relative;grid-column:1;height:100vh;width:280px}
  .col-l .threads{position:absolute;left:0;right:0;top:392px;bottom:0;overflow-y:auto;scrollbar-width:none}
  .col-l .threads::-webkit-scrollbar{display:none}
  .col-l .threads .rrow{position:relative;top:auto;left:16px;width:248px;cursor:pointer}
  .col-l .threads .rrow.cur{left:8px;width:264px}
  .layer>.drawer{display:none}
  .layer.drawer-only{display:none}
  .layer>.sheet{left:280px;right:auto;width:620px;margin-left:24px;border-radius:20px 20px 0 0}
  .layer>.menu240{z-index:1}
  .layer>.scrim{left:0}
  .signin{grid-column:1/-1}
  .ticket-inline{display:block}
  .rrow:hover,.rail:hover,.hrow[role=button]:hover,.agenda[role=button]:hover{background:var(--n4);transition:background .15s}
  .col-l .rrow.cur:hover,.col-l .rail.cur:hover{background:var(--n3)}
}
@media (min-width:1100px){
  #app{grid-template-columns:280px minmax(0,1fr) 320px}
  .col-r{display:block;position:relative;grid-column:3;height:100vh;padding:32px 24px 0 0;overflow-y:auto;scrollbar-width:none}
  .col-r::-webkit-scrollbar{display:none}
  .col-r .mlens{display:flex;flex-direction:column;align-items:center;gap:0}
  .col-r .mlens .lens{view-transition-name:lens}
  .col-r .mlens .w1{margin-top:12px;font:500 15px/20px var(--ui);color:var(--n12);text-align:center}
  .col-r .mlens .w2{margin-top:2px;display:inline-flex;align-items:center;gap:4px;font:400 13px/18px var(--ui);color:var(--n11)}
  .col-r .mlens .w2.ask{color:var(--ask)}
  .col-r .mlens .ans{margin-top:12px;height:44px;border:0;background:transparent;padding:0 12px;font:500 15px/20px var(--ui);color:var(--n12)}
  .col-r .margin-body{margin-top:16px}
  .col-r .margin-body>.watch,.col-r .margin-body>.lrow,.col-r .margin-body>.agenda,.col-r .margin-body>.obj,.col-r .margin-body>.ticket{position:relative;left:auto;top:auto;width:auto}
  .screen>.capsule .srow{display:none}
  .screen>.capsule{height:52px!important}
  .screen.has-margin>.capsule{--cap-h:52px}
}

/* ---------- waiting lock, reduced motion, hidden tab ---------- */
:root[data-waiting] *{animation-play-state:paused!important}
:root[data-waiting] .lens[data-state=waiting] .ping{animation-play-state:running!important}
:root[data-hidden] .lens *,:root[data-hidden] .xxs::after,:root[data-hidden] .watch .plate i{animation-play-state:paused!important}
.lens.off *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
  .layer>.scrim,.layer>.drawer,.layer>.sheet,.layer>.menu240,.enter{animation:none!important}
  .composer[data-listening]::before{animation:none;background-position:50% 0;opacity:.45}
  .lens[data-state=listening] .ring:first-of-type,.lens[data-state=writing] .ring:first-of-type{opacity:.4;animation:none}
}
@media (prefers-reduced-transparency:reduce){.glass{background:#141416;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ======================================================================
   thread screen (screens/thread.js, thread-ticket.js, thread-watch.js)
   spec-v3 §4.3–4.8, §4.13, §5.1–5.9, §5.17
   ====================================================================== */
.rblock,.ublock{position:relative}
.rblock :is(.live,.strip,.failrow,.lrow,.fold,.reply,.srule,.acts,.filerow,.obj,.plate,.ticket,.watch,.dstrip),.ublock>.user{position:relative;left:auto;right:auto;top:auto;width:auto}
.flow>.ublock>.user{margin-top:48px}
.ublock>.door-line{margin:48px 0 0 16px!important}
.ublock>.door-line+.user{margin-top:6px}
.rblock>.live{margin-top:24px}
.rblock .strip{margin-top:8px}
.rblock .strip.foot{margin-top:0}
.watch-slot>.watch{margin:8px 0 0}
.watch-slot>.watch-acts{margin-top:12px;height:44px;position:relative;left:auto;width:auto}
.watch-slot>.watch-acts+*{margin-top:8px}
.after-strip>.failrow{margin-top:8px}
.after-strip>.lrow:first-child,.ledger>.lrow:first-child{margin-top:8px}
.rblock>.fold{margin-top:24px}
.rblock .reply{margin-top:16px}
.rblock .obj,.rblock .plate{margin:16px 0}
.rblock .cards>.ticket{margin:16px 0}
.rblock .cards>.ticket svg.edge{width:100%}
/* an ask arriving (spec-round3 §1.6.1): the card's slot is reserved 0fr → 1fr inside a contain:layout block (motion.reserve) */
.rblock .cards>.slot{display:grid;grid-template-rows:1fr;contain:layout}
.rblock .cards>.slot>.slot-in{min-height:0;overflow:hidden}
.rblock .cards>.slot .ticket{margin:16px 0}
.rblock .cards>.slot .ticket svg.edge{width:100%}
.rblock .filerow{margin-top:16px}
.rblock .filerow+.filerow{margin-top:4px}
.rblock .acts{margin-top:16px}
.rblock .acts button.on{color:var(--n12)}
.rblock .srule{margin-top:4px}
.rblock .notice{padding:12px 0 0 16px}
.rblock .meta.fail{padding-left:16px}
.live .lens-tile{width:28px;height:28px;border-radius:8px;background:var(--n3);display:grid;place-items:center;color:var(--n12);flex:none}
.live .lens-tile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.live .lens-tile.ask{color:var(--ask)}
.live .lens.fadein{animation:fadein .2s cubic-bezier(.23,1,.32,1)}
.hero.fade{opacity:0;transition:opacity var(--t-in) var(--ease-in)}
.live .verb.rewrite{animation:rewrite 180ms var(--ease-out)}
@keyframes rewrite{from{opacity:0;transform:translateY(4px)}}
.rblock.settle-in>.fold{animation:foldin var(--t-grow) var(--ease-out)}
@keyframes foldin{from{opacity:0;transform:translateY(-8px)}}
.fold .ic.failed{color:var(--fail)}
.fold .t.fail{color:var(--fail)}
.fold .stack[role=button]{cursor:pointer}
.strip .gs .crop img,.lrow .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lrow .tile{position:relative;overflow:hidden}
.lrow .tile.tap{cursor:pointer}
.lrow.agent .el{margin-left:12px;max-width:none}
.lrow.sub .f+.f{margin-left:12px}
.thought-text{margin:4px 0 8px 40px;color:var(--n11);white-space:pre-wrap}
.thought-text.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.thought-text.fail{color:var(--fail)}
.rblock .more{margin-left:40px;min-height:32px}
.reply sup.cite{cursor:pointer;padding:0 2px}
.ticket.enter{animation:enter var(--t-in) var(--ease-out)}
.ticket.stamped .l4>.ic:first-child svg{animation:mo-pop var(--t-pop) var(--spring-pop) both}
.ticket .l4 .ic{display:inline-flex}
.attachrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding-left:16px}
.attachrow.pending{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--inset-bottom) + var(--kb) + 12px + var(--cap-h) + 8px);z-index:3;margin:0;padding:0}
.achip{height:32px;border-radius:8px;background:var(--n3);display:inline-flex;align-items:center;gap:8px;padding:0 8px 0 6px;max-width:100%}
.achip .thumb{transform:scale(.8)}
.achip .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.achip .x{width:28px;height:28px;border:0;background:transparent;color:var(--n11);display:grid;place-items:center;padding:0;margin-right:-6px}
.achip .x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* the ticket sheet and the inline ticket */
.ticket-sheet .plate,.ticket-sheet .meter-w,.ticket-sheet .cost,.ticket-inline .plate,.ticket-inline .meter-w,.ticket-inline .cost{position:relative;left:auto;top:auto;width:auto}
.ticket-sheet .bubble,.ticket-inline .bubble{position:relative}
.ticket-sheet .bubble.flash,.ticket-inline .bubble.flash{box-shadow:0 0 0 1.5px var(--n8);transition:box-shadow .16s}
.bubble textarea.edit{width:100%;min-height:66px;border:0;background:transparent;color:var(--bubble-ink);font:400 15px/22px var(--ui);resize:vertical;outline:0;padding:0;display:block}
.mail-pay{width:100%}
.mail-pay textarea.edit{width:100%;min-height:120px;border:0;background:var(--n3);border-radius:8px;color:var(--n12);font:400 16px/24px var(--ui);padding:12px;margin-top:8px;resize:vertical;outline:0;display:block}
.body.rule{border-left:2px solid var(--n6);padding-left:14px;width:100%}
.mail-pay .rule{margin-top:8px}
.code-plate{background:#0a0a0b;border-radius:8px;padding:12px;margin:0;white-space:pre-wrap;color:var(--n12);max-height:240px;overflow:auto;width:100%;font:400 13px/18px var(--mono)}
.form-facts{display:flex;flex-direction:column;gap:4px}
.form-facts .still{width:100%;border-radius:8px;border:1px solid var(--n7);display:block;margin-bottom:8px;aspect-ratio:350/197;object-fit:cover}
.form-facts .frow{display:flex;justify-content:space-between;align-items:center;min-height:28px;gap:12px}
.form-facts .frow .n12{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-facts{display:flex;align-items:center;gap:24px}
.phone-inset{background:var(--n2);border-radius:24px;border:1px solid var(--n7);padding:8px;display:flex;flex-direction:column;overflow:hidden;flex:none;box-sizing:border-box}
.phone-inset .app{text-align:center;height:24px;line-height:24px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-inset .rows{display:flex;flex-direction:column;overflow:hidden}
.prow{display:flex;align-items:center;gap:8px;padding:0 8px;border-radius:6px;position:relative;color:var(--n11);flex:none;box-sizing:border-box}
.prow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.prow .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.prow.next{box-shadow:inset 0 0 0 1px var(--n8)}
.prow.next .ptr{position:absolute;right:8px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--n8)}
.watch .prow.next .ptr{border-color:#4fe7d2}
.watch.phone{display:grid;place-items:center;background:var(--n1)}
.watch[data-state=yours] .prow.next .ptr{border-color:var(--n8)}
.phone-inset.tapped{transform:scale(.97);transition:transform .12s}
.watch .ptr{transition:left .3s ease-out,top .3s ease-out,transform .12s}
.watch-full{position:fixed;inset:0;z-index:7;background:var(--n1);display:flex;flex-direction:column}
.watch-full .bar{height:44px;display:flex;align-items:center;gap:24px;padding:0 20px;margin-top:var(--inset-top);flex:none}
.watch-full .watch.full{position:relative;left:auto;width:auto;flex:1;height:auto;border-radius:0;margin:0 0 var(--inset-bottom);cursor:crosshair}
.watch-full .watch.full img.stream{object-fit:contain!important;background:#f4f4f2}
.watch-full .keys{position:absolute;opacity:0;width:1px;height:1px;left:0;top:0}
.ticket-inline{margin:0 0 16px;padding:16px;background:var(--n2);border:1px solid var(--n7);border-radius:12px;outline:0}
.ticket-inline .pay{display:flex;margin-top:16px}
.ticket-inline .meta-row .edit{right:0}
.ticket-inline .foot{display:flex;align-items:center;gap:20px;margin-top:16px}
.ticket-inline .foot .btn{width:240px}
.ticket-inline .foot .tc{margin-right:auto}
.ticket-inline .foot .meta.fail{margin-right:auto}
.ticket-inline .foot .tc+.btn{margin-left:auto}
.rule-sheet .plate{position:relative;left:auto;width:auto}
.rblock .ledger{position:relative}
.col-r .margin-body>.ledger>.lrow{position:relative;left:auto;top:auto;width:auto}
.col-r .margin-body>.ledger>.strip{position:relative;left:auto;width:auto}
.col-r .margin-body>.watch-acts{position:relative;left:auto;width:auto;margin:12px 0 16px}
@media (min-width:1024px){
  .rblock .cards>.ticket{width:auto}
  .rblock .cards>.ticket .tb,.rblock .cards>.ticket .l4{width:calc(100% - 96px)}
  .rblock .cards>.ticket .bubble{max-width:60%}
}
@media (prefers-reduced-motion:reduce){.hero.fade{transition:none}.ticket.enter,.rblock.settle-in>.fold,.live .verb.rewrite{animation:none!important}}
/* A card or an inline ticket brought into view stops clear of the capsule. */
.screen>.scroll{scroll-padding-bottom:calc(var(--cap-h) + 48px)}
/* The header sits on the ground; the thread scrolls behind the edge fade under it (§4: content from y 110 behind the edge-fade). */
.screen>.hdr{background:var(--n1)}
/* The waiting lock holds every loop; a one-shot entrance (a layer rising, a card arriving, the words rewriting) still plays, or it freezes invisible. */
:root[data-waiting] :is(.layer>.scrim,.layer>.sheet,.layer>.drawer,.layer>.menu240,.layer.closing>*,.enter,.ticket.enter,.rblock.settle-in>.fold,.live .verb.rewrite,.live .lens.fadein,.ticket.stamped .l4>.ic:first-child svg){animation-play-state:running!important}

/* ======================================================================
   places (screens/agents.js, brain.js, creations.js, mail.js, settings.js,
   actions.js): the board-specific CSS from the generators, as the artboards
   drew it, made to stack inside .flow. Teal only inside .brain-map.
   ====================================================================== */
/* the place headers sit on the ground (the artboards' .hdr-bg): what scrolls under them is hidden, the edge fade does the rest */
.screen>.hdr:has(>.title){background:var(--n1)}
.flow>.heading.sec{margin:16px 0 0}
.flow>.tabs.pl{margin:18px 0 12px}
.flow>.sfield.pl{margin:18px 0 12px}
.flow>.rrow.nosl>.tx{margin-left:0}
.flow>.list>.rrow,.flow>.list>.hair,.flow>.list>.heading{position:relative;left:auto;top:auto;width:auto}
.flow>.list>.rrow.nosl>.tx{margin-left:0}
.rrow .t.mono{font:400 13px/18px var(--mono);color:var(--n12)}
.rrow .m .att{display:inline-flex;align-items:center;gap:4px;min-width:0}
.rrow .m .att svg{width:12px;height:12px;flex:none}
.rrow .m .att>span{overflow:hidden;text-overflow:ellipsis}
.rrow .m .lit{color:var(--n12)}
.rrow .m>.mono{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rrow .m .fail{color:var(--fail)}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--n12);display:inline-block;flex:none}
.sdot.off{background:var(--n8)}
.dash{width:12px;height:1.5px;border-radius:1px;background:var(--n8);display:inline-block;flex:none}
.undo{height:44px;border-radius:22px;background:var(--n3);padding:0 12px;display:inline-flex;align-items:center;gap:8px;border:0;flex:none}
.mtile{width:28px;height:28px;border-radius:8px;background:var(--n3);display:grid;place-items:center;color:var(--n11);flex:none}
.mtile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flow>.rrow.ind{margin-left:16px;width:calc(100% - 16px)}
.flow>.rrow.ind::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:1px;background:var(--n6)}
/* the today strip: one 44 px target, the 36 px SVG centred in it */
.flow>.today{position:relative;display:block;width:100%;height:44px;border:0;background:transparent;padding:4px 0;margin-top:14px;cursor:pointer}
.today svg{display:block;width:100%;height:36px;overflow:visible}
.today .lbl{font:400 13px var(--mono);fill:var(--n11);font-feature-settings:"tnum"}
.today .spin{transform-box:fill-box;transform-origin:center;animation:rot 2.6s linear infinite}
:root[data-waiting] .today .spin{animation:none;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.today .spin{animation:none;transform:rotate(45deg)}}
/* the schedule dial, 28, static */
.dial{width:28px;height:28px;flex:none;display:block}
.dial .face{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.5}
.dial .mark{fill:var(--n12)}
.dial .arc{fill:none;stroke:var(--n12);stroke-width:1.5;stroke-linecap:round}
.dial .play{fill:var(--n11)}
/* the Brain map (§5.14) */
.flow>.brain-map{position:relative;width:350px;max-width:100%;height:240px;margin:16px auto 0}
.brain-map svg.map{position:absolute;left:0;top:0;width:350px;height:240px;overflow:visible;display:block}
.brain-map svg.map .hit{cursor:pointer}
.brain-map .lens{position:absolute;left:115px;top:76px}
.brain-map .lab{position:absolute;white-space:nowrap}
.brain-map .lab.tap{cursor:pointer}
.tok{position:absolute;display:flex;gap:2px;width:48px;height:6px;background:var(--n1);box-shadow:0 0 0 2px var(--n1)}
.tok i{flex:1;height:6px;border-radius:1px;background:var(--n3);display:block}
.tok i.on{background:var(--n12)}
.tok i.part{background:linear-gradient(90deg,var(--n12) var(--pct),var(--n3) var(--pct))}
/* Learning (§4.12 step meters) */
.flow>.learn{position:relative;display:flex;align-items:flex-start;gap:0;margin-top:24px;min-height:56px}
.learn .delta{display:inline-flex;align-items:center;gap:2px;color:var(--n12);margin:16px 0 0 8px;height:18px}
.learn .delta svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.learn .meters{margin-left:auto;display:grid;grid-template-columns:50px 98px 36px;row-gap:6px;column-gap:0;align-items:center}
.learn .meters .slab{font:400 13px/8px var(--ui);color:var(--n11);white-space:nowrap}
.learn .meters .ssc{font:400 13px/8px var(--mono);color:var(--n11);font-feature-settings:"tnum";text-align:right}
.smeter{display:flex;gap:2px;width:98px;height:8px}
.smeter i{width:23px;height:8px;border-radius:2px;background:var(--n3);display:block}
.smeter i.on{background:var(--n12)}
.smeter i.part{background:linear-gradient(90deg,var(--n12) var(--pct),var(--n3) var(--pct))}
.flow>.learn-foot{display:flex;align-items:center;gap:24px;margin-top:6px;min-height:44px}
/* Creations tiles (§5.15): a masonry of columns */
.flow>.cgrid{display:flex;gap:8px;align-items:flex-start;margin-top:16px}
.cgrid .ccol{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.cgrid .ctile{position:relative;width:100%;cursor:pointer;display:block;border:0;padding:0;text-align:left}
.ctile img,.ctile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ctile .tplate{z-index:1}
.ctile .over{position:absolute;z-index:1}
.ctile .scrim-b{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
.ctile .wave{position:absolute;left:8px;right:8px;bottom:16px;height:24px;display:block}
.ctile .pagec{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ctile .pagec .page{width:96px;height:124px}
.ctile .pagec .page .pword{position:absolute;left:10px;bottom:8px;color:#6b675f;font:400 13px/18px var(--mono)}
.ctile .making{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px}
.ctile .making .lens{position:absolute;left:6px;top:6px}
.csheet .item{position:relative;width:100%;border-radius:8px;overflow:hidden;background:var(--n3);display:grid;place-items:center}
.csheet .item img,.csheet .item video{width:100%;max-height:60vh;object-fit:contain;display:block}
.csheet .item audio{width:100%}
.csheet .line{margin-top:12px;font:400 13px/18px var(--mono);color:var(--n11);display:flex;flex-wrap:wrap;gap:4px}
.csheet .line .proj{color:var(--n12);cursor:pointer}
/* Mail */
.flow>.mailbody{margin-top:24px;word-wrap:break-word;overflow-wrap:anywhere}
.mailbody p{margin:0 0 12px}
.mailbody p:last-child{margin-bottom:0}
.mailbody.html img{max-width:100%;height:auto}
.mailbody.html table{max-width:100%}
.mailbody.html *{max-width:100%}
.mailbody.html a{color:var(--n12)}
.flow>.acts{margin-top:16px}
/* Settings: the key sheet's field */
.pwf{height:48px;border-radius:8px;background:var(--n3);display:flex;align-items:center;gap:12px;padding:0 16px;color:var(--n11)}
.pwf input{flex:1;min-width:0;border:0;background:transparent;color:var(--n12);font:400 16px/24px var(--ui);outline:0;padding:0}
.pwf input::placeholder{color:var(--n11)}
.pwf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sheet .sc>.pwf{margin:12px 0}
.sheet .sc>.rrow.nosl>.tx{margin-left:0}
.sheet .sc .lrow,.sheet .sc .list>.rrow,.sheet .sc .list>.hair{position:relative;left:auto;top:auto;width:auto}
.sheet .sc .empty-l{font:400 15px/20px var(--ui);color:var(--n11);padding:8px 0}
/* desktop: the places keep their 350 geometry centred or stretch */
@media (min-width:1024px){
  .flow>.brain-map{margin-left:0}
}

/* ======================================================================
   Desk screens (frontend/screens/desk*.js; spec-desk.md §4–§6)
   ====================================================================== */
.desk .thumb{opacity:.8}
.desk-board{animation:enter var(--t-in) var(--ease-out)}
/* inside a board the v3 components stack, as they do directly under .flow */
.desk-board .rrow,.desk-board .hrow,.desk-board .agenda,.desk-board .tabs,.desk-board .dstrip,.desk-board .plate,.desk-board .obj,.desk-board .filerow,.desk-board .hair,.desk-board .srule,.desk-board .heading{position:relative;left:auto;right:auto;top:auto;width:auto}
.desk-board .hair{height:1px;background:var(--n6)}
.sheet .sc .rrow,.sheet .sc .plate,.sheet .sc .agenda,.sheet .sc .hrow{position:relative;left:auto;right:auto;top:auto;width:auto}
.rrow .t.fn{display:flex;align-items:center;gap:8px;height:20px;min-width:0}
.rrow .t.fn .nm{font:400 13px/18px var(--mono);color:var(--n12);font-feature-settings:"tnum";white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .t.fn .ty{font:400 13px/18px var(--mono);color:var(--n11);flex:none}
.desk .rrow .t.mono{font:400 13px/18px var(--mono);color:var(--n12)}
.desk .rrow .right .mono,.sheet .rrow .right .mono{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.desk .rrow .right svg,.desk .rrow .m svg,.sheet .rrow .m svg,.sheet .rrow .right svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.desk .rrow .right .n12{color:var(--n12)}
.desk .rrow .right .cap{color:var(--n11)}
.desk .rrow .right .ask{color:var(--ask)}
.desk .rrow .m .ic,.desk .rrow .right .ic{color:var(--n11)}
.desk .rrow .m .ask{color:var(--ask)}
.desk .rrow .right .mach-g{gap:4px}
.desk .rrow .right .mach-g svg{width:12px;height:12px}
.desk .hrow{margin-top:8px}
.desk .hrow+.rrow{margin-top:0}
/* the week strip: one horizontal scroll-snap by week; the cells stretch to the column */
.wkwrap{position:relative;margin:16px 0 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;display:flex;width:100%}
.wkwrap::-webkit-scrollbar{display:none}
.wkwrap>.dstrip-w{flex:none;width:100%;scroll-snap-align:start;scroll-snap-stop:always}
.wkwrap .dstrip{position:relative;left:auto;top:auto;width:auto}
.wkwrap .dstrip .c{flex:1 1 0;width:auto!important;cursor:pointer}
.wkwrap .dcaps span{flex:1 1 0!important;width:auto!important}
.wk-sticky{position:sticky;top:0;z-index:2;background:var(--n1);padding-bottom:8px;margin-top:0;padding-top:16px}
.wk-sticky .wkwrap{margin-top:0}
/* the calendar day line (§4.3): one 44 px target, the line at its y 18 */
.dayline{position:relative;width:100%;height:44px;border:0;background:transparent;padding:0;display:block;margin:8px 0 0}
.dayline i,.dayline span{position:absolute}
.dayline .ln{left:0;right:0;top:18px;height:1px;background:var(--n6)}
.dayline .tk{top:15px;width:1px;height:6px;background:var(--n8)}
.dayline .now{top:10px;width:1px;height:16px;background:var(--n12)}
.dayline .dot{top:16px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--n11)}
.dayline .sched{top:15px;margin-left:-3px;background:var(--n1)}
.dayline .hh{top:26px;width:40px;margin-left:-20px;text-align:center;font:400 13px/18px var(--mono);color:var(--n11)}
.dayline .hh.first{margin-left:0;text-align:left}
.desk .agenda+.hrow{margin-top:8px}
.desk .hrow.date .h{font:600 17px/24px var(--ui)}
/* the vault map tile (§4.7, §5.2): 350 × 170, n2, radius 12, 1 px n7 */
.vtile{position:relative;height:170px;background:var(--n2);border:1px solid var(--n7);border-radius:12px;overflow:hidden;margin:16px 0 0;cursor:pointer;view-transition-name:vault-map}
.vtile svg{display:block;width:100%;height:100%}
/* the graph board: the canvas full-bleed on the ground, the node card over the capsule */
.vmap-wrap{position:relative;margin:0 calc(-1*var(--gutter));touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;background:var(--n1)}
.vmap-wrap svg{display:block;width:100%;height:100%;view-transition-name:vault-map}
.vault-map .hit{fill:transparent;pointer-events:all;cursor:pointer}
.vault-map .n,.vault-map .e,.vault-map text,.vault-map .halo,.vault-map .rim,.vault-map .sat{pointer-events:none}
.vault-map text.lane{font:400 13px var(--ui);fill:var(--n11)}
.vault-map .live{transition:transform .4s var(--ease-move)}
.vault-map .n.month{fill:#44444b}
.vault-map .dim{transition:opacity .2s}
.ncard{position:relative;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);height:64px;background:var(--n1);border-top:1px solid var(--n6);display:flex;align-items:center;animation:enter var(--t-in) var(--ease-out)}
.ncard .rrow{position:relative;left:auto;top:auto;width:100%;border:0}
.ncard .rrow .m .mono{font:400 13px/18px var(--mono)}
/* folder tabs with the lock (§4.8) */
.desk .tabs{margin:18px 0 12px;gap:20px}
.desk .tabs.tight{gap:16px}
.desk .tabs span{gap:4px;cursor:pointer}
.desk .tabs span svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--t-fade) var(--ease-out)}
/* redacted rows (§4.6) */
.rrow.redacted .thumb{opacity:.4}
.rrow.redacted .bar{width:140px;height:8px;border-radius:2px;background:var(--n3);display:block;margin:2px 0 4px}
.rrow.redacted .tx{gap:4px}
.rrow .t.reveal{animation:fadein .16s}
/* people rows: the 28 px disc with the door badge */
.pdisc{position:relative;width:28px;height:28px}
.pdisc .avatar{width:28px;height:28px;font-size:0}
.pdisc .db{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:var(--n3);display:grid;place-items:center;color:var(--n11)}
.pdisc .db svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rrow .sl .ring-w{color:var(--n12)}
/* the note (§5.8) */
.screen>.hdr .title.hname{font:600 17px/24px var(--ui);letter-spacing:-.01em;top:16px}
.screen>.hdr .meta.sub.path{font:400 13px/18px var(--mono);color:var(--n11)}
.note-body{position:relative;margin:16px 0 0;font:400 16px/24px var(--ui);color:var(--n12);cursor:text;min-height:48px;word-wrap:break-word;overflow-wrap:anywhere}
.note-body>h1:first-child{display:none}
.note-body p{margin:0 0 8px}
.note-body h1,.note-body h2,.note-body h3{font:600 17px/24px var(--ui);letter-spacing:-.01em;margin:16px 0 8px}
.note-body ul,.note-body ol{margin:0 0 8px;padding-left:24px}
.note-body a{color:var(--n12);text-decoration:underline;text-decoration-color:var(--n8);text-decoration-thickness:1px;text-underline-offset:3px}
.note-body .wikilink{color:var(--n12);text-decoration:underline;text-decoration-color:var(--n8);text-decoration-thickness:1px;text-underline-offset:3px}
.note-body .wikilink.missing{color:var(--n11);text-decoration-style:dotted}
.note-body pre{font:400 13px/18px var(--mono);background:#0a0a0b;border-radius:8px;padding:12px;overflow-x:auto;margin:8px 0}
.note-body code{font:400 13px/18px var(--mono)}
.note-body blockquote{margin:0 0 8px;padding-left:14px;border-left:2px solid var(--n6);color:var(--n11)}
.note-body hr{border:0;height:1px;background:var(--n6);margin:12px 0}
.note-body li.task-item{list-style:none;margin-left:-24px;display:flex;gap:8px;align-items:flex-start}
.note-body li.task-item input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--n8);margin:4px 0 0;flex:none;position:relative;background:transparent;cursor:pointer;opacity:1}
.note-body li.task-item input:checked{border-color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat}
.note-edit{display:block;width:100%;min-height:240px;border:0;background:transparent;outline:0;resize:none;font:400 16px/24px var(--ui);color:var(--n12);margin:16px 0 0;padding:0;white-space:pre-wrap}
.note-row44{margin-top:0}
.flow>.plate{margin:16px 0 0;cursor:pointer}
.flow>.plate .control{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow>.hair.note{margin:16px 0 8px}
.prow44{height:44px;display:flex;align-items:center;gap:12px;margin-top:16px}
.prow44 .daychip{margin-left:12px}
/* the project ring in the header's right slot (§4.4) */
.ring-slot{position:absolute;right:20px;top:6px;width:44px;height:44px;display:grid;place-items:center;color:var(--n12)}
.ring-slot .mono{font-size:13px;color:var(--n12)}
/* sheets of the Desk (§4.9): rows of 44, text controls right-aligned, no button */
.sheet .frow44{height:44px;display:flex;align-items:center;gap:12px;min-width:0}
.sheet .frow44 .control{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet .frow44 .control.n11{color:var(--n11)}
.sheet .sc .heading.tt{margin:8px 0 12px}
.sheet .sc>.plate{position:relative;left:auto;width:auto;margin:4px 0 8px}
.sheet .fld{height:44px;border-radius:8px;background:var(--n3);display:flex;align-items:center;padding:0 12px;margin:8px 0}
.sheet .fld input,.sheet .fld select{flex:1;min-width:0;border:0;background:transparent;outline:0;color:var(--n12);font:400 16px/24px var(--ui);color-scheme:dark}
.sheet .fld input::placeholder{color:var(--n11)}
.sheet .fld2{display:flex;gap:8px}
.sheet .fld2 .fld{flex:1;min-width:0}
.sheet .fline{font:400 13px/18px var(--mono);color:var(--n11);margin:4px 0 8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sheet .fline .pj{color:var(--n11);cursor:pointer;text-decoration:underline;text-decoration-color:var(--n8);text-underline-offset:3px}
.sheet .sc>.rrow.result{cursor:pointer}
.sheet .sc>.sfield{margin:0 0 8px}
.sheet .err{font:400 13px/18px var(--ui);color:var(--fail);min-height:18px;margin-top:4px}
/* the Unlock button in thumb reach above the capsule (§4.6) */
.screen>.unlock{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--inset-bottom) + var(--kb) + 12px + var(--cap-h) + 16px);z-index:2;width:auto;transition:opacity .14s}
.screen>.unlock.gone{opacity:0;pointer-events:none}
.hdr .meta.sub.promise{color:var(--n11)}
/* the margin column on the Desk (§6.3): the map 308 × 200 and the day's agenda as 40 px rows */
.margin-body .vmap-m{display:block;width:100%;height:200px;cursor:pointer}
.margin-body .magenda{display:flex;flex-direction:column;margin-top:16px}
.margin-body .magenda .r{height:40px;display:flex;align-items:center;gap:12px;font:500 15px/20px var(--ui);color:var(--n12);cursor:pointer;border-radius:6px}
.margin-body .magenda .r:hover{background:var(--n4)}
.margin-body .magenda .r .tm{width:56px;flex:none;font:400 13px/18px var(--mono);color:var(--n12);font-feature-settings:"tnum"}
.margin-body .magenda .r .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.margin-body .magenda .r .ask{font:400 13px/18px var(--ui);color:var(--ask);flex:none}
.margin-body .magenda .r .cap{flex:none}
/* the right-edge swipe into the Desk (§1.2) */
.desk-peek{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--n1);z-index:8;transform:translateX(100%);box-shadow:-8px 0 32px rgba(0,0,0,.45);will-change:transform}
.desk-peek .hdr{top:var(--inset-top)}
.desk-peek .hdr .title{left:60px;top:8px}
.desk-peek-scrim{position:absolute;inset:0;background:#000;opacity:0;z-index:7;pointer-events:none}
.desk-peek.settle{transition:transform var(--t-sheet) var(--spring-sheet)}
.desk-peek-scrim.settle{transition:opacity var(--t-sheet) var(--spring-sheet)}
.screen.peeking{transition:transform var(--t-sheet) var(--spring-sheet)}
@media (prefers-reduced-motion:reduce){.desk-peek,.desk-peek-scrim,.screen.peeking{transition:none!important}}
.desk .empty{font:400 15px/20px var(--ui);color:var(--n11);padding:12px 0}
.flow>.desk-board{position:relative}
@media (min-width:1024px){
  .wkwrap .dstrip{gap:5px}
  .wkwrap .dcaps{gap:5px}
  .desk .hrow{margin-top:8px}
}

/* ----------------------------------------------------------------------
   The second backend round (the contract): the reply's sources light the
   vault map, a date object with its title, a creation's progress plate,
   the sub-agent rows from child lines, the trainer row.
   ---------------------------------------------------------------------- */
.vault-map circle.n.lit2{fill:var(--n12);transition:fill .2s}
.vault-map circle.n.lit{fill:var(--n12)}
.vault-map circle.n.priv.lit{fill:none;stroke:var(--n12)}
.vault-map text.cite{font:400 13px var(--mono);fill:var(--n11)}
.vault-map circle.n.priv.lit2{fill:none;stroke:var(--n12)}
/* Graph · answered (round three §2.24): the lit nodes' rims, their links raised and the rest dimmed, the pop on the CSS scale, the answer card in the node card's slot */
.vault-map .arim{fill:none;stroke:var(--line);stroke-width:1}
.vault-map[data-answer] .dim{opacity:.5}
.vault-map circle.n.lit{transform-box:fill-box;transform-origin:center;transition:scale var(--t-pop) var(--spring-pop)}
.vault-map circle.n.lit.pre{scale:.6}
.vault-map text tspan.cite{fill:var(--n11);font-family:var(--mono);font-weight:400}
.ncard-slot{position:relative}
.ncard-slot:has(>.acard){min-height:64px}
.acard{position:absolute;left:calc(-1*var(--gutter));right:calc(-1*var(--gutter));bottom:0;box-sizing:border-box;height:112px;padding:8px var(--gutter) 0;background:var(--n1);border-top:1px solid var(--n6)}
.acard .win{height:72px;overflow:hidden}
.acard .txt{position:relative;color:var(--n12);transition:transform var(--t-in) var(--ease-out)}
.acard sup.cite{position:relative;top:-2px;margin-left:1px;font:400 13px/1 var(--ui);color:var(--n11);vertical-align:baseline}
.acard sup.cite.on{color:var(--n12)}
.acard .foot{display:flex;align-items:center;gap:8px;height:32px}
.acard .stack{display:inline-flex;align-items:center}
.acard .stack .disc{width:20px;height:20px;border-radius:50%;background:var(--n1);display:grid;place-items:center;color:var(--n11)}
.acard .stack .disc+.disc{margin-left:-6px}
.acard .stack .disc svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.acard .foot>.mono{font:400 13px/18px var(--mono);color:var(--n11)}
.acard .foot .tc{position:absolute;right:var(--gutter);bottom:0;height:44px;display:inline-flex;align-items:center;padding-left:12px}
.flow>.obj.obj-date{height:auto}
.obj-date .dstrip{left:auto;width:auto}
.ctile .tplate.pct{right:auto;left:8px}
.lrow.agent.tap{cursor:pointer}
.lrow.agent .xxs{flex:none}
.flow>.rrow.training{margin-top:8px}
.brain-map .tok{z-index:1}

/* ======================================================================
   Round three, the live team (spec-round3 §2.1–§2.11): House, Eyes, Film,
   the replay, the spend ring, the time machine. Teal only inside
   .brain-map (the comet) and .lens / .watch as before; amber only on the
   thing that waits. Every animation runs through core/motion.js; the
   keyframes and the easing tokens are in motion.css.
   ====================================================================== */
/* House (§2.1): the constellation, 350 × 372 on the phone */
.flow>.house{position:relative}
.house .constellation{position:relative;width:350px;height:372px;margin:16px auto 0;max-width:100%}
.house .constellation svg.brain-map{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block}
.house .constellation .orbit-h{fill:none;stroke:var(--line-soft);stroke-width:1}
.house .constellation .orbit-r{fill:none;stroke:var(--line);stroke-width:1}
.house .constellation .orbit-r2{fill:none;stroke:var(--line-soft);stroke-width:1}
.house .constellation .arc-r{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.house .constellation .arc-r.ghost{opacity:.5}
.house .constellation .spoke{fill:none;stroke:var(--line-soft);stroke-width:1}
.house .constellation .prog{fill:none;stroke:var(--n12);stroke-width:1;stroke-dasharray:var(--p,0) 100;transition:stroke-dasharray .6s var(--ease-move)}
.house .constellation .comet .c{fill:none;stroke:#4fe7d2;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:12 100;stroke-dashoffset:12}
.house .constellation .comet .c.halo{stroke:rgba(79,231,210,.3);stroke-width:5}
.house .constellation .subarc{fill:none;stroke:var(--n6);stroke-width:1}
.house .constellation .lens{position:absolute;--lit:0deg}
.house .constellation .lens .sat,.house .constellation .lens .orbit{display:none}
.house .constellation .lens.lit .rim{--rim-soft:rgba(255,255,255,.95)}
.house .constellation .lens[data-state=unset] .rim{opacity:.4}
.house .constellation .lens[data-state=unset] .veil{opacity:0}
.house .constellation .lens.hit{cursor:pointer}
.house .constellation .lab{position:absolute;white-space:nowrap;text-align:center;pointer-events:none}
.house .constellation .lab.tap{pointer-events:auto;cursor:pointer}
.house .constellation .centre{position:absolute;left:0;width:100%;text-align:center;pointer-events:none}
.house .constellation .plus{position:absolute;white-space:nowrap;text-align:center}
/* a satellite: the outer turns with --th (1 s linear, the clock), the middle holds the radius (the birth's spring), the inner counter-turns and carries the disc */
.satl{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--th,0deg));transition:transform 1s linear;pointer-events:none}
.satl.sweep{transition:transform .4s var(--ease-move)}
.satl.frozen{transition:none}
.satl .sr{position:absolute;left:0;top:0;transform:translateY(calc(var(--r,52px)*-1));transition:transform var(--t-sheet) var(--spring-sheet)}
.satl .sd{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--n3);display:grid;place-items:center;color:var(--n12);transform:rotate(calc(var(--th,0deg)*-1));transition:transform 1s linear,opacity .3s var(--ease-in);pointer-events:auto;cursor:pointer}
.satl.sweep .sd{transition:transform .4s var(--ease-move)}
.satl.frozen .sd{transition:none}
.satl .sd svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.satl .sd .xxs{transform:scale(1.25)}
.satl .sd .fail{color:var(--fail)}
.satl .sd::before{content:"";position:absolute;left:-12px;top:-12px;width:44px;height:44px;border-radius:50%}
.satl.born .sr{transform:translateY(-36px);transition:none}
.satl.born .sd{opacity:0;transform:rotate(calc(var(--th,0deg)*-1)) scale(.4);transition:none}
.satl.home .sr{transform:translateY(-36px);transition:transform .3s var(--ease-in)}
.satl.home .sd{opacity:0;transform:rotate(calc(var(--th,0deg)*-1)) scale(.4);transition:transform .3s var(--ease-in),opacity .3s var(--ease-in)}
/* the label's frame counter-turns at the disc's centre; the label sits beside the disc (right / left / under), moved by --lx/--ly to the end of its leader (§2.1: a 1 px line of line colour, ≤ 24 px, the fourth placement) */
.satl .lw{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(calc(var(--th,0deg)*-1));transition:transform 1s linear;pointer-events:none}
.satl.sweep .lw{transition:transform .4s var(--ease-move)}
.satl.frozen .lw{transition:none}
.satl .lbl{position:absolute;left:calc(18px + var(--lx,0px));top:calc(-9px + var(--ly,0px));white-space:nowrap;font:400 13px/18px var(--ui);color:var(--n11);pointer-events:none}
.satl .lbl.left{left:calc(-18px + var(--lx,0px));translate:-100% 0;text-align:right}
.satl .lbl.under{left:var(--lx,0px);top:calc(14px + var(--ly,0px));translate:-50% 0;text-align:center}
.satl .lead{position:absolute;left:0;top:0;width:0;height:1px;background:var(--line);transform:rotate(var(--la,0deg));transform-origin:0 0;display:none}
.satl .lead.on{display:block}
.house .constellation .lab.yield{visibility:hidden}
.satl .lbl .mono{color:var(--n11)}
.satl .lbl.ask{color:var(--ask)}
.satl .lbl .mono.ask{color:var(--ask)}
.house .rows{margin-top:12px}
.house .rows .hrow,.house .rows .rrow,.house .rows .srule,.house .rows .cost{position:relative;left:auto;right:auto;top:auto;width:auto}
.house .rows .hrow{margin-top:8px}
.house .rows .cost{position:relative;left:auto;width:auto;margin-top:8px;cursor:pointer}
.house .rows .cost .right{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.house .rows .srule{position:relative;left:auto;width:auto;cursor:pointer}
.house .rows .srule+.srule{margin-top:4px}
.house .rows .rrow .m .mach-g{gap:4px}
.house .rows .rrow .m .mach-g svg{width:12px;height:12px}
/* the desktop idle screen (§2.4) and the desktop House place at .75 */
.house-idle{position:fixed;inset:0;z-index:8;background:var(--n1);display:grid;place-items:center;animation:mo-fade .6s var(--ease-move) both}
.house-idle.leaving{opacity:0;transition:opacity .2s var(--ease-in)}
.house-idle .constellation{position:relative;width:1280px;height:820px;max-width:100vw;max-height:100vh;margin:0}
.house-idle .constellation .lab{font-size:14px;line-height:20px}
.house-idle .centre .figure{font:400 32px/36px var(--mono);color:var(--n12);font-feature-settings:"tnum"}
@media (min-width:1024px){
  .house .constellation{margin-left:0}
}
/* Eyes (§2.5): the wall */
.flow>.eyes{position:relative;margin-top:16px}
.eyes .wall{display:flex;gap:8px;align-items:flex-start}
.eyes .wall .ecol{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.eyes .cell{position:relative;display:block}
.eyes .cell .watch{position:relative;left:auto;width:100%;height:96px;cursor:pointer}
.eyes .cell.phone .watch{height:200px;background:var(--n2);box-shadow:none;border:1px solid var(--n7)}
.eyes .cell.one .watch{height:197px}
.eyes .cell.one.phone .watch{height:290px}
.eyes .watch img.stream{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eyes .watch .plate{left:6px;top:6px;height:18px;padding:0 6px}
.eyes .watch .plate i{animation:none}
.eyes .watch[data-state=asking]{box-shadow:inset 0 0 0 1.5px rgba(220,179,107,.55),inset 0 0 24px rgba(220,179,107,.16)}
.eyes .watch[data-state=yours]{box-shadow:inset 0 0 0 1px var(--n8)}
.eyes .watch[data-state=ended]{box-shadow:inset 0 0 0 1px var(--n7)}
.eyes .watch[data-state=ended] .plate i{background:var(--n8)}
.eyes .pinset{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:77px;height:163px;border-radius:15px;border:1px solid var(--n7);box-sizing:border-box}
.eyes .pinset .app{position:absolute;left:0;right:0;top:6px;text-align:center;font:400 13px/18px var(--ui);color:var(--n11)}
.eyes .pinset .el{position:absolute;border-radius:3px;box-shadow:inset 0 0 0 1px var(--n8)}
.eyes .pinset .ring{position:absolute;width:12px;height:12px;border-radius:50%;border:1.5px solid #4fe7d2;margin:-6px}
.eyes .cell .crow{position:relative;left:auto;width:auto;height:56px;display:flex;align-items:center;cursor:pointer}
.eyes .cell .crow .lens{flex:none}
.eyes .cell .crow .tx{flex:1;min-width:0;margin-left:8px;display:flex;flex-direction:column;gap:2px}
.eyes .cell .crow .t{font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eyes .cell .crow .m{font:400 13px/18px var(--mono);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eyes .cell .crow .m.ask{color:var(--ask)}
.eyes .open .watch{height:197px;cursor:default}
.eyes .open.phone .watch{height:290px}
.eyes .open .eacts{display:flex;align-items:center;justify-content:flex-start;gap:24px;height:44px;margin-top:12px}
.eyes .still28{width:28px;height:28px;border-radius:8px;border:1px solid var(--n7);object-fit:cover;display:block}
.eyes .tile28{width:28px;height:28px;border-radius:8px;background:var(--n3);display:grid;place-items:center;color:var(--n11)}
.eyes .tile28 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Film (§2.7): the rail, the strip with its ink, the pane, the playhead */
.flow>.film{position:relative}
.film .fstrip{position:relative;margin-top:16px;touch-action:none;user-select:none;-webkit-user-select:none}
.film .fstrip .dstrip{position:relative;left:auto;width:auto}
.film .fstrip .dstrip .c{position:relative;z-index:1;cursor:pointer;background:transparent}
.film .fstrip .dstrip .c::before{content:"";position:absolute;inset:0;border-radius:8px;background:var(--n3);z-index:-1}
.film .fstrip .dstrip .c.answer::before{background:transparent}
.film .fstrip .ink{position:absolute;left:0;top:0;width:46px;height:72px;border-radius:8px;background:var(--n12);z-index:0;transition:transform var(--t-snap) var(--spring-snap)}
.film .fstrip.dragging .ink{transition:none}
.film .fstrip .dcaps{display:flex;gap:4px;margin-top:6px;height:18px}
.film .fstrip .dcaps span{flex:1 1 0;text-align:center;font:400 13px/18px var(--mono);color:var(--n11)}
.film .fstrip .dcaps span.cap{font:400 13px/18px var(--ui)}
.film .fwrap{position:relative;margin:8px calc(-1*var(--gutter)) 0;overflow:hidden}
.film .pane{position:relative;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;height:514px;-webkit-overflow-scrolling:touch}
.film .pane::-webkit-scrollbar{display:none}
.film .pane .track{position:relative;width:100%}
.film .rail{position:absolute;left:14px;top:0;bottom:0;width:1px;background:var(--n6);margin-left:var(--gutter)}
.film .rail.draw{transform-origin:top;transform:scaleY(0);transition:transform .4s var(--ease-move)}
.film .rail.draw.on{transform:scaleY(1)}
.film .tick{position:absolute;left:11px;width:6px;height:1px;background:var(--n8);margin-left:var(--gutter)}
.film .hl{position:absolute;left:-6px;width:40px;text-align:center;font:400 13px/18px var(--mono);color:var(--n11);margin-left:var(--gutter);font-feature-settings:"tnum"}
.film .item{position:absolute;left:0;right:0;padding:0 var(--gutter);display:flex;align-items:center;cursor:pointer;will-change:auto}
.film .item .sl{width:28px;height:28px;display:grid;place-items:center;flex:none;color:var(--n11);background:var(--n1);border-radius:50%}
.film .item.on .sl{color:var(--n12)}
.film .item.on .sl .xxs.done{color:var(--n12)}
.film .item .sl .cover{width:36px;height:36px;border-radius:8px;margin:-4px;display:grid;place-items:center;color:var(--n12);background:var(--n3)}
.film .item .sl .cover.video{background:linear-gradient(135deg,#1e2a2a,#0f1a1a)}
.film .item .sl .cover.song{background:linear-gradient(135deg,#2a2420,#1a1512);gap:2px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;box-sizing:border-box}
.film .item .sl .cover.song i{width:2px;background:var(--n11);border-radius:1px;display:block}
.film .item .sl .cover.picture{background:linear-gradient(135deg,#242a30,#141a20)}
.film .item .sl .cover svg{width:16px;height:16px;fill:currentColor;stroke:none}
.film .item .sl .cover img{width:36px;height:36px;object-fit:cover;border-radius:8px;display:block}
.film .item .tx{flex:1;min-width:0;margin-left:12px;display:flex;flex-direction:column;gap:2px}
.film .item .t{font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film .item .t.n11{color:var(--n11)}
.film .item .t.mono{font:400 13px/18px var(--mono);color:var(--n12)}
.film .item .m{font:400 13px/18px var(--mono);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.film .item .m .ask{color:var(--ask)}
.film .item .right{flex:none;margin-left:8px;font:400 13px/18px var(--mono);color:var(--n11);display:inline-flex;align-items:center;gap:8px;font-feature-settings:"tnum"}
.film .item .right.ask{color:var(--ask)}
.film .item .glyphs{display:flex;align-items:center;gap:8px;color:var(--n11)}
.film .item .glyphs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.film .item .glyphs .ic.failed{color:var(--fail)}
.film .item .stack{display:flex;align-items:center}
.film .item .stack .d{width:20px;height:20px;border-radius:50%;background:var(--n1);display:grid;place-items:center;color:var(--n11);margin-left:-6px;box-shadow:0 0 0 1px var(--n1)}
.film .item .stack .d:first-child{margin-left:0}
.film .item .stack .d svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.film .item.day{height:44px}
.film .item.day .h{font:600 17px/24px var(--ui);letter-spacing:-.01em;color:var(--n12);margin-left:40px;flex:1}
.film .item.day .sl{display:none}
.film .item .sched{width:6px;height:6px;border-radius:50%;border:1px solid var(--n8);box-sizing:border-box}
.film .item .dot4{width:4px;height:4px;border-radius:50%;background:var(--n11)}
.film .item .thumb{transform:scale(.8)}
.film[data-zoom=days] .item:not(.day){height:24px!important}
.film[data-zoom=days] .item:not(.day) .tx,.film[data-zoom=days] .item:not(.day) .right{display:none}
.film[data-zoom=days] .item:not(.day) .sl{transform:scale(.571)}
.film .pinching .item .sl{transition:none}
.film .head{position:absolute;left:-8px;top:235px;width:44px;height:44px;z-index:2;pointer-events:auto;margin-left:var(--gutter)}
.film .head .lens{position:absolute;left:0;top:0}
.film .head .tm{position:absolute;left:-2px;top:48px;width:48px;text-align:center;font:400 13px/18px var(--mono);color:var(--n12);font-feature-settings:"tnum";background:var(--n1);border-radius:4px}
.hdr .now-btn{position:absolute;right:20px;top:6px;width:44px;height:44px;border:0;background:transparent;padding:0;color:var(--n12);font:500 15px/20px var(--ui);cursor:pointer;z-index:3}
@media (min-width:1024px){
  .film .fwrap{margin:8px 0 0}
}
/* the replay (§2.9): the Brain map with [data-replay] */
.flow>.replay{position:relative}
.replay .brain-map{position:relative;width:350px;max-width:100%;height:240px;margin:16px auto 0}
.replay .brain-map svg.map{position:absolute;left:0;top:0;width:350px;height:240px;overflow:visible;display:block}
.replay .brain-map .lens{position:absolute;left:115px;top:76px}
.replay .brain-map .lab{position:absolute;white-space:nowrap}
.replay .brain-map .spoke{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0}
.replay .brain-map .spoke.draw{animation:mo-draw .3s var(--ease-move) forwards}
.replay .brain-map .spoke.gone{opacity:0;transition:opacity .1s var(--ease-in)}
.replay .brain-map .corner{position:absolute;left:246px;top:4px;width:96px;height:54px;border-radius:6px;border:1px solid var(--n7);object-fit:cover;background:var(--n2);opacity:0;transition:opacity .16s var(--ease-out)}
.replay .brain-map .corner.on{opacity:1}
.replay .transport-w{display:grid;grid-template-rows:1fr;contain:layout}
.replay .transport-w>div{min-height:0;overflow:hidden}
.replay .transport{position:relative;height:44px;display:flex;align-items:center;margin-top:16px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.replay .transport .disc{width:36px;height:36px;border-radius:50%;background:var(--n3);display:grid;place-items:center;color:var(--n12);flex:none;border:0;padding:0;cursor:pointer}
.replay .transport .disc svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.replay .transport .disc svg.fill{fill:currentColor;stroke:none}
.replay .transport .glyphs{position:relative;margin-left:12px;height:44px;flex:1;min-width:0;cursor:ew-resize;overflow:hidden}
.replay .transport .glyphs .strip{position:absolute;left:0;top:0;height:44px;width:100%;transition:transform .3s var(--ease-move)}
.replay .transport.dragging .glyphs .strip{transition:none}
.replay .transport .glyphs .g{position:absolute;top:14px;width:16px;height:16px;color:var(--n11);opacity:.3;transition:opacity .16s var(--ease-out)}
.replay .transport .glyphs .g.past{opacity:1}
.replay .transport .glyphs .g.cur{opacity:1;color:var(--n12)}
.replay .transport .glyphs .g svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.replay .transport .glyphs .g.failed::after{content:"";position:absolute;left:-2px;top:-2px;width:20px;height:20px;border-radius:50%;border:1px solid var(--fail)}
.replay .transport .glyphs .g.failed{color:var(--fail)}
.replay .transport .glyphs .ph{position:absolute;top:34px;left:0;width:1px;height:10px;margin-left:8px;background:var(--n12);transition:transform .6s var(--ease-move)}
.replay .transport.dragging .glyphs .ph{transition:none}
.replay .transport .glyphs .ph.snap{transition:transform var(--t-snap) var(--spring-snap)}
.replay .transport .tm{flex:none;margin-left:8px;font:400 13px/18px var(--mono);color:var(--n11);font-feature-settings:"tnum";text-align:right}
.replay .ledger{margin-top:16px}
.replay .ledger .lrow{position:relative;left:auto;width:auto}
.replay .ledger .lrow.after{opacity:.5}
.replay .ledger .lrow.cur .tile{color:var(--n12)}
.replay .ledger .lrow .tile img{width:28px;height:28px;object-fit:cover;border-radius:8px}
.replay .foot{display:flex;align-items:center;height:44px;margin-top:4px}
.replay .foot .mach{display:inline-flex;align-items:center;gap:4px;font:400 13px/18px var(--ui);color:var(--n11)}
.replay .foot .mach svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.replay .foot .tc{margin-left:auto}
/* the spend ring (§2.10): a 20 px fact at a heading's right; the costs sheet */
.spend{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.spend .fig{font:400 13px/18px var(--mono);color:var(--n11);font-feature-settings:"tnum"}
.hrow .spend+.chev16{margin-left:0}
.costs .meter{position:relative;left:auto;width:auto;margin:12px 0 0}
.costs .caps{display:flex;justify-content:space-between;margin-top:4px;font:400 13px/18px var(--mono);color:var(--n11);height:18px}
.costs .caps .hatch{color:var(--n11)}
.costs .rows{margin-top:16px}
.costs .rows .rrow{position:relative;left:auto;width:auto}
.costs .rows .rrow .tile{width:28px;height:28px;border-radius:8px;background:var(--n3);display:grid;place-items:center;color:var(--n11)}
.costs .rows .rrow .tile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.costs .rows .rrow .right .mono-l{color:var(--n12)}
.costs .rows .rrow .right .cap{margin-left:4px}
.costs .foot{display:flex;justify-content:flex-end;align-items:center;height:44px;margin-top:8px}
.costs .hd{display:flex;align-items:center;justify-content:space-between;height:24px}
.costs .hd .num{font:500 22px/28px var(--ui);letter-spacing:-.01em;color:var(--n12);font-feature-settings:"tnum"}
/* the time machine (§2.11): the lift, the ink, the scrubbed caption, Now */
.wkwrap.tm{touch-action:none;overflow:hidden;scroll-snap-type:none}
.wkwrap .ink{position:absolute;left:0;top:0;width:46px;height:72px;border-radius:8px;background:var(--n12);z-index:0;transition:transform var(--t-snap) var(--spring-snap);pointer-events:none;opacity:0}
.wkwrap.tm .ink{opacity:1}
.wkwrap.tm .dstrip .c{position:relative;z-index:1;background:transparent;transition:transform var(--t-sheet) var(--spring-sheet)}
.wkwrap.tm .dstrip .c::before{content:"";position:absolute;inset:0;border-radius:8px;background:var(--n3);z-index:-1}
.wkwrap.tm .dstrip .c.answer::before{background:transparent}
.wkwrap.tm .dstrip .c.answer .w,.wkwrap.tm .dstrip .c.answer .d{color:var(--n1)}
.wkwrap.tm.lifted .dstrip .c{transform:translateY(-4px)}
.wkwrap.tm.lifted .dstrip .c.held{transform:translateY(-4px) scale(1.06)}
.wkwrap.tm .dcaps .scrubbed{position:absolute;left:0;right:0;text-align:center;font:400 13px/18px var(--mono);color:var(--n11);font-feature-settings:"tnum"}
.desk.then .dayrows,.desk.then .thenrows{transition:opacity .16s var(--ease-out)}
.desk.then .vtile svg .n.after{opacity:.3}
.hdr .meta.sub.then svg{width:12px;height:12px}

/* ======================================================================
   Round three, the Person team (spec-round3 §2.12–§2.19): Voice (the XL
   Lens over the thread), the Person page, the Cinema (the creations reel)
   and the Daily page (the one serif moment, and the one light surface on
   paper). Teal only inside .lens; amber only on the thing that waits; every
   animation through core/motion.js, the tokens in motion.css.
   ====================================================================== */
/* The Lens XL (§0.4 amendment 1): L's layers at --d:240px; the rim 3 px; the specular 8 % × 6 %; the veil blur capped 16 / 11 px */
.lens[data-size=XL] .body{animation:breathe 5.5s cubic-bezier(.645,.045,.355,1) infinite}
.lens[data-state=thinking][data-size=XL] .body,.lens[data-state=working][data-size=XL] .body{animation-duration:3.2s}
.lens[data-size=XL] .body>.veil.back{animation:swayA 17.9s ease-in-out -7.3s infinite;filter:blur(min(calc(var(--d)*.09),16px))}
.lens[data-size=XL] .body>.veil.front{animation:swayB 13.3s ease-in-out -4.1s infinite;filter:blur(min(calc(var(--d)*.06),11px))}
.lens[data-size=XL] .rim{-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px));mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px))}
.lens[data-size=XL] .spec::before{background:radial-gradient(8% 6% at 31% 25%,rgba(255,255,255,.55) 60%,transparent 100%),radial-gradient(18% 12% at 33% 28%,rgba(255,255,255,.16),transparent 74%)}
.lens[data-size=XL] .sat{width:8px;height:8px;margin:-4px}
.lens[data-size=XL] .ring{animation-name:emit-xl}
.lens[data-rented][data-size=XL] .orbit{opacity:1}
/* Voice (§2.12–2.14): full frame n1, the thread behind inert; the box y 180–420 (centre (195, 300)) */
.voice-layer{position:absolute;inset:0;z-index:5;background:var(--n1);color:var(--n12);overflow:hidden}
.voice-layer .vscrim{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:none;opacity:0}
.voice-layer .vname{position:absolute;left:20px;top:calc(var(--inset-top) + 22px);height:18px;line-height:18px;color:var(--n11)}
.voice-layer .vdone{position:absolute;right:20px;top:calc(var(--inset-top) + 6px);width:64px;height:44px;border:0;background:transparent;padding:0;text-align:right;color:var(--n11);cursor:pointer}
.voice-layer .vlens-box{position:absolute;left:50%;top:calc(var(--inset-top) + 126px);width:240px;height:240px;margin-left:-120px;display:grid;place-items:center}
.voice-layer .lens{transform:scale(calc((1 + .06*var(--lvl,0))*(1 - .5*var(--vp,0))));touch-action:none;cursor:pointer}
.voice-layer .lens[data-state=waiting],:root[data-waiting] .voice-layer .lens{transform:none}
.voice-layer .vstate{position:absolute;left:20px;right:20px;top:calc(var(--inset-top) + 386px);height:20px;line-height:20px;text-align:center;color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-layer .vstate.ask{color:var(--ask)}
.voice-layer .vstate.fail{color:var(--fail)}
.voice-layer .vstate .vfact{color:var(--n11)}
.voice-layer .vtext{position:absolute;left:40px;right:40px;top:calc(var(--inset-top) + 422px);height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;text-align:center;font:400 16px/24px var(--ui)}
.voice-layer .vline{color:var(--n12);flex:none}
.voice-layer .vline.heard{color:var(--n11);max-height:72px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px);mask-image:linear-gradient(180deg,transparent 0,#000 24px)}
.voice-layer .vline.heard.final{color:var(--n12)}
.voice-layer .vline.heard .w{display:inline-block;margin-right:.28em}
.voice-layer .vline.said .w{opacity:.35;transition:opacity .12s var(--ease-out)}
.voice-layer .vline.said .w.on{opacity:1}
.voice-layer .vline.said.p1{opacity:.55}
.voice-layer .vline.said.p2{opacity:.25}
.voice-layer .vline.said.p1 .w,.voice-layer .vline.said.p2 .w{opacity:1}
.voice-layer .vobj{position:absolute;left:20px;right:20px;top:calc(var(--inset-top) + 558px);max-height:96px;contain:layout;display:grid;grid-template-rows:1fr}
.voice-layer .vobj-in{min-height:0;overflow:hidden}
.voice-layer .vobj .plate,.voice-layer .vobj .rrow,.voice-layer .vobj .filerow{position:relative;left:auto;top:auto;width:auto;cursor:pointer}
.voice-layer .vtype{position:absolute;left:20px;bottom:calc(var(--inset-bottom) + 12px);height:44px;border:0;background:transparent;padding:0;color:var(--n11);cursor:pointer}
/* Person (§2.15): the plate, the doors row (80 × 56, no fill at rest), Next, Threads, Deliverables, the body, Linked */
.person .plate,.person .rrow,.person .hrow{position:relative;left:auto;top:auto;width:auto}
.person .plate{margin:16px 0 0;cursor:pointer}
.person .doors{display:flex;gap:10px;margin-top:12px;height:56px}
.person .door-cell{width:80px;height:56px;border:0;background:transparent;padding:4px 0 0;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:8px;color:var(--n11);cursor:pointer}
.person .door-cell:active{background:var(--n4)}
.person .door-cell .tile{width:28px;height:28px;border-radius:8px;background:var(--n3);display:grid;place-items:center;color:var(--n12)}
.person .door-cell .tile svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.person .next-wrap{margin-top:8px}
.person .rrow.next .right .ask{color:var(--ask)}
.person .hrow{margin-top:8px}
.person .note-body{margin-top:16px}
.person .rrow .sl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;color:var(--n11)}
/* The Cinema (§2.16–2.18): the reel edge to edge, one caption row under each cover, the making tile, the open sheet */
.cinema-root .scroll{scroll-snap-type:y proximity}
.flow>.reel{position:relative;margin:8px calc(-1*var(--gutter)) 0;width:auto}
.reel .cover{position:relative;width:100%;overflow:hidden;scroll-snap-align:start;scroll-margin-top:calc(var(--inset-top) + var(--hdr-h) + 66px);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-2px}
.reel .cover:not([class*=cover-]){background:var(--n2)}
.reel .cover img,.reel .cover video.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel .cover video.pv{z-index:1}
.reel .cover .scrim-b{position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);transition:opacity .2s var(--ease-out);z-index:2}
.reel .cover.held .scrim-b{opacity:.55}
.reel .cover .playring{position:absolute;left:50%;top:50%;margin:-12px 0 0 -12px;transition:opacity .12s var(--ease-out);z-index:2}
.reel .cover.held .playring{opacity:0}
.reel .cover .tplate{z-index:2}
.reel .cover .band{position:absolute;left:20px;right:20px;top:88px;height:56px}
.reel .cover .band svg{width:100%;height:56px;display:block;opacity:.7}
.reel .cover .playhead{position:absolute;left:20px;top:88px;width:1px;height:56px;background:var(--n12)}
.page156{width:120px;height:156px;border-radius:3px;background:linear-gradient(180deg,#dedcd6 0%,#cfcdc7 100%);box-shadow:0 1px 2px rgba(0,0,0,.35);position:relative}
.page156 i{position:absolute;background:#b4b1aa;border-radius:1px}
.reel .cover .page156{position:absolute;left:50%;top:50%;margin:-78px 0 0 -60px;transition:transform .3s var(--ease-out)}
.reel .cover[data-kind=image]{transition:transform .3s var(--ease-out)}
.reel .cover[data-kind=image].held,.reel .cover[data-kind=file].held .page156{transform:scale(1.04)}
.ccap{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gutter)}
.ccap .t{color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ccap .f{color:var(--n11);flex:none;font-feature-settings:"tnum"}
.reel .cover.making .stills{position:absolute;inset:0}
.reel .cover.making .stills img{opacity:0;transition:opacity .32s var(--ease-out)}
.reel .cover.making .stills img.on{opacity:1}
.reel .cover.making .mscrim{position:absolute;inset:0;background:rgba(12,12,13,.45)}
.reel .cover.making .mlens{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:1}
.reel .cover.making .mlens .lens{position:absolute;left:6px;top:6px}
.cine-sheet .scover{position:relative;margin:0 calc(-1*var(--gutter));overflow:hidden;display:grid;place-items:center;cursor:pointer}
.cine-sheet .scover:not([class*=cover-]){background:var(--n2)}
.cine-sheet .scover img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cine-sheet .scover video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.cine-sheet .scover .playring{position:absolute;left:50%;top:50%;margin:-12px 0 0 -12px;opacity:0;transition:opacity .12s var(--ease-out)}
.cine-sheet .scover.paused .playring{opacity:1}
.cine-sheet .scover .band{position:absolute;left:20px;right:20px;top:52px;height:56px}
.cine-sheet .scover .band svg{width:100%;height:56px;opacity:.7}
.cine-sheet .timeline{height:44px;display:flex;align-items:center;margin-top:12px;position:relative;touch-action:none}
.cine-sheet .timeline .pp{width:44px;height:44px;border:0;background:transparent;padding:0;color:var(--n12);display:grid;place-items:center;cursor:pointer}
.cine-sheet .timeline .pp svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cine-sheet .timeline .line{position:relative;flex:1;height:1px;background:var(--n8);margin-left:8px}
.cine-sheet .timeline .played{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--n12);transform-origin:0 0;transform:scaleX(0)}
.cine-sheet .timeline .head{position:absolute;left:0;top:-6px;width:1px;height:12px;background:var(--n12)}
.cine-sheet .timeline .tl,.cine-sheet .timeline .tr{position:absolute;top:30px;color:var(--n11);font-feature-settings:"tnum"}
.cine-sheet .timeline .tl{left:52px}
.cine-sheet .timeline .tr{right:0}
.cine-sheet .scap{padding:0;margin-top:12px}
.cine-sheet .scap .t{outline:0;min-width:40px;cursor:text}
.cine-sheet .sline{margin-top:8px;color:var(--n11);display:flex;align-items:center;flex-wrap:wrap}
.cine-sheet .sline .proj{border:0;background:transparent;padding:0;min-height:44px;color:var(--n12);cursor:pointer}
.cine-sheet .tcs{display:flex;justify-content:flex-end;gap:24px;margin-top:16px}
/* Daily (§2.19): the date in daily-head, the day line, the prose in daily-body, the drawn rows */
.flow>.daily{position:relative}
.daily .daily-head-row{display:flex;align-items:center;justify-content:space-between;margin-top:24px;height:34px}
.daily .daily-head{font:500 28px/34px var(--serif);letter-spacing:-.01em;color:var(--n12);margin:0}
.daily .wslot{width:16px;height:16px;flex:none;display:grid;place-items:center}
.daily .dayline{margin-top:16px}
.daily .prose{margin-top:20px;cursor:text;min-height:48px}
.daily .daily-body{font:400 18px/28px var(--serif);color:var(--n12);margin:0 0 8px;word-wrap:break-word;overflow-wrap:anywhere}
.daily .daily-body.meta{color:var(--n11)}
.daily .title.dh{margin:24px 0 8px}
.daily .drow{display:flex;align-items:flex-start;gap:12px;min-height:36px;margin:0}
.daily .drow .tbox{width:36px;height:36px;margin-left:-10px;border:0;background:transparent;padding:0;display:grid;place-items:center;flex:none;cursor:pointer}
.daily .drow .daily-body{margin:4px 0}
.daily .drow .bul{width:4px;height:4px;border-radius:50%;background:var(--n8);margin:12px 0 0 6px;flex:none}
.daily .srule,.daily .filerow{position:relative;left:auto;width:auto;margin-top:4px}
.daily .filerow.tap{cursor:pointer}
.daily .ins{display:grid;grid-template-rows:0fr;contain:layout}
.daily .ins-in{min-height:0;overflow:hidden}
.daily .daily-body a,.daily .daily-body .wikilink,.daily .title a,.daily .title .wikilink{color:var(--n12);text-decoration:underline;text-decoration-color:var(--n8);text-decoration-thickness:1px;text-underline-offset:3px}
.daily-edit{font:400 18px/28px var(--serif)}
.hdr .title.path{font:400 13px/18px var(--mono);color:var(--n11);top:18px}
.margin-body .rrow.mrow{position:relative;left:auto;top:auto;width:auto}
@media (min-width:1024px){
  .daily{width:560px;max-width:100%;margin:0 auto}
  .daily .daily-head{font-size:34px;line-height:40px}
  .daily .daily-body{font-size:19px;line-height:30px}
}
@media print{
  :root{color-scheme:light}
  html,body,#app,.screen,.screen>.scroll{position:static;overflow:visible;height:auto;background:#fff}
  .daily{background:#fff;color:#1a1a1a}
  .daily .daily-head{font-size:22pt;line-height:26pt;color:#1a1a1a}
  .daily .daily-body{font-size:11.5pt;line-height:17pt;color:#1a1a1a}
  .daily .title{font-size:14pt;line-height:18pt;color:#1a1a1a}
  .daily .dayline .ln{background:#1a1a1a}
  .daily .dayline .dot,.daily .dayline .sched{background:#1a1a1a;border-color:#1a1a1a}
  .daily .dayline .now{display:none}
  .daily .dayline .hh{color:#1a1a1a}
  .daily .srule,.daily .filerow{border-color:#c8c8c8;color:#1a1a1a}
  .daily .srule .t,.daily .srule .tm,.daily .filerow .p{color:#1a1a1a}
  .daily .xxs.idle{border-color:#1a1a1a}
  .daily .xxs.done{color:#1a1a1a}
  .daily a[href],.daily .wikilink,.daily .daily-body a,.daily .daily-body .wikilink,.daily .title a,.daily .title .wikilink{color:#1a1a1a;text-decoration:underline;text-decoration-color:#8a8a8a}
  .hdr,.capsule,.edge-top,.edge-bottom,.margin,.margin-body,.col-l,.col-r,.rail,.pill,.haze{display:none!important}
  .daily::after{content:attr(data-path);font:9pt/12pt var(--mono);color:#777;display:block;margin-top:18mm}
  @page{size:A4;margin:22mm 24mm}
}

/* ----------------------------------------------------------------------
   round three · the thread team (spec-round3 §2.20–2.27): the brief as
   Main's first turn, the chips, Show me, the cost on the fold, the
   aurora, the fold scrubber. The keyframes are motion.css's.
   ---------------------------------------------------------------------- */
/* the stand-ins thread-motion.js reaches for by class */
.r3-pre{opacity:0}
.r3-enter{animation:mo-enter var(--t-in) var(--ease-out) both}
.r3-pop{animation:mo-pop var(--t-pop) var(--spring-pop) both}
.r3-leave{opacity:0!important;transition:opacity var(--t-press) var(--ease-in)}
.r3-holding{transform:scale(1.12);transition:transform 350ms linear}
.r3-reserve{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-grow) var(--ease-out)}
.r3-reserve.open{grid-template-rows:1fr}
.r3-reserve>*{min-height:0;overflow:hidden}
/* Main · brief (§2.20): the haze rides up with the Lens by transform; the door line, the hero slot, the lines, the day line, the rows, the receipts */
.screen>.haze{transition:transform var(--t-fly) var(--ease-move)}
.screen>.haze.up{transform:translateY(-122px)}
.rblock.brief>.bdoor{display:inline-flex;align-items:center;gap:6px;color:var(--n11);margin:24px 0 0 16px;height:18px}
.rblock.brief>.bdoor svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bhero{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--t-grow) var(--ease-out),opacity var(--t-grow) var(--ease-in)}
.bhero.collapsed{grid-template-rows:0fr;opacity:0}
.bhero-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:8px}
.bhero .lens{view-transition-name:lens;will-change:transform;cursor:pointer}
.bhero .greeting{margin-top:16px;text-align:center}
.bhero .brainline{margin-top:8px;display:flex;justify-content:center}
.rblock.brief>.blines{margin-top:16px}
.rblock.brief>.blines.tap{cursor:pointer}
.rblock.brief>.blines .btext{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rblock.brief.expanded>.blines .btext{-webkit-line-clamp:unset;overflow:visible}
.rblock.brief>.blines .bmore{display:inline-block;margin-top:4px;font:500 13px/18px var(--ui);color:var(--n12);text-decoration:underline;text-underline-offset:2px}
.rblock.brief>.dayline{display:block;width:100%;height:44px;margin-top:8px;overflow:visible}
.dayline .base{stroke:var(--n6);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease-move)}
.dayline.undrawn .base{stroke-dashoffset:1}
.dayline .now{stroke:var(--n12);stroke-width:1.5}
.dayline .sched{fill:none;stroke:var(--n11);stroke-width:1.5}
.dayline .done{fill:var(--n11)}
.dayline .done.fail{fill:var(--fail)}
.dayline circle,.dayline .now{transition:opacity var(--t-in) var(--ease-out);transition-delay:var(--d,0ms)}
.dayline.undrawn circle,.dayline.undrawn .now{opacity:0}
.rblock.brief>.brows{margin-top:8px}
.rblock.brief .brows>.rrow{position:relative;left:auto;width:auto;cursor:pointer}
.rblock.brief .brows .cap{margin-left:8px}
.rblock.brief .brows .m svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rblock.brief>.breceipts{margin-top:8px}
.rblock.brief .breceipts>.srule{position:relative;left:auto;width:auto;margin-top:0}
.rblock.brief .breceipts>.srule.tap{cursor:pointer}
.rblock.brief>.fold{margin-top:0}
.rblock.brief>.chips{margin-top:4px}
/* the chips (§2.21): 36 in a 44 row, n3, no border, radius 18; the third dropped first when the row is full */
.chips{display:flex;align-items:center;gap:8px;height:44px;margin-top:16px;overflow:hidden;white-space:nowrap}
.chip{height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--n3);color:var(--n12);font:500 15px/20px var(--ui);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;cursor:pointer;touch-action:manipulation;transition:transform var(--t-press) var(--ease-out),background var(--t-fade)}
.chip:active{background:var(--n4);transform:scale(.97)}
.chips.gone{opacity:0;transition:opacity var(--t-x) var(--ease-in)}
/* the cost (§2.25): on the fold after the time, on the ledger's foot at the right, in the title menu */
.fold .c{font:400 13px/18px var(--mono);color:var(--n11);white-space:pre;font-feature-settings:"tnum"}
.strip.foot.paid .mach{margin-left:0}
.strip.foot.paid .c{margin-left:auto;font:400 13px/18px var(--mono);color:var(--n11)}
.menu240 .mi.cost-row>span:not(.r){font:400 13px/18px var(--mono);color:var(--n12)}
.menu240 .mi.cost-row .r{margin-left:8px;font:500 15px/20px var(--ui);color:var(--n11)}
/* the fold scrubber (§2.27): the playhead under the glyphs, the nearest glyph n12, the reserved frame with the n8 state line, the n4 row */
.fold{position:relative;touch-action:pan-y}
.fold.scrub .ic{color:var(--n11)}
.fold.scrub .ic.cur{color:var(--n12)}
.fold .playhead{position:absolute;left:7.5px;top:34px;width:1px;height:20px;background:var(--n12);pointer-events:none}
.fold .playhead.snap{transition:transform var(--t-snap) var(--spring-snap)}
.fold.dragging .playhead{transition:none}
.scrub-slot{margin-top:8px}
.scrub-slot>.scrub-frame{position:relative;left:auto;width:auto;box-shadow:inset 0 0 0 1px var(--n8);background:var(--n2)}
.scrub-frame img.stream{opacity:0;transition:opacity var(--t-fade) var(--ease-out);display:block!important}
.scrub-frame img.stream.on{opacity:1}
.scrub-frame .plate i{animation:none;background:var(--n8)}
.scrub-frame .ptr{display:none}
.ledger>.lrow{transition:background var(--t-fade)}
.ledger>.lrow.cur-step{background:var(--n4);border-radius:8px;transition:none}
/* Show me (§2.22–2.23): the control on the bar, the rows walk, the frames walk, the plan and the rows */
.pinned .showme{position:absolute;left:120px;top:0;height:44px;width:112px;padding-left:12px;justify-content:flex-start;color:var(--n11)}
.ticket-inline .foot .showme{margin-right:auto;color:var(--n11);white-space:nowrap}
.form-facts .frow.lit .mono:first-child{color:var(--n12)}
.form-facts .frow.blank .n12{border-bottom:1px solid var(--n8);min-width:80px;min-height:18px}
.form-facts .showme-frame{position:relative;left:auto;width:100%;height:auto;aspect-ratio:350/197;margin-bottom:8px;box-shadow:inset 0 0 0 1px var(--n8)}
.form-facts .showme-frame[data-state=asking]{box-shadow:inset 0 0 0 1.5px rgba(220,179,107,.55),inset 0 0 24px rgba(220,179,107,.16)}
.showme-frame .plate i{animation:none;background:var(--n8)}
.showme-frame[data-state=asking] .plate i{background:var(--ask)}
.showme-frame .ptr.big{transform:scale(1.67)}
.stop-row{height:44px;display:flex;align-items:center;gap:12px;margin-top:12px}
.stop-row .xxs{flex:none}
.dryrun{margin-top:12px}
.dryrun>.lrow{position:relative;left:auto;width:auto}
.dryrun>.lrow.queued .tile{color:var(--n10)}
.dryrun>.filerow{position:relative;left:auto;width:auto;margin-top:4px}
.dryrun .plan-foot{height:24px;display:flex;align-items:center;color:var(--n11)}
.form-facts .contact{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}
.form-facts .contact img{width:100%;aspect-ratio:175/98;object-fit:cover;border-radius:6px;border:1px solid var(--n7)}
/* the aurora (§2.26): the veils and the hot end of the rim drift within the teal family by the hour, stepped once a minute; the haze and the satellite hold their literals */
@property --hue-shift{syntax:'<number>';inherits:true;initial-value:0}
.lens{--veil-b:oklch(from #4fe7d2 l c calc(h + var(--hue-shift,0)));--veil-a:oklch(from #0d6f66 l c calc(h + var(--hue-shift,0)));--rim-hot:oklch(from #b9f6ee l c calc(h + var(--hue-shift,0)))}
.lens[data-state=waiting],.lens[data-state=failed]{--hue-shift:0}
.lens .sat{background:#4fe7d2}
@supports not (color:oklch(from red l c h)){.lens{--veil-b:var(--au-veil-b,#4fe7d2);--veil-a:var(--au-veil-a,#0d6f66);--rim-hot:var(--au-rim-hot,#b9f6ee)}}

/* Lists in a container of their own (screens/psych.js, screens/company.js): the rows flow, not stacked. */
.flow>.rows .rrow,.flow>.rows .hrow{position:relative;left:auto;right:auto;top:auto;width:auto}

/* The company (screens/company.js): the issue board, an issue, the org chart. */
.co-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}.co-bar .btn{height:36px;padding:0 14px;font-size:14px}
.co-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:var(--n4);color:var(--n12);font:400 13px/18px var(--ui);cursor:pointer;border:0}
.co-chip.on{background:var(--n6);box-shadow:inset 0 0 0 1px var(--n8)}
.co-group{display:flex;align-items:center;gap:8px;margin:20px 0 4px;font:600 12px/16px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--n12);cursor:pointer;user-select:none}
.co-group .cnt{color:var(--n11);font-weight:400;letter-spacing:0}
.co-group svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s}
.co-group.shut svg{transform:rotate(-90deg)}
.co-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px;border-bottom:1px solid var(--n6);cursor:pointer;border-radius:4px}
.co-row:hover{background:var(--n3)}
.co-st{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--n11);flex:none;box-sizing:border-box}
.co-st.working{border-color:var(--ask)}.co-st.blocked{border-color:var(--fail)}.co-st.needs_you{border-color:var(--n12)}.co-st.done{background:var(--n10);border-color:var(--n10)}
.co-key{font:400 13px/18px var(--mono);color:var(--n11);flex:none}
.co-title{flex:1;min-width:0;font:500 15px/20px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-who{display:inline-flex;align-items:center;gap:6px;font:400 13px/18px var(--ui);color:var(--n11);flex:none;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-av{width:20px;height:20px;border-radius:50%;background:var(--n5);color:var(--n12);font:500 9px/20px var(--ui);text-align:center;flex:none}
.co-live{font:500 11px/16px var(--ui);color:var(--ask);flex:none}
.co-date{font:400 12px/18px var(--mono);color:var(--n11);flex:none;width:80px;text-align:right}
@media (max-width:600px){.co-row .co-who,.co-row .co-date{display:none}}
.co-h1{font:600 22px/28px var(--ui);color:var(--n12);margin:6px 0 12px;cursor:text}
.co-sub{display:flex;align-items:center;gap:8px;font:400 13px/18px var(--mono);color:var(--n11);margin-top:12px}
.co-issue{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:48px}
.co-desc{white-space:pre-wrap;font:400 15px/22px var(--ui);color:var(--n12);background:var(--n3);border-radius:8px;padding:12px 14px;min-height:44px;cursor:text}
.co-desc.empty{color:var(--n11)}
.co-h2{font:600 14px/20px var(--ui);color:var(--n12);margin:24px 0 8px}
.co-props{border:1px solid var(--n6);border-radius:8px;padding:8px 16px;margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px}
@media (min-width:560px){.co-props{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.co-prop{display:flex;align-items:center;min-height:36px;font:400 14px/20px var(--ui);gap:8px}
.co-prop .k{width:84px;color:var(--n11);flex:none}
.co-prop .v{color:var(--n12);display:inline-flex;align-items:center;gap:6px;min-width:0}
.co-prop .v.act{cursor:pointer}
.co-run{border:1px solid var(--n8);border-radius:8px;padding:10px 12px;margin-top:16px}
.co-run .hd{display:flex;align-items:center;gap:8px;font:500 13px/18px var(--ui);color:var(--n12)}
.co-run .hd .sp{flex:1}
.co-run .lines{margin-top:8px;font:400 12px/18px var(--mono);color:var(--n11);white-space:pre-wrap;max-height:220px;overflow:auto}.co-turn{border:1px solid var(--ask);border-radius:8px;padding:12px 14px;margin-top:16px}.co-turn .hd{font:600 14px/20px var(--ui);color:var(--n12)}.co-turn .bd{margin-top:8px;font:400 14px/20px var(--ui);color:var(--n12);white-space:pre-wrap;max-height:260px;overflow:auto}.co-turn .who{font:500 12px/16px var(--ui);color:var(--n11);margin-bottom:4px}.co-preview iframe{display:block;width:100%;height:480px;margin-top:10px;border:1px solid var(--n6);border-radius:6px;background:#fff}.co-open{font:500 13px/18px var(--ui);color:var(--n12);text-decoration:none}.co-pick{max-width:60%;min-width:0;background:var(--n3);color:var(--n12);border:1px solid var(--n7);border-radius:6px;font:400 12px/16px var(--mono);padding:4px 6px}.co-hint{padding:0 0 6px 4px}
.co-diff{margin:0;font:400 12px/18px var(--mono);color:var(--n12);white-space:pre;overflow:auto;max-height:70vh}
.co-comment{border:1px solid var(--n6);border-radius:8px;padding:10px 12px;margin:8px 0}
.co-comment .hd{display:flex;justify-content:space-between;gap:8px;font:400 12px/16px var(--ui);color:var(--n11);margin-bottom:4px}
.co-comment .bd{white-space:pre-wrap;font:400 14px/20px var(--ui);color:var(--n12)}
.co-compose textarea,.co-area{width:100%;box-sizing:border-box;min-height:88px;resize:vertical;border:1px solid var(--n7);border-radius:8px;background:var(--n2);color:var(--n12);font:400 15px/22px var(--ui);padding:10px 12px;outline:0}
.co-compose{margin-top:8px;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.co-event{font:400 13px/20px var(--ui);color:var(--n11)}
.co-org{position:relative;overflow:auto;border:1px solid var(--n6);border-radius:8px;background:var(--n2);margin:12px 0 48px;min-height:320px}
.co-org .co-canvas{position:relative}
.co-org svg.co-lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.co-org svg.co-lines path{fill:none;stroke:var(--n8);stroke-width:1}
.co-node{position:absolute;width:176px;height:72px;box-sizing:border-box;padding:10px 12px;border:1px solid var(--n7);border-radius:8px;background:var(--n3);display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.co-node:hover{border-color:var(--n8)}
.co-node .gl{position:relative;width:28px;height:28px;border-radius:50%;background:var(--n5);display:grid;place-items:center;flex:none;color:var(--n12)}
.co-node .gl svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.co-node .dot{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--n8);border:2px solid var(--n3)}
.co-node .dot.on{background:var(--n11)}.co-node .dot.running{background:var(--ask)}
.co-node .tx{min-width:0;display:flex;flex-direction:column}
.co-node .t{font:600 13px/17px var(--ui);color:var(--n12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-node .r{font:400 11px/14px var(--ui);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-node .b{font:400 10px/14px var(--mono);color:var(--n10);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Memory - the spaces tab (screens/memory.js): the list (a space under its root indented, a colour dot), the drop zone, the notice line, the settings notes, a document's passages in the sheet and the one a citation opened, the spaces beside a space in the desktop margin. */
.flow>.mem-list .rrow,.flow>.mem-list .hrow,.mem-side .rrow{position:relative;left:auto;right:auto;top:auto;width:auto}
.mem-list .rrow.mem-child{padding-left:28px}
.mem-dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--n8)}
.mem-docs{min-height:120px;border:1px dashed transparent;border-radius:12px;transition:background .15s}
.mem-docs.mem-drop{border-color:var(--n6);background:var(--n2)}
.mem-notice{padding:8px 0 0}
.mem-confirm{margin:10px 0;padding:12px 14px;border:1px solid var(--n6);border-radius:10px}
.mem-confirm .co-k{font:600 15px/22px var(--ui);color:var(--n12)}
.mem-confirm .meta{margin-top:2px}
.mem-confirm .tcs{margin-top:10px;display:flex;gap:18px;justify-content:flex-start}
.mem-note{padding:4px 0 12px}
.mem-chunk{margin:12px 0;padding:12px 14px;border:1px solid var(--n6);border-radius:8px}
.mem-chunk .body{margin-top:6px;white-space:pre-wrap}
.mem-chunk.mem-hit{background:var(--n3);border-color:var(--n8)}
.mem-side .rrow{cursor:pointer}
.mem-side .rrow.cur{background:var(--n3);border-radius:8px}
.sheet .sc>.rrow.mem-child{padding-left:28px}
.hero .spaceline{margin-top:12px;text-align:center}

/* The live meeting assistant (screens/meeting.js): setup form, the live
   suggestion card, and the running transcript. Teal is reserved, so the accent
   here is --ask (amber); the Start button alone is the affirmative .btn-yes. */
.meeting-wrap{padding:16px 0 24px}
.meeting-label{display:block;font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--n11);margin:14px 0 6px}
.meeting-input{width:100%;box-sizing:border-box;background:var(--n2);border:1px solid var(--n7);border-radius:10px;padding:12px;color:var(--n12);font:400 15px/20px var(--ui)}
.meeting-input:focus{outline:none;border-color:var(--n8)}
.meeting-check{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--n11);font:400 14px/18px var(--ui)}
.meeting-err{color:var(--fail);font:400 13px/18px var(--ui);margin-top:8px}
.meeting-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0 10px}
.meeting-dot{width:8px;height:8px;border-radius:50%;background:var(--n8);flex:none}
.meeting-dot.on{background:var(--ask);box-shadow:0 0 0 4px color-mix(in srgb, var(--ask) 20%, transparent)}
.meeting-card{background:var(--n2);border:1px solid var(--n7);border-radius:12px;padding:14px;margin-top:12px}
.meeting-card.sug{border-color:color-mix(in srgb, var(--ask) 40%, var(--n7))}
.meeting-sug-label{font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ask);margin-bottom:8px}
.meeting-move{font:600 17px/1.35 var(--ui);color:var(--n12)}
.meeting-why{margin-top:6px}
.meeting-read{margin-top:10px;font:italic 400 13px/1.4 var(--ui);color:var(--n11)}
.meeting-say-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.meeting-flags{margin-bottom:10px;padding:8px 10px;border-radius:9px;background:color-mix(in srgb, var(--fail) 12%, transparent);border:1px solid color-mix(in srgb, var(--fail) 35%, transparent)}
.meeting-flag{display:flex;gap:8px;align-items:flex-start;font:500 13px/1.4 var(--ui);color:var(--n12)}
.meeting-flag+.meeting-flag{margin-top:5px}
.meeting-flag-dot{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--fail)}
.meeting-say{background:var(--n1);border:1px solid var(--n7);border-radius:10px;padding:8px 12px;color:var(--n12);font:400 13.5px/1.3 var(--ui);cursor:pointer;text-align:left}
.meeting-say:hover{border-color:var(--n8)}
.meeting-next{margin:8px 0 0;padding-left:18px;color:var(--n12);font:400 14px/1.45 var(--ui)}
.meeting-transcript{max-height:46vh;overflow-y:auto;padding:10px 12px}
.meeting-line{display:flex;gap:8px;align-items:baseline;padding:3px 0;font:400 14px/1.4 var(--ui);color:var(--n12)}
.meeting-at{color:var(--n10);font-size:12px;flex:none}
.meeting-who{font-weight:600;flex:none}
.meeting-who.me{color:var(--n11)}
.meeting-who.them{color:var(--ask)}
.meeting-text{flex:1;min-width:0}
.meeting-bar{display:flex;gap:10px;margin-top:14px}
.meeting-bar .btn{flex:1}
.meeting-end{color:var(--fail)}

/* The fiduciary watch on the web (screens/attention.js): deadlines coming due
   and where records disagree, each with an inline draft. Tones use --fail/--ask
   (teal stays reserved); the Copy button alone is the affirmative .btn-yes. */
.att-wrap{padding:8px 0 28px}
.att-head{font:600 13px/1 var(--ui);letter-spacing:.3px;color:var(--n12);margin:16px 0 8px}
.att-space{color:var(--n11);font:600 12px/1 var(--ui);margin:10px 0 4px}
.att-card{background:var(--n2);border:1px solid var(--n7);border-radius:12px;padding:14px;margin-bottom:8px}
.att-row{display:flex;align-items:center;gap:8px}
.att-key{flex:1;min-width:0;font:600 15px/1.3 var(--ui);color:var(--n12)}
.att-val{margin-top:4px;font:400 14px/1.4 var(--ui);color:var(--n12)}
.att-quote{margin-top:6px;font:italic 400 12px/1.4 var(--ui);color:var(--n11)}
.att-badge{flex:none;padding:3px 8px;border-radius:8px;font:600 12px/1 var(--ui)}
.att-badge.fail{color:var(--fail);background:color-mix(in srgb, var(--fail) 15%, transparent)}
.att-badge.ask{color:var(--ask);background:color-mix(in srgb, var(--ask) 15%, transparent)}
.att-badge.dim{color:var(--n11);background:var(--n4)}
.att-dot{width:8px;height:8px;border-radius:50%;flex:none}
.att-dot.fail{background:var(--fail)}
.att-dot.ask{background:var(--ask)}
.att-dot.dim{background:var(--n8)}
.att-side{margin-top:8px;padding-left:12px;border-left:2px solid var(--n6)}
.att-side-val{font:500 14px/1.3 var(--ui);color:var(--n12)}
.att-bar{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.att-draft-btn{background:transparent;border:1px solid var(--n7);color:var(--n11);border-radius:9px;padding:7px 12px;font:500 13px/1 var(--ui);cursor:pointer}
.att-draft-btn:hover{border-color:var(--n8);color:var(--n12)}
.att-intent{background:var(--n3);border:1px solid var(--n7);color:var(--n12);border-radius:9px;padding:7px 12px;font:500 13px/1 var(--ui);cursor:pointer}
.att-intent:hover{border-color:var(--n8)}
.att-draft:empty{display:none}
.att-drafted{margin-top:10px;background:var(--n1);border:1px solid var(--n6);border-radius:10px;padding:12px}
.att-draft-sub{font:600 14px/1.4 var(--ui);color:var(--n12);margin-bottom:8px}
.att-draft-body{font:400 14px/1.5 var(--ui);color:var(--n12);white-space:pre-wrap}
.att-draft-foot{display:flex;align-items:center;gap:12px;margin-top:12px}
.att-err{color:var(--fail);font:400 13px/1.4 var(--ui);padding:8px 0}
/* The calibration scorecard (screens/calibration.js): the stats header, source breakdown, settle and log forms. */
.att-badge.ok{color:var(--ok);background:color-mix(in srgb, var(--ok) 15%, transparent)}
.cal-score{padding:16px}
.cal-stats{display:flex;gap:10px}
.cal-stat{flex:1;min-width:0;text-align:center}
.cal-stat-big{font:600 26px/1 var(--ui);color:var(--n12)}
.cal-stat-label{margin-top:6px;font:600 12px/1 var(--ui);letter-spacing:.3px;color:var(--n11)}
.cal-sources{margin-top:14px;padding-top:12px;border-top:1px solid var(--n7);display:flex;flex-direction:column;gap:6px}
.cal-src{display:flex;justify-content:space-between;font:400 13px/1.3 var(--ui);color:var(--n11)}
.cal-src-name{color:var(--n12)}
.cal-src-rate{font-variant-numeric:tabular-nums}
.cal-input{width:100%;background:var(--n1);border:1px solid var(--n7);border-radius:9px;padding:9px 11px;font:400 14px/1.4 var(--ui);color:var(--n12);box-sizing:border-box}
.cal-input:focus{outline:none;border-color:var(--n8)}
.cal-narrow{width:auto;flex:1;min-width:0}
.cal-settle{margin-top:10px;display:flex;gap:8px;align-items:center}
.cal-settle .cal-input{flex:1}
.cal-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.cal-form-row{display:flex;gap:8px}
/* Counsel (screens/counsel.js): the mode tabs, the fields and the structured answer. */
.cns-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.cns-tab{background:transparent;border:1px solid var(--n7);color:var(--n11);border-radius:9px;padding:7px 12px;font:500 13px/1 var(--ui);cursor:pointer}
.cns-tab:hover{border-color:var(--n8);color:var(--n12)}
.cns-tab.on{background:var(--n3);border-color:var(--n8);color:var(--n12)}
.cns-field{display:block;margin-top:8px}
.cns-result{margin-top:14px}
.cns-result .att-head:first-child{margin-top:0}
.cns-block{margin-bottom:12px}
.cns-body{font:400 14px/1.5 var(--ui);color:var(--n12);white-space:pre-wrap}
.cns-list{margin:2px 0 0;padding-left:18px;font:400 14px/1.5 var(--ui);color:var(--n12)}
.cns-list li{margin-bottom:4px}
.cns-script{margin:2px 0 0;padding:12px;background:var(--n1);border:1px solid var(--n6);border-radius:10px;font:400 13px/1.5 var(--ui);color:var(--n12);white-space:pre-wrap;overflow-x:auto}
.cns-reply{margin-top:2px;padding:12px;background:var(--n1);border:1px solid var(--n6);border-radius:10px;font:400 14px/1.5 var(--ui);color:var(--n12);white-space:pre-wrap}
.cns-voice{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
/* OpsHub (screens/opshub.js): the group's hub, read through Martin */
.ops .tabs{position:static;width:auto;height:auto;margin:14px 0 6px}
.ops-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.ops-chip{background:transparent;border:1px solid var(--n7);color:var(--n11);border-radius:14px;padding:6px 11px;font:500 12px/1 var(--ui);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ops-chip.on{border-color:var(--n10);color:var(--n12);background:var(--n4)}
.ops-card{cursor:pointer}
.ops-card.red,.ops-alert{border-color:color-mix(in srgb, var(--fail) 40%, var(--n7))}
.ops-line{margin-top:4px;font:400 13px/1.4 var(--ui);color:var(--n11)}
.ops-line.bad,.ops-neg{color:var(--fail)!important}
.ops-line.warn{color:var(--ask)}
.ops-why{margin-top:6px;font:400 12.5px/1.45 var(--ui);color:var(--n11)}
.ops-why.fail{color:var(--fail)}
.ops-why.ask{color:var(--ask)}
.ops-due{display:flex;gap:12px;align-items:flex-start}
.ops-date{flex:none;width:88px;font:600 13px/1.4 var(--ui);color:var(--n12)}
.ops-date.bad{color:var(--fail)}
.ops-date.warn{color:var(--ask)}
.ops-kv{display:flex;gap:12px;padding:5px 0;font:400 14px/1.4 var(--ui)}
.ops-kv>span:first-child{flex:none;width:170px;color:var(--n11)}
.ops-kv>span:last-child{flex:1;min-width:0;color:var(--n12);font-weight:600}
.att-dot.ok{background:var(--ok)}
/* Desks (screens/desks.js): every C-suite desk, each opening to its tools */
.dsk{padding:0;overflow:hidden}
.dsk-head{display:flex;align-items:center;gap:10px;width:100%;padding:14px;background:transparent;border:0;color:var(--n12);cursor:pointer;text-align:left}
.dsk-title{font:600 15px/1.2 var(--ui);flex:none}
.dsk-about{flex:1;min-width:0;font:400 13px/1.3 var(--ui);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsk-count{flex:none;font:500 12px/1 var(--ui);color:var(--n11);background:var(--n4);border-radius:8px;padding:3px 7px}
.dsk-head svg,.dsk-row svg,.dsk-more svg{flex:none;fill:none;stroke:var(--n11);stroke-width:1.5}
.dsk-body{border-top:1px solid var(--n6);padding:4px 0 6px}
.dsk-line{display:flex;align-items:stretch}
.dsk-row{display:flex;align-items:center;gap:10px;flex:1;min-width:0;width:100%;box-sizing:border-box;padding:10px 14px;background:transparent;border:0;color:var(--n12);cursor:pointer;text-align:left}
.dsk-row:hover,.dsk-head:hover,.dsk-more:hover{background:var(--n3)}
.dsk-word{flex:none;font:500 14px/1.3 var(--ui)}
.dsk-meta{flex:1;min-width:0;font:400 12.5px/1.3 var(--ui);color:var(--n11);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsk-more{flex:none;display:flex;align-items:center;gap:6px;padding:0 14px;background:transparent;border:0;border-left:1px solid var(--n6);color:var(--n11);font:500 12px/1 var(--ui);cursor:pointer}
.dsk-more.on{color:var(--n12)}
.dsk-nest{padding:2px 0 6px 18px;border-left:2px solid var(--n6);margin:2px 0 4px 14px}
.dsk-sub{padding:8px 12px}
.dsk-sub .dsk-word{flex:1;font-weight:400;font-size:13.5px;color:var(--n12)}
/* Earned autonomy (screens/autonomy.js): a learning kind's lower bound climbing toward the bar; on a waiting ticket (thread-ticket.js), the line saying when Martin does it himself, with Stop, or why he held it for you. */
.aut-meter{margin-top:10px;height:6px;border-radius:3px;background:var(--n4);overflow:hidden}
.aut-meter>i{display:block;height:100%;border-radius:3px;background:var(--n10)}
.ticket .aut{position:absolute;left:80px;width:254px;min-height:36px;display:flex;align-items:center;gap:8px;z-index:1;font:400 12.5px/1.35 var(--ui);color:var(--ask)}
.ticket .aut.held{color:var(--n11)}
.ticket .aut>span{flex:1;min-width:0}
.ticket .aut .att-draft-btn{flex:none}
@media (min-width:1024px){.rblock .cards>.ticket .aut{width:calc(100% - 96px)}}