/* ==========================================================================
   Plug'n'Plug "Signal" design language
   Four-column app shell: Navigate | Work feed | My desk | Community.
   Borderless: edges come from layered soft shadows, not lines.
   Loaded after app.css. Spec: docs/design/signal-design-language.md
   ========================================================================== */

:root{
  --sx-canvas:#EEF1F7;
  --sx-tint:#F4F6FB;
  --sx-surface:#FFFFFF;
  --sx-ink:#0B1435;
  --sx-ink-2:#323C5E;
  --sx-muted:#646E8C;
  --sx-faint:#9AA3BD;
  --sx-line:#E4E8F2;
  --sx-line-soft:#EEF1F7;
  --sx-blue:#0135F4;
  --sx-blue-600:#0129C4;
  --sx-blue-soft:#ECF0FF;
  --sx-violet:#6B4BFF;
  --sx-violet-soft:#F1EDFF;
  --sx-charge:#0E9F63;
  --sx-charge-soft:#E5F7EE;
  --sx-bounty:#B86E00;
  --sx-bounty-soft:#FFF4DE;
  --sx-danger:#E5484D;
  --sx-grad:linear-gradient(135deg,#0135F4 0%,#4B3BFF 55%,#7A4BFF 100%);
  --sx-grad-bounty:linear-gradient(135deg,#FFB547 0%,#F08A00 100%);
  --sx-r-lg:14px;
  --sx-r:12px;
  --sx-r-sm:10px;
  /* Elevation replaces borders. Layered, low-opacity, slightly negative spread so edges read as a soft lift. */
  --sx-shadow-1:0 1px 2px rgba(15,23,60,.04),0 6px 16px -6px rgba(15,23,60,.10),0 20px 40px -20px rgba(15,23,60,.18);
  --sx-shadow-2:0 2px 6px rgba(15,23,60,.06),0 16px 32px -10px rgba(15,23,60,.20),0 34px 64px -30px rgba(15,23,60,.26);
  --sx-shadow-in:0 1px 2px rgba(15,23,60,.06),0 4px 12px -4px rgba(15,23,60,.13);
  --sx-shadow-field:inset 0 1px 3px rgba(15,23,60,.08);
  --sx-shadow-pop:0 4px 12px rgba(15,23,60,.06),0 30px 70px -18px rgba(15,23,60,.38);
  --sx-shadow-glow:0 2px 6px rgba(1,53,244,.05),0 14px 34px -14px rgba(1,53,244,.32);
  --sx-pearl:radial-gradient(120% 90% at 100% 0%,rgba(107,75,255,.07) 0%,rgba(107,75,255,0) 55%),radial-gradient(90% 80% at 0% 100%,rgba(1,53,244,.05) 0%,rgba(1,53,244,0) 60%),#fff;
  --sx-top:56px;
  --sx-gap:14px;
  --sx-ease:cubic-bezier(.2,.8,.2,1);

  /* Uplift the legacy tokens so every page inherits the Signal surface. */
  --line:var(--sx-line);
  --hover:var(--sx-tint);
  --r-card:14px;
  --shadow-card:var(--sx-shadow-1);
  --navy:var(--sx-ink);
  --text:#1B2340;
  --text-muted:var(--sx-muted);
  --text-faint:var(--sx-faint);
}

/* ---------- Typography: self-hosted (CSP font-src 'self'), SIL OFL 1.1, licences in assets/fonts ---------- */
@font-face{font-display:swap;font-family:"PnP Inter";font-style:normal;font-weight:100 900;src:url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/inter-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-display:swap;font-family:"PnP Inter";font-style:normal;font-weight:100 900;src:url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-display:swap;font-family:"PnP Jakarta";font-style:normal;font-weight:200 800;src:url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-display:swap;font-family:"PnP Jakarta";font-style:normal;font-weight:200 800;src:url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"),url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --font:"PnP Inter",Inter,"Segoe UI",Roboto,Arial,sans-serif;
  --sx-display:"PnP Jakarta","PnP Inter","Segoe UI",Roboto,Arial,sans-serif;
}
body{font-family:var(--font);font-feature-settings:"cv02","cv03","cv04","cv11";letter-spacing:-.006em;text-rendering:optimizeLegibility}
h1,h2,h3,.display,.sx-brand,.sx-nav-me b,.sx-nav-cta b,.right-title h2,.author-name,.post-text h2,.sx-identity .id-body h1,.circuit-hero h1,.circuit-panel-head h2,.circuit-strip h2,.wallet-bank-head h1,.money-drawer-head h2,.profile-title h1,.profile-section h2,.profile-side h2,.hero-copy h1,.landing-band h2,.final-cta h2,.auth-insight h1,.auth-panel h2,.auth-card h1,.empty-state h2,.circuit-empty h2{font-family:var(--sx-display);font-feature-settings:normal;letter-spacing:-.022em}
.sx-balance b,.sx-id-stats b,.signal-tile b,.circuit-hero-stats b,.circuit-signal-list b,.circuit-charge-copy b,.profile-stat b,.money-offer-grid b,.sx-charge-head b,.sx-amount,.money-tr,.wallet-bank-row,.post-chip.bounty b{font-family:var(--sx-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--sx-blue);outline-offset:2px}
.sx-brand span{background:linear-gradient(120deg,var(--sx-ink) 30%,var(--sx-blue) 72%,var(--sx-violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy h1,.auth-insight h1{letter-spacing:-.028em;word-spacing:.08em}
h1,h2{word-spacing:.03em}
.eyebrow,.circuit-kicker,.money-kicker,.sx-nav-label,.sec-h,.wallet-bank-head span,.wallet-bank-table-wrap h2,.money-pane h3{font-family:var(--sx-display);letter-spacing:.12em}

body.signal-app{
  background:
    radial-gradient(1100px 520px at 8% -8%,rgba(1,53,244,.06),transparent 62%),
    radial-gradient(900px 480px at 100% 0%,rgba(107,75,255,.05),transparent 60%),
    var(--sx-canvas);
  background-attachment:fixed;
}
.card,.signal-app .card{border:0;border-radius:var(--sx-r-lg);box-shadow:var(--sx-shadow-1)}
.card:hover,.signal-app .card:hover{box-shadow:var(--sx-shadow-1)}
/* Avatars: soft drop shadow instead of the base 1px ring; initials badges are redundant over photos. */
.signal-app .avatar-wrap img{box-shadow:0 2px 6px rgba(15,23,60,.12),0 6px 14px -6px rgba(15,23,60,.18)}
.signal-app .avatar-badge{display:none}
.signal-app .profile-main-avatar{box-shadow:0 10px 26px -10px rgba(15,23,60,.35)}

/* ---------- Top bar ---------- */
.sx-topbar{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);background:rgba(255,255,255,.88);box-shadow:0 6px 22px -16px rgba(15,23,60,.32);height:var(--sx-top)}
.sx-topbar::after{display:none}
.sx-topbar .topbar-wrap{display:grid;gap:var(--sx-gap);grid-template-columns:228px minmax(0,1fr) auto;height:var(--sx-top);margin:0 auto;max-width:1640px;padding:0 20px}
.sx-brand{align-items:center;color:var(--sx-ink);display:flex;font-size:16px;font-weight:800;gap:9px;letter-spacing:-.02em;text-decoration:none}
.sx-brand:hover{text-decoration:none}
.sx-brand img{border-radius:9px;box-shadow:0 6px 14px -6px rgba(1,53,244,.55);height:32px;width:32px}
.sx-topbar .gsearch{background:var(--sx-canvas);border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-field);height:38px;justify-self:start;margin:0;max-width:600px;transition:background .2s,box-shadow .2s;width:100%}
.sx-topbar .gsearch .i{height:17px;left:12px;top:10.5px;width:17px}
.sx-topbar .gsearch input{font-size:13.5px;height:38px;padding-left:38px}
.sx-topbar .gsearch:focus-within{background:#fff;box-shadow:0 0 0 2px var(--sx-blue),0 0 0 5px var(--sx-blue-soft)}
.sx-top-actions{align-items:center;display:flex;gap:6px}
.sx-top-actions .btn-post{background:var(--sx-grad);border-radius:var(--sx-r-sm);box-shadow:0 8px 18px -8px rgba(1,53,244,.7);display:inline-flex;font-size:13.5px;font-weight:700;gap:5px;height:36px;margin:0 4px 0 0;padding:0 14px 0 10px;transition:transform .2s var(--sx-ease),box-shadow .2s}
.sx-top-actions .btn-post:hover{box-shadow:0 12px 24px -8px rgba(1,53,244,.75);transform:translateY(-1px)}
.sx-top-actions .btn-post .i{height:17px;width:17px}
.sx-icon-btn{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-muted);display:flex;height:36px;justify-content:center;position:relative;transition:background .2s,color .2s;width:36px}
.sx-icon-btn:hover{background:var(--sx-canvas);color:var(--sx-ink);text-decoration:none}
.sx-icon-btn .i{height:20px;width:20px}
.sx-icon-btn .badge{right:3px;top:3px}
.sx-topbar .me-menu{height:auto}
.sx-me-trigger{align-items:center;background:#fff;border:0;border-radius:999px;box-shadow:var(--sx-shadow-in);cursor:pointer;display:flex;gap:7px;list-style:none;margin-left:4px;padding:2px 9px 2px 2px;transition:box-shadow .2s}
.sx-me-trigger::-webkit-details-marker{display:none}
.sx-me-trigger:hover{box-shadow:var(--sx-shadow-2)}
.sx-me-trigger .avatar-badge{display:none}
.sx-me-trigger .avatar-34{height:30px;width:30px}
.sx-me-name{color:var(--sx-ink);font-size:12.5px;font-weight:700;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-me-trigger .caret{color:var(--sx-muted);height:13px;width:13px}
.sx-topbar .me-panel{border:0;border-radius:var(--sx-r-lg);box-shadow:var(--sx-shadow-pop);top:calc(100% + 8px);z-index:120}
.signal-app .me-section,.signal-app .me-panel form{border-top:0;padding-top:4px}
.signal-app .me-panel .me-actions .me-primary{background:var(--sx-blue-soft);border:0}

/* ---------- Four-column shell ---------- */
.sx-shell{align-items:start;display:grid;gap:var(--sx-gap);grid-template-columns:228px minmax(0,1fr) 280px 280px;margin:0 auto;max-width:1640px;padding:calc(var(--sx-top) + var(--sx-gap)) 20px 40px}
.sx-shell.sx-no-context{grid-template-columns:228px minmax(0,1fr) 300px}
.sx-shell.sx-profile{grid-template-columns:228px 280px minmax(0,1fr)}
.sx-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.sx-nav,.sx-context,.sx-community{align-self:start;max-height:calc(100dvh - var(--sx-top) - var(--sx-gap) * 2);overflow:auto;position:sticky;scrollbar-width:none;top:calc(var(--sx-top) + var(--sx-gap))}
.sx-nav::-webkit-scrollbar,.sx-context::-webkit-scrollbar,.sx-community::-webkit-scrollbar{display:none}
/* Padding lets shadows breathe inside the scroll containers instead of being clipped. */
.sx-context,.sx-community{display:flex;flex-direction:column;gap:12px;margin:-6px;padding:6px 6px 10px}
.sx-nav{margin:-6px;padding:6px}

/* Column 1: navigation */
.sx-nav-inner{display:flex;flex-direction:column;gap:1px}
.sx-nav-me{align-items:center;background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-1);color:var(--sx-ink);display:flex;gap:9px;margin-bottom:10px;padding:8px 10px;text-decoration:none;transition:box-shadow .2s}
.sx-nav-me:hover{box-shadow:var(--sx-shadow-2);text-decoration:none}
.sx-nav-me.active{box-shadow:0 0 0 2px var(--sx-blue),var(--sx-shadow-1)}
.sx-nav-me>span:last-child{min-width:0}
.sx-nav-me b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-nav-me small{color:var(--sx-charge);display:block;font-size:11.5px;font-weight:600}
.sx-nav-me .avatar-badge{display:none}
.sx-nav-group{display:flex;flex-direction:column;gap:1px}
.sx-nav-item{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-ink-2);display:flex;font-size:13.5px;font-weight:600;gap:10px;height:36px;padding:0 10px;position:relative;text-align:left;text-decoration:none;transition:background .18s,color .18s,box-shadow .18s;width:100%}
.sx-nav-item .i{color:var(--sx-faint);flex:0 0 18px;height:18px;transition:color .18s;width:18px}
.sx-nav-item:hover{background:rgba(255,255,255,.7);color:var(--sx-ink);text-decoration:none}
.sx-nav-item:hover .i{color:var(--sx-ink-2)}
.sx-nav-item.active{background:#fff;box-shadow:var(--sx-shadow-1);color:var(--sx-blue)}
.sx-nav-item.active .i{color:var(--sx-blue)}
.sx-count{align-items:center;background:var(--sx-danger);border-radius:999px;color:#fff;display:flex;font-size:10.5px;font-weight:700;height:18px;justify-content:center;margin-left:auto;min-width:18px;padding:0 5px}
.sx-amount{background:var(--sx-charge-soft);border-radius:999px;color:var(--sx-charge);font-size:11px;font-weight:700;margin-left:auto;padding:2px 7px;white-space:nowrap}
.sx-nav-label{color:var(--sx-faint);font-size:10.5px;font-weight:700;letter-spacing:.09em;padding:14px 10px 4px;text-transform:uppercase}
.sx-nav-cta{align-items:center;background:var(--sx-pearl);border-radius:var(--sx-r);box-shadow:var(--sx-shadow-1);color:var(--sx-ink);display:flex;gap:10px;margin-top:14px;padding:12px;text-decoration:none;transition:transform .2s var(--sx-ease),box-shadow .2s}
.sx-nav-cta:hover{box-shadow:var(--sx-shadow-2);color:var(--sx-ink);text-decoration:none;transform:translateY(-2px)}
.sx-nav-cta b{display:block;font-size:13.5px}
.sx-nav-cta small{color:var(--sx-muted);display:block;font-size:11.5px;line-height:1.4;margin-top:2px}
.sx-nav-cta-icon{align-items:center;background:linear-gradient(135deg,#FFF6E4 0%,#FFE6BA 100%);border-radius:10px;box-shadow:0 6px 14px -8px rgba(240,138,0,.55);color:var(--sx-bounty);display:flex;flex:0 0 34px;height:34px;justify-content:center}
.sx-nav-cta-icon .i{height:17px;width:17px}

/* Column 3: my desk */
.sx-identity{overflow:hidden}
.sx-identity .id-cover{border-radius:0;height:68px}
.sx-identity .id-body{padding:0 14px 12px}
.sx-identity .profile-main-avatar{border-width:3px;margin-top:-34px}
.sx-identity .avatar-72{height:64px;width:64px}
.sx-identity .id-body h1{font-size:16.5px;font-weight:800;margin-top:6px}
.sx-identity .headline{color:var(--sx-ink-2);font-size:12.5px}
.sx-identity .region{font-size:11.5px;margin-top:3px}
.sx-charge{margin-top:10px}
.sx-charge-head{color:var(--sx-muted);display:flex;font-size:11.5px;font-weight:600;justify-content:space-between;margin-bottom:5px}
.sx-charge-head b{color:var(--sx-ink)}
.sx-charge .charge-chip{background:var(--sx-canvas);border:0;height:6px;width:100%}
.sx-charge .charge-chip i{background:var(--sx-grad);border-radius:999px}
.signal-app .contact-proof-row{align-items:center;border-radius:999px;display:inline-flex;font-size:11.5px;font-weight:700;gap:5px;margin-top:10px;padding:4px 9px 4px 7px;text-decoration:none}
.signal-app .contact-proof-row .i{height:13px;width:13px}
.signal-app .contact-proof-row.ok{background:var(--sx-charge-soft);color:var(--sx-charge)}
.signal-app .contact-proof-row.needed{background:var(--sx-bounty-soft);color:var(--sx-bounty)}
.sx-id-stats{display:grid;gap:8px;grid-template-columns:1fr 1fr;padding:2px 14px 12px}
.sx-id-stats a{background:#fff;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-muted);font-size:11px;padding:7px 10px;text-decoration:none;transition:box-shadow .2s,transform .2s var(--sx-ease)}
.sx-id-stats a:hover{box-shadow:var(--sx-shadow-2);text-decoration:none;transform:translateY(-1px)}
.sx-id-stats b{color:var(--sx-ink);display:block;font-size:16px;font-weight:800;line-height:1.2}
.signal-app .plug-page-row{background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);font-size:12.5px;height:36px;margin:0 14px 14px;padding:0 10px;transition:box-shadow .2s}
.signal-app .plug-page-row:hover{background:#fff;box-shadow:var(--sx-shadow-2)}
.signal-app .plug-page-row>.i{color:var(--sx-faint);height:15px;margin-left:auto;width:15px}
.signal-app .plug-page-logo{background:var(--sx-blue-soft);border-radius:7px;height:22px;width:22px}
/* Plug Desk: light "pearl" money card. Meaning colours carry the money semantics, not a heavy surface. */
.sx-money-card{background:var(--sx-pearl);color:var(--sx-ink);overflow:hidden;padding:14px 16px;position:relative}
.signal-app .sx-money-card{box-shadow:var(--sx-shadow-1)}
.sx-money-card>*{position:relative;z-index:1}
.signal-app .sx-money-card .right-title h2{color:var(--sx-ink)}
.signal-app .sx-money-card .right-title .sx-link-btn{background:var(--sx-blue-soft);border-radius:999px;color:var(--sx-blue);font-size:11.5px;font-weight:700;height:auto;padding:4px 10px;width:auto}
.signal-app .sx-money-card .right-title .sx-link-btn:hover{background:#DFE6FF}
.sx-balance{margin-top:4px}
.sx-balance span{color:var(--sx-muted);display:block;font-size:11.5px;font-weight:600}
.sx-balance b{color:var(--sx-ink);display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sx-balance small{color:var(--sx-faint);font-size:13px;font-weight:700}
.sx-balance-split{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:10px}
.sx-balance-split span{background:#fff;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-muted);font-size:11px;font-weight:600;padding:7px 9px}
.sx-balance-split b{color:var(--sx-ink);display:block;font-size:13.5px;margin-top:1px}
.sx-dot{border-radius:50%;display:inline-block;height:6px;margin-right:5px;width:6px}
.sx-dot.escrow{background:#F0A21F}.sx-dot.pending{background:#19B97A}
.sx-money-actions{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:10px}
.sx-money-actions a{align-items:center;background:#fff;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-ink);display:flex;font-size:12.5px;font-weight:700;gap:5px;height:34px;justify-content:center;text-decoration:none;transition:box-shadow .2s,transform .2s var(--sx-ease)}
.sx-money-actions a:first-child{color:var(--sx-charge)}
.sx-money-actions a+a{color:var(--sx-bounty)}
.sx-money-actions a:hover{box-shadow:var(--sx-shadow-2);text-decoration:none;transform:translateY(-1px)}
.sx-money-actions .i{height:15px;width:15px}

/* Column 4: community */
.sx-lines-card{padding:12px 14px}
.sx-line-row{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-ink);display:flex;gap:9px;margin:0 -8px;padding:5px 8px;text-decoration:none;transition:background .18s}
.sx-line-row:hover{background:var(--sx-tint);text-decoration:none}
.sx-line-row>span:last-child{min-width:0}
.sx-line-row b{display:block;font-size:12.5px;font-weight:700}
.sx-line-row small{color:var(--sx-muted);display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-line-row .avatar-badge{display:none}
.sx-line-row .avatar-34{height:32px;width:32px}

/* ---------- Shared rail cards ---------- */
.signal-app .right-card,.signal-app .circuit-rail-card{padding:12px 14px}
.signal-app .right-title{margin-bottom:6px}
.signal-app .right-title h2{color:var(--sx-ink);font-size:14px;font-weight:700}
.signal-app .right-title a{background:var(--sx-blue-soft);border-radius:999px;color:var(--sx-blue);font-size:11.5px;font-weight:700;padding:3px 9px}
.signal-app .right-title a:hover{background:#DFE6FF;text-decoration:none}
.signal-app .right-title button .i{height:16px;width:16px}
.signal-app .rail-count{background:var(--sx-tint);border:0;color:var(--sx-ink-2);font-size:10.5px;padding:2px 8px}
.signal-app .rail-note{color:var(--sx-muted);font-size:12px}
.signal-app .bounty-row{border-radius:var(--sx-r-sm);grid-template-columns:32px minmax(0,1fr) 14px;margin:0 -8px;min-height:44px;padding:6px 8px}
.signal-app .bounty-row .tile{background:var(--sx-bounty-soft);border-radius:9px;color:var(--sx-bounty);height:32px;width:32px}
.signal-app .bounty-row .tile .i{height:16px;width:16px}
.signal-app .bounty-row b{font-size:12.5px}
.signal-app .bounty-row small{color:var(--sx-bounty);font-size:11.5px;font-weight:600}
.signal-app .bounty-row>.i{height:14px;width:14px}
.signal-app .show-more,.signal-app .footer-link{border-radius:var(--sx-r-sm);color:var(--sx-blue);font-size:12.5px;font-weight:700;margin:4px -8px -2px;padding:6px 8px}
.signal-app .person-row{align-items:flex-start;gap:9px;margin:8px 0}
.signal-app .person-row .avatar-badge{display:none}
.signal-app .person-row .avatar-48{height:40px;width:40px}
.signal-app .person-row b{font-size:12.5px}
.signal-app .person-row small{font-size:11.5px}
.signal-app .person-row button{background:var(--sx-blue-soft);border:0;border-radius:999px;color:var(--sx-blue);font-size:12px;font-weight:700;height:26px;padding:0 11px;transition:background .18s}
.signal-app .person-row button:hover{background:#DFE6FF;box-shadow:none}
.signal-app .person-meta{flex-wrap:nowrap;gap:3px;margin-top:4px;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);overflow:hidden}
.signal-app .person-meta i{background:var(--sx-tint);border:0;color:var(--sx-muted);flex:0 0 auto;font-size:10px;padding:3px 6px;white-space:nowrap}
.signal-app .person-row>span:last-child{min-width:0}
.signal-app .signal-grid{gap:6px}
.signal-app .signal-tile{background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);min-height:0;padding:8px 10px;transition:box-shadow .2s,transform .2s var(--sx-ease)}
.signal-app .signal-tile:hover{box-shadow:var(--sx-shadow-2);transform:translateY(-1px)}
.signal-app .signal-tile b{color:var(--sx-ink);font-size:17px;font-weight:800}
.signal-app .signal-tile span{font-size:11px}
.signal-app .pulse-row{border-top:0;padding:6px 0}
.signal-app .pulse-row b{font-size:12.5px;margin-top:4px}
.signal-app .pulse-type{border:0}
.signal-app .pulse-type.bounty{background:var(--sx-bounty-soft);color:var(--sx-bounty)}
.signal-app .pulse-type.process{background:var(--sx-violet-soft);color:var(--sx-violet)}
.signal-app .promo-card{padding:12px 14px}
.signal-app .promo-card a{background:var(--sx-blue-soft);border:0;color:var(--sx-blue);font-weight:700}

/* ---------- Composer and feed ---------- */
.signal-app .whatsnew{background:var(--sx-pearl);border:0;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-1);font-size:12.5px;padding:10px 14px}
.signal-app .composer-v2{padding:12px 14px}
.signal-app .composer-v2 .avatar-badge,.signal-app .post-author .avatar-badge{display:none}
.signal-app .composer-v2 .avatar-48{height:40px;width:40px}
.signal-app .start-input{background:var(--sx-tint);border:0;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-field);color:var(--sx-muted);font-size:13.5px;font-weight:500;height:40px;transition:background .18s}
.signal-app .composer-v2 summary:hover .start-input{background:var(--sx-canvas)}
.signal-app .type-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.signal-app .type-actions button{background:#fff;border-radius:999px;box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2);font-size:12.5px;gap:6px;height:30px;padding:0 12px;transition:box-shadow .2s,transform .2s var(--sx-ease)}
.signal-app .type-actions button:hover{background:#fff;box-shadow:var(--sx-shadow-2);transform:translateY(-1px)}
.signal-app .type-actions .i{height:15px;width:15px}
.signal-app .type-actions button:nth-child(1) .i{color:var(--sx-blue)}
.signal-app .type-actions button:nth-child(2) .i{color:var(--sx-bounty)}
.signal-app .type-actions button:nth-child(3) .i{color:var(--sx-violet)}
.signal-app .composer-form-v2{border-top:0;margin-top:10px;padding-top:2px}
.signal-app .composer-form-v2 input,.signal-app .composer-form-v2 select,.signal-app .composer-form-v2 textarea,.signal-app .people-search-form input{background:var(--sx-tint);border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-field)}
.signal-app .composer-form-v2 input:focus,.signal-app .composer-form-v2 select:focus,.signal-app .composer-form-v2 textarea:focus{background:#fff;box-shadow:0 0 0 2px var(--sx-blue),0 0 0 5px var(--sx-blue-soft)}
.signal-app .sort-divider{justify-content:flex-end;margin:-2px 2px;min-height:18px}
.signal-app .sort-divider::before{display:none}
.signal-app .sort-divider span{background:transparent;font-size:11.5px;padding:0}

.signal-app .post-v2{border-radius:var(--sx-r-lg);transition:box-shadow .25s var(--sx-ease)}
.signal-app .post-v2:hover{box-shadow:var(--sx-shadow-2)}
.signal-app .post-context{font-size:11.5px;padding:10px 14px 0}
.signal-app .post-context::after{display:none}
.signal-app .post-author{gap:10px;padding:12px 14px 0}
.signal-app .post-author .avatar-48{height:42px;width:42px}
.signal-app .author-name{color:var(--sx-ink);font-size:14px;font-weight:700}
.signal-app .post-author p{font-size:12px}
.signal-app .post-author small{font-size:11.5px}
.signal-app .follow-btn{background:var(--sx-blue-soft);border-radius:999px;font-size:12.5px;font-weight:700;padding:5px 11px}
.signal-app .follow-btn:hover{background:#DFE6FF}
.signal-app .chip-line{gap:6px;padding:8px 14px 0}
.signal-app .post-chip{border-radius:999px;font-size:11px;height:22px;padding:0 9px}
.signal-app .post-chip.need{background:var(--sx-blue-soft);color:var(--sx-blue)}
.signal-app .post-chip.bounty{background:var(--sx-grad-bounty);box-shadow:0 6px 14px -8px rgba(240,138,0,.9);color:#fff;min-width:0}
.signal-app .post-chip.bounty b{margin-left:7px}
.signal-app .post-chip.process{background:var(--sx-violet-soft);border:0;color:var(--sx-violet)}
.signal-app .post-chip.post{background:var(--sx-tint);color:var(--sx-muted)}
.signal-app .post-chip.gated{background:var(--sx-charge-soft);color:var(--sx-charge)}
.signal-app .post-text{padding:8px 14px 2px}
.signal-app .post-text h2{color:var(--sx-ink);font-size:15px;font-weight:700;margin-bottom:3px}
.signal-app .post-media{aspect-ratio:16/9;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);margin:8px 14px 0;width:calc(100% - 28px)}
.signal-app .demo-media{border-radius:var(--sx-r);margin:8px 14px 0}
.signal-app .proof-row{border:0;font-size:11.5px;padding:8px 14px 2px}
.signal-app .spark-cluster{background:var(--sx-grad);height:16px;width:16px}
.signal-app .action-row{border-top:0;margin:2px 8px 0;padding:0 0 6px}
.signal-app .action-row button,.signal-app .action-row a{border-radius:var(--sx-r-sm);font-size:12.5px;height:34px;min-width:0}
.signal-app .action-row .i{height:18px;width:18px}
.signal-app .action-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signal-app .action-row button:hover,.signal-app .action-row a:hover{background:var(--sx-tint);color:var(--sx-ink)}
.signal-app .action-row .sparked{color:var(--sx-blue)}
.share-strip{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 12px}
.share-strip a,.share-strip button{background:#fff;border:0;border-radius:999px;box-shadow:var(--sx-shadow-in);color:var(--sx-muted);font-size:11.5px;font-weight:600;padding:4px 10px;text-decoration:none;transition:box-shadow .2s,color .18s}
.share-strip a:hover,.share-strip button:hover{box-shadow:var(--sx-shadow-2);color:var(--sx-blue);text-decoration:none}
.signal-app .official-post{background:var(--sx-pearl);box-shadow:var(--sx-shadow-glow)}
.signal-app .official-post:hover{box-shadow:0 2px 6px rgba(1,53,244,.06),0 20px 44px -16px rgba(1,53,244,.4)}
.signal-app .empty-state{border-radius:var(--sx-r-lg);padding:26px 16px}
.signal-app .empty-icon{background:var(--sx-blue-soft);border-radius:var(--sx-r);height:48px;width:48px}
.signal-app .load-more{border:0;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-1);font-weight:700;padding:9px}
.signal-app .feed .btn-post,.signal-app .circuit-hero .btn-post,.signal-app .empty-state .btn-post{background:var(--sx-grad);border-radius:var(--sx-r-sm);display:inline-flex;gap:5px;height:36px}
.signal-app .profile-btn{background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);gap:5px;height:34px;transition:box-shadow .2s}
.signal-app .profile-btn:hover{background:#fff;box-shadow:var(--sx-shadow-2)}
.signal-app .profile-btn.primary{background:var(--sx-blue);box-shadow:0 8px 18px -8px rgba(1,53,244,.6);color:#fff}
.signal-app .profile-btn.primary:hover{background:var(--sx-blue-600)}
.signal-app .profile-btn .i,.signal-app .btn-post .i{height:16px;width:16px}

/* Profile internals: tinted fills and shadows instead of outlines. */
.signal-app .profile-panel{padding:14px 16px}
.signal-app .profile-side-card{padding:12px 14px}
.signal-app .profile-list{gap:6px}
.signal-app .profile-list-row{background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);padding:8px 10px}
.signal-app .profile-pill{border:0}
.signal-app .profile-meter{background:var(--sx-canvas);border:0;height:7px}
.signal-app .profile-meter i{background:var(--sx-grad)}
.signal-app .profile-stats{background:#fff;border-radius:var(--sx-r);border-top:0;box-shadow:var(--sx-shadow-in);margin:0 16px 14px}
.signal-app .profile-stat{padding:10px 12px}
.signal-app .profile-review{border-top:0;padding:10px 0}
.signal-app .profile-cover-tools,.signal-app .profile-cover-tools .profile-cover-action{border:0;box-shadow:var(--sx-shadow-in)}
.signal-app .profile-cover-trigger{justify-content:flex-end}
.signal-app .profile-cover-trigger span{border:0;box-shadow:var(--sx-shadow-in)}
.signal-app .media-upload-row{border:0;box-shadow:var(--sx-shadow-in)}
.signal-app .media-editor-tile{border:0}
.signal-app .media-delete-row,.signal-app .media-library-delete{background:#FFF1F3;border:0}
.signal-app .meter{border:0}

/* Direct Lines dock only appears when the community column is hidden. */
.signal-app .lines-dock{display:none}

/* ---------- Money drawer (Wallet, Bounties, Escrow) ---------- */
.money-dock{display:none}
.money-backdrop{background:rgba(11,20,53,.36);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:0;inset:0;position:fixed;z-index:140}
.money-backdrop[hidden]{display:none}
.money-drawer{background:#fff;border-radius:18px;bottom:14px;box-shadow:var(--sx-shadow-pop);display:flex;flex-direction:column;overflow:hidden;position:fixed;right:14px;top:calc(var(--sx-top) + 10px);transform:translateX(calc(100% + 28px));transition:transform .38s var(--sx-ease),visibility 0s linear .38s;visibility:hidden;width:min(720px,calc(100vw - 28px));z-index:150}
.money-drawer.open{transform:none;transition:transform .38s var(--sx-ease),visibility 0s;visibility:visible}
.money-drawer-head{align-items:center;background:var(--sx-pearl);box-shadow:0 10px 24px -20px rgba(15,23,60,.4);color:var(--sx-ink);display:flex;justify-content:space-between;padding:14px 18px;position:relative;z-index:1}
.money-head-title{align-items:center;display:flex;gap:10px}
.money-head-icon{align-items:center;background:#fff;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-charge);display:flex;height:36px;justify-content:center;width:36px}
.money-head-icon .i{height:18px;width:18px}
.money-kicker{color:var(--sx-faint);display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.money-drawer-head h2{color:var(--sx-ink);font-size:18px;font-weight:800}
.money-drawer-head>button{align-items:center;background:#fff;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2);display:flex;height:34px;justify-content:center;width:34px}
.money-drawer-head>button:hover{box-shadow:var(--sx-shadow-2)}
.money-drawer-head>button .i{height:17px;width:17px}
.money-tabs{border-bottom:0;display:flex;gap:4px;padding:10px 14px 2px}
.money-tabs button{align-items:center;border-radius:999px;color:var(--sx-muted);display:flex;font-size:12.5px;font-weight:700;gap:6px;height:32px;padding:0 12px}
.money-tabs button:hover{background:var(--sx-tint);color:var(--sx-ink)}
.money-tabs button.active{background:#fff;box-shadow:var(--sx-shadow-in);color:var(--sx-blue)}
.money-tabs .i{height:16px;width:16px}
.money-pane{display:none;flex:1;overflow:auto;padding:12px 18px 18px}
.money-pane.active{animation:sx-fade .3s var(--sx-ease);display:block}
.money-pane h3{color:var(--sx-faint);font-size:10.5px;font-weight:700;letter-spacing:.09em;margin:14px 0 6px;text-transform:uppercase}
.money-pane>p{color:var(--sx-muted);font-size:12.5px;margin-top:12px}
.money-toolbar{align-items:center;display:flex;gap:10px;justify-content:space-between}
.money-toolbar b{color:var(--sx-ink);font-size:14px}
.money-toolbar>a{align-items:center;background:var(--sx-blue-soft);border-radius:999px;color:var(--sx-blue);display:inline-flex;font-size:12px;font-weight:700;gap:5px;padding:5px 11px}
.money-toolbar .i{height:14px;width:14px}
.money-actions{display:flex;gap:2px}
.money-actions button{align-items:center;border-radius:999px;color:var(--sx-muted);display:flex;font-size:11.5px;font-weight:600;gap:4px;padding:5px 9px}
.money-actions button:hover{background:var(--sx-tint);color:var(--sx-ink)}
/* Tables: white rows floating on a tinted tray, no rule lines. */
.money-table,.wallet-bank-table{background:var(--sx-tint);border:0;border-radius:var(--sx-r);display:grid;gap:3px;overflow:hidden;padding:4px}
.money-tr{align-items:center;background:#fff;border:0;border-radius:9px;display:grid;font-size:12.5px;gap:10px;grid-template-columns:minmax(0,1.7fr) 1fr .8fr .8fr .6fr;padding:9px 12px}
.money-th{background:transparent;color:var(--sx-muted);font-size:11px;font-weight:700;padding-bottom:5px;padding-top:6px}
.money-tr b{color:var(--sx-ink)}
.money-tr>a:last-child{color:var(--sx-blue);font-weight:700}
.money-account{align-items:center;color:var(--sx-ink);display:flex;font-weight:700;gap:8px;min-width:0}
.money-account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.money-account .i{color:var(--sx-blue);flex:0 0 16px;height:16px;width:16px}
.money-empty{color:var(--sx-muted);grid-template-columns:1fr}
.money-add{align-items:center;background:var(--sx-blue-soft);border:0;border-radius:var(--sx-r-sm);color:var(--sx-blue);display:inline-flex;font-size:12.5px;font-weight:700;gap:5px;margin-top:10px;padding:8px 12px}
.money-add:hover{background:#DFE6FF;text-decoration:none}
.money-add .i{height:15px;width:15px}
.money-offer-grid{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.money-offer-grid span{background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);padding:12px}
.money-offer-grid small{color:var(--sx-muted);display:block;font-size:11.5px}
.money-offer-grid b{color:var(--sx-ink);display:block;font-size:20px;font-weight:800;margin-top:3px}
@keyframes sx-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Wallet page ---------- */
.wallet-bank-shell{overflow:hidden;padding:0}
.wallet-bank-head{align-items:flex-end;background:var(--sx-pearl);color:var(--sx-ink);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:18px 18px 14px}
.wallet-bank-head span{color:var(--sx-faint);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.wallet-bank-head h1{color:var(--sx-ink);font-size:23px;font-weight:800;margin-top:3px}
.wallet-bank-menu{display:flex;flex-wrap:wrap;gap:5px}
.wallet-bank-menu a{background:#fff;border-radius:999px;box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2);font-size:12.5px;font-weight:700;padding:6px 12px;transition:box-shadow .2s}
.wallet-bank-menu a:hover{box-shadow:var(--sx-shadow-2);color:var(--sx-blue);text-decoration:none}
.wallet-bank-tabs{border-bottom:0;display:flex;gap:4px;padding:10px 14px 0}
.wallet-bank-tabs a{border-radius:999px;color:var(--sx-muted);font-size:12.5px;font-weight:700;padding:6px 12px}
.wallet-bank-tabs a:hover{background:var(--sx-tint);text-decoration:none}
.wallet-bank-tabs a.active{background:#fff;box-shadow:var(--sx-shadow-in);color:var(--sx-blue)}
.wallet-bank-tools{display:flex;gap:2px;justify-content:flex-end;padding:4px 16px 0}
.wallet-bank-tools span{flex:1}
.wallet-bank-tools button{align-items:center;border-radius:999px;color:var(--sx-muted);display:inline-flex;font-size:11.5px;font-weight:600;gap:4px;padding:5px 9px}
.wallet-bank-tools button:hover{background:var(--sx-tint)}
.wallet-bank-tools .i{height:14px;width:14px}
.wallet-alert{background:var(--sx-bounty-soft);border-radius:var(--sx-r);color:#7A4A00;margin:12px 16px;padding:10px 12px}
.wallet-alert b{display:block}
.wallet-bank-offers{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 16px 12px}
.wallet-bank-offers h2{color:var(--sx-ink);font-size:14px;grid-column:1/-1}
.wallet-bank-offers a{background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);color:var(--sx-ink);display:flex;flex-direction:column;gap:3px;padding:12px;transition:transform .2s var(--sx-ease),box-shadow .2s}
.wallet-bank-offers a:hover{box-shadow:var(--sx-shadow-2);text-decoration:none;transform:translateY(-2px)}
.wallet-bank-offers a span{align-items:center;background:var(--sx-blue-soft);border-radius:9px;color:var(--sx-blue);display:flex;height:32px;justify-content:center;margin-bottom:4px;width:32px}
.wallet-bank-offers .i{height:16px;width:16px}
.wallet-bank-offers b{font-size:13.5px}
.wallet-bank-offers small{color:var(--sx-muted);font-size:11.5px}
.wallet-bank-table-wrap{padding:2px 16px 16px}
.wallet-bank-table-wrap h2{color:var(--sx-faint);font-size:10.5px;font-weight:700;letter-spacing:.09em;margin:8px 0 6px;text-transform:uppercase}
.wallet-bank-row{align-items:center;background:#fff;border:0;border-radius:9px;display:grid;font-size:12.5px;gap:10px;grid-template-columns:minmax(0,1.6fr) 1fr .9fr .9fr .7fr;padding:9px 12px}
.wallet-bank-row-head{background:transparent;color:var(--sx-muted);font-size:11px;font-weight:700;padding-bottom:5px;padding-top:6px}
.wallet-bank-row b{color:var(--sx-ink)}
.wallet-bank-row .pos{color:var(--sx-charge)}
.wallet-bank-row .neg{color:var(--sx-danger)}
.wallet-bank-row small{color:var(--sx-faint);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.wallet-pill{background:var(--sx-blue-soft);border-radius:999px;color:var(--sx-blue);display:inline-flex;font-size:11.5px;font-weight:700;padding:3px 9px}
.signal-app .wallet-bank-table-wrap .money-add{margin-top:8px}

/* ---------- My Circuit and People ---------- */
.circuit-kicker{color:var(--sx-blue);display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.circuit-hero{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 250px;overflow:hidden;padding:18px;position:relative}
.circuit-hero::before{background:radial-gradient(circle,rgba(1,53,244,.11),transparent 70%);content:"";height:240px;position:absolute;right:-80px;top:-110px;width:240px}
.circuit-hero>*{position:relative}
.circuit-hero h1{color:var(--sx-ink);font-size:22px;font-weight:800;line-height:1.15;margin-top:4px}
.circuit-hero p{color:var(--sx-muted);font-size:13px;margin-top:6px;max-width:520px}
.circuit-hero-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.circuit-hero-stats{display:grid;gap:6px;grid-template-columns:1fr 1fr}
.circuit-hero-stats span{background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);color:var(--sx-muted);font-size:11.5px;padding:9px 10px}
.circuit-hero-stats b{color:var(--sx-ink);display:block;font-size:19px;font-weight:800}
.circuit-switcher{display:flex;gap:4px;padding:5px}
.circuit-switcher a{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-muted);display:flex;flex:1;font-size:12.5px;font-weight:700;gap:6px;height:34px;justify-content:center}
.circuit-switcher a:hover{background:var(--sx-tint);text-decoration:none}
.circuit-switcher a.active{background:#fff;box-shadow:var(--sx-shadow-in);color:var(--sx-blue)}
.circuit-switcher .i{height:16px;width:16px}
.circuit-panel{padding:14px 16px}
.circuit-panel-head{align-items:flex-end;display:flex;justify-content:space-between;margin-bottom:8px}
.circuit-panel-head h2{color:var(--sx-ink);font-size:15.5px;font-weight:800;margin-top:2px}
.circuit-panel-head>a{background:var(--sx-blue-soft);border-radius:999px;font-size:11.5px;font-weight:700;padding:4px 10px}
.circuit-request-list{display:grid;gap:6px}
.circuit-request{align-items:center;background:#fff;border:0;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);display:flex;gap:12px;justify-content:space-between;padding:9px 12px}
.circuit-person{align-items:center;color:var(--sx-ink);display:flex;gap:10px;min-width:0}
.circuit-person:hover{text-decoration:none}
.circuit-person .avatar-48{height:40px;width:40px}
.circuit-person b{display:block;font-size:13.5px}
.circuit-person small{color:var(--sx-muted);display:block;font-size:12px}
.circuit-person i{color:var(--sx-faint);display:block;font-size:11px;font-style:normal;margin-top:1px}
.circuit-person .avatar-badge,.circuit-connection .avatar-badge,.circuit-match .avatar-badge{display:none}
.circuit-request-actions{display:flex;flex:0 0 auto;gap:6px}
.circuit-btn{border-radius:999px;font-size:12.5px;font-weight:700;height:30px;padding:0 14px}
.circuit-btn.ghost{background:#fff;border:0;box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2)}
.circuit-btn.ghost:hover{box-shadow:var(--sx-shadow-2)}
.circuit-btn.primary{background:var(--sx-blue);color:#fff}
.circuit-btn.primary:hover{background:var(--sx-blue-600)}
.circuit-strip{align-items:center;background:linear-gradient(120deg,#fff 0%,var(--sx-blue-soft) 100%);display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px}
.circuit-strip>div{flex:1;min-width:220px}
.circuit-strip h2{color:var(--sx-ink);font-size:14px;font-weight:700;margin-top:2px}
.circuit-strip>a{background:#fff;border-radius:999px;box-shadow:var(--sx-shadow-in);font-size:12.5px;font-weight:700;padding:6px 13px}
.circuit-connection-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.circuit-connection{background:#fff;border:0;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);color:var(--sx-ink);display:block;padding:12px;transition:transform .2s var(--sx-ease),box-shadow .2s}
.circuit-connection:hover{box-shadow:var(--sx-shadow-2);text-decoration:none;transform:translateY(-2px)}
.circuit-connection-top{align-items:flex-start;display:flex;justify-content:space-between}
.circuit-connection-top .avatar-48{height:42px;width:42px}
.circuit-connection-top b{background:var(--sx-violet-soft);border-radius:999px;color:var(--sx-violet);font-size:10.5px;padding:2px 7px}
.circuit-connection strong{display:block;font-size:13.5px;margin-top:8px}
.circuit-connection small{-webkit-box-orient:vertical;color:var(--sx-muted);display:-webkit-box;font-size:11.5px;-webkit-line-clamp:2;overflow:hidden}
.circuit-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.circuit-tags i{background:var(--sx-tint);border-radius:999px;color:var(--sx-muted);font-size:10.5px;font-style:normal;font-weight:600;padding:2px 7px}
.circuit-empty{align-items:center;display:flex;flex-direction:column;gap:6px;padding:20px 12px;text-align:center}
.circuit-empty h2{color:var(--sx-ink);font-size:15px}
.circuit-empty p{color:var(--sx-muted);font-size:12.5px;max-width:360px}
.circuit-match{border-top:0;display:flex;gap:9px;padding:7px 0}
.circuit-match .avatar-48{height:40px;width:40px}
.circuit-match b{color:var(--sx-ink);font-size:12.5px}
.circuit-match small{color:var(--sx-muted);display:block;font-size:11.5px}
.circuit-match span{color:var(--sx-faint);display:block;font-size:11px;margin-top:1px}
.circuit-match form{margin-top:6px}
.circuit-match button{align-items:center;background:var(--sx-blue-soft);border-radius:999px;color:var(--sx-blue);display:inline-flex;font-size:12px;font-weight:700;gap:4px;height:26px;padding:0 11px}
.circuit-match button .i{height:13px;width:13px}
.circuit-mini-empty{color:var(--sx-muted);font-size:12px;padding:6px 0}
.circuit-mini-empty b{color:var(--sx-ink);display:block}
.circuit-route-list{display:grid;gap:2px}
.circuit-route-list a{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-ink);column-gap:9px;display:grid;grid-template-columns:32px minmax(0,1fr);margin:0 -8px;padding:6px 8px}
.circuit-route-list a:hover{background:var(--sx-tint);text-decoration:none}
.circuit-route-list span{align-items:center;background:var(--sx-blue-soft);border-radius:9px;color:var(--sx-blue);display:flex;grid-row:span 2;height:32px;justify-content:center}
.circuit-route-list .i{height:16px;width:16px}
.circuit-route-list b{font-size:12.5px}
.circuit-route-list small{color:var(--sx-muted);font-size:11.5px}
.circuit-manage-row{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-ink-2);display:flex;font-size:12.5px;font-weight:600;gap:9px;height:34px;margin:0 -8px;padding:0 8px}
.circuit-manage-row:hover{background:var(--sx-tint);text-decoration:none}
.circuit-manage-row .i{color:var(--sx-faint);height:16px;width:16px}
.circuit-manage-row b{color:var(--sx-ink);margin-left:auto}
.circuit-charge-meter{background:var(--sx-canvas);border-radius:999px;height:6px;overflow:hidden}
.circuit-charge-meter i{background:var(--sx-grad);display:block;height:100%}
.circuit-charge-copy{align-items:center;color:var(--sx-muted);display:flex;font-size:11.5px;gap:10px;margin-top:8px}
.circuit-charge-copy b{color:var(--sx-ink);font-size:18px}
.circuit-signal-list{display:grid;gap:6px;grid-template-columns:1fr 1fr}
.circuit-signal-list span{background:#fff;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-muted);font-size:11px;padding:8px 10px}
.circuit-signal-list b{color:var(--sx-ink);display:block;font-size:16px}
.people-search-form{align-items:flex-end;flex-direction:row!important}
.people-search-form label{flex:1}

/* ---------- Legacy page uplift (pages not yet on the app shell) ---------- */
.appnav{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(255,255,255,.88);border-bottom:0;box-shadow:0 6px 22px -16px rgba(15,23,60,.32);height:56px}
.appnav .search{background:var(--sx-canvas);border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-field);min-height:36px}
.btn,.btn-line,.btn-blue{border-radius:var(--sx-r-sm);min-height:34px}
.btn-primary,.btn-blue{background:var(--sx-grad)}
.btn-ghost,.btn-line{background:#fff;border:0;box-shadow:var(--sx-shadow-in)}
.btn-ghost:hover,.btn-line:hover{box-shadow:var(--sx-shadow-2)}
.pad{padding:16px}
.display{color:var(--sx-ink);font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:6px 0 5px}
.sec-h{color:var(--sx-faint);font-size:10.5px;font-weight:700;letter-spacing:.09em;margin:14px 0 6px;text-transform:uppercase}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.empty{color:var(--sx-muted);font-size:12.5px;padding:16px;text-align:center}
.badge.badge-blue,.badge.badge-earn,.badge.badge-warn,.badge.badge-line,.badge-blue,.badge-earn,.badge-warn,.badge-line{align-items:center;border:0;border-radius:999px;display:inline-flex;font-size:11px;font-weight:700;height:auto;min-width:0;padding:3px 9px;position:static;width:auto}
.badge-blue{background:var(--sx-blue-soft);color:var(--sx-blue)}
.badge-earn{background:var(--sx-charge-soft);color:var(--sx-charge)}
.badge-warn{background:var(--sx-bounty-soft);color:var(--sx-bounty)}
.badge-line{background:#fff;box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2)}

/* ==========================================================================
   Page framework: layout variants, page header, component library
   Templates live in templates/pages/. Rules: docs/design/page-templates.md
   ========================================================================== */

/* Layout variants (set by pnp_shell(['layout' => ...])). */
.sx-shell.sx-layout-focus{grid-template-columns:228px minmax(0,860px) 320px;justify-content:start}
.sx-shell.sx-layout-wide{grid-template-columns:228px minmax(0,1fr)}
.sx-layout-focus .sx-community{gap:12px}

/* Page header. */
.sx-page-head{align-items:flex-end;background:var(--sx-pearl);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding:16px 18px}
.sx-page-head-copy{flex:1 1 320px;min-width:0}
.sx-eyebrow{align-items:center;color:var(--sx-blue);display:inline-flex;font-family:var(--sx-display);font-size:10.5px;font-weight:700;gap:6px;letter-spacing:.12em;text-transform:uppercase}
.sx-eyebrow .i{height:14px;width:14px}
.sx-page-head h1{color:var(--sx-ink);font-size:23px;font-weight:800;line-height:1.15;margin-top:4px}
.sx-page-head p{color:var(--sx-muted);font-size:13px;line-height:1.5;margin-top:5px;max-width:620px}
.sx-page-actions{align-items:center;display:flex;flex-wrap:wrap;gap:6px}
.sx-page-actions form{display:inline-flex}

/* Buttons. */
.sx-btn{align-items:center;background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2);cursor:pointer;display:inline-flex;font-size:13px;font-weight:700;gap:6px;height:34px;justify-content:center;padding:0 14px;text-decoration:none;white-space:nowrap}
.sx-btn:hover{box-shadow:var(--sx-shadow-2);color:var(--sx-ink);text-decoration:none}
.sx-btn .i{height:16px;width:16px}
.sx-btn.sx-primary{background:var(--sx-blue);box-shadow:0 8px 18px -8px rgba(1,53,244,.6);color:#fff}
.sx-btn.sx-primary:hover{background:var(--sx-blue-600);color:#fff}
.sx-btn.sx-quiet{background:transparent;box-shadow:none;color:var(--sx-blue)}
.sx-btn.sx-quiet:hover{background:var(--sx-blue-soft)}
.sx-btn.sx-danger{color:var(--sx-danger)}
.sx-btn.sx-block{width:100%}
.sx-btn.sx-sm{font-size:12px;height:28px;padding:0 11px}
.sx-btn[disabled],.sx-btn.is-disabled{cursor:not-allowed;opacity:.5}

/* Sections and cards. */
.sx-section{padding:14px 16px}
.sx-section-head{align-items:center;display:flex;gap:10px;justify-content:space-between;margin-bottom:10px}
.sx-section-head h2{color:var(--sx-ink);font-size:15px;font-weight:700}
.sx-section-head p{color:var(--sx-muted);font-size:12px;margin-top:2px}
.sx-section-head>a{background:var(--sx-blue-soft);border-radius:999px;font-size:11.5px;font-weight:700;padding:4px 10px}
.sx-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(var(--sx-min,240px),1fr))}
.sx-split{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Toolbar: filters + search above a list. */
.sx-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.sx-search{align-items:center;background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-1);display:flex;flex:1 1 220px;gap:8px;max-width:360px;padding:0 12px}
.sx-search .i{color:var(--sx-faint);flex:0 0 16px;height:16px;width:16px}
.signal-app .sx-search input{background:transparent;box-shadow:none;height:42px;padding:0}
.signal-app .sx-search input:focus{box-shadow:none}
.sx-search:focus-within{box-shadow:0 0 0 2px var(--sx-blue),0 0 0 5px var(--sx-blue-soft)}

/* Card internals. */
.sx-badges{display:flex;flex-wrap:wrap;gap:4px}
.sx-meta{color:var(--sx-muted);display:flex;flex-wrap:wrap;font-size:11.5px;gap:4px 10px}
.sx-meta>*+*::before{color:var(--sx-faint);content:"\00B7";margin-right:10px}
.sx-card-actions{align-items:center;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.sx-card-actions form{display:inline-flex}
.sx-grid>.card{display:flex;flex-direction:column;gap:8px}
.sx-grid>.card h2{color:var(--sx-ink);font-size:15px;font-weight:700;line-height:1.3}
.sx-grid>.card h2 a{color:inherit}
.sx-grid>.card>p{color:var(--sx-muted);font-size:12.5px;line-height:1.5}

/* Utilities. */
.sx-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sx-table th.sx-num,.sx-table td.sx-num{text-align:right}
.sx-pos{color:var(--sx-charge);font-weight:700}
.sx-neg{color:var(--sx-danger);font-weight:700}
.sx-mono{color:var(--sx-muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.sx-visually-hidden{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.sx-gap-top{margin-top:12px}

/* Public (signed-out) pages. */
.sx-public{align-items:center;background:radial-gradient(1000px 520px at 10% -10%,rgba(1,53,244,.07),transparent 62%),radial-gradient(800px 460px at 100% 0%,rgba(107,75,255,.06),transparent 60%),#F7F8FC;display:flex;flex-direction:column;gap:18px;justify-content:center;min-height:100dvh;padding:32px 16px}
.sx-public-brand{align-items:center;color:var(--sx-ink);display:flex;font-family:var(--sx-display);font-size:18px;font-weight:800;gap:10px;letter-spacing:-.02em;text-decoration:none}
.sx-public-brand:hover{text-decoration:none}
.sx-public-brand img{border-radius:10px;box-shadow:0 6px 14px -6px rgba(1,53,244,.55);height:36px;width:36px}
.sx-public-panel{background:var(--sx-pearl);border-radius:18px;box-shadow:var(--sx-shadow-2);display:flex;flex-direction:column;gap:12px;max-width:440px;padding:26px;width:100%}
.sx-public-panel h1{color:var(--sx-ink);font-size:26px;font-weight:800;line-height:1.15}
.sx-public-lede{color:var(--sx-muted);font-size:14px;line-height:1.5}
.sx-public-alert{background:#FFECEE;border-radius:var(--sx-r-sm);color:#C42F38;font-size:13px;font-weight:700;padding:10px 12px}
.sx-public-alt{color:var(--sx-muted);font-size:13px;text-align:center}
.sx-public-legal{color:var(--sx-faint);font-size:12px}
.sx-public-wide{max-width:640px}
.sx-public-sub{color:var(--sx-ink);font-size:15px;font-weight:700;margin-top:4px}
.sx-public :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-field),0 1px 0 rgba(255,255,255,.8);color:var(--sx-ink);font:inherit;font-weight:500;min-height:42px;padding:9px 12px;width:100%}
.sx-public :where(input,select,textarea):focus{box-shadow:0 0 0 2px var(--sx-blue),0 0 0 5px var(--sx-blue-soft);outline:0}
.sx-motion .sx-public>*{animation:sx-rise .6s var(--sx-ease) backwards}
.sx-motion .sx-public>:nth-child(2){animation-delay:.08s}
.sx-motion .sx-public>:nth-child(3){animation-delay:.16s}

/* Stats. */
.sx-stats{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.sx-stat{background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);color:var(--sx-muted);display:block;font-size:11.5px;padding:10px 12px;text-decoration:none;transition:box-shadow .2s,transform .2s var(--sx-ease)}
a.sx-stat:hover{box-shadow:var(--sx-shadow-2);text-decoration:none;transform:translateY(-1px)}
.sx-stat b{color:var(--sx-ink);display:block;font-family:var(--sx-display);font-size:20px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.sx-stat.sx-tone-blue b{color:var(--sx-blue)}.sx-stat.sx-tone-charge b{color:var(--sx-charge)}.sx-stat.sx-tone-bounty b{color:var(--sx-bounty)}.sx-stat.sx-tone-violet b{color:var(--sx-violet)}

/* Badges (status semantics shared via pnp_status_tone()). */
.sx-badge{align-items:center;background:var(--sx-tint);border-radius:999px;color:var(--sx-ink-2);display:inline-flex;font-size:11px;font-weight:700;gap:4px;line-height:1;padding:4px 9px;text-transform:capitalize;white-space:nowrap}
.sx-badge.sx-tone-blue{background:var(--sx-blue-soft);color:var(--sx-blue)}
.sx-badge.sx-tone-charge{background:var(--sx-charge-soft);color:var(--sx-charge)}
.sx-badge.sx-tone-bounty{background:var(--sx-bounty-soft);color:var(--sx-bounty)}
.sx-badge.sx-tone-violet{background:var(--sx-violet-soft);color:var(--sx-violet)}
.sx-badge.sx-tone-danger{background:#FFECEE;color:#C42F38}

/* Lists: raised white rows separated by spacing, never rules. */
.sx-list{display:grid;gap:6px}
.sx-row{align-items:center;background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);color:var(--sx-ink);display:flex;gap:12px;justify-content:space-between;padding:10px 12px;text-decoration:none;transition:box-shadow .2s,transform .2s var(--sx-ease)}
a.sx-row:hover,.sx-row.is-link:hover{box-shadow:var(--sx-shadow-2);text-decoration:none;transform:translateY(-1px)}
.sx-row-main{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.sx-row-main b{font-size:13.5px}
.sx-row-main p,.sx-row-main small,.sx-row-main span{color:var(--sx-muted);font-size:12px}
.sx-row-side{align-items:center;display:flex;flex:0 0 auto;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.sx-row.is-unread{box-shadow:0 0 0 2px var(--sx-blue-soft),var(--sx-shadow-in)}

/* Key-value details. */
.sx-kv{display:grid;gap:6px}
.sx-kv>div{align-items:baseline;background:var(--sx-tint);border-radius:var(--sx-r-sm);display:flex;gap:12px;justify-content:space-between;padding:8px 10px}
.sx-kv dt,.sx-kv>div>span:first-child{color:var(--sx-muted);font-size:12px}
.sx-kv dd,.sx-kv>div>b{color:var(--sx-ink);font-size:13px;font-weight:700;text-align:right}

/* Tables: tinted tray with floating white rows. */
.sx-table-wrap{overflow-x:auto}
.sx-table{border-collapse:separate;border-spacing:0 3px;font-size:12.5px;min-width:100%}
.sx-table thead th{color:var(--sx-muted);font-size:11px;font-weight:700;padding:4px 12px;text-align:left;white-space:nowrap}
.sx-table tbody td{background:#fff;padding:9px 12px;vertical-align:middle}
.sx-table tbody td:first-child{border-radius:9px 0 0 9px}
.sx-table tbody td:last-child{border-radius:0 9px 9px 0}
.sx-table-wrap,.sx-table-tray{background:var(--sx-tint);border-radius:var(--sx-r);padding:3px 4px}
.sx-table-wrap{position:relative}
.sx-table td.sx-num,.sx-table td.sx-mono,.sx-table td .sx-badge{white-space:nowrap}

/* Forms. */
.sx-form{display:grid;gap:12px}
.sx-form>*,.sx-form-grid>*{min-width:0}
.sx-field :where(input,select,textarea){max-width:100%}
.sx-form-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sx-field{color:var(--sx-ink);display:flex;flex-direction:column;font-size:12.5px;font-weight:700;gap:5px}
.sx-field small,.sx-hint{color:var(--sx-muted);font-size:11.5px;font-weight:500}
.sx-check{align-items:center;color:var(--sx-ink-2);display:flex;font-size:13px;font-weight:600;gap:8px}
.sx-check input{accent-color:var(--sx-blue);height:16px;width:16px}
.signal-app .sx-field :where(input,select,textarea),.sx-public .sx-field :where(input,select,textarea){font-weight:500}
.sx-field :where(input,textarea)::placeholder{color:var(--sx-faint);font-weight:500}
.sx-field input[type=file]{color:var(--sx-muted);font-size:12.5px;font-weight:500}
.sx-field input[type=file]::file-selector-button{background:#fff;border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-in);color:var(--sx-ink);cursor:pointer;font:inherit;font-weight:700;margin-right:10px;padding:7px 12px}
.sx-form-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}

/* Callouts. */
.sx-callout{align-items:flex-start;background:var(--sx-pearl);border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);display:flex;gap:10px;padding:11px 13px}
.sx-callout b{color:var(--sx-ink);display:block;font-size:13px}
.sx-callout p{color:var(--sx-muted);font-size:12.5px;margin-top:2px}
.sx-callout-icon{align-items:center;border-radius:9px;display:flex;flex:0 0 28px;height:28px;justify-content:center}
.sx-callout-icon .i{height:15px;width:15px}
.sx-callout.sx-info .sx-callout-icon{background:var(--sx-blue-soft);color:var(--sx-blue)}
.sx-callout.sx-success .sx-callout-icon{background:var(--sx-charge-soft);color:var(--sx-charge)}
.sx-callout.sx-warn .sx-callout-icon{background:var(--sx-bounty-soft);color:var(--sx-bounty)}
.sx-callout.sx-danger .sx-callout-icon{background:#FFECEE;color:var(--sx-danger)}

/* Empty states. */
.sx-empty{align-items:center;display:flex;flex-direction:column;gap:6px;padding:24px 14px;text-align:center}
.sx-empty-icon{align-items:center;background:var(--sx-blue-soft);border-radius:var(--sx-r);color:var(--sx-blue);display:flex;height:44px;justify-content:center;margin-bottom:4px;width:44px}
.sx-empty-icon .i{height:20px;width:20px}
.sx-empty b{color:var(--sx-ink);font-family:var(--sx-display);font-size:15px}
.sx-empty p{color:var(--sx-muted);font-size:12.5px;max-width:380px}
.sx-empty-action{margin-top:8px}

/* Pill tabs / filters. */
.sx-tabs,.chip-row{background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-1);display:flex;flex-wrap:wrap;gap:4px;padding:5px}
.sx-tabs a,.sx-tabs button,.chip-row .chip{align-items:center;border-radius:var(--sx-r-sm);color:var(--sx-muted);display:inline-flex;font-size:12.5px;font-weight:700;gap:6px;height:32px;padding:0 13px;text-decoration:none}
.sx-tabs a:hover,.sx-tabs button:hover,.chip-row .chip:hover{background:var(--sx-tint);text-decoration:none}
.sx-tabs .i{height:16px;width:16px}
.sx-section .share-strip{padding:0}
.sx-badge.sx-plain{text-transform:none}
.sx-tabs .active,.sx-tabs [aria-current],.chip-row .chip.active{background:var(--sx-blue-soft);color:var(--sx-blue)}

/* Steps / timeline. */
.sx-steps{counter-reset:sx-step;display:grid;gap:6px}
.sx-steps>li{align-items:flex-start;background:#fff;border-radius:var(--sx-r);box-shadow:var(--sx-shadow-in);counter-increment:sx-step;display:flex;gap:10px;list-style:none;padding:10px 12px}
.sx-steps>li::before{align-items:center;background:var(--sx-blue-soft);border-radius:8px;color:var(--sx-blue);content:counter(sx-step);display:flex;flex:0 0 24px;font-family:var(--sx-display);font-size:12px;font-weight:800;height:24px;justify-content:center}
.sx-steps>li.is-done::before{background:var(--sx-charge-soft);color:var(--sx-charge);content:"\2713"}

/* Prose (legal text, long descriptions). */
.sx-prose{color:var(--sx-ink-2);font-size:14px;line-height:1.7;max-width:72ch}
.sx-prose h2,.sx-prose h3{color:var(--sx-ink);margin:18px 0 6px}
.sx-prose p,.sx-prose ul,.sx-prose ol{margin:0 0 10px}
.sx-prose ul,.sx-prose ol{padding-left:20px}

/* ---------- Content layer: zero-specificity defaults so un-migrated internals inherit Signal ---------- */
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]),select,textarea){background:var(--sx-tint);border:0;border-radius:var(--sx-r-sm);box-shadow:var(--sx-shadow-field);color:var(--sx-ink);font:inherit;font-size:13.5px;font-weight:500;min-height:38px;padding:8px 11px;transition:background .18s,box-shadow .18s;width:100%}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(textarea){line-height:1.5;resize:vertical}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(input,select,textarea):focus{background:#fff;box-shadow:0 0 0 2px var(--sx-blue),0 0 0 5px var(--sx-blue-soft);outline:0}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(label){color:var(--sx-ink);font-size:12.5px;font-weight:700}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(input[type=checkbox],input[type=radio]){accent-color:var(--sx-blue)}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(table){border-collapse:separate;border-spacing:0 3px;font-size:12.5px;width:100%}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(th){color:var(--sx-muted);font-size:11px;font-weight:700;padding:4px 10px;text-align:left}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(td){background:var(--sx-tint);padding:8px 10px}
:where(.signal-app .sx-main,.signal-app .sx-community,.signal-app .sx-context) :where(.card>h2,.card>h3,.card section>h2){color:var(--sx-ink);font-size:15px;font-weight:700;margin-bottom:8px}

/* ---------- Legacy class mapping (for markup that still uses older class names) ---------- */
.signal-app .card.pad{padding:14px 16px}
.signal-app .card.pad>p,.signal-app .card.pad>small{color:var(--sx-muted);font-size:13px;line-height:1.5}
.signal-app .btn{border:0;border-radius:var(--sx-r-sm);font-size:13px;font-weight:700;gap:6px;height:34px;min-height:0;padding:0 14px}
.signal-app .btn.sm{font-size:12px;height:30px;padding:0 12px}
.signal-app .btn.wide{width:100%}
.signal-app .btn-primary,.signal-app .btn-blue{background:var(--sx-blue);box-shadow:0 8px 18px -8px rgba(1,53,244,.6);color:#fff}
.signal-app .btn-primary:hover,.signal-app .btn-blue:hover{background:var(--sx-blue-600);color:#fff}
.signal-app .btn-ghost,.signal-app .btn-line{background:#fff;box-shadow:var(--sx-shadow-in);color:var(--sx-ink-2)}
.signal-app .btn-ghost:hover,.signal-app .btn-line:hover{box-shadow:var(--sx-shadow-2)}
.signal-app .empty{color:var(--sx-muted);font-size:12.5px;padding:18px 12px;text-align:center}
.signal-app .card.empty{align-items:center;display:flex;flex-direction:column;gap:6px;padding:24px 14px}
.signal-app .card.empty .glyph{height:40px;width:40px}
.signal-app .rc-note,.signal-app .pf-muted{color:var(--sx-muted);font-size:12px;margin-top:8px}
.signal-app .wallet-alert{background:var(--sx-pearl);box-shadow:var(--sx-shadow-in)}
.signal-app .tabbar,.signal-app .appnav{display:none}

/* ---------- Public and auth pages: same no-lines, shadow-first rules ---------- */
.signin-card,.auth-panel,.auth-card,.people-learning>div{border:0;border-radius:var(--sx-r-lg);box-shadow:var(--sx-shadow-2)}
.signin-card,.auth-panel{background:var(--sx-pearl)}
.hero-picture,.feature-picture{border:0;border-radius:var(--sx-r-lg);box-shadow:var(--sx-shadow-2)}
.topic-cloud a,.who-links a{background:#fff;border:0;box-shadow:var(--sx-shadow-in);transition:box-shadow .2s,transform .2s var(--sx-ease),color .18s}
.topic-cloud a:hover,.who-links a:hover{box-shadow:var(--sx-shadow-2);color:var(--sx-blue);transform:translateY(-1px)}
.signin-link,.outline-pill,.btn-ghost{border:0;box-shadow:var(--sx-shadow-in)}
.signin-link:hover,.outline-pill:hover{box-shadow:var(--sx-shadow-2)}
.primary-pill,.auth-submit{background:var(--sx-blue);box-shadow:0 10px 22px -10px rgba(1,53,244,.65)}
.auth-panel input,.auth-panel select,.auth-card input,.people-learning select,.wl-form input,.wl-form select{background:var(--sx-tint);border:0;box-shadow:var(--sx-shadow-field)}
.auth-panel input:focus,.auth-panel select:focus,.auth-card input:focus{background:#fff;box-shadow:0 0 0 2px var(--sx-blue),0 0 0 5px var(--sx-blue-soft)}
.auth-panel-head img{border:0;box-shadow:var(--sx-shadow-in)}
.auth-alt,.auth-panel .alt,.signin-card>span{border-top:0}
.auth-signal-row span{border:0;box-shadow:var(--sx-shadow-in)}
.landing-footer{border-top:0}
.landing,.auth-premium,.auth{background:radial-gradient(1000px 520px at 10% -10%,rgba(1,53,244,.06),transparent 62%),radial-gradient(800px 460px at 100% 0%,rgba(107,75,255,.05),transparent 60%),#F7F8FC}
.landing-nav{background:transparent}
.who-band,.final-cta{background:var(--sx-pearl)}
.landing-footer{background:transparent}
.g-top{border-bottom:0;box-shadow:0 6px 22px -16px rgba(15,23,60,.32)}
.plain table{border:0;box-shadow:var(--sx-shadow-1)}
.plain th,.plain td{border-bottom:0}

/* ---------- Motion and effects ----------
   Everything below is opt-in: <html class="sx-motion"> is only set when the user has not asked for reduced motion,
   and entrance effects are pure CSS with fill-mode "both", so content always ends visible even without JavaScript. */
@keyframes sx-rise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sx-fill{from{width:0}}
@keyframes sx-sheen{0%,72%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes sx-pulse{0%{box-shadow:0 0 0 0 rgba(14,159,99,.55)}70%{box-shadow:0 0 0 7px rgba(14,159,99,0)}100%{box-shadow:0 0 0 0 rgba(14,159,99,0)}}
@keyframes sx-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
@keyframes sx-pop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes sx-burst{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
@keyframes sx-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.06)}}
@keyframes sx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes sx-caret{50%{opacity:0}}
@keyframes sx-vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes sx-vt-in{from{opacity:0;transform:translateY(8px)}}

/* Live, quietly moving backdrop. */
.sx-motion body.signal-app::before{background:radial-gradient(800px 420px at 12% 6%,rgba(1,53,244,.07),transparent 65%),radial-gradient(700px 420px at 92% 4%,rgba(107,75,255,.07),transparent 62%),radial-gradient(600px 380px at 70% 96%,rgba(14,159,99,.04),transparent 60%);content:"";inset:-6%;pointer-events:none;position:fixed;z-index:-1;animation:sx-drift 26s ease-in-out infinite alternate}

/* Staggered entrance for the shell lanes and the public pages. */
.sx-motion :is(.sx-nav-inner,.sx-main,.feed-stack,.sx-context,.sx-community,.circuit-connection-grid,.circuit-request-list,.wallet-bank-offers)>*,
.sx-motion :is(.landing-hero,.auth-premium-wrap)>*{animation:sx-rise .62s var(--sx-ease) backwards}
.sx-motion :is(.sx-main,.feed-stack,.sx-context,.sx-community,.circuit-connection-grid,.circuit-request-list,.wallet-bank-offers,.landing-hero,.auth-premium-wrap)>:nth-child(2){animation-delay:.06s}
.sx-motion :is(.sx-main,.feed-stack,.sx-context,.sx-community,.circuit-connection-grid,.circuit-request-list,.wallet-bank-offers,.landing-hero,.auth-premium-wrap)>:nth-child(3){animation-delay:.12s}
.sx-motion :is(.sx-main,.feed-stack,.sx-context,.sx-community,.circuit-connection-grid,.circuit-request-list,.wallet-bank-offers)>:nth-child(4){animation-delay:.18s}
.sx-motion :is(.sx-main,.feed-stack,.sx-context,.sx-community,.circuit-connection-grid)>:nth-child(5){animation-delay:.24s}
.sx-motion :is(.sx-main,.feed-stack,.sx-context,.sx-community,.circuit-connection-grid)>:nth-child(n+6){animation-delay:.3s}
.sx-motion .sx-context>:first-child{animation-delay:.08s}
.sx-motion .sx-community>:first-child{animation-delay:.14s}
.sx-motion .sx-nav-inner>*{animation-duration:.5s}
/* Feed cards further down rise in as they scroll into view (where scroll-driven animations are supported). */
@supports (animation-timeline:view()){
  .sx-motion .feed-stack>:nth-child(n+4){animation:sx-rise linear backwards;animation-delay:0s;animation-range:entry 0% entry 35%;animation-timeline:view()}
}

/* Hover depth: cards and tiles lift, the pointer leaves a soft spotlight (position set by signal.js). */
.sx-motion .signal-app .post-v2:hover,.sx-motion .signal-app .right-card:hover{transform:translateY(-2px)}
.signal-app .post-v2,.signal-app .right-card{transition:box-shadow .3s var(--sx-ease),transform .3s var(--sx-ease)}
.signal-app .right-card:hover{box-shadow:var(--sx-shadow-2)}
.sx-glow{position:relative}
.sx-glow::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(1,53,244,.075),rgba(107,75,255,.035) 35%,transparent 65%);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .35s var(--sx-ease);z-index:2}
.sx-glow:hover::after{opacity:1}
.sx-motion .sx-nav-item:hover .i{transform:translateX(2px)}
.sx-nav-item .i{transition:color .18s,transform .25s var(--sx-ease)}

/* Tactile press feedback. */
.signal-app :is(button,.btn-post,.follow-btn,.profile-btn,.circuit-btn,.wallet-pill,.right-title a,.sx-money-actions a,.share-strip a,.sx-nav-cta,.circuit-strip>a,.money-add){transition:transform .14s var(--sx-ease),box-shadow .2s,background .18s,color .18s}
.signal-app :is(button,.btn-post,.follow-btn,.profile-btn,.circuit-btn,.wallet-pill,.right-title a,.sx-money-actions a,.share-strip a,.circuit-strip>a,.money-add):active{transform:scale(.96)}

/* Light sweeping across the primary action and funded bounty chips. */
.sx-top-actions .btn-post,.signal-app .post-chip.bounty,.signal-app .feed .btn-post,.signal-app .circuit-hero .btn-post{overflow:hidden;position:relative}
.sx-motion .sx-top-actions .btn-post::after,.sx-motion .signal-app .post-chip.bounty::after,.sx-motion .signal-app .circuit-hero .btn-post::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:40%;animation:sx-sheen 5.5s ease-in-out infinite}
.sx-motion .signal-app .post-chip.bounty::after{animation-duration:4.2s}

/* Live indicators breathe; unread alerts ring the bell once on arrival. */
.sx-live{align-items:center;display:inline-flex;gap:5px}
.sx-live::before{animation:sx-pulse 2s ease-out infinite;background:var(--sx-charge);border-radius:50%;content:"";height:6px;width:6px}
.sx-motion .sx-icon-btn:has(.badge) .i,.sx-motion .sx-nav-item:has(.sx-count) .i{animation:sx-ring 1.1s ease-in-out .9s 2;transform-origin:50% 10%}
.sx-motion .sx-nav-cta-icon{animation:sx-float 3.6s ease-in-out infinite}

/* Meters charge up on load. */
.sx-motion :is(.charge-chip,.circuit-charge-meter,.profile-meter)>i{animation:sx-fill 1.2s var(--sx-ease) .35s backwards}

/* Spark: a pop and a ring burst when sparked. */
.signal-app .action-row button{position:relative}
.sx-sparking .i{animation:sx-pop .45s var(--sx-ease)}
.sx-sparking::after{animation:sx-burst .55s ease-out forwards;border-radius:50%;box-shadow:inset 0 0 0 2px var(--sx-blue),0 0 12px rgba(1,53,244,.35);content:"";height:28px;left:50%;margin:-14px 0 0 -14px;pointer-events:none;position:absolute;top:50%;width:28px}

/* Composer prompt types itself (signal.js); the caret blinks. */
.sx-typing::after{animation:sx-caret 1s steps(1) infinite;background:var(--sx-blue);content:"";display:inline-block;height:1.1em;margin-left:2px;vertical-align:-2px;width:1.5px}

/* Top bar deepens once the page scrolls. */
.sx-topbar{transition:box-shadow .3s var(--sx-ease),background .3s}
.sx-scrolled .sx-topbar{background:rgba(255,255,255,.94);box-shadow:0 10px 30px -18px rgba(15,23,60,.45)}

/* Money drawer rows cascade in. */
.sx-motion .money-drawer.open .money-pane.active :is(.money-tr,.money-offer-grid>span){animation:sx-rise .45s var(--sx-ease) backwards}
.sx-motion .money-drawer.open .money-pane.active .money-tr:nth-child(2){animation-delay:.05s}
.sx-motion .money-drawer.open .money-pane.active .money-tr:nth-child(3){animation-delay:.1s}
.sx-motion .money-drawer.open .money-pane.active .money-tr:nth-child(n+4){animation-delay:.15s}

/* Smooth page-to-page transitions (same-origin, browsers with cross-document View Transitions); the top bar and nav stay put. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .sx-topbar{view-transition-name:sx-topbar}
  .sx-nav{view-transition-name:sx-nav}
  ::view-transition-old(root){animation:sx-vt-out .2s ease both}
  ::view-transition-new(root){animation:sx-vt-in .36s var(--sx-ease) both}
}

/* ---------- Responsive ---------- */
@media(max-width:1439px){
  .sx-topbar .topbar-wrap{grid-template-columns:auto minmax(0,1fr) auto;padding:0 16px}
  .sx-brand span{display:none}
  .sx-shell{grid-template-columns:60px minmax(0,1fr) 272px 272px;padding-left:16px;padding-right:16px}
  .sx-shell.sx-no-context{grid-template-columns:60px minmax(0,1fr) 300px}
  .sx-shell.sx-profile{grid-template-columns:60px 272px minmax(0,1fr)}
  .sx-shell.sx-layout-focus{grid-template-columns:60px minmax(0,860px) 290px}
  .sx-shell.sx-layout-wide{grid-template-columns:60px minmax(0,1fr)}
  .sx-nav-me{justify-content:center;padding:7px}
  .sx-nav-me>span:last-child,.sx-nav-item span,.sx-amount,.sx-nav-cta>span:last-child{display:none}
  .sx-nav-item{justify-content:center;padding:0}
  .sx-nav-item .sx-count{font-size:9.5px;height:15px;min-width:15px;padding:0 4px;position:absolute;right:7px;top:4px}
  .sx-nav-label{font-size:0;margin:6px 0;padding:0}
  .sx-nav-cta{justify-content:center;padding:10px}
}
@media(max-width:1199px){
  .sx-shell,.sx-shell.sx-no-context{grid-template-columns:60px minmax(0,1fr) 280px}
  .sx-nav{grid-row:1/span 2}
  .sx-main{grid-column:2;grid-row:1/span 2}
  .sx-context{grid-column:3;grid-row:1}
  .sx-community{grid-column:3;grid-row:2}
  .sx-no-context .sx-community{grid-row:1/span 2}
  .sx-context,.sx-community{max-height:none;overflow:visible;position:static}
  .sx-shell.sx-profile{grid-template-columns:60px 250px minmax(0,1fr)}
  .sx-profile .sx-main{grid-column:3}
  .sx-shell.sx-layout-wide{grid-template-columns:60px minmax(0,1fr)}
  .sx-me-name{display:none}
}
@media(max-width:991px){
  .sx-shell,.sx-shell.sx-no-context,.sx-shell.sx-profile{grid-template-columns:60px minmax(0,1fr)}
  .sx-nav{grid-row:1/span 3}
  .sx-main,.sx-profile .sx-main{grid-column:2;grid-row:1}
  .sx-context,.sx-community,.sx-no-context .sx-community{grid-column:2;grid-row:auto}
  .sx-top-actions .btn-post{display:inline-flex}
  .signal-app .feed .btn-post,.signal-app .circuit-hero .btn-post,.signal-app .empty-state .btn-post{display:inline-flex}
  .circuit-hero{grid-template-columns:1fr}
  .wallet-bank-offers{grid-template-columns:1fr}
  .sx-layout-focus .sx-main{max-width:none}
  .sx-shell.sx-layout-focus{justify-content:stretch}
  .sx-split{grid-template-columns:1fr}
}
@media(max-width:767px){
  :root{--sx-top:54px;--sx-gap:10px}
  .sx-topbar .topbar-wrap{gap:8px;padding:0 10px}
  .sx-brand img{height:30px;width:30px}
  .sx-top-actions .btn-post,.sx-top-actions .sx-icon-btn[href="/lines"]{display:none}
  .sx-me-trigger{box-shadow:none;padding:0}
  .sx-me-trigger .caret{display:none}
  .sx-shell{display:block;padding:calc(var(--sx-top) + 8px) 8px 84px}
  .sx-nav{display:none}
  .sx-main{gap:8px}
  .sx-context,.sx-community{gap:8px;margin:8px 0 0;padding:0}
  .signal-app .feed-stack{gap:8px}
  .signal-app .post-media{margin:8px 12px 0;width:calc(100% - 24px)}
  .signal-app .post-author,.signal-app .post-text,.signal-app .chip-line{padding-left:12px;padding-right:12px}
  .signal-app .tabbar-mobile{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(255,255,255,.92);border-top:0;box-shadow:0 -6px 22px -14px rgba(15,23,60,.3)}
  .signal-app .tabbar-mobile a.active{color:var(--sx-blue)}
  .signal-app .tabbar-mobile .post-tab{background:var(--sx-grad)}
  .money-drawer{border-radius:18px 18px 0 0;bottom:0;height:min(86dvh,720px);left:0;right:0;top:auto;transform:translateY(105%);width:100%}
  .money-drawer.open{transform:none}
  .money-tr,.wallet-bank-row{grid-template-columns:1fr 1fr}
  .money-th,.wallet-bank-row-head{display:none}
  .money-offer-grid{grid-template-columns:1fr}
  .circuit-request{align-items:flex-start;flex-direction:column}
  .people-search-form{align-items:stretch;flex-direction:column!important}
  .sx-page-head{padding:14px}
  .sx-page-head h1{font-size:20px}
  .sx-page-actions{width:100%}
  .sx-row{align-items:flex-start;flex-direction:column}
  .sx-row-side{justify-content:flex-start}
  .sx-row:has(>.avatar-link:first-child){flex-direction:row;flex-wrap:wrap}
  .sx-row:has(>.avatar-link:first-child)>.sx-row-side{flex-basis:100%}
  .sx-table-wrap{margin:0 -2px}
}
@media(max-width:520px){
  .signal-app .action-row span{clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;width:1px}
}