/* ---- static/cf-toast.css ---- */
/* CFToast -- Syndicate Noir's toast (COMPONENTS.md "Toasts"), the one toast on
   every surface. Every value is a cf-theme.css token; no colour is written
   here. Glass, a 3px accent edge in the variant colour with its glow, a 40px
   icon tile, title + body, one action, a close button and a 2px progress bar.

   The RESTING state is the visible one: the entrance is a class script adds
   and removes (`is-in`), so a paused, hidden or printed page still shows the
   words. Bottom-right on desktop; bottom-centre above the phone bar. */

.cf-toasts{
  position:fixed;z-index:var(--z-toast);right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  width:min(400px,calc(100vw - 32px));pointer-events:none;
}
@media (max-width:767px){
  .cf-toasts{right:50%;transform:translateX(50%);align-items:stretch;
    bottom:calc(var(--bar-h) + 14px + env(safe-area-inset-bottom,0px))}
  /* above the app's phone bar (80px) and the Mini App's bar */
  body.cf-rail-on .cf-toasts,body:has(#oa-bottom-nav) .cf-toasts,body:has(.tg-nav) .cf-toasts{
    bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
.cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cf-toast{
  pointer-events:auto;position:relative;width:100%;box-sizing:border-box;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:12px 10px 14px 12px;overflow:hidden;
  border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--glass-edge-hi);color:var(--ink);
  box-shadow:var(--shadow-3);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  font:500 13px/1.4 var(--font-body);cursor:default;touch-action:pan-y;
  transition:transform var(--t-med) var(--ease-out),opacity var(--t-med);
}
.cf-toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--toast-c,var(--gold-400));box-shadow:0 0 14px var(--toast-c,var(--gold-400))}
.cf-toast--success{--toast-c:var(--up)}
.cf-toast--error{--toast-c:var(--dn)}
.cf-toast--info{--toast-c:var(--gold-400)}
.cf-toast--live{--toast-c:var(--ion)}
.cf-toast--game{--toast-c:var(--gold-300);background:linear-gradient(120deg,rgb(var(--glow) / .16),transparent 55%),var(--glass-strong)}
.cf-toast-ic{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--toast-c);background:rgb(var(--tint) / .05)}
.cf-toast-ic>svg{width:20px;height:20px}
.cf-toast-ic .cf-ava,.cf-toast-ic .cf-medal,.cf-toast-ic .cf-tok{position:relative;z-index:1}
.cf-toast--game .cf-toast-ic,.cf-toast--live .cf-toast-ic{background:none}
.cf-toast-ring{position:absolute;inset:-4px;width:48px;height:48px;fill:none;stroke:var(--gold-300);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:100 132;transform-origin:50% 50%;animation:cf-ring-spin 1.6s var(--ease-out) both;filter:drop-shadow(0 0 4px rgb(var(--glow) / .7))}
@keyframes cf-ring-spin{from{transform:rotate(-270deg);stroke-dasharray:0 132}to{transform:rotate(0);stroke-dasharray:132 0}}
.cf-toast-txt{min-width:0}
.cf-toast-txt b{display:block;font:600 14px/1.3 var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.cf-toast-txt span{display:block;color:var(--ink2);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.cf-toast-act{display:flex}
.cf-toast-x{width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--ink3);cursor:pointer;display:grid;place-items:center;position:relative;padding:0}
.cf-toast-x::before{content:'';position:absolute;inset:-4px}
.cf-toast-x svg{width:16px;height:16px}
.cf-toast-x:hover{color:var(--ink);background:rgb(var(--tint) / .06)}
.cf-toast-life{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--toast-c);opacity:.7;transform-origin:left;animation:cf-life linear forwards}
@keyframes cf-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.cf-toast.is-in{animation:cf-toast-in 480ms var(--ease-spring)}
.cf-toast.is-out{transform:translateX(24px) scale(.96);opacity:0}
@keyframes cf-toast-in{from{transform:translateY(18px) scale(.94);opacity:.2}to{transform:none;opacity:1}}
@media (max-width:767px){.cf-toast.is-out{transform:translateY(20px) scale(.96)}}
.cf-toast-badge{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--molten);color:var(--on-molten);box-shadow:0 4px 14px rgb(var(--glow) / .45)}
.cf-toast-badge svg{width:22px;height:22px}
@media (max-width:420px){.cf-toast{grid-template-columns:auto minmax(0,1fr) auto}.cf-toast-act{grid-column:2 / 4;grid-row:2}}

/* Reduced motion: no slide, no spin; the toast is simply there and leaves at
   once. The progress bar still shows the time left. */
@media (prefers-reduced-motion:reduce){
  .cf-toast,.cf-toast.is-out{transition:none}
  .cf-toast.is-in{animation:none}
  .cf-toast-ring{animation:none;stroke-dasharray:none}
}


/* ---- static/cf-rail.css ---- */
/* Cartel Family — the desktop left rail, SYNDICATE NOIR (2026-10-12).
 *
 * Drawn to the reference rail (/design/a/app, static/design/a/app.css
 * ".na-rail"): a 232px glass column with a gold hairline glowing down its
 * edge, the brand lockup (the Boss Bull's face on a gold-ringed tile, the
 * wordmark tracked over WE TRADE AS ONE), 46px rows with a 26px glyph tile,
 * the lit row on a gold wash with a molten bar at its left edge, the Trade
 * destination (Live Market) on the molten tile, and the signed-in member at
 * the foot. Collapses to 72px; those are the ONLY two states.
 *
 * Product structure the reference does not draw stays: the manifest's
 * groups (small mono caps), pins + drag reorder, and «Collapse».
 *
 * Self-contained on purpose. It styles markup that rail_inject.py puts into
 * every app page, so it cannot depend on any page's own layout. The one thing
 * it asks of the host page is a left inset, which it sets itself on
 * body.cf-rail-on. Every colour is a Noir token from cf-theme.css.
 *
 * From 768px. Between 768 and 1023 the rail is the 72px collapsed column;
 * from 1024 it is the full 232px rail. Below 768 the phone bottom bar owns
 * navigation (five destinations, CLAUDE.md).
 */

:root{ --cf-rail-w:232px; }
/* The shell is edge to edge: a page that never reset the UA's 8px body
   margin would otherwise push the top bar 8px down and leave a gutter
   beside the rail. */
body.cf-rail-on{ margin:0; }
html.cf-rail-min{ --cf-rail-w:72px; }

.cf-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (min-width:768px){

  body.cf-rail-on{ padding-left:var(--cf-rail-w); }

  .cf-rail{
    position:fixed; left:0; top:0; bottom:0; width:var(--cf-rail-w);
    z-index:120;                 /* under modals (5000+), over page content */
    display:flex; flex-direction:column; gap:6px; box-sizing:border-box;
    padding:18px 14px 16px;
    background:linear-gradient(180deg, rgb(var(--raise) / .92), rgb(var(--ground-rgb) / .96));
    border-right:1px solid var(--glass-edge);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    font-family:var(--font-display); color:var(--text-1);
    transition:width var(--t-med) var(--ease-out), padding var(--t-med) var(--ease-out);
  }
  /* the gold hairline down the rail's edge */
  .cf-rail::after{
    content:''; position:absolute; top:0; right:-1px; bottom:0; width:1px; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgb(var(--glow) / .35) 30%, transparent 80%);
  }
  .cf-rail *{ box-sizing:border-box; }

  /* ── brand lockup ── */
  .cf-rail-brand{
    flex:none; display:flex; align-items:center; gap:12px; min-height:var(--tap);
    padding:0 6px 14px; text-decoration:none; color:var(--text-1); overflow:hidden;
  }
  .cf-rail-tile{
    width:38px; height:38px; flex:none; border-radius:11px; overflow:hidden;
    display:block; position:relative; background:var(--ink-2);
    box-shadow:0 0 0 1px rgb(var(--glow) / .45), 0 6px 18px rgb(var(--glow) / .25);
    transition:transform var(--t-med) var(--ease-spring);
  }
  /* The lockup zooms the blue icon (2026-10-16) to 118% and offsets it so the
     face fills the tile; the whole icon at 38px was mostly dark padding. */
  .cf-rail-tile img{
    position:absolute; width:118%; height:118%; max-width:none; left:-9%; top:-8%;
    display:block; object-fit:cover;
  }
  .cf-rail-lockup{ display:grid; line-height:1; min-width:0; }
  .cf-rail-word{
    font:700 15px/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase;
    color:var(--text-1); white-space:nowrap;
  }
  /* Gold as TEXT is --accent-text, never the fill gold (AA on both themes). */
  .cf-rail-tag{
    margin-top:5px; font:700 9px/1 var(--font-display); letter-spacing:.26em;
    color:var(--accent-text); white-space:nowrap;
  }
  .cf-rail-brand:hover .cf-rail-tile{ transform:translateY(-2px) rotate(-3deg); }
  .cf-rail-brand:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; border-radius:var(--r-md); }

  /* The destination list scrolls; the brand and the foot do not. On a
     short window a rail that pushes its own controls off-screen is worse
     than one that scrolls. */
  .cf-rail-scroll{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
    margin:0 -4px; padding:0 4px; display:flex; flex-direction:column; gap:10px;
    scrollbar-width:none;
  }
  .cf-rail-scroll::-webkit-scrollbar{ display:none; }

  .cf-rail-g{ display:grid; gap:2px; }
  .cf-rail-g[hidden]{ display:none; }
  .cf-rail-sec{
    font:600 10px/1 var(--font-mono); letter-spacing:.16em;
    text-transform:uppercase; color:var(--text-4); padding:4px 10px;
    white-space:nowrap;
  }

  /* ── a destination row: 46px, the reference's .na-rail-item ── */
  .cf-rail-row{
    position:relative; min-height:46px; flex:none;
    display:flex; align-items:center;
    border-radius:var(--r-md); color:var(--text-2); overflow:hidden;
    transition:background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  }
  .cf-rail-row:hover{ background:rgb(var(--tint) / .04); color:var(--text-1); }
  .cf-rail-row.active{
    color:var(--text-1);
    background:linear-gradient(90deg, rgb(var(--glow) / .18), rgb(var(--glow) / .02));
  }
  /* the molten bar at the lit row's edge */
  .cf-rail-row.active::before{
    content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px;
    border-radius:0 3px 3px 0; background:var(--molten);
    box-shadow:0 0 12px rgb(var(--glow) / .6);
  }
  .cf-rail-link{
    flex:1 1 auto; min-width:0; min-height:46px; align-self:stretch;
    display:flex; align-items:center; gap:12px; padding:0 0 0 10px;
    color:inherit; text-decoration:none; border-radius:var(--r-md);
  }
  .cf-rail-link:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }
  /* the 26px glyph tile, monochrome */
  .cf-rail .cf-rail-code{
    width:26px; height:26px; flex:none; border-radius:8px;
    display:grid; place-items:center;
    background:transparent; color:inherit;
    transition:background var(--t-med), color var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease-spring);
  }
  .cf-rail .cf-rail-code svg{ width:18px; height:18px; display:block; }
  .cf-rail-row:hover .cf-rail-code{ transform:translateY(-1px) rotate(-4deg); }
  .cf-rail .cf-rail-row.active .cf-rail-code{
    color:var(--accent-text-strong); background:rgb(var(--glow) / .14);
    box-shadow:inset 0 0 0 1px rgb(var(--glow) / .35);
  }
  /* Trade (Live Market) sits on the molten tile, lit or not */
  .cf-rail .cf-rail-row.is-trade .cf-rail-code{
    background:var(--molten); color:var(--on-molten);
    box-shadow:0 4px 14px rgb(var(--glow) / .35);
  }
  .cf-rail-row.soon{ opacity:.62; }
  .cf-rail-lbl{
    flex:1 1 auto; min-width:0;
    font:500 14.5px/1 var(--font-display);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cf-rail-pin{
    flex:none; margin:0 6px 0 0; padding:6px; border:0; border-radius:8px;
    background:none; cursor:pointer;
    font:600 12px/1 var(--font-display); color:var(--text-4);
    opacity:0; transition:opacity var(--t-fast), color var(--t-fast);
  }
  .cf-rail-row:hover .cf-rail-pin, .cf-rail-row.pinned .cf-rail-pin, .cf-rail-pin:focus-visible{ opacity:1; }
  .cf-rail-pin:hover{ color:var(--text-1); }
  .cf-rail-pin:focus-visible{ outline:2px solid var(--gold-400); outline-offset:0; }
  .cf-rail-row.pinned .cf-rail-pin{ color:var(--accent-text); }

  /* Drag reorder: the row being carried dims, and a 2px gold line marks
     where it will land. Same group only -- cf-rail.js enforces that. */
  .cf-rail-row.is-dragging{ opacity:.4; }
  .cf-rail-row.is-over{ box-shadow:inset 0 2px 0 var(--gold-400); }

  /* ── HELP & RESOURCES: the foot row (desktop_shell.rail_help_html) ──
     A <details>: the summary is a quiet 46px row (the help glyph on the 26px
     tile, the label in --text-3, a chevron), and the popover -- the SAME
     rows as the top bar's "?" (navbar.css .cf-help-menu) -- opens beside
     the rail, bottom-aligned to the row. */
  .cf-rail-help{ position:relative; }
  .cf-rail-help-row{
    list-style:none; cursor:pointer; min-height:46px; box-sizing:border-box;
    display:flex; align-items:center; gap:12px; padding:0 10px;
    border-radius:var(--r-md); color:var(--text-3);
    transition:background var(--t-fast), color var(--t-fast);
  }
  .cf-rail-help-row::-webkit-details-marker{ display:none; }
  .cf-rail-help-row::marker{ content:''; }
  .cf-rail-help-row:hover, .cf-rail-help[open] .cf-rail-help-row{ background:rgb(var(--tint) / .04); color:var(--text-1); }
  .cf-rail-help-row:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }
  .cf-rail-help-row:hover .cf-rail-code{ transform:translateY(-1px) rotate(-4deg); }
  .cf-rail-rlbl{ font-size:13.5px; }
  .cf-rail-help-chev{ margin-left:auto; color:var(--text-4); font:600 18px/1 var(--font-display); }
  .cf-rail-help .cf-rail-help-menu{ position:absolute; left:calc(100% + 10px); right:auto; top:auto; bottom:0; }

  /* ── foot: the signed-in member, then «Collapse» ── */
  .cf-rail-foot{ flex:none; display:grid; gap:6px; margin-top:6px; }
  .cf-rail-me{
    display:flex; align-items:center; gap:10px; padding:10px; min-height:56px;
    border-radius:var(--r-md); border:1px solid var(--glass-edge);
    background:rgb(var(--tint) / .02); color:var(--text-1); text-decoration:none;
    transition:border-color var(--t-fast), background var(--t-fast);
  }
  a.cf-rail-me:hover{ border-color:rgb(var(--glow) / .3); background:rgb(var(--tint) / .04); }
  a.cf-rail-me:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
  .cf-rail-me .cf-ava{ --s:36px; }
  .cf-rail-me .cf-medal-slot{ right:-5px; bottom:-5px; }
  .cf-rail-me-id{ min-width:0; flex:1; display:block; }
  .cf-rail-me-id b{ display:block; font:600 13.5px/1.2 var(--font-display); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cf-rail-me-id small{ display:block; margin-top:3px; color:var(--text-3); font:500 11px/1.3 var(--font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cf-rail-me-id small:empty{ display:none; }
  .cf-rail-me.is-guest{ padding:10px 8px 10px 12px; }
  .cf-rail-me.is-guest .cf-rail-me-id small{ white-space:normal; }
  .cf-rail-signin{ flex:none; min-height:44px; }
  /* until /api/me answers the avatar shows the profile glyph, not a blank disc */
  .cf-rail-me-av svg{ width:18px; height:18px; color:var(--on-molten); }

  .cf-rail-collapse{
    min-height:44px; flex:none; width:100%;
    display:flex; align-items:center; gap:8px; padding:0 10px;
    border:0; border-radius:var(--r-md); background:none;
    font:600 12px/1 var(--font-mono); letter-spacing:.06em; color:var(--text-3); text-align:left;
    cursor:pointer; transition:color var(--t-fast), background var(--t-fast);
  }
  .cf-rail-collapse:hover{ color:var(--text-1); background:rgb(var(--tint) / .04); }
  .cf-rail-collapse:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }

}

/* ── the 72px state: by choice on a wide screen ─────────────────────────── */
@media (min-width:1024px){
  html.cf-rail-min .cf-rail{ padding:14px 10px; align-items:center; }
  html.cf-rail-min .cf-rail-lockup,
  html.cf-rail-min .cf-rail-lbl,
  html.cf-rail-min .cf-rail-pin,
  html.cf-rail-min .cf-rail-sec,
  html.cf-rail-min .cf-rail-me-id,
  html.cf-rail-min .cf-rail-me.is-guest{ display:none; }
  html.cf-rail-min .cf-rail-brand{ padding:0 3px 12px; }
  html.cf-rail-min .cf-rail-scroll{ align-self:stretch; align-items:center; }
  html.cf-rail-min .cf-rail-row{ width:52px; }
  html.cf-rail-min .cf-rail-link{ justify-content:center; padding:0; }
  html.cf-rail-min .cf-rail-foot{ justify-items:center; align-self:stretch; }
  html.cf-rail-min .cf-rail-me{ padding:6px; border:0; background:none; min-height:0; }
  html.cf-rail-min .cf-rail-collapse{ justify-content:center; padding:0; width:52px; }
  html.cf-rail-min .cf-rail-g + .cf-rail-g{ border-top:1px solid var(--glass-edge); padding-top:10px; }
  html.cf-rail-min .cf-rail-help-chev{ display:none; }
  html.cf-rail-min .cf-rail-help-row{ width:52px; justify-content:center; padding:0; }
}

/* ── Tablet (768-1023): the 72px collapsed column
   The design draws two rail states: 232px with names, and 72px collapsed.
   There is no third; an 88px "names under tiles" variant once lived here and
   the owner found it on a 1073px laptop asking where the navigation went.
   So every laptop (1024 up) gets the full labelled rail, and a tablet gets
   the collapsed column with » opening the full rail OVER the page
   (html.cf-rail-peek, cf-rail.js). */
@media (min-width:768px) and (max-width:1023px){
  :root{ --cf-rail-w:72px; }
  html:not(.cf-rail-peek) .cf-rail{ padding:14px 10px; align-items:center; }
  html:not(.cf-rail-peek) .cf-rail-lockup,
  html:not(.cf-rail-peek) .cf-rail-lbl,
  html:not(.cf-rail-peek) .cf-rail-pin,
  html:not(.cf-rail-peek) .cf-rail-sec,
  html:not(.cf-rail-peek) .cf-rail-me-id,
  html:not(.cf-rail-peek) .cf-rail-me.is-guest{ display:none; }
  html:not(.cf-rail-peek) .cf-rail-brand{ padding:0 3px 12px; }
  html:not(.cf-rail-peek) .cf-rail-scroll{ align-self:stretch; align-items:center; }
  html:not(.cf-rail-peek) .cf-rail-row{ width:52px; }
  html:not(.cf-rail-peek) .cf-rail-link{ justify-content:center; padding:0; }
  html:not(.cf-rail-peek) .cf-rail-foot{ justify-items:center; align-self:stretch; }
  html:not(.cf-rail-peek) .cf-rail-me{ padding:6px; border:0; background:none; min-height:0; }
  html:not(.cf-rail-peek) .cf-rail-collapse{ justify-content:center; padding:0; width:52px; }
  html:not(.cf-rail-peek) .cf-rail-g + .cf-rail-g{ border-top:1px solid var(--glass-edge); padding-top:10px; }
  html:not(.cf-rail-peek) .cf-rail-help-chev{ display:none; }
  html:not(.cf-rail-peek) .cf-rail-help-row{ width:52px; justify-content:center; padding:0; }
  html.cf-rail-peek .cf-rail{ width:232px; box-shadow:var(--shadow-3); }
}

@media (max-width:767px){
  .cf-rail{ display:none !important; }
  body.cf-rail-on{ padding-left:0 !important; }
}

@media (prefers-reduced-motion:reduce){
  .cf-rail, .cf-rail *{ transition:none !important; animation:none !important; }
  .cf-rail-row:hover .cf-rail-code, .cf-rail-help-row:hover .cf-rail-code, .cf-rail-brand:hover .cf-rail-tile{ transform:none; }
}

@media print{ .cf-rail{ display:none !important; } body.cf-rail-on{ padding-left:0; } }

/* ── The account menu where the rail does not reach ──────────────────────
   Hidden from 768px, where the rail and the top bar's avatar menu carry it.
   A Noir glass list: 48px rows, the glyph in --text-3, Sign out in --dn. */
.cf-acct-mobile{ margin:22px 0 4px; }
.cf-acct-mobile-h{
  font:600 10px/1 var(--font-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 10px 2px;
}
.cf-acct-list{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgb(var(--raise) / .9), rgb(var(--raise) / .92));
  border:1px solid var(--glass-edge); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); overflow:hidden;
}
.cf-acct-item{
  display:flex; align-items:center; gap:12px;
  padding:14px 14px;           /* 48px+ row: a touch target, not a link */
  text-decoration:none; color:var(--text-1);
  font:500 14.5px/1.2 var(--font-display);
  border:0; border-top:1px solid var(--glass-edge);
  background:none; text-align:left; width:100%;
  cursor:pointer; transition:background var(--t-fast);
}
.cf-acct-item:first-child{ border-top:0; }
.cf-acct-item span{ flex:1; min-width:0; }
.cf-acct-item svg{ flex:0 0 18px; width:18px; height:18px; color:var(--text-3); }
.cf-acct-item:hover{ background:rgb(var(--tint) / .04); }
.cf-acct-item:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }
.cf-acct-item.active{ color:var(--accent-text-strong); }
.cf-acct-item.active svg{ color:var(--accent-text-strong); }
.cf-acct-item.cf-rail-action,
.cf-acct-item.cf-rail-action svg{ color:var(--dn); }
.cf-acct-item.cf-rail-action:hover{ background:var(--dn-dim); }
.cf-acct-item .cf-rail-soon{ margin:0; }

@media (min-width:768px){
  .cf-acct-mobile{ display:none; }
}

/* ── Phone hub chips ─────────────────────────────────────────────────────
   desktop_shell.phone_hub_html(): the hub page itself, then the rest of its
   groups (navigation.PHONE_HUBS). Noir chips: 36px glass pills, the page you
   are on lit gold. One row that scrolls sideways inside itself -- never the
   page. Gone from 768px, where the rail carries every one of these. */
.cf-phone-hub{
  display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0; padding:2px; max-width:100%; box-sizing:border-box;
}
.cf-phone-hub::-webkit-scrollbar{ display:none; }
.cf-phone-hub-item{
  position:relative; flex:none; display:flex; align-items:center;
  height:36px; padding:0 14px; border-radius:var(--r-pill);
  background:rgb(var(--tint) / .05); border:1px solid var(--glass-edge);
  color:var(--text-2); text-decoration:none; white-space:nowrap;
  font:600 13px/1 var(--font-display);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cf-phone-hub-item::before{ content:''; position:absolute; inset:-4px 0; }   /* 44px to a finger */
.cf-phone-hub-item:hover{ color:var(--text-1); border-color:var(--glass-edge-hi); }
.cf-phone-hub-item:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
.cf-phone-hub .cf-phone-hub-item.active,
.cf-phone-hub .cf-phone-hub-item.active:hover{
  color:var(--accent-text-strong); border-color:rgb(var(--glow) / .55); background:rgb(var(--glow) / .2);
}
.cf-phone-hub-item.soon{ opacity:.62; }
@media (min-width:768px){
  .cf-phone-hub{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .cf-phone-hub-item{ transition:none; } }

/* ── Sign in with Telegram ───────────────────────────────────────────────
   Outside the desktop media query: this appears on the signed-out surfaces,
   which are phone-first. All tokens, both themes. */
.cf-tgl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:13px 16px; border-radius:12px; cursor:pointer;
  background:var(--bg3); color:var(--text);
  border:1px solid var(--border2);
  font:600 14px/1 var(--font-sans,inherit); font-family:inherit;
  transition:background .14s ease, border-color .14s ease;
}
.cf-tgl-btn:hover{ background:var(--bg4); border-color:var(--accent); }
.cf-tgl-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.cf-tgl-btn svg{ flex:0 0 18px; color:var(--accent-ink); }

.cf-tgl-panel{
  margin-top:12px; padding:16px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--border);
  text-align:center;
}
.cf-tgl-lead{ margin:0 0 12px; font-size:13.5px; font-weight:600; color:var(--text); }

/* The code is the phishing defence, so it is the largest thing here.
   tabular-nums and the wide tracking are not decoration: this string exists
   to be compared character by character against another screen. */
.cf-tgl-code{
  font:800 30px/1.1 var(--font-mono,ui-monospace,monospace);
  font-variant-numeric:tabular-nums;
  letter-spacing:.14em; color:var(--accent-ink);
  padding:14px 8px; margin:0 0 12px;
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius:10px;
  overflow-wrap:anywhere;
}
.cf-tgl-warn{
  margin:0 0 14px; font-size:12px; line-height:1.5; color:var(--muted);
  text-align:left;
}
.cf-tgl-open{
  display:block; padding:12px 16px; border-radius:11px;
  background:var(--accent-cta); color:var(--m3-on-primary,#fff);
  font-weight:700; font-size:14px; text-decoration:none;
}
.cf-tgl-open:hover{ filter:brightness(1.08); }
.cf-tgl-waiting{
  margin:12px 0 0; font-size:12px; color:var(--dim);
}
.cf-tgl-waiting::after{
  content:''; display:inline-block; width:5px; height:5px; margin-left:7px;
  border-radius:50%; background:var(--accent-cta); vertical-align:middle;
  animation:cf-tgl-pulse 1.1s ease-in-out infinite;
}
@keyframes cf-tgl-pulse{ 0%,100%{opacity:.25} 50%{opacity:1} }
/* The reduced state is the FINISHED state, never a paused frame: a dot left
   mid-animation at opacity 0 is an invisible dot. */
@media (prefers-reduced-motion:reduce){
  .cf-tgl-waiting::after{ animation:none; opacity:1; }
}
.cf-tgl-msg{ margin:0; font-size:13px; color:var(--muted); }
.cf-tgl-err{ color:var(--red); }
.cf-tgl-ok{ color:var(--green); }
.cf-tgl-again{
  margin-top:10px; padding:9px 16px; border-radius:10px; cursor:pointer;
  background:var(--bg3); color:var(--text); border:1px solid var(--border2);
  font:600 13px/1 inherit; font-family:inherit;
}


/* ---- static/mobile-bottom-nav.css ---- */
/* Shared Cartel Family phone bottom bar -- SYNDICATE NOIR (2026-10-12),
   drawn to the reference bar (/design/a/app, static/design/a/app.css
   ".na-bottom"): a 64px glass bar (plus the home-indicator inset), exactly
   five slots, each a 26px glyph tile over its label, the lit one tinted gold
   with a gold ring, and in the centre the Trade action as a 54px molten disc
   raised out of the bar on an ink ring -- a <button> that opens the token
   picker IN PLACE (mobile-bottom-nav.js), never a page.

   Every colour is a cf-theme.css token. */
@media(max-width:767px){
  body{padding-bottom:calc(var(--bar-h) + 18px + env(safe-area-inset-bottom,0px))!important}
  #mobile-nav{display:none!important}
  /* One physical footer box, including the iPhone home-indicator safe area.
     content-box used to add the inset outside the height and make the footer
     appear detached / clipped on certain iOS and Android viewport sizes. */
  .oa-bottom-nav{
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;margin:0!important;z-index:1200;
    height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))!important;min-height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))!important;
    padding:0 6px env(safe-area-inset-bottom,0px)!important;box-sizing:border-box!important;
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:0;overflow:visible;
    background:linear-gradient(180deg,rgb(var(--raise) / .86),rgb(var(--ground-rgb) / .97));
    border-top:1px solid var(--glass-edge);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    font-family:var(--font-display)
  }
  .oa-bottom-nav a,.oa-bottom-nav button{
    appearance:none;-webkit-appearance:none;border:0;background:none;color:var(--text-3);text-decoration:none;
    position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-width:0;height:var(--bar-h);min-height:44px;padding:0;
    cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;
    font:600 10.5px/1 var(--font-display);letter-spacing:.02em
  }
  .oa-bottom-nav .oa-nav-code{
    width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:transparent;color:inherit;
    transition:background var(--t-med),color var(--t-med),box-shadow var(--t-med),transform var(--t-med) var(--ease-spring)
  }
  .oa-bottom-nav .oa-nav-code svg{width:18px;height:18px;display:block}
  .oa-bottom-nav .oa-nav-label{font:600 10.5px/1 var(--font-display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .oa-bottom-nav a.active,.oa-bottom-nav a[aria-current="page"]{color:var(--accent-text-strong)}
  .oa-bottom-nav a.active .oa-nav-code,.oa-bottom-nav a[aria-current="page"] .oa-nav-code{
    color:var(--accent-text-strong);background:rgb(var(--glow) / .14);
    box-shadow:inset 0 0 0 1px rgb(var(--glow) / .35),0 0 14px rgb(var(--glow) / .25)
  }
  .oa-bottom-nav a:active .oa-nav-code{transform:scale(.94)}
  /* Trade: the molten disc, raised out of the bar on an ink ring. */
  .oa-bottom-nav .oa-trade-main{grid-column:3;overflow:visible;color:var(--text-2)}
  .oa-bottom-nav .oa-trade-main .oa-trade-disc{
    width:54px;height:54px;border-radius:50%;margin-top:-26px;
    background:var(--molten);color:var(--on-molten);
    box-shadow:0 0 0 4px var(--ink-1),0 10px 26px rgb(var(--glow) / .45)
  }
  .oa-bottom-nav .oa-trade-main .oa-trade-disc svg{width:24px;height:24px}
  .oa-bottom-nav .oa-trade-main:active .oa-trade-disc{transform:scale(.95)}
  .oa-bottom-nav .oa-trade-main[data-error] .oa-trade-disc{background:var(--ink-4);color:var(--dn);box-shadow:0 0 0 4px var(--ink-1),inset 0 0 0 1px rgb(var(--dn-rgb) / .5)}
  .oa-bottom-nav a:focus-visible,.oa-bottom-nav button:focus-visible{outline:2px solid var(--gold-400);outline-offset:-2px;border-radius:var(--r-md)}
  .oa-bottom-nav .oa-nav-badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ion);color:rgb(var(--ion-ground));font:700 10px/18px var(--font-mono);text-align:center;box-sizing:border-box;box-shadow:var(--ion-glow)}
  .oa-bottom-nav .oa-nav-badge[hidden]{display:none}

  /* A trade is a focused full-screen flow: keep app navigation out of its way. */
  body.oa-live-v2 .pt-sheet{padding-bottom:env(safe-area-inset-bottom,0px)!important;z-index:1300!important}
  body.oa-trade-sheet-open .oa-bottom-nav{display:none!important}
  body.oa-trade-sheet-open{padding-bottom:0!important;overflow:hidden!important}
  body.oa-portfolio .wlt-center{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
}
@media (prefers-reduced-motion:reduce){.oa-bottom-nav *{transition:none!important;animation:none!important}}
@media(min-width:768px){.oa-bottom-nav{display:none!important}}


/* ---- static/navbar.css ---- */
/* Cartel Family — the top bar (desktop_shell.topbar_html()), SYNDICATE NOIR.
 *
 * Drawn to the reference top bar (/design/a/app, static/design/a/app.css
 * ".na-top"): a 72px sticky glass band over the page, its hairline appearing
 * only once the page scrolls under it (navbar.js adds .is-scrolled), the
 * page title in 26px display type on the left (only on a page that asks for
 * it: <body data-cf-title>), and round 44px ghost controls on the right.
 *
 * The product's own controls stay, restyled: search / ⌘K palette (300px),
 * the ticker tape, the live marker (the one ion accent), the balance pill
 * ("at least $X · missing: Base" when the total is partial), Messages and
 * Notifications with their unread counts, the theme toggle and the avatar
 * menu. It carries no destination row and no "More" dropdown.
 *
 * Below 768px it is the reference's phone top: 60px, the brand tile, the
 * title, then search, Messages, Notifications and the avatar as 44px round
 * controls. Navigation there is the bottom bar.
 *
 * Every colour is a Noir token. Pairs with /static/navbar.js. */

.pt-nb-topbar{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; gap:12px;
  min-height:72px; padding:12px clamp(16px, 2.6vw, 36px); width:100%; box-sizing:border-box;
  background:linear-gradient(180deg, rgb(var(--ground-rgb) / .92), rgb(var(--ground-rgb) / .7));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid transparent; transition:border-color var(--t-med);
  font-family:var(--font-display); color:var(--text-1);
}
.pt-nb-topbar.is-scrolled{ border-bottom-color:var(--glass-edge); }
.pt-nb-topbar *{ box-sizing:border-box; }
.pt-nb-topbar a{ color:inherit; text-decoration:none; }
.pt-nb-topbar button{ font-family:inherit; cursor:pointer; }

.cf-top-brand{ display:none; }

/* ── page title: the reference's h1, on pages that ask for it ─────────────── */
.cf-top-title{
  flex:none; max-width:40%; min-width:0; margin:0 8px 0 0;
  font:700 26px/1.1 var(--font-display); letter-spacing:-.03em; color:var(--text-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cf-top-title[hidden]{ display:none; }

/* ── search / ⌘K ─────────────────────────────────────────────────────────── */
.cf-top-search{
  position:relative; flex:none; width:300px; height:44px;
  display:flex; align-items:center; gap:8px; padding:0 8px 0 16px;
  background:var(--ink-2); border:1px solid var(--glass-edge-hi); border-radius:var(--r-pill);
  cursor:text; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.cf-top-search:focus-within{ border-color:var(--gold-400); box-shadow:0 0 0 3px rgb(var(--glow) / .2); }
.cf-top-search .pt-nb-search-icon{ display:flex; color:var(--text-3); pointer-events:none; }
.pt-nb-search{
  flex:1 1 auto; min-width:0; height:44px; padding:0; margin:-1px 0;
  background:none; border:0; outline:0; color:var(--text-1);
  font:500 13.5px/1 var(--font-display);
  -webkit-appearance:none; appearance:none;
}
.pt-nb-search::placeholder{ color:var(--text-3); opacity:1; }
.pt-nb-search::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.cf-top-kbd{
  flex:none; font:600 11px/1 var(--font-mono); color:var(--text-2);
  background:rgb(var(--tint) / .06); border:1px solid var(--glass-edge); padding:5px 8px; border-radius:var(--r-pill);
}
.cf-top-search:focus-within .cf-top-kbd{ visibility:hidden; }
.pt-nb-search-close{ display:none; }

.pt-nb-search-results{
  position:absolute; top:calc(100% + 8px); left:0; width:420px; max-width:calc(100vw - 32px);
  background:linear-gradient(180deg, var(--sheet-hi), var(--sheet-lo));
  border:1px solid var(--glass-edge-hi); border-radius:var(--r-lg);
  max-height:420px; overflow-y:auto; z-index:280; display:none; padding:6px;
  box-shadow:var(--shadow-3);
}
.pt-nb-search-results.open{ display:block; }
.pt-nb-sr-hd{ padding:10px 10px 6px; font:600 10px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.pt-nb-sr-row{ display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 10px; border-radius:var(--r-md); cursor:pointer; transition:background var(--t-fast); }
.pt-nb-sr-row:hover,.pt-nb-sr-row.is-on{ background:rgb(var(--glow) / .1); }
.pt-nb-sr-logo,.pt-nb-sr-logo-ph{ width:28px; height:28px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--ink-4); display:flex; align-items:center; justify-content:center; font:700 10px var(--font-display); color:var(--text-2); box-shadow:0 0 0 1px var(--glass-edge-hi); }
.pt-nb-sr-name{ flex:1; min-width:0; font:600 13.5px var(--font-display); color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-nb-sr-sub{ font:500 12px var(--font-mono); color:var(--text-2); font-variant-numeric:tabular-nums; }
.pt-nb-sr-chain{ font:600 9.5px var(--font-mono); letter-spacing:.06em; color:var(--text-2); background:rgb(var(--tint) / .06); border:1px solid var(--glass-edge); border-radius:var(--r-pill); padding:1px 6px; margin-left:4px; vertical-align:1px; }
.pt-nb-sr-kind{ font:600 9.5px var(--font-mono); letter-spacing:.12em; color:var(--text-3); }
.pt-nb-sr-empty{ padding:16px; text-align:center; color:var(--text-2); font:500 12.5px var(--font-display); }

/* ── ticker tape (filled by ticker-tape.js) ──────────────────────────────── */
.cf-top-ticker{
  flex:1 1 auto; min-width:0; height:18px; overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
}

/* A tape slot narrower than ~180px shows a fragment ("1 activ", "$VE"), not a ticker: it goes. */
.cf-top-ticker{ container-type:inline-size; }
@container (max-width:179px){ #cf-ticker{ visibility:hidden; } }

/* ── the live marker: the one ion accent (cf-noir.css .cf-live) ──────────── */
.cf-top-live{ flex:none; }

/* ── balance pill ────────────────────────────────────────────────────────── */
.cf-top-balwrap{ position:relative; flex:none; }
.cf-top-bal{
  height:44px; min-width:44px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 16px;
  background:var(--ink-4); border:1px solid var(--glass-edge-hi); border-radius:var(--r-pill);
  white-space:nowrap; color:var(--text-1); box-shadow:var(--shadow-1);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
@media (hover:hover){ .cf-top-bal:hover{ border-color:rgb(var(--glow) / .45); box-shadow:var(--shadow-2), 0 0 0 1px rgb(var(--glow) / .18); } }
.cf-top-bal:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
.cf-top-bal-k{ font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.pt-nb-sol-num{ font:600 14px/1 var(--font-mono); color:var(--text-1); font-variant-numeric:tabular-nums; }
.cf-top-bal-miss{ font:600 11px/1 var(--font-mono); color:var(--pro); }
.cf-top-bal-miss[hidden]{ display:none; }

/* The total spans six chains, so the pill opens a breakdown rather than
   leaving the viewer to guess which chain the money is on. */
.pt-nb-bal-dd{ position:absolute; top:calc(100% + 8px); right:0; z-index:280; min-width:340px; max-width:calc(100vw - 24px); background:linear-gradient(180deg, var(--sheet-hi), var(--sheet-lo)); border:1px solid var(--glass-edge-hi); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-3); font-family:var(--font-display); }
.pt-nb-bal-dd[hidden]{ display:none; }
.pt-nb-bal-hd{ font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px; }
.pt-nb-bal-total{ font:600 26px/1.1 var(--font-mono); letter-spacing:-.03em; color:var(--text-1); margin-bottom:12px; font-variant-numeric:tabular-nums; }
.pt-nb-bal-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid var(--glass-edge); font:500 13px var(--font-display); }
.pt-nb-bal-k{ color:var(--text-2); }
.pt-nb-bal-v{ font-family:var(--font-mono); color:var(--text-1); font-variant-numeric:tabular-nums; }
.pt-nb-bal-sub{ margin-top:10px; }
.pt-nb-bal-chain .pt-nb-bal-k{ white-space:nowrap; margin-right:12px; }
.pt-nb-bal-chain .pt-nb-bal-v{ font-size:12px; color:var(--text-2); text-align:right; white-space:nowrap; }
.pt-nb-bal-v.is-miss{ color:var(--text-3); }
.pt-nb-bal-empty{ font:500 12.5px/1.45 var(--font-display); color:var(--text-2); padding:4px 0; }
.pt-nb-bal-empty.is-partial{ color:var(--pro); }
.pt-nb-bal-more{ display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--glass-edge); font:600 13px var(--font-display); color:var(--accent-text) !important; }
.pt-nb-bal-more:hover{ text-decoration:underline !important; }

/* ── Messages / Notifications / theme: 44px round ghost controls ──────────── */
.cf-top .cf-top-ic{
  position:relative; flex:none; width:44px; height:44px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--glass-edge-hi); border-radius:50%;
  font:700 11px/1 var(--font-mono); color:var(--text-1);
  transition:border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med) var(--ease-spring);
}
.cf-top .cf-top-ic svg{ width:20px; height:20px; display:block; }
@media (hover:hover){ .cf-top .cf-top-ic:hover{ border-color:rgb(var(--glow) / .45); box-shadow:0 0 0 1px rgb(var(--glow) / .18); color:var(--text-1); } }
.cf-top .cf-top-ic:active{ transform:scale(.95); }
.cf-top .cf-top-ic:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
.cf-top-badge{
  position:absolute; top:-2px; right:-4px;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--ion); color:rgb(var(--ion-ground)); box-shadow:var(--ion-glow);
  font:700 10px/18px var(--font-mono); text-align:center;
  display:none;
}
.cf-top-badge.show{ display:block; }
.cf-top-badge-dn{ background:var(--dn); color:var(--on-molten); box-shadow:0 0 10px rgb(var(--dn-rgb) / .5); }

/* Theme: the glyph names what a tap switches TO -- a sun on dark, a moon on
   light -- as the design draws it. Out-specifies cf-theme-toggle.js's own
   fallback rules, which are written for its standalone button. */
.cf-top .cf-theme-toggle{ font:700 16px/1 var(--font-display); }
.cf-top .cf-theme-toggle .cf-ico-sun{ display:inline; }
.cf-top .cf-theme-toggle .cf-ico-moon{ display:none; }
:root[data-theme="light"] .cf-top .cf-theme-toggle .cf-ico-sun{ display:none; }
:root[data-theme="light"] .cf-top .cf-theme-toggle .cf-ico-moon{ display:inline; }

/* ── avatar menu ─────────────────────────────────────────────────────────── */
.cf-top-me{ position:relative; flex:none; }
.cf-top-av{
  list-style:none; display:block; width:44px; height:44px; border-radius:50%;
  overflow:hidden; cursor:pointer; position:relative;
  background:var(--molten); color:var(--on-molten);
  box-shadow:0 0 0 1px rgb(var(--tint) / .16), 0 3px 10px rgb(var(--shade) / .45);
  font:700 15px/44px var(--font-display); text-align:center;
  transition:transform var(--t-med) var(--ease-spring);
}
@media (hover:hover){ .cf-top-av:hover{ transform:translateY(-1px); } }
.cf-top-av::-webkit-details-marker{ display:none; }
.cf-top-av::marker{ content:''; }
.cf-top-av:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }
.cf-top-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cf-top-av img[hidden]{ display:none; }
.cf-top-menu{
  position:absolute; right:0; top:52px; width:230px; z-index:300;
  display:flex; flex-direction:column; padding:6px;
  background:linear-gradient(180deg, var(--sheet-hi), var(--sheet-lo));
  border:1px solid var(--glass-edge-hi); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
}
.cf-top-mi{
  height:40px; display:flex; align-items:center; padding:0 12px; width:100%;
  border:0; border-radius:var(--r-md); background:none; text-align:left;
  font:500 14px/1 var(--font-display); color:var(--text-1) !important;
  transition:background var(--t-fast);
}
.cf-top-mi:hover,.cf-top-mi.active{ background:rgb(var(--glow) / .1); }
.cf-top-mi.active{ color:var(--accent-text-strong) !important; }
.cf-top-mi:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }
.cf-top-mi-out{ color:var(--dn) !important; margin-top:4px; border-top:1px solid var(--glass-edge); border-radius:0 0 var(--r-md) var(--r-md); }

/* ── "?" Help: Docs · Developers · Blog · Status · Support · What's new ──
   desktop_shell.help_menu_html(), from navigation.resources(). A <details>
   like the avatar menu (opens with no script; cf-rail.js adds Escape,
   outside click and arrow keys). The same 44px round ghost control as
   Messages and the bell; the popover is the avatar menu's glass, wider,
   each row a glyph, the label and one line of description. */
.cf-top-help{ position:relative; flex:none; }
.cf-top .cf-top-help-btn{ list-style:none; cursor:pointer; }
.cf-top-help-btn::-webkit-details-marker{ display:none; }
.cf-top-help-btn::marker{ content:''; }
.cf-top-help[open] .cf-top-help-btn{ border-color:rgb(var(--glow) / .55); color:var(--accent-text-strong); }
.cf-help-menu{ width:292px; max-width:calc(100vw - 24px); padding:8px; }
.cf-help-h{
  display:block; padding:6px 10px 8px;
  font:600 10px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-4);
}
.cf-help-mi{
  display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 10px; width:100%;
  border:0; border-radius:var(--r-md); background:none; text-align:left;
  color:var(--text-1) !important; text-decoration:none !important;
  transition:background var(--t-fast);
}
.cf-help-mi:hover,.cf-help-mi:focus-visible{ background:rgb(var(--glow) / .1); }
.cf-help-mi:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }
.cf-help-ico{
  flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:var(--accent-text); background:rgb(var(--glow) / .1); box-shadow:inset 0 0 0 1px rgb(var(--glow) / .22);
}
.cf-help-ico svg{ width:18px; height:18px; display:block; }
.cf-help-t{ flex:1 1 auto; min-width:0; display:grid; gap:2px; }
.cf-help-t b{ font:600 14px/1.2 var(--font-display); color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-help-t small{ font:500 11.5px/1.3 var(--font-display); color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-help-ext{ flex:none; display:flex; color:var(--text-4); }
.cf-help-ext svg{ width:12px; height:12px; display:block; }
.cf-help-mi:hover .cf-help-ext{ color:var(--accent-text); }

/* Signed out: mobile-connect-button.js puts Connect where the avatar was --
   the molten primary. */
#oa-guest-connect-btn{
  height:44px !important; min-width:0 !important; padding:0 20px !important;
  border-radius:var(--r-pill) !important; border:1px solid var(--molten-hi) !important;
  background:var(--molten) !important; color:var(--on-molten) !important;
  box-shadow:0 1px 0 rgb(var(--sheen-rgb) / .5) inset, 0 -2px 0 var(--molten-lo) inset, 0 6px 22px rgb(var(--glow) / .32) !important;
  font:600 14px/1 var(--font-display) !important; flex:none !important;
}
#oa-guest-connect-btn svg{ width:16px; height:16px; }

.pt-nb-scrim{ display:none; position:fixed; inset:0; background:rgb(var(--scrim-rgb) / .66); z-index:190; }
.pt-nb-scrim.show{ display:block; }

/* Narrow desktop: the ticker gives way first, then the search narrows. */
@media (max-width:1279px){ .cf-top-search{ width:260px; } }
@media (max-width:980px){ .cf-top-search{ width:240px; } }
/* Below 1100 the tape would get a sliver -- "/ACC 0.000040" at 768 -- which
   is a fragment, not a ticker. It goes rather than shrinks; Live Market and
   the Feed's movers carry the same /api/market/live figures. The spacer keeps
   the balance and icons pinned right. */
@media (max-width:1099px){
  .cf-top-ticker{ visibility:hidden; min-width:0; flex:1 1 0; }
  .cf-top-live{ display:none; }
}
/* With a title beside it, the tape is the first thing to give way. */
@media (max-width:1365px){ body[data-cf-title] .cf-top-ticker{ visibility:hidden; min-width:0; flex:1 1 0; } }
@media (max-width:980px){ .cf-top-kbd{ display:none; } }
/* Laptop with a page title (Live Market at 1280 ran the avatar 52px off the
   right edge): once the tape has gone, the search narrows; the title, the
   balance and the controls never do. */
@media (min-width:1100px){ .cf-top .cf-top-search{ flex:0 1 auto; min-width:120px; } }
/* ...and the presence marker goes with the tape: Live Market at 1100 still ran
   107px over with it. The page's own LIVE marker carries the same signal. */
@media (max-width:1365px){ body[data-cf-title] .cf-top-live{ display:none; } }
/* On a tablet the search is what gives way, never the balance: a partial
   balance must keep its "missing: Solana" note (CLAUDE.md, partial-data
   honesty). */
@media (min-width:768px) and (max-width:1099px){
  .cf-top .cf-top-search{ width:auto; flex:1 1 300px; max-width:300px; min-width:120px; }
  .cf-top-title{ font-size:22px; flex:none; }
  /* Live Market at 768 ran 80px over (title + search + XP chip + balance +
     four controls). The pill keeps its figure and its "missing" note; only
     the BALANCE caption goes, and the gaps tighten. */
  .pt-nb-topbar.cf-top{ gap:8px; }
  .cf-top .cf-top-bal-k{ display:none; }
  .cf-top .cf-top-bal{ padding:0 12px; }
  .cf-top .cf-xpchip-wrap{ margin-left:0; }
}
/* A narrow tablet with a page title: the XP chip gives way too (XP lives on
   the profile and the rail's member row). */
@media (min-width:768px) and (max-width:979px){ body[data-cf-title] .cf-top .cf-xpchip-wrap{ display:none; } }

/* ── phone: the reference's 60px top ──────────────────────────────────────── */
@media (max-width:767px){
  .pt-nb-topbar{ min-height:60px; padding:8px 12px; gap:4px; }
  /* a 44px target around the reference's 34px gold-ringed tile */
  .cf-top-brand{ display:grid; place-items:center; flex:none; width:44px; height:44px; margin:0 2px 0 -5px; border-radius:12px; }
  .cf-top-brand:focus-visible{ outline:2px solid var(--gold-400); outline-offset:-2px; }
  .cf-top-brand-tile{
    display:block; position:relative; width:34px; height:34px; border-radius:10px; overflow:hidden;
    background:var(--ink-2); box-shadow:0 0 0 1px rgb(var(--glow) / .45), 0 6px 18px rgb(var(--glow) / .25);
  }
  .cf-top-brand img{ position:absolute; width:118%; height:118%; max-width:none; left:-9%; top:-8%; display:block; object-fit:cover; }
  .cf-top-title{ font-size:22px; flex:1 1 auto; max-width:none; }
  body:not([data-cf-title]) .cf-top-brand{ margin-right:auto; }
  /* With a title, the XP chip gives way on a phone (XP lives on Profile):
     with it, "Live Market" at 390 read "Li...". */
  body[data-cf-title] .cf-top .cf-xpchip-wrap{ display:none; }
  .cf-top-ticker, .cf-top-balwrap, .cf-top .cf-theme-toggle, .cf-top-kbd, .cf-top-live{ display:none; }
  .cf-top .cf-top-search{ width:44px; height:44px; padding:0; justify-content:center; border-radius:50%; background:transparent; }
  .cf-top .cf-top-search .pt-nb-search-icon{ display:flex; color:var(--text-1); pointer-events:none; }
  /* The input still takes the tap (navbar.js opens the full-screen search on
     focus), but draws nothing until it has been opened. */
  .cf-top .cf-top-search .pt-nb-search{ position:absolute; inset:0; width:100%; opacity:0; font-size:16px; }
  .cf-top .cf-top-ic{ width:44px; height:44px; }
  .cf-top .cf-top-ic svg{ width:19px; height:19px; }
  .cf-top-av{ width:44px; height:44px; font:700 14px/44px var(--font-display); }
  .cf-top-menu{ top:52px; }
  /* The help popover spans the phone (a 292px menu right-aligned to a button
     near the edge ran 24px off a 320 screen). */
  .cf-top-help .cf-help-menu{ position:fixed; left:12px; right:12px; width:auto; max-width:none; top:calc(60px + env(safe-area-inset-top, 0px)); }
  #oa-guest-connect-btn{ height:44px !important; padding:0 14px !important; font-size:13px !important; }

  #pt-nb-search-portal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;box-sizing:border-box!important;z-index:5000!important;background:var(--ink-1)!important;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))!important;overflow:hidden!important}
  #pt-nb-search-portal>.pt-nb-search-wrap.mobile-search-open{position:relative!important;inset:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;grid-template-rows:48px minmax(0,1fr)!important;gap:10px!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;cursor:auto!important}
  #pt-nb-search-portal .pt-nb-search{grid-column:1!important;grid-row:1!important;position:static!important;opacity:1!important;width:100%!important;height:48px!important;margin:0!important;padding:0 16px 0 42px!important;border-radius:var(--r-pill)!important;border:1px solid var(--glass-edge-hi)!important;color:var(--text-1)!important;caret-color:var(--gold-400)!important;background:var(--ink-2)!important;font-size:16px!important}
  #pt-nb-search-portal .pt-nb-search-icon{display:flex!important;position:absolute!important;left:16px!important;top:16px!important;z-index:2!important;color:var(--text-2)!important}
  #pt-nb-search-portal .cf-top-kbd{display:none!important}
  #pt-nb-search-portal .pt-nb-search-close{grid-column:2!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;margin:0!important;padding:0!important;border:1px solid var(--glass-edge-hi)!important;border-radius:50%!important;background:transparent!important;color:var(--text-1)!important;font-size:28px!important}
  #pt-nb-search-portal .pt-nb-search-results{grid-column:1/-1!important;grid-row:2!important;position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;max-height:none!important;margin:0!important;overflow-y:auto!important}
}
@media (max-width:429px){ .cf-top-title{ font-size:20px; } }
/* Phones: with a title the Messages control gives way (the inbox is one tap
   from Profile and from the bell) so the title and the "?" Help control --
   the phone's one path to Docs, Blog, Status, Developers and Support, since
   the bottom bar keeps its five slots -- both fit: at 390, brand + search +
   bell + help + avatar leave "Live Market" its full width instead of
   "Live M...". (It was the ≤374 rule; the help control moved it up.) */
@media (max-width:767px){ body[data-cf-title] .cf-top .cf-top-ic[href^="/messages"]{ display:none; } }
@media (max-width:359px){
  .pt-nb-topbar{ padding:8px 8px; gap:0; }
  .cf-top-title{ font-size:19px; }
  /* The narrowest phones: with a title, brand + search + bell + "?" + avatar
     leave "Live Market" 79px, so the "?" yields and the avatar menu's
     "Help & resources" row (desktop_shell, hidden everywhere else) takes
     over -- the resources stay one tap away on every width. */
  body[data-cf-title] .cf-top-help{ display:none; }
  body[data-cf-title] .cf-top-help-fb{ display:flex; }
}
.cf-top-help-fb{ display:none; }

/* The avatar menu's rows: 44px on any touch screen, and at every width up
   to a tablet's whatever the pointer says. */
@media (pointer:coarse), (hover:none), (max-width:1024px){
  .cf-top-mi{ height:44px; }
}

@media (prefers-reduced-motion:reduce){
  .pt-nb-topbar, .pt-nb-topbar *{ transition:none !important; }
  .cf-top .cf-top-ic:active, .cf-top-av:hover{ transform:none; }
}

/* A closed Help popover is not laid out at all. Chromium keeps a closed
   <details>' children measurable in some cases, and the sweep found its rows
   as 20x46 tap targets on phones (2026-10-15). Hidden means display:none. */
.cf-top-help:not([open]) .cf-help-menu,
.cf-rail-help:not([open]) .cf-help-menu,
.cf-rail-help:not([open]) .cf-rail-help-menu{ display:none !important; }


/* ---- static/tip-experience.css ---- */
/* Shared Cartel Family Tip receipt, profile stats and history.
   Rendered on /profile and /wallet, both of which now carry .cf-themable, so
   every colour here resolves through cf-theme.css rather than a literal --
   these cards were painting dark panels onto the light page. */
.oa-tip-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 16px 6px}
.oa-tip-stat{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:13px 15px;min-width:0;display:flex;flex-direction:column;gap:6px}
.oa-tip-stat span{font-size:11px;font-weight:650;color:var(--muted)}
.oa-tip-stat strong{font-size:17px;font-weight:800;color:var(--m3-primary-fixed);font-variant-numeric:tabular-nums}
.oa-tip-receipt[hidden],#oa-tip-receipt-explorer[hidden]{display:none!important}
.oa-tip-receipt{text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;padding:14px 2px 10px;color:var(--text)}
.tip-sheet.oa-tip-result>:not(.tip-head):not(.tip-handle):not(.oa-tip-receipt){display:none!important}
.oa-tip-receipt-icon{width:54px;height:54px;border:1px solid color-mix(in srgb,var(--green) 55%,transparent);background:color-mix(in srgb,var(--green) 16%,var(--bg2));border-radius:50%;display:grid;place-items:center;font-size:27px;color:var(--green)}
.oa-tip-receipt h2{font-size:21px;font-weight:800}
.oa-tip-receipt-amount{font-size:32px;font-weight:800;color:var(--m3-primary-fixed);font-variant-numeric:tabular-nums}
.oa-tip-receipt-peer{font-size:13px;color:var(--muted)}
.oa-tip-receipt-meta{width:100%;padding:14px;background:var(--bg2);border:1px solid var(--border2);border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}
.oa-tip-pill{font-size:11px;font-weight:800;display:inline-block;border:1px solid var(--border2);border-radius:var(--r-pill);padding:5px 9px;color:var(--muted);white-space:nowrap}
.oa-tip-pill.confirmed{color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--bg2));border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.oa-tip-pill.submitted{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 14%,var(--bg2));border-color:rgba(var(--accent-rgb),.45)}
.oa-tip-pill.failed{color:var(--red);background:color-mix(in srgb,var(--red) 14%,var(--bg2));border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.oa-tip-receipt-link{display:block;padding:12px;color:var(--m3-primary-fixed);text-decoration:none;font-weight:700}
.oa-tip-receipt-done{width:100%;padding:14px;background:var(--accent-cta);color:var(--m3-on-primary);border:0;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer}
.oa-tip-receipt-info{font-size:12px;color:var(--muted);line-height:1.5}
.oa-tip-history{padding:5px 12px 14px}
.oa-tip-empty{text-align:center;padding:27px 8px;color:var(--muted);font-size:13px}
.oa-tip-row{border-bottom:1px solid var(--border2);display:grid;grid-template-columns:37px minmax(0,1fr) auto;column-gap:10px;row-gap:9px;padding:14px 3px}
.oa-tip-row:last-child{border-bottom:0}
.oa-tip-row.oa-tip-highlight{background:color-mix(in srgb,var(--accent) 12%,var(--bg2));outline:1px solid var(--accent);border-radius:12px;padding:14px 8px}
.oa-tip-row-icon{height:34px;width:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,var(--bg2));color:var(--accent-ink);font-size:22px}
.oa-tip-row-icon.received{background:color-mix(in srgb,var(--green) 16%,var(--bg2));color:var(--green)}
.oa-tip-row-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.oa-tip-row-main strong{color:var(--text);font-size:14px}
.oa-tip-peer{font-size:12px;color:var(--m3-primary-fixed);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.oa-tip-row-main small{font-size:11px;color:var(--muted)}
.oa-tip-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.oa-tip-row-right strong{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.oa-tip-positive{color:var(--green)}.oa-tip-negative{color:var(--m3-primary-fixed)}
.oa-tip-row-detail{grid-column:2/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}
.oa-tip-row-detail a{color:var(--m3-primary-fixed);text-decoration:none;white-space:nowrap}
.oa-tip-refresh{border:0;background:transparent;color:var(--m3-primary-fixed);cursor:pointer;font-size:23px;min-width:42px;min-height:40px}
@media(max-width:420px){.oa-tip-row{grid-template-columns:33px minmax(0,1fr) auto;column-gap:7px}.oa-tip-row-right strong{font-size:12px}.oa-tip-stats{gap:7px}.oa-tip-stat{padding:12px 10px}.oa-tip-stat strong{font-size:15px}}


/* ---- static/cf-share-card.css ---- */
/* Cartel Family — the share-a-card control.
 *
 * One panel, used both inline (on the public /card page, where sharing IS
 * the page) and inside a CFModal sheet (everywhere in the app):
 *
 *   the card image            full width, its own 1200:630 shape
 *   one action row            Share on X (primary) · Share… · Copy link
 *   the link, copyable        mono field with its own copy button
 *   one status line           what just happened, or what went wrong
 *
 * Every value is a cf-theme token, so both themes read correctly; the
 * buttons are the CFModal action buttons' shape (48px, radius 12, Montserrat
 * 700 14) so the sheet's own "Done" and these sit together as one system.
 * cf-share-card.js loads this file itself, so no host page can open the
 * panel unstyled.
 */

.cfs-panel{display:flex;flex-direction:column;gap:12px;font-family:var(--font-ui);color:var(--ink)}

/* The image keeps its own shape at any width: height:auto beats the
   element's height="630" attribute, which otherwise squeezes the card
   sideways into what reads as a condensed typeface. */
.cfs-preview{
  display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-card,14px);background:var(--s2);
}

/* ── the action row ─────────────────────────────────────────────────── */
.cfs-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}

.cfs-btn{
  min-height:48px;min-width:0;padding:0 14px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:12px;
  background:var(--s2);color:var(--ink);
  font:700 14px/1 var(--font-ui);white-space:nowrap;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .12s ease;
}
.cfs-btn span{overflow:hidden;text-overflow:ellipsis}
.cfs-btn svg{flex:0 0 auto;width:16px;height:16px}
.cfs-btn:hover{border-color:var(--ink3)}
.cfs-btn:active{transform:translateY(1px)}
.cfs-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cfs-btn[disabled]{opacity:.55;cursor:default;transform:none}

/* The accent is a FILL with ink text (--onAcc), never a text colour. */
.cfs-btn.cfs-primary{background:var(--acc);color:var(--onAcc)}
.cfs-btn.cfs-primary:hover{border-color:transparent;opacity:.92}

.cfs-btn.cfs-done{color:var(--up);border-color:var(--up)}

/* ── the copyable link ──────────────────────────────────────────────── */
.cfs-linkbox{
  display:flex;align-items:center;gap:6px;box-sizing:border-box;min-height:44px;
  padding:2px 2px 2px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  transition:border-color .14s ease;
}
.cfs-linkbox:focus-within{border-color:var(--acc)}
.cfs-linkbox.cfs-done{border-color:var(--up)}

.cfs-link{
  flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0;border:0;outline:0;background:transparent;
  color:var(--ink2);font:500 13px/1 var(--font-num);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cfs-link:focus{color:var(--ink)}

.cfs-copy{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:10px;background:var(--s2);color:var(--ink2);cursor:pointer;
  transition:color .14s ease,background .14s ease;
}
.cfs-copy svg{width:16px;height:16px;display:block}
.cfs-copy:hover{color:var(--ink)}
.cfs-copy:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cfs-copy.cfs-done{color:var(--up);background:var(--upBg)}

/* ── status ─────────────────────────────────────────────────────────── */
.cfs-note{margin:0;font:500 13px/1.5 var(--font-ui);color:var(--ink2)}
.cfs-note[data-kind="error"]{color:var(--dn)}
.cfs-note[data-kind="ok"]{color:var(--up)}

.cfs-busy{display:inline-block;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){
  .cfs-busy{animation:cfsSpin .7s linear infinite}
  @keyframes cfsSpin{to{transform:rotate(360deg)}}
}

/* A trigger small enough to sit on a ledger row or a profile header. */
.cfs-trigger{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;
  padding:6px 12px;border-radius:var(--r-full,999px);
  border:1px solid var(--line);background:transparent;
  color:var(--accT);font:600 12px/1 var(--font-ui);cursor:pointer;
}
.cfs-trigger:hover{border-color:var(--acc);background:var(--accBg)}
.cfs-trigger:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (pointer:coarse){ .cfs-trigger{min-height:44px} }

/* Phone: the primary action gets the whole first row, the other two split
   the second, so no label is cut and every target stays 48px tall. */
@media (max-width:480px){
  .cfs-row{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfs-row .cfs-primary{grid-column:1 / -1}
  /* Without the system share (a desktop browser) the row is two buttons:
     each takes a full row rather than one sitting beside a gap. */
  .cfs-row .cfs-btn:last-child:nth-child(2){grid-column:1 / -1}
}