/* Fanout: a quiet control room for one bright idea, a line that splits. Cold ink ground, one iris accent, hairlines and soft glass. Geist, self-hosted, SIL OFL (fonts/OFL.txt). */
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#07080C;--text:#F0F1F6;--soft:#C4C8D6;--dim:#9299AD;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);--glass:rgba(255,255,255,.035);--glass2:rgba(255,255,255,.07);
 --iris:#A9B6FF;--ok:#8FE3C0;--sun:#F0CB92;--bad:#FF929A;
 --r0:#A9B6FF;--r1:#8FD8EA;--r2:#EEF0F7;--r3:#CDB6FF;--r4:#7C93F2;
 --read:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.55 var(--read);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(760px 460px at 72% -8%,rgba(122,140,255,.14),transparent 70%)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.1}
h2{font-size:30px}
h3{font-size:18px;margin-top:24px;letter-spacing:-.015em}
p{margin:8px 0}
a{color:var(--text);text-decoration-color:var(--line2);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
.dim{color:var(--dim);font-size:14.5px}
.err{margin:12px 0;padding:10px 14px;background:rgba(255,146,154,.08);border:1px solid rgba(255,146,154,.3);border-radius:12px;color:var(--bad);font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--iris);outline-offset:3px;border-radius:6px}
button:focus-visible,.go:focus-visible,.ghost:focus-visible,.drop:focus-visible{border-radius:999px}
.drop:focus-visible{border-radius:18px}
summary:focus-visible{border-radius:10px}
label{display:block;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin:18px 0}
input[type=email],input[type=password],textarea{display:block;width:100%;margin-top:8px;padding:14px 15px;background:var(--glass);border:1px solid var(--line2);border-radius:12px;font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--text);transition:border-color .2s,background .2s}
input[type=email]:focus,input[type=password]:focus,textarea:focus{outline:0;border-color:var(--iris);background:var(--glass2);box-shadow:0 0 0 3px rgba(169,182,255,.16)}
textarea{resize:vertical;min-height:124px}
::placeholder{color:var(--dim);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--iris);width:19px;height:19px;flex:none;margin:0}

.go{display:block;width:100%;min-height:52px;padding:12px 22px;background:var(--text);color:#0A0B10;border:0;border-radius:999px;font-weight:550;font-size:16px;letter-spacing:-.01em;cursor:pointer;text-align:center;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.go:hover{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 8px 36px -6px rgba(140,156,255,.5)}
.go:active{opacity:.86}
.go:disabled{background:var(--glass2);color:var(--dim);box-shadow:none;cursor:default}
.go.sm,.ghost.sm{display:inline-block;width:auto;min-height:44px;padding:6px 16px;font-size:14px}
.go.hot{background:var(--bad);color:#190A0C;box-shadow:none}
.go.hot:hover{background:#FFA9AF;box-shadow:0 8px 36px -8px rgba(255,146,154,.5)}
.ghost{min-height:46px;padding:9px 18px;background:var(--glass);border:1px solid var(--line2);border-radius:999px;color:var(--text);font-weight:500;letter-spacing:-.005em;cursor:pointer}
.ghost:hover{background:var(--glass2);border-color:rgba(255,255,255,.28)}
.ghost.danger{border-color:rgba(255,146,154,.4);color:var(--bad)}
.ghost.danger:hover{background:rgba(255,146,154,.1);border-color:var(--bad)}
.quiet{min-height:44px;padding:8px 0 8px 12px;background:none;border:0;color:var(--dim);font-size:13.5px;font-weight:500;cursor:pointer}
.quiet:hover{color:var(--text)}
/* working: the words give way to a small ring, the button keeps its size */
.busy{position:relative;color:transparent!important}
.busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--line2);border-top-color:var(--iris);border-radius:50%}
.link{display:block;min-height:44px;margin:14px auto 0;padding:10px;background:none;border:0;color:var(--soft);font-size:15px;font-weight:500;cursor:pointer}
.link:hover{color:#fff}

/* sign up: the line comes in from the edge and splits above the name */
.auth{position:relative;min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0 max(20px,env(safe-area-inset-right)) 40px max(20px,env(safe-area-inset-left));overflow:hidden}
.auth>*{position:relative;max-width:400px;margin-left:auto;margin-right:auto}
.auth .mark{position:static;display:block;width:calc(100% + 40px);max-width:none;height:190px;margin:0 -20px 18px}
.mark path{fill:none;stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(150,165,255,.6))}
.auth h1{font-size:52px;font-weight:500;letter-spacing:-.045em;line-height:1}
.lead{font-size:18px;line-height:1.4;color:var(--soft);margin:12px auto 26px}
.auth a{text-decoration-color:var(--dim)}
.auth .go{margin-top:22px}
.oauth{display:grid;gap:10px;margin-bottom:6px}
.agree{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--soft);line-height:1.45}
.agree input{margin-top:1px}

.main{padding:0 0 112px}
.top{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--line);font-size:17px;letter-spacing:-.025em}
.top b{font-weight:600}
.tab{max-width:640px;margin:0 auto;padding:32px max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.tabs{position:fixed;z-index:5;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));display:flex;gap:2px;max-width:460px;margin:0 auto;padding:5px;background:rgba(18,20,28,.72);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--line2);border-radius:999px;box-shadow:0 18px 50px -12px rgba(0,0,0,.8)}
.tabs button{flex:1;min-width:0;min-height:46px;padding:0 2px;background:none;border:0;border-radius:999px;color:var(--dim);font-weight:500;font-size:13.5px;letter-spacing:-.005em;cursor:pointer}
.tabs button:hover{color:var(--text)}
.tabs [aria-current]{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.notice{margin:0;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--glass);color:var(--soft);font-size:14.5px;text-align:center}

/* accounts: one panel, a hairline between apps */
.fan{list-style:none;margin:24px 0 28px;padding:0;background:var(--glass);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.app{padding:14px 18px 15px;border-top:1px solid var(--line)}
.app:first-child{border-top:0}
.node{display:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.fol{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--soft);min-height:44px;margin:0}
.pick .ghost{margin:0 8px 8px 0}
.fan .acc{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;border-top:1px solid var(--line);font-size:14.5px;color:var(--soft);overflow-wrap:anywhere}
.fan .acc:first-of-type{margin-top:8px}

.acct{margin-top:12px;border-top:1px solid var(--line)}
.acct summary{cursor:pointer;font-weight:500;padding:10px 0;min-height:44px;color:var(--soft)}
.acct summary:hover{color:#fff}
.acct a{display:inline-block;padding:11px 0;margin-right:14px}

/* the main account: its fan, then one switch per account. Lit line = follows, dotted = off */
#hub{margin-bottom:34px}
.mainrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;padding:12px 16px;background:var(--glass);border:1px solid var(--line);border-radius:14px}
.mainrow .who span{font-size:13.5px}
#folh{margin-top:26px;font-size:15px;color:var(--soft);font-weight:500}
.fols{list-style:none;margin:8px 0 0;padding:0}
.fols>li{border-bottom:1px solid var(--line)}
.fols>li.dim{padding:12px 0;border:0}
.mplist{margin:14px 0 0;max-height:46vh;overflow:auto}

/* you: one card per job */
.card{margin:18px 0 0;padding:18px 18px 20px;background:var(--glass);border:1px solid var(--line);border-radius:18px}
.card h3{margin:0 0 4px}
.vbar{margin:12px 20px 0;border-color:rgba(240,203,146,.32)}.vbar p{margin:0}.vbar .ghost{margin-top:10px}
.card.danger{border-color:rgba(255,146,154,.22)}
.card .go,.card .ghost{margin-top:14px}
#bill{background:radial-gradient(360px 160px at 100% 0,rgba(122,140,255,.14),transparent 70%),var(--glass)}
#billsay{color:var(--soft);font-size:15px}
.links a{display:inline-block;padding:11px 0;margin-right:16px}
.caps{margin:6px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.caps summary{cursor:pointer;padding:12px 0;min-height:44px;font-weight:500;color:var(--soft)}
.caps summary .dim{font-weight:400;margin-left:6px}
.caps label{margin:14px 0}
.caps label .quiet{float:right;margin-top:-14px;text-transform:none;letter-spacing:normal}
.caps textarea{min-height:84px}

/* post once */
.kind{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:20px 0 0;padding:4px;background:var(--glass);border:1px solid var(--line);border-radius:999px}
.kind label{margin:0;position:relative;letter-spacing:normal;text-transform:none;font-size:15px}
.kind span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;color:var(--dim);font-weight:500;cursor:pointer}
.kind input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.kind input:checked+span{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.kind input:focus-visible+span{outline:2px solid var(--iris)}
.when{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:16px 0 0;padding:4px;background:var(--glass);border:1px solid var(--line);border-radius:999px}
.when label{margin:0;position:relative;letter-spacing:normal;text-transform:none;font-size:15px}
.when span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;color:var(--dim);font-weight:500;cursor:pointer}
.when input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.when input:checked+span{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.when input:focus-visible+span{outline:2px solid var(--iris)}
input[type=datetime-local]{display:block;width:100%;margin-top:8px;padding:14px 15px;background:var(--glass);border:1px solid var(--line2);border-radius:12px;font-size:16px;letter-spacing:normal;text-transform:none;color:var(--text);color-scheme:dark}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:184px;margin:14px 0 10px;padding:20px;border:1px dashed var(--line2);border-radius:18px;background:radial-gradient(300px 150px at 50% 110%,rgba(122,140,255,.13),transparent 75%),var(--glass);cursor:pointer;text-align:center;letter-spacing:normal;text-transform:none}
.drop:hover,.drop.over{border-color:var(--iris);background:radial-gradient(340px 180px at 50% 110%,rgba(122,140,255,.26),transparent 75%),var(--glass)}
.drop b{font-weight:500;font-size:21px;letter-spacing:-.025em;line-height:1.2;color:var(--text)}
#prog:empty{display:none}
.bar{height:4px;margin:10px 0;border-radius:999px;background:var(--glass2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--iris);box-shadow:0 0 12px rgba(169,182,255,.7);transform:scaleX(0);transform-origin:left}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.nets{list-style:none;margin:14px 0;padding:0}
.nets>li{padding:6px 0;border-bottom:1px solid var(--line)}
.nets label{display:flex;align-items:center;gap:11px;margin:0;min-height:44px;font-size:15.5px;letter-spacing:normal;text-transform:none;color:var(--text)}
.nets label b{min-width:0;font-weight:500;overflow-wrap:anywhere}
.nets ul{margin:6px 0 0;padding:0 0 0 30px;font-size:13.5px;color:var(--dim)}
.nets .pill{margin-left:auto;flex:none}

/* activity: every post is a journey, every app a stop on its line */
#newr{margin-top:22px}
#jobs{margin-top:14px}
.empty{margin-top:22px;padding:30px 22px 26px;text-align:center;background:radial-gradient(280px 150px at 50% -10%,rgba(122,140,255,.12),transparent 75%),var(--glass);border:1px solid var(--line);border-radius:18px}
.empty::before{content:"";display:block;width:46px;height:46px;margin:0 auto 16px;background:url(icon.svg) center/contain no-repeat}
.empty p{font-size:19px;font-weight:500;letter-spacing:-.022em;line-height:1.3;margin:0 0 6px}
.empty p.dim{font-size:14.5px;font-weight:400;letter-spacing:normal}
.empty button{margin-top:14px}

/* routes: the map is the page and the one place that glows. app.js writes one colour per Source; these lines retune them */
.edit{margin:22px 0 0;padding:20px;background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:18px}
.edit h3{margin:0 0 6px}
.edit h4{margin:20px 0 6px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.chk{display:flex;gap:11px;align-items:center;min-height:44px;margin:0;font-size:15px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--text);overflow-wrap:anywhere}
.chk small{display:block;font-size:12.5px;color:var(--dim)}
.chk.off{opacity:.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}

.toast{pointer-events:none;position:fixed;z-index:9;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom));max-width:400px;margin:0 auto;padding:12px 16px;background:rgba(24,26,36,.82);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border:1px solid var(--line2);color:var(--text);border-radius:14px;font-size:14.5px;text-align:center;box-shadow:0 18px 50px -12px rgba(0,0,0,.8)}

/* the first paint, before the server has answered */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:18px}
.boot img{display:block;border-radius:14px}
.boot i{width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--iris);border-radius:50%}
.toast.bad{border-color:rgba(255,146,154,.4);color:var(--bad)}

/* the one pop-up: rises from the bottom on a phone, sits in the middle on a wide screen */
html.held{overflow:hidden}
.scrim{position:fixed;z-index:8;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:rgba(4,5,8,.64);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overscroll-behavior:contain;opacity:0}
.scrim.open{opacity:1}
.dlg{width:100%;max-width:420px;max-height:100%;overflow:auto;padding:26px 22px 20px;background:rgba(21,23,33,.9);border:1px solid var(--line2);border-radius:26px;box-shadow:0 30px 80px -20px #000,inset 0 1px 0 rgba(255,255,255,.07);transform:translateY(28px)}
.scrim.open .dlg{transform:none}
.dlg h3{margin:0;font-size:23px;line-height:1.2;overflow-wrap:anywhere}
.dlg p{margin:10px 0 0;color:var(--soft);font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.dlgbtns{display:grid;gap:8px;margin-top:22px}
.dlgbtns .ghost{width:100%;min-height:50px}

/* first run: the same fan lights up a stage at a time */
.ghead{display:flex;align-items:center;justify-content:space-between;margin:-12px -6px 6px 0}
.ghead .quiet{min-width:44px;padding:8px 6px;font-size:14.5px}
.gart{display:block;width:100%;margin:0 0 20px;background:radial-gradient(70% 90% at 42% 50%,rgba(122,140,255,.12),transparent 72%),var(--glass);border:1px solid var(--line);border-radius:16px}
.gart path{fill:none;stroke:var(--line2);stroke-width:1.5;stroke-linecap:round}
.gart rect{fill:rgba(255,255,255,.05);stroke:var(--iris);stroke-width:1}
.gart text{font:500 14px var(--read);fill:var(--text)}
.gart circle{fill:var(--ink);stroke:var(--line2);stroke-width:1.5}
.gart[data-s="2"] path,.gart[data-s="3"] path{stroke:var(--iris);filter:drop-shadow(0 0 4px rgba(169,182,255,.7))}
.gart[data-s="2"] circle{stroke:var(--iris)}
.gart[data-s="3"] circle{fill:var(--iris);stroke:var(--iris);filter:drop-shadow(0 0 6px rgba(169,182,255,.9))}
.gdots{display:flex;justify-content:center;gap:7px;margin:20px 0 18px}
.gdots i{width:6px;height:6px;border-radius:50%;background:var(--line2)}
.gdots i.on{background:var(--iris);box-shadow:0 0 8px rgba(169,182,255,.8)}

/* plain pages: legal, connect */
.plain{padding:0}
.sheet{overflow-wrap:anywhere;max-width:640px;margin:0 auto;padding:36px max(20px,env(safe-area-inset-right)) 64px max(20px,env(safe-area-inset-left));color:var(--soft)}
.sheet h1{font-size:38px;font-weight:500;letter-spacing:-.04em;color:var(--text);margin-bottom:12px}
.sheet h2{font-size:20px;letter-spacing:-.02em;color:var(--text);margin:32px 0 6px}
.sheet ul{padding-left:20px}
.sheet li{margin:6px 0}
.sheet .go{margin-top:22px}
.sheet .back{display:inline-block;margin-bottom:18px;color:var(--text);font-weight:600;letter-spacing:-.02em;text-decoration:none}

@media (max-width:380px){.tabs button{font-size:12.5px}}
@media (min-width:900px){
 .auth{padding-top:5vh}
 .auth .mark{height:240px}
 .main{padding-bottom:64px}
 .top{padding:0 32px}
 .tabs{position:sticky;top:14px;left:auto;right:auto;bottom:auto;margin:16px auto 0}
 .toast{bottom:28px}
 .scrim{align-items:center;padding:24px}
}
@media (prefers-reduced-motion:no-preference){
 .go,.ghost,.quiet,.link,.tabs button,.kind span,.drop,.pill,.acct summary{transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .3s var(--ease),opacity .15s}
 @keyframes spin{to{transform:rotate(360deg)}}
 @keyframes up{from{opacity:0;transform:translateY(10px)}}
 .busy::after,.boot i{animation:spin .8s linear infinite}
 .toast{animation:up .28s var(--ease)}
 .tab,.edit{animation:up .3s var(--ease)}
 .go:active,.ghost:active{transform:scale(.985)}
 .bar i{transition:transform .35s var(--ease)}
 .scrim{transition:opacity .22s var(--ease)}
 .dlg{transition:transform .34s var(--ease)}
 .gart path,.gart circle,.gdots i{transition:stroke .35s var(--ease),fill .35s var(--ease),background .25s var(--ease)}
}

/* dry run */
.ghost.wide{display:block;width:100%;margin-top:10px}
.dlg.dry{max-width:640px}
.dryt{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.dryt h4{margin:0;font-size:17px;overflow-wrap:anywhere}.dryt h4 .dim{font-weight:400;font-size:14px;margin-left:6px}
.dryt p.ok{color:var(--ok)}.dryt p.bad,.dryw .bad{color:var(--bad)}.dryw .sun{color:var(--sun)}
.dryw{margin:8px 0 0;padding-left:18px;font-size:14px;line-height:1.45}
.lim{width:100%;margin-top:10px;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.lim th,.lim td{padding:6px 6px 6px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.lim th{width:36%;font-weight:500;color:var(--soft)}
.lim tr.bad td:nth-child(2){color:var(--bad);font-weight:600}.lim tr.warn td:nth-child(2){color:var(--sun)}
.lim tr.bad th::before,.lim tr.warn th::before,.lim tr.ok th::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--ok);vertical-align:1px}
.lim tr.bad th::before{background:var(--bad)}.lim tr.warn th::before{background:var(--sun)}
.dryt details{margin-top:10px}.dryt summary{cursor:pointer;color:var(--iris);font-size:14px;min-height:44px;display:flex;align-items:center}
.calls{margin:6px 0 0;padding-left:20px;font-size:12.5px}.calls li{margin:0 0 10px}
.calls code{display:block;font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere;color:var(--text)}
.calls pre{margin:4px 0 0;padding:8px;max-height:220px;overflow:auto;background:var(--glass);border:1px solid var(--line);border-radius:8px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}