/* TopBar — the giving pill as one component. Geometry: every part is 48 tall on one centre line.
   Circles 48. Pill 48 (5px inset). Links and search 38 inside the pill (5px above and below). */
:root{--tb-silk:cubic-bezier(.32,.72,0,1);--tb-spring:cubic-bezier(.2,.9,.25,1.25);--tb-out:cubic-bezier(.16,1,.3,1);--tb-ease-out:cubic-bezier(.23,1,.32,1);
  --tb-glass:rgba(255,255,255,.7);--tb-ring:inset 0 0 0 1px rgba(0,0,0,.06);--tb-drop:0 14px 34px -14px rgba(0,0,0,.28)}
@keyframes tb-open{from{clip-path:inset(0 50% 0 50% round 999px)}to{clip-path:inset(0 0 0 0 round 999px)}}
@keyframes tb-rise{from{opacity:0;translate:0 -10px}}
@keyframes tb-from-left{from{opacity:0;translate:-16px 0}}
@keyframes tb-from-right{from{opacity:0;translate:16px 0}}
@keyframes tb-drop{from{opacity:0;translate:0 -6px}}

.tb{position:relative;box-sizing:border-box;height:48px;display:flex;align-items:center;gap:8px;font-family:Geist,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#0a0a0a}

/* side circles */
.tb-circle{box-sizing:border-box;flex:none;width:48px;height:48px;margin:0;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;box-shadow:var(--tb-ring),var(--tb-drop);transition:background-color .25s var(--tb-silk),color .25s var(--tb-silk),transform .16s var(--tb-ease-out)}
.tb-circle svg{display:block;flex:none}
.tb-circle:active{transform:scale(.97)}
.tb-circle:focus-visible{outline:2px solid #3b7bff;outline-offset:2px}
.tb-back{color:#6a6a6a;background:var(--tb-glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);animation:tb-from-left .55s var(--tb-out) .18s both}
/* the avatar is solid, so it matches the pill's visible inner line (48 - 1px ring top and bottom = 46), not its faint outer edge */
.tb-me{width:46px;height:46px;overflow:hidden;box-shadow:var(--tb-drop);animation:tb-from-right .55s var(--tb-out) .18s both;
  background:radial-gradient(circle closest-side,var(--tb-me-fill,#2563eb) calc(100% - var(--tb-me-in) - .3px),rgba(0,0,0,0) calc(100% - var(--tb-me-in) + .3px));
  transition:--tb-me-in .16s var(--tb-ease-out)}
/* press: only the blue disc's radius tightens (23 → 22px); nothing is scaled, so the face cannot move a single pixel */
@property --tb-me-in{syntax:"<length>";inherits:false;initial-value:0px}
.tb-me:active{transform:none;--tb-me-in:1px}

/* the pill */
.tb-pill{position:relative;box-sizing:border-box;flex:none;height:48px;margin:0;padding:0 5px;display:flex;align-items:center;gap:2px;border-radius:999px;overflow:hidden;background:var(--tb-glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--tb-ring),var(--tb-drop);animation:tb-open .85s var(--tb-out) both,tb-rise .5s var(--tb-out) both}
.tb-pill::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;pointer-events:none;z-index:2;background:radial-gradient(110px 1px at var(--pill-mx,50%) 0,rgba(255,255,255,.95),rgba(255,255,255,0));opacity:var(--pill-spot,0);transition:opacity .25s}
.tb-pill::after{content:"";position:absolute;inset:0;z-index:2;padding:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(150px 36px at var(--pill-mx,50%) 0,#fff 0%,rgba(255,255,255,.95) 25%,rgba(255,255,255,.25) 55%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--pill-spot,0);transition:opacity .25s var(--tb-out)}

.tb-link{position:relative;z-index:3;box-sizing:border-box;flex:none;height:38px;margin:0;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:transparent;color:#5a5a5a;font:500 13px/1 Geist,ui-sans-serif,system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transform-origin:50% 50%;transition:color .25s var(--tb-silk),background-color .25s var(--tb-silk)}
.tb-link:hover,.tb-link.is-open{color:#0a0a0a;background-color:rgba(0,0,0,.04)}
.tb-link:focus-visible{outline:2px solid #3b7bff;outline-offset:2px;z-index:5}
.tb-dock{will-change:transform;animation:tb-drop .5s var(--tb-out) .26s both}
.tb-dock:hover,.tb-dock.is-open{z-index:4}
.tb-anchor{background:#2c2c2e;color:#fff;padding:0 18px 0 14px;animation:tb-from-left .55s var(--tb-out) .18s both}
.tb-anchor:hover{background:#3a3a3c;color:#fff}
.tb-anchor svg{display:block;flex:none}

/* search: a 38 circle that opens to 272 — the only thing that changes the pill's size */
.tb-search{position:relative;z-index:3;box-sizing:border-box;flex:none;width:38px;height:38px;margin:0 0 0 4px;padding:0;display:flex;align-items:center;border-radius:999px;overflow:hidden;background:rgba(10,10,10,.06);box-shadow:inset 0 0 0 1px rgba(10,10,10,.05);transition:width .62s linear(0,0.041,0.142,0.278,0.428,0.576,0.712,0.83,0.925,0.998,1.049,1.081,1.097,1.102,1.097,1.086,1.072,1.057,1.042,1.028,1.017,1.007,1,0.995,0.992,0.99,0.99,0.99,0.991,0.993,0.994,0.996,0.997,0.998,0.999,1,1.001,1.001,1.001,1.001,1),background-color .2s ease,box-shadow .2s ease;animation:tb-from-right .55s var(--tb-out) .18s both}
.tb-search.is-open{width:272px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,10,10,.12),0 5px 16px rgba(0,0,0,.1)}
.tb-search-btn,.tb-search-close{box-sizing:border-box;flex:none;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;color:#5a5a5a;cursor:pointer}
.tb-search-btn svg,.tb-search-close svg{display:block;flex:none}
.tb-search-close{display:none}
.tb-search.is-open .tb-search-close{display:flex}
.tb-search-close:hover{color:#0a0a0a}
.tb-search-input{box-sizing:border-box;flex:1 1 auto;min-width:0;width:0;height:38px;margin:0;padding:0 4px;border:0;outline:0;background:transparent;color:#0a0a0a;font:500 13px/38px Geist,ui-sans-serif,system-ui,sans-serif;opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .1s ease-out,transform .1s ease-out}
.tb-search-input::placeholder{color:#6f6f6f}
.tb-search-input::-webkit-search-cancel-button{display:none}
.tb-search.is-open .tb-search-input{opacity:1;pointer-events:auto;transform:none;transition-duration:.22s}

/* Frontend / Backend menus: glass chips centred under their link */
.tb-goo{position:absolute;top:60px;width:0;height:0;z-index:46}
.tb-goo-item{position:absolute;left:0;box-sizing:border-box;height:36px;padding:0 16px;border-radius:999px;display:flex;align-items:center;white-space:nowrap;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 0 .5px rgba(10,10,10,.08),0 12px 28px -14px rgba(0,0,0,.3);color:#0a0a0a;font:500 13px/1 Geist,ui-sans-serif,system-ui,sans-serif;text-decoration:none;opacity:0;pointer-events:none;transform:translate(-50%,-14px) scale(.86);transition:transform .3s var(--tb-silk),opacity .16s ease,background-color .2s ease}
.tb-goo.is-shown .tb-goo-item{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1);transition:transform .42s var(--tb-spring),opacity .22s ease,background-color .2s ease}
.tb-goo-item:hover{background:rgba(255,255,255,.88)}
.tb-goo-item.is-soon{color:rgba(10,10,10,.4);cursor:default}

/* profile menu */
.tb-sheet{position:absolute;top:60px;right:0;width:240px;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:24px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.14);transform-origin:top right;z-index:46;opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .15s var(--tb-ease-out),transform .15s var(--tb-ease-out)}
.tb-sheet.is-open{opacity:1;pointer-events:auto;transform:scale(1);transition-duration:.2s}
.tb-row{box-sizing:border-box;height:40px;padding:0 16px;display:flex;align-items:center;border-radius:16px;font-size:14px;color:#0a0a0a;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .tb-back:hover{color:#0a0a0a;background:rgba(255,255,255,.88)}
  .tb-row:hover{background:#f2f2f2}
}
@media (prefers-reduced-motion:reduce){
  .tb-pill,.tb-pill *,.tb-circle,.tb-search{animation:none!important}
  .tb-pill,.tb-pill::before,.tb-pill::after,.tb-dock,.tb-search,.tb-search-input,.tb-me{transition:none!important}
  .tb-dock,.tb-search-input,.tb-circle:active,.tb-sheet,.tb-sheet.is-open{transform:none!important}
  .tb-goo-item,.tb-goo.is-shown .tb-goo-item{transform:translateX(-50%)!important}
}

/* Brand — the consensor square-bracket mark + lowercase wordmark. 48 tall so it shares the pill's centre line.
   Size it with the size prop (mark px); the line stays at the line prop (px) at any size. No side padding: the mark's ink starts at the column edge. */
.cx-brand{box-sizing:border-box;height:48px;display:inline-flex;align-items:center;gap:10px;padding:0;border-radius:12px;text-decoration:none;color:#0a0a0a;animation:tb-from-left .55s var(--tb-out) .18s both;transition:transform .16s var(--tb-ease-out)}
.cx-brand-mark{display:block;flex:none}
.cx-brand-word{font:600 20px/1 Geist,ui-sans-serif,system-ui,-apple-system,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.cx-brand:active{transform:scale(.97)}
.cx-brand:focus-visible{outline:2px solid #3b7bff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cx-brand{animation:none!important;transition:none!important}.cx-brand:active{transform:none}}

/* standard shell: empty slots each page fills (its context, its two most important things) */
.tb-link.tb-slot{min-width:88px;padding:0;color:transparent;background:transparent;outline:1.5px dashed rgba(0,0,0,.22);outline-offset:-1.5px;cursor:default;pointer-events:none}
.tb-anchor.tb-slot{min-width:96px;background:rgba(44,44,46,.06);outline-color:rgba(44,44,46,.34)}

/* day / night for the standard shell. .cx-theme carries the tokens; .cx-night forces night, .cx-auto follows the
   person's own appearance setting (their device). Pages without .cx-theme (the giving frames) are untouched. */
.cx-theme{--sh-bg:var(--sh-paper,#ECECEC);--sh-ink:#0A0A0A;--sh-muted:#4A4A4A;--sh-faint:#595959;--sh-link:#3A3A3A;--sh-line:#D6D6D6;--sh-dash:#C4C4C4;--sh-card:#FFFFFF;--sh-card-line:#EDEDED;--sh-field:#F2F2F2;--sh-btn:#FFFFFF;--sh-btn-ink:#0A0A0A;--sh-solid:#0A0A0A;--sh-solid-ink:#FFFFFF}
.cx-theme.cx-night{--sh-bg:#121212;--sh-ink:#FFFFFF;--sh-muted:#A3A3A3;--sh-faint:#939393;--sh-link:#CFCFCF;--sh-line:#262626;--sh-dash:#3A3A3A;--sh-card:#1C1C1E;--sh-card-line:#2A2A2C;--sh-field:#2A2A2C;--sh-btn:#1F1F21;--sh-btn-ink:#FFFFFF;--sh-solid:#FFFFFF;--sh-solid-ink:#0A0A0A;--tb-glass:rgba(30,30,32,.72);--tb-ring:inset 0 0 0 1px rgba(255,255,255,.08);--tb-drop:0 14px 34px -14px rgba(0,0,0,.7)}
.cx-theme.cx-night .tb{color:#fff}
.cx-theme.cx-night .tb-back{color:#a3a3a3}
.cx-theme.cx-night .tb-back:hover{color:#fff;background:rgba(44,44,46,.9)}
.cx-theme.cx-night .tb-link{color:#a3a3a3}
.cx-theme.cx-night .tb-link:hover, .cx-theme.cx-night .tb-link.is-open{color:#fff;background-color:rgba(255,255,255,.07)}
.cx-theme.cx-night .tb-anchor{background:#f2f2f2;color:#0a0a0a}
.cx-theme.cx-night .tb-anchor:hover{background:#ffffff;color:#0a0a0a}
.cx-theme.cx-night .tb-search-btn, .cx-theme.cx-night .tb-search-close{color:#a3a3a3}
.cx-theme.cx-night .tb-search-close:hover{color:#fff}
.cx-theme.cx-night .tb-search.is-open{background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.4)}
.cx-theme.cx-night .tb-search-input{color:#fff}
.cx-theme.cx-night .tb-search-input::placeholder{color:#8a8a8a}
.cx-theme.cx-night .tb-goo-item{background:rgba(30,30,32,.72);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 28px -14px rgba(0,0,0,.6)}
.cx-theme.cx-night .tb-goo-item:hover{background:rgba(44,44,46,.9)}
.cx-theme.cx-night .tb-goo-item.is-soon{color:rgba(255,255,255,.4)}
.cx-theme.cx-night .tb-sheet{background:#1c1c1e;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.5)}
.cx-theme.cx-night .tb-row{color:#fff}
.cx-theme.cx-night .tb-row:hover{background:#2a2a2c}
.cx-theme.cx-night .tb-link.tb-slot{outline-color:rgba(255,255,255,.22)}
.cx-theme.cx-night .tb-anchor.tb-slot{background:rgba(255,255,255,.05);outline-color:rgba(255,255,255,.32)}
.cx-theme.cx-night .cx-brand{color:#fff!important}
@media (prefers-color-scheme:dark){
.cx-theme.cx-auto{--sh-bg:#121212;--sh-ink:#FFFFFF;--sh-muted:#A3A3A3;--sh-faint:#939393;--sh-link:#CFCFCF;--sh-line:#262626;--sh-dash:#3A3A3A;--sh-card:#1C1C1E;--sh-card-line:#2A2A2C;--sh-field:#2A2A2C;--sh-btn:#1F1F21;--sh-btn-ink:#FFFFFF;--sh-solid:#FFFFFF;--sh-solid-ink:#0A0A0A;--tb-glass:rgba(30,30,32,.72);--tb-ring:inset 0 0 0 1px rgba(255,255,255,.08);--tb-drop:0 14px 34px -14px rgba(0,0,0,.7)}
.cx-theme.cx-auto .tb{color:#fff}
.cx-theme.cx-auto .tb-back{color:#a3a3a3}
.cx-theme.cx-auto .tb-back:hover{color:#fff;background:rgba(44,44,46,.9)}
.cx-theme.cx-auto .tb-link{color:#a3a3a3}
.cx-theme.cx-auto .tb-link:hover, .cx-theme.cx-auto .tb-link.is-open{color:#fff;background-color:rgba(255,255,255,.07)}
.cx-theme.cx-auto .tb-anchor{background:#f2f2f2;color:#0a0a0a}
.cx-theme.cx-auto .tb-anchor:hover{background:#ffffff;color:#0a0a0a}
.cx-theme.cx-auto .tb-search-btn, .cx-theme.cx-auto .tb-search-close{color:#a3a3a3}
.cx-theme.cx-auto .tb-search-close:hover{color:#fff}
.cx-theme.cx-auto .tb-search.is-open{background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 5px 16px rgba(0,0,0,.4)}
.cx-theme.cx-auto .tb-search-input{color:#fff}
.cx-theme.cx-auto .tb-search-input::placeholder{color:#8a8a8a}
.cx-theme.cx-auto .tb-goo-item{background:rgba(30,30,32,.72);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 28px -14px rgba(0,0,0,.6)}
.cx-theme.cx-auto .tb-goo-item:hover{background:rgba(44,44,46,.9)}
.cx-theme.cx-auto .tb-goo-item.is-soon{color:rgba(255,255,255,.4)}
.cx-theme.cx-auto .tb-sheet{background:#1c1c1e;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.5)}
.cx-theme.cx-auto .tb-row{color:#fff}
.cx-theme.cx-auto .tb-row:hover{background:#2a2a2c}
.cx-theme.cx-auto .tb-link.tb-slot{outline-color:rgba(255,255,255,.22)}
.cx-theme.cx-auto .tb-anchor.tb-slot{background:rgba(255,255,255,.05);outline-color:rgba(255,255,255,.32)}
.cx-theme.cx-auto .cx-brand{color:#fff!important}
}

/* a filled button that is waiting for its person to confirm where it goes (it is not wired until then) */
.tb-link.tb-wait{box-shadow:inset 0 0 0 1.5px rgba(59,123,255,.42)}
.tb-link.tb-wait::after{content:"";position:absolute;top:7px;right:9px;width:6px;height:6px;border-radius:50%;background:#3b7bff}
.tb-confirm{position:absolute;top:60px;z-index:60;width:280px;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff;border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.14);transform:translateX(-50%);font:500 13px/1.3 Geist,ui-sans-serif,system-ui,sans-serif;color:#0a0a0a}
.tb-confirm-k{color:#5a5a5a}
.tb-confirm-in{box-sizing:border-box;width:100%;height:38px;padding:0 12px;border:0;border-radius:12px;background:#f2f2f2;color:#0a0a0a;font:500 13px/38px ui-monospace,SFMono-Regular,Menlo,monospace;outline:0}
.tb-confirm-in:focus-visible{box-shadow:0 0 0 2px #3b7bff}
.tb-confirm-row{display:flex;justify-content:flex-end;gap:6px}
.tb-confirm-row button{height:36px;padding:0 14px;border:0;border-radius:999px;font:600 13px/1 Geist,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.tb-confirm-no{background:transparent;color:#5a5a5a}.tb-confirm-no:hover{color:#0a0a0a;background:#f2f2f2}
.tb-confirm-yes{background:#0a0a0a;color:#fff}
.tb-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-theme.cx-night .tb-confirm{background:#1c1c1e;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.5)}
.cx-theme.cx-night .tb-confirm-k{color:#a3a3a3}
.cx-theme.cx-night .tb-confirm-in{background:#2a2a2c;color:#fff}
.cx-theme.cx-night .tb-confirm-no{color:#a3a3a3}.cx-theme.cx-night .tb-confirm-no:hover{color:#fff;background:#2a2a2c}
.cx-theme.cx-night .tb-confirm-yes{background:#fff;color:#0a0a0a}
@media (prefers-color-scheme:dark){
.cx-theme.cx-auto .tb-confirm{background:#1c1c1e;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.5)}
.cx-theme.cx-auto .tb-confirm-k{color:#a3a3a3}
.cx-theme.cx-auto .tb-confirm-in{background:#2a2a2c;color:#fff}
.cx-theme.cx-auto .tb-confirm-no{color:#a3a3a3}.cx-theme.cx-auto .tb-confirm-no:hover{color:#fff;background:#2a2a2c}
.cx-theme.cx-auto .tb-confirm-yes{background:#fff;color:#0a0a0a}
}

/* the BlueLabs brain in the shell, at night */
.cx-theme.cx-night .bl.is-circle:not(.is-bare){background:rgba(30,30,32,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 34px -14px rgba(255,120,60,.45)}
@media (prefers-color-scheme:dark){.cx-theme.cx-auto .bl.is-circle:not(.is-bare){background:rgba(30,30,32,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 34px -14px rgba(255,120,60,.45)}}