/* NeuroHub staff area: base styles. Calm by default; every colour, font and size is a variable so the display settings can change them. */
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Lilita One';font-weight:400;font-display:swap;src:url(/assets/fonts/lilita-one-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'OpenDyslexic';font-weight:400;font-display:swap;src:url(/assets/fonts/opendyslexic-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'OpenDyslexic';font-weight:700;font-display:swap;src:url(/assets/fonts/opendyslexic-latin-700-normal.woff2) format('woff2')}

:root{
  --bg:#F6F4FB;--surface:#fff;--surface2:#F0EDF8;--border:#DDD7EE;--border-strong:#B9B0D6;
  --text:#1B1730;--text2:#463F63;--text3:#625C80;
  --brand:#7C3AED;--brand-ink:#fff;--brand-soft:#EFE7FE;--brand-text:#5B21B6;
  --accent:#0D9488;--accent-soft:#D9F4EF;--accent-text:#0B6B62;
  --warn:#92400E;--warn-soft:#FEF3C7;--danger:#B42318;--danger-soft:#FEE4E2;--ok:#046C4E;--ok-soft:#D1FAE5;
  --bar:#0A0A0A;--bar-text:#fff;
  --radius:14px;--radius-sm:9px;--shadow:0 1px 2px rgba(27,23,48,.06),0 4px 14px rgba(27,23,48,.06);--shadow-lg:0 12px 40px rgba(27,23,48,.22);
  --font:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;--head:'Lilita One','Atkinson Hyperlegible',system-ui,sans-serif;
  --fs:16px;--lh:1.55;--ls:0em;--ws:0em;
  --sidebar:252px;--tabbar:64px;--focus:#1D4ED8;
  /* chart series colours, checked with the palette validator on each surface (light, dark) */
  --viz-1:#7C3AED;--viz-2:#0D9488;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#121019;--surface:#1B1827;--surface2:#262235;--border:#34304A;--border-strong:#4C4770;
  --text:#F1EEFA;--text2:#CFC9E6;--text3:#ABA5C8;
  --brand:#A78BFA;--brand-ink:#14102A;--brand-soft:#2B2250;--brand-text:#C9B8FF;
  --accent:#2ED8BE;--accent-soft:#12332F;--accent-text:#7CEBD8;
  --warn:#FBBF24;--warn-soft:#3A2C0C;--danger:#FF9B90;--danger-soft:#44181A;--ok:#6EE7B7;--ok-soft:#10352B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);--shadow-lg:0 12px 40px rgba(0,0,0,.6);--focus:#93C5FD;
  --viz-1:#8B6CF0;--viz-2:#1AA593;
  color-scheme:dark;
}
[data-theme=contrast]{
  --bg:#000;--surface:#000;--surface2:#141414;--border:#fff;--border-strong:#fff;
  --text:#fff;--text2:#fff;--text3:#F0F0F0;
  --brand:#FFE14D;--brand-ink:#000;--brand-soft:#2A2500;--brand-text:#FFE14D;
  --accent:#4DFFE0;--accent-soft:#002B26;--accent-text:#4DFFE0;
  --warn:#FFE14D;--warn-soft:#2A2500;--danger:#FF8A80;--danger-soft:#330000;--ok:#7CFFB2;--ok-soft:#00260F;
  --shadow:none;--shadow-lg:0 0 0 2px #fff;--focus:#4DFFE0;
  --viz-1:#FFE14D;--viz-2:#4DFFE0;
  color-scheme:dark;
}
[data-theme=calm]{
  --bg:#F4F1EA;--surface:#FBF9F4;--surface2:#ECE8DD;--border:#D9D3C3;--border-strong:#B3AB95;
  --text:#2B2A33;--text2:#4C4A57;--text3:#66646F;
  --brand:#6B5CA5;--brand-soft:#E8E4F2;--brand-text:#4B3F7D;--accent:#3F7F78;--accent-soft:#DDEBE8;--accent-text:#2D5F59;
  --warn-soft:#F3E9CC;--shadow:0 1px 2px rgba(43,42,51,.05);
  --viz-1:#6B5CA5;--viz-2:#3F7F78;
}
[data-font=opendyslexic]{--font:'OpenDyslexic','Atkinson Hyperlegible',system-ui,sans-serif;--head:'OpenDyslexic',system-ui,sans-serif}
[data-font=system]{--font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--head:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
[data-size=small]{--fs:15px}[data-size=large]{--fs:18px}[data-size=xlarge]{--fs:20px}
[data-spacing=relaxed]{--lh:1.8;--ls:.02em;--ws:.08em}
[data-motion=reduce] *,[data-motion=reduce] *::before,[data-motion=reduce] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){[data-motion=auto] *,[data-motion=auto] *::before,[data-motion=auto] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:var(--lh);letter-spacing:var(--ls);word-spacing:var(--ws);min-height:100vh;min-height:100dvh}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.2;margin:0;letter-spacing:.01em}
h1{font-size:1.7rem}h2{font-size:1.3rem}h3{font-size:1.1rem}
p{margin:0 0 .75rem}
a{color:var(--brand-text)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:var(--brand-ink);padding:.6rem 1rem;z-index:1000;border-radius:0 0 8px 0}
.skip:focus{left:0}
.boot{padding:3rem 1.5rem;text-align:center;color:var(--text3)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--text3)}.small{font-size:.86rem}.tiny{font-size:.76rem}.center{text-align:center}.grow{flex:1;min-width:0}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:.75rem}.gap-s{gap:.35rem}
.hidden{display:none!important}

/* ───────── buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.6rem;padding:.5rem 1.05rem;border:2px solid var(--brand);background:var(--brand);color:var(--brand-ink);border-radius:999px;cursor:pointer;font-weight:700;text-decoration:none;line-height:1.2;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{box-shadow:0 2px 10px rgba(124,58,237,.3)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.secondary{background:transparent;color:var(--brand-text);border-color:var(--border-strong)}
.btn.secondary:hover{background:var(--brand-soft);box-shadow:none}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text2)}
.btn.ghost:hover{background:var(--surface2);box-shadow:none}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft);box-shadow:none}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.small{min-height:2.1rem;padding:.25rem .8rem;font-size:.88rem}
.btn.block{width:100%}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;background:transparent;border-radius:999px;cursor:pointer;color:var(--text2);position:relative}
.iconbtn:hover{background:var(--surface2)}
.iconbtn svg{pointer-events:none}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-size:.72rem;font-weight:700;line-height:1}
.badge.quiet{background:var(--surface2);color:var(--text2)}
.badge.dot{position:absolute;top:.15rem;right:.15rem}

/* ───────── cards, chips, fields */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem}
.card.flat{box-shadow:none}
.card h2,.card h3{margin-bottom:.5rem}
.card-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}.card-head h2,.card-head h3{margin:0;flex:1}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .6rem;border-radius:999px;background:var(--surface2);color:var(--text2);font-size:.8rem;font-weight:700;white-space:nowrap}
.chip.brand{background:var(--brand-soft);color:var(--brand-text)}.chip.accent{background:var(--accent-soft);color:var(--accent-text)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.danger{background:var(--danger-soft);color:var(--danger)}.chip.ok{background:var(--ok-soft);color:var(--ok)}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.field>label,.field>.label{font-weight:700;font-size:.9rem}
.field .hint{font-size:.84rem;color:var(--text3)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=time],input[type=number],select,textarea{width:100%;background:var(--surface);border:2px solid var(--border-strong);border-radius:var(--radius-sm);padding:.55rem .75rem;min-height:2.6rem}
textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
.check{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;padding:.35rem 0}
.check input{width:1.25rem;height:1.25rem;margin-top:.2rem;accent-color:var(--brand);flex:none}
.seg{display:inline-flex;border:2px solid var(--border-strong);border-radius:999px;padding:2px;gap:2px;background:var(--surface)}
.seg button{border:0;background:transparent;padding:.3rem .85rem;border-radius:999px;cursor:pointer;font-weight:700;color:var(--text2);min-height:2rem}
.seg button[aria-pressed=true],.seg button.on{background:var(--brand);color:var(--brand-ink)}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1rem}
.tabs button{border:2px solid var(--border);background:var(--surface);padding:.35rem .9rem;border-radius:999px;cursor:pointer;font-weight:700;color:var(--text2);min-height:2.3rem}
.tabs button[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.tabs .count{margin-left:.35rem;opacity:.8;font-weight:400}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--text3)}
.empty h3{color:var(--text2);margin-bottom:.4rem}
.notice{display:flex;gap:.7rem;padding:.8rem 1rem;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--text);border:1px solid var(--border);margin-bottom:1rem}
.notice.warn{background:var(--warn-soft)}.notice.danger{background:var(--danger-soft)}.notice.ok{background:var(--ok-soft)}
.notice svg{flex:none;margin-top:.15rem}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.divider{border:0;border-top:1px solid var(--border);margin:1rem 0}
kbd{background:var(--surface2);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:0 .35rem;font-size:.8em}

/* ───────── avatars and presence */
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:50%;color:#fff;font-weight:700;font-size:.85rem;flex:none;user-select:none}
.avatar.s{width:1.7rem;height:1.7rem;font-size:.68rem}.avatar.l{width:3.4rem;height:3.4rem;font-size:1.2rem}
.avatar .dot{position:absolute;right:-1px;bottom:-1px;width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--surface);background:#94A3B8}
.avatar .dot.on{background:#22C55E}
.avatar-stack{display:inline-flex}.avatar-stack .avatar{margin-left:-.5rem;border:2px solid var(--surface)}.avatar-stack .avatar:first-child{margin-left:0}

/* ───────── shell */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;min-height:100dvh}
.sidebar{background:var(--bar);color:var(--bar-text);display:flex;flex-direction:column;padding:1rem .75rem;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.6rem;padding:.2rem .5rem 1rem;color:#fff;text-decoration:none}
.brand img{width:2.2rem;height:2.2rem;border-radius:9px}
.brand b{font-family:var(--head);font-weight:400;font-size:1.2rem;line-height:1.1}.brand span{display:block;font-size:.74rem;opacity:.7;font-family:var(--font)}
.nav{display:flex;flex-direction:column;gap:.15rem;margin:0;padding:0;list-style:none}
.nav a{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:11px;color:#D9D4EA;text-decoration:none;font-weight:700;min-height:2.6rem}
.nav a:hover{background:#1f1b2e;color:#fff}
.nav a[aria-current=page]{background:var(--brand);color:var(--brand-ink)}
.nav .badge{margin-left:auto;background:#2ED8BE;color:#04201C}
.nav-sep{height:1px;background:#2a2640;margin:.7rem .5rem}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;padding-top:1rem}
.me-chip{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border-radius:12px;background:#17142A;color:#fff;text-decoration:none;border:0;cursor:pointer;text-align:left;width:100%}
.me-chip small{display:block;opacity:.7;font-size:.76rem;line-height:1.2}
.slack-link{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-radius:11px;color:#D9D4EA;text-decoration:none;font-size:.9rem;border:1px dashed #3a3560}
.slack-link:hover{background:#1f1b2e;color:#fff}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.4rem;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:20}
.topbar h1{font-size:1.35rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page{padding:1.4rem;max-width:1100px;width:100%;margin:0 auto;flex:1}
.page.wide{max-width:1500px}
.tabbar{display:none}
.update-bar{display:flex;gap:.8rem;align-items:center;justify-content:center;background:var(--brand);color:var(--brand-ink);padding:.5rem 1rem;font-weight:700;position:sticky;top:0;z-index:50}
.update-bar button{background:var(--brand-ink);color:var(--brand);border:0;border-radius:999px;padding:.25rem .9rem;cursor:pointer;font-weight:700}
.offline-bar{background:var(--warn-soft);color:var(--warn);text-align:center;padding:.4rem 1rem;font-weight:700;font-size:.9rem}

@media (max-width:860px){
  .shell{grid-template-columns:1fr;padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .sidebar{display:none}
  .topbar{padding:.6rem .9rem}
  .page{padding:1rem .9rem}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bar);z-index:40;border-top:1px solid #2a2640}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;color:#BDB6D8;text-decoration:none;font-size:.7rem;font-weight:700;background:transparent;border:0;cursor:pointer;position:relative}
  .tabbar [aria-current=page]{color:#fff}
  .tabbar [aria-current=page] svg{color:var(--accent)}
  .tabbar .badge{position:absolute;top:.35rem;left:calc(50% + .45rem);background:#2ED8BE;color:#04201C}
}

/* ───────── sign-in and first-run */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(1200px 500px at 80% -10%,var(--brand-soft),transparent),var(--bg)}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);padding:1.8rem 1.6rem}
.auth-card .brand{color:var(--text);padding:0 0 1.2rem}.auth-card .brand span{opacity:.7}
.auth-card h1{margin-bottom:.4rem}
.auth-card .links{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.92rem}
.linkbtn{background:none;border:0;padding:0;color:var(--brand-text);text-decoration:underline;cursor:pointer;font-weight:700}

/* ───────── dialogs, toasts */
.overlay{position:fixed;inset:0;background:rgba(15,12,30,.55);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100;animation:fade .15s}
.dialog{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;border:1px solid var(--border)}
.dialog.wide{max-width:760px}
.dialog-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem .4rem}.dialog-head h2{flex:1}
.dialog-body{padding:.4rem 1.2rem 1rem;overflow-y:auto}
.dialog-foot{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap;padding:.8rem 1.2rem 1.1rem;border-top:1px solid var(--border)}
@media (max-width:620px){.overlay{align-items:flex-end;padding:0}.dialog{border-radius:20px 20px 0 0;max-height:92dvh;max-width:none}}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1.2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.5rem;z-index:200;pointer-events:none;width:min(92vw,440px)}
@media (max-width:860px){.toasts{bottom:calc(var(--tabbar) + 1rem + env(safe-area-inset-bottom))}}
.toast{background:var(--bar);color:#fff;padding:.7rem 1rem;border-radius:12px;box-shadow:var(--shadow-lg);pointer-events:auto;animation:rise .2s;font-weight:700}
.toast.error{background:#8A1C12}.toast.ok{background:#065F46}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───────── menus and notification panel */
.menu{position:absolute;right:0;top:calc(100% + .4rem);min-width:240px;max-width:min(92vw,380px);background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:.4rem;z-index:60}
.menu button,.menu a{display:flex;gap:.6rem;align-items:center;width:100%;padding:.55rem .7rem;border:0;background:transparent;border-radius:9px;text-align:left;cursor:pointer;color:var(--text);text-decoration:none;min-height:2.4rem}
.menu button:hover,.menu a:hover{background:var(--surface2)}
.menu .sep{height:1px;background:var(--border);margin:.3rem 0}
.menu .head{padding:.5rem .7rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.note-item{display:block;padding:.6rem .7rem;border-radius:9px;color:var(--text);text-decoration:none}
.note-item:hover{background:var(--surface2)}.note-item.unread{background:var(--brand-soft)}
.note-item b{display:block;font-size:.93rem}.note-item span{font-size:.82rem;color:var(--text3)}
.rel{position:relative}

/* ───────── home */
.grid{display:grid;gap:1rem}
.grid>*,.row2>*{min-width:0} /* a grid cell may always shrink below the width of what is inside it, so a wide row of boxes never pushes into its neighbour */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.hello h1{margin-bottom:.2rem}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.quick button,.quick a{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:var(--radius);border:2px solid var(--border);background:var(--surface);cursor:pointer;font-weight:700;color:var(--text);text-decoration:none;text-align:left;min-height:3.2rem}
.quick button:hover,.quick a:hover{border-color:var(--brand);background:var(--brand-soft)}
.who{display:flex;align-items:center;gap:.7rem;padding:.4rem 0}
.who .grow b{display:block;line-height:1.2}.who .grow span{font-size:.84rem;color:var(--text3)}
.statusdot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;background:#94A3B8;margin-right:.35rem}
.statusdot.available{background:#22C55E}.statusdot.focus{background:#F59E0B}.statusdot.session{background:#3B82F6}.statusdot.lowenergy{background:#A78BFA}.statusdot.away{background:#94A3B8}
.jobline{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;border-bottom:1px solid var(--border)}.jobline:last-child{border-bottom:0}
.jobline a{color:var(--text);text-decoration:none;font-weight:700}.jobline a:hover{text-decoration:underline}
.ob{border-color:var(--brand);background:linear-gradient(180deg,var(--brand-soft),var(--surface) 70%)}
.ob-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ob-step{display:flex;gap:.8rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem}
.ob-tick{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.ob-step.done .ob-tick{background:var(--ok);border-color:var(--ok)}
.ob-step .grow b{display:block}
.slackcard{display:flex;gap:.8rem;align-items:center}
.slackcard svg{flex:none;color:var(--brand)}