/* ---- 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/cf-promoted.css ---- */
/* Cartel Family — promoted token placements (PAID). Styles for cf-promoted.js.
 *
 * SYNDICATE NOIR promoted card (owner, 2026-10-16: the thin gold box "looks
 * plain"). A glass panel with a slow conic edge in the brand ramp (one turn in 6s), a soft
 * ember glow behind the token's logo, the token's real figures and curve,
 * the molten Buy with its light sweep and a ghost Chart. ONE component; the
 * host carries the size: .is-card (feed, Discover, Calls), .is-row (Traders,
 * Leaderboard), .is-banner (Live Market). The layout follows the slot's OWN
 * width (container queries), so a 300px aside and a 1200px column both fit.
 *
 * Every colour here is a cf-theme.css token. A literal would be correct in one
 * theme and wrong in the other, and this block has to stay legible in both
 * because its whole job is to be read as an advertisement.
 *
 * The disclosure is the word "Promoted" on amber on every card, plus "Paid
 * placement" beside it. The design is explicit: paid placement always carries
 * the word "Promoted" on amber — never the gain colour (a paid label painted
 * like a profit reads as a positive signal) and never the brand fill (which
 * reads as the platform's endorsement). The pill's label is --onPro, the
 * ink for an amber FILL (--on-gold failed AA on it in light mode); focus
 * rings are --gold. The molten fill is on the Buy BUTTON only, as on every
 * primary action in the product.
 *
 * Reduced motion is the finished state: the edge rests, no ember breath, no
 * sweep, no entrance; the figures and the curve are drawn in full.
 */

@property --cf-promo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cf-promo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Mounted into containers of very different widths (a full-width column,
     a 300px aside), so the card lays out on its OWN width. */
  container-type: inline-size;
  flex: 0 0 auto;
  margin: 0;
}
.cf-promo[hidden] { display: none; }

/* ── the panel ──────────────────────────────────────────────────────────── */
.cf-promo-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--r-lg, 20px);
  color: var(--ink);
  font-family: var(--font-ui);
  background:
    radial-gradient(260px 160px at 44px 64px, rgb(var(--glow) / .16), transparent 70%),
    linear-gradient(180deg, rgb(var(--raise) / .66), rgb(var(--raise) / .72) 38%, var(--glass));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2), 0 10px 36px rgb(var(--glow) / .14);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--blur)) saturate(var(--glass-saturate));
}
/* The edge: a conic sweep of the brand ramp (--glow, so it follows the
   brand and both themes) masked to a 2px ring, one slow turn. */
.cf-promo-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--cf-promo-a),
    rgb(var(--glow) / .3) 0deg, rgb(var(--glow) / 1) 45deg, rgb(var(--sheen-rgb) / .95) 62deg,
    rgb(var(--glow) / .85) 80deg, rgb(var(--glow) / .3) 140deg, rgb(var(--glow) / .3) 200deg,
    rgb(var(--glow) / .8) 250deg, rgb(var(--glow) / .3) 320deg);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask-composite: exclude;
  animation: cf-promo-spin 6s linear infinite;
}
@keyframes cf-promo-spin { to { --cf-promo-a: 360deg; } }

/* ── head: the disclosure, then where it trades ─────────────────────────── */
.cf-promo-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}
.cf-promo-badge {
  flex: 0 0 auto;
  font: 800 11px/1.3 var(--font-ui);
  letter-spacing: .02em;
  color: var(--onPro);   /* amber FILL label: see --onPro in cf-theme.css */
  background: var(--pro);
  padding: 4px 9px;
  border-radius: var(--r-badge, 6px);
}
.cf-promo-note {
  font: 600 11px/1.3 var(--font-mono, var(--font-num));
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink2);
}
.cf-promo-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}
.cf-promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-pill, 999px);
  background: rgb(var(--tint) / .06);
  border: 1px solid var(--glass-edge);
  font: 600 12px/1 var(--font-ui);
  color: var(--ink2);
  white-space: nowrap;
}
.cf-promo-tag .cf-logo { width: 14px; height: 14px; flex: none; }

/* ── body: the card size by default ─────────────────────────────────────── */
.cf-promo-body {
  display: grid;
  margin-top: 14px;
  gap: 12px 16px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "id    quote"
    "spark spark"
    "stats here"
    "acts  acts";
}
.cf-promo-id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-md, 14px);
}
a.cf-promo-id:hover .cf-promo-sym { text-decoration: underline; }

.cf-promo-logo {
  --s: 48px;
  position: relative;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: calc(var(--s) * .3);
  display: grid;
  place-items: center;
  background: var(--molten);
  color: var(--on-molten);
  box-shadow: 0 0 0 1px var(--glass-edge-hi), 0 4px 14px rgb(var(--shade) / .4);
}
/* The ember behind the logo: a soft, breathing warmth, never a ring. */
.cf-promo-logo::before {
  content: '';
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--glow) / .55), rgb(var(--glow) / 0) 66%);
  filter: blur(4px);
  pointer-events: none;
  animation: cf-promo-ember 3.6s var(--ease-in-out, ease-in-out) infinite alternate;
}
@keyframes cf-promo-ember { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
.cf-promo-letter { font: 800 calc(var(--s) * .42)/1 var(--font-display, var(--font-ui)); }
.cf-promo-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: var(--ink-4);
}

.cf-promo-names { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cf-promo-sym {
  font: 800 18px/1.15 var(--font-display, var(--font-ui));
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-promo-name {
  font: 500 13px/1.3 var(--font-ui);
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-promo-quote {
  grid-area: quote;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}
.cf-promo-price {
  font: 700 18px/1.1 var(--font-num, var(--font-mono));
  color: var(--ink);
  white-space: nowrap;
}
.cf-promo-price.is-up { animation: cf-promo-up .9s var(--ease-out, ease-out); }
.cf-promo-price.is-dn { animation: cf-promo-dn .9s var(--ease-out, ease-out); }
@keyframes cf-promo-up { from { color: var(--up); } }
@keyframes cf-promo-dn { from { color: var(--dn); } }
.cf-promo-chg {
  font: 700 12px/1 var(--font-num, var(--font-mono));
  padding: 4px 7px;
  border-radius: var(--r-pill, 999px);
  white-space: nowrap;
}
.cf-promo-chg.up { color: var(--up); background: var(--up-dim, var(--upBg)); }
.cf-promo-chg.dn { color: var(--dn); background: var(--dn-dim, var(--dnBg)); }
.cf-promo-chg.flat { color: var(--ink3); background: rgb(var(--tint) / .06); }
.cf-promo-chg i { font-style: normal; opacity: .7; margin-right: 4px; font-weight: 600; }

.cf-promo-spark {
  grid-area: spark;
  position: relative;
  height: 40px;
  min-width: 0;
}
.cf-promo-spark .cf-spark-svg { width: 100%; height: 100%; display: block; }
.cf-promo-nochart {
  display: flex;
  align-items: center;
  height: 100%;
  font: 500 12px/1.3 var(--font-ui);
  color: var(--ink3);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 0 4px;
}

.cf-promo-stats {
  grid-area: stats;
  display: flex;
  gap: 18px;
  margin: 0;
  min-width: 0;
}
.cf-promo-stats div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cf-promo-stats dt {
  font: 600 10px/1 var(--font-mono, var(--font-num));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3);
}
.cf-promo-stats dd {
  margin: 0;
  font: 700 14px/1.1 var(--font-num, var(--font-mono));
  color: var(--ink);
  white-space: nowrap;
}

.cf-promo-here {
  grid-area: here;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.cf-promo-faces { display: inline-flex; }
.cf-promo-face {
  position: relative;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font: 700 10px/1 var(--font-display, var(--font-ui));
  color: var(--on-molten);
  background: var(--molten);
  box-shadow: 0 0 0 2px var(--ink-3);
}
.cf-promo-face:first-child { margin-left: 0; }
.cf-promo-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-promo-here-t { font: 500 12px/1.3 var(--font-ui); color: var(--ink2); white-space: nowrap; }
.cf-promo-here-t b { color: var(--ink); font-weight: 700; }

.cf-promo-acts {
  grid-area: acts;
  display: flex;
  gap: 10px;
  min-width: 0;
}
.cf-promo-acts .cf-btn { min-height: var(--tap, 44px); }
.cf-promo-buy { flex: 1 1 auto; font-weight: 700; }
.cf-promo-chart { flex: 0 0 auto; padding: 0 18px; }
/* The molten Buy carries the sweep on its own, every few seconds, not only
   on hover: it is the one thing on the card to press. */
.cf-promo-buy::after { animation: cf-promo-sweep 6s var(--ease-out, ease-out) 1.4s infinite; }
@keyframes cf-promo-sweep {
  0% { transform: translateX(-120%); }
  16%, 100% { transform: translateX(120%); }
}

/* ── the row (Traders, Leaderboard) and the banner (Live Market) ───────── */
@container (min-width: 600px) {
  .cf-promo.is-row .cf-promo-body,
  .cf-promo.is-banner .cf-promo-body {
    grid-template-columns: minmax(180px, 1.3fr) minmax(120px, 1fr) auto;
    grid-template-areas:
      "id    spark quote"
      "stats here  acts";
  }
  .cf-promo.is-row .cf-promo-here,
  .cf-promo.is-banner .cf-promo-here { justify-content: flex-start; }
  .cf-promo.is-row .cf-promo-acts .cf-btn,
  .cf-promo.is-banner .cf-promo-acts .cf-btn { flex: 0 0 auto; }
  .cf-promo.is-row .cf-promo-buy,
  .cf-promo.is-banner .cf-promo-buy { min-width: 132px; }
}
@container (min-width: 980px) {
  .cf-promo.is-row .cf-promo-body,
  .cf-promo.is-banner .cf-promo-body {
    grid-template-columns: minmax(200px, 1.2fr) minmax(140px, 1fr) auto auto auto auto;
    grid-template-areas: "id spark quote stats here acts";
    gap: 12px 22px;
  }
}
.cf-promo.is-banner .cf-promo-card { padding: 18px 20px; }
.cf-promo.is-banner .cf-promo-logo { --s: 56px; }
.cf-promo.is-banner .cf-promo-sym { font-size: 20px; }
.cf-promo.is-banner .cf-promo-spark { height: 48px; }

/* A narrow slot (the 300px Discover aside, a 320px phone): one column. */
@container (max-width: 340px) {
  .cf-promo-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "quote" "spark" "stats" "here" "acts";
  }
  .cf-promo-quote { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
  .cf-promo-here { justify-content: flex-start; }
  .cf-promo-tags { margin-left: 0; }
}

/* ── the entrance: added by script, taken off again; never a resting state */
.cf-promo-in .cf-promo-card { animation: cf-promo-enter .55s var(--ease-out, ease-out); }
@keyframes cf-promo-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* ── unsold: the slot offering itself, at the server's price ───────────── */
.cf-promo-card.is-sell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 40px;
  padding: 12px 16px;
  border-radius: var(--r-card, 14px);
}
.cf-promo-card.is-sell::before { animation: none; opacity: .55; }
/* Unsold (CFFeed / CFDiscover): "Promote your token here" 700 15 beside the
   pill, the price line "— SOL · 24h" in mono 12, then the outlined action. */
.cf-promo-card.is-sell .cf-promo-sym { flex: 0 0 auto; min-width: 0; font: 700 15px/1.3 var(--font-ui); white-space: normal; }
.cf-promo-card.is-sell .cf-promo-desc { flex: 1 1 0; font: 500 12px/1.3 var(--font-num); }

.cf-promo-desc {
  flex: 1 1 0;
  min-width: 0;
  font: 500 13px/1.3 var(--font-ui);
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unsold: the design's outlined "Buy this slot" -- 40px inside a 1px amber
   line, 700 13 in --pro like the pill. Gold here read as the platform's own
   button; the design keeps paid placement amber. The line is an inset
   shadow so a touch screen can hang a 44px hit area on it. */
.cf-promo-sell {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-control, 10px);
  font: 700 13px/1 var(--font-ui);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  color: var(--pro);
  background: transparent;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--pro);
}
.cf-promo-sell:hover { background: var(--proBg); filter: brightness(1.12); }

.cf-promo-sell:focus-visible,
.cf-promo-id:focus-visible,
.cf-promo-own:focus-visible,
.cf-promo-acts .cf-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.cf-promo-own {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font: 600 12px/1.3 var(--font-ui);
  color: var(--accT);
  text-decoration: none;
}
.cf-promo-own:hover { text-decoration: underline; }

/* The Leaderboard's UNSOLD row: flush in the list, no card of its own, the
   action as a text link. A sold promotion there is the full row card. */
.cf-promo[data-cf-promoted-variant="row"] .cf-promo-card.is-sell {
  border: 0;
  border-radius: 0;
  padding: 12px 16px;
  min-height: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cf-promo[data-cf-promoted-variant="row"] .cf-promo-card.is-sell::before { display: none; }
.cf-promo[data-cf-promoted-variant="row"] .cf-promo-card.is-sell .cf-promo-sym { font-size: 13px; }
.cf-promo[data-cf-promoted-variant="row"] .cf-promo-sell {
  height: auto;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  background: none;
  line-height: normal;
}
.cf-promo[data-cf-promoted-variant="row"] .cf-promo-sell:hover { background: none; }
.cf-promo[data-cf-promoted-variant="row"].is-empty .cf-promo-own { display: none; }

@container (max-width: 300px) {
  .cf-promo-card.is-sell .cf-promo-desc { flex-basis: 100%; order: 3; }
  .cf-promo-sell { order: 2; }
}

/* Touch: the unsold slot's call to action is a 44px target. The drawn face
   stays 40px: the extra height is transparent border above and below. */
@media (pointer: coarse) {
  .cf-promo-card.is-sell .cf-promo-sell {
    height: 44px;
    border-top: 2px solid transparent; border-bottom: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px / 12px;
    margin-top: -2px; margin-bottom: -2px;
  }
  .cf-promo[data-cf-promoted-variant="row"] .cf-promo-sell { min-height: 44px; margin-top: -14px; margin-bottom: -14px; }
  .cf-promo-own { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-promo-card::before,
  .cf-promo-logo::before,
  .cf-promo-buy::after,
  .cf-promo-in .cf-promo-card,
  .cf-promo-price.is-up,
  .cf-promo-price.is-dn { animation: none; }
}

/* ── the official token (promo_cards.official_mint): the platform's own,
   labelled in the BRAND fill -- it is ours, not a paid placement, so it
   never borrows the amber that means "Promoted". ──────────────────────── */
.cf-promo-badge.is-official {
  color: var(--on-molten);
  background: var(--molten);
  box-shadow: 0 0 0 1px var(--molten-hi), 0 4px 14px rgb(var(--glow) / .35);
}

/* ── several promotions in a single-card slot: one shown, rotating ─────── */
.cf-promo-rot { display: grid; }
.cf-promo-rot > .cf-promo-card {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s var(--ease-out, ease-out), visibility 0s linear .45s;
}
.cf-promo-rot > .cf-promo-card.is-shown {
  visibility: visible;
  opacity: 1;
  transition: opacity .45s var(--ease-out, ease-out);
}
.cf-promo-dots { display: flex; justify-content: center; gap: 2px; margin-top: -2px; }
.cf-promo-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--r-pill, 999px);
}
.cf-promo-dot i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill, 999px);
  background: rgb(var(--tint) / .28);
  transition: width .3s var(--ease-out, ease-out), background .3s;
}
.cf-promo-dot[aria-selected="true"] i { width: 20px; background: var(--acc); }
.cf-promo-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
@media (pointer: coarse) { .cf-promo-dot { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .cf-promo-rot > .cf-promo-card, .cf-promo-rot > .cf-promo-card.is-shown, .cf-promo-dot i { transition: none; }
}


/* ---- 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/cf-trust.css ---- */
/* The trust label (cf-trust.js). Tokens only — every colour is a design
 * token from cf-theme.css, so the badge reads in both themes. The compact
 * pill matches the Live Market's existing ⚠ RISK treatment (.lm-risk):
 * 10px/700, 2px 5px, radius 5. The word is always printed; colour is never
 * the only signal. */

.cf-trust{
  display:inline-flex;align-items:center;font:700 10px/1.3 var(--font-ui);
  padding:2px 5px;border-radius:5px;white-space:nowrap;vertical-align:middle;
}
.cf-trust.is-verified{color:var(--up);background:var(--upBg)}
.cf-trust.is-risk{color:var(--dn);background:var(--dnBg)}
.cf-trust.is-unchecked{color:var(--ink3);background:var(--s2)}
[data-cf-trust]:not([data-cf-trust="full"]){display:inline-flex;vertical-align:middle;margin-left:4px}
[data-cf-trust]:empty{display:none}
/* "Launched here": the brand's own mark on a token launched on Cartel Family. */
.cf-launched{display:inline-flex;align-items:center;font:700 10px/1.3 var(--font-ui);padding:2px 6px;border-radius:5px;
  margin-left:4px;white-space:nowrap;vertical-align:middle;color:var(--acc);background:transparent;
  border:1px solid var(--acc);text-decoration:none}
.cf-launched:hover,.cf-launched:focus-visible{color:var(--bg);background:var(--acc)}
[data-cf-trust="full"] .cf-launched{font-size:12px;padding:4px 8px;border-radius:7px;margin-left:0}

/* ── the full row (token page header, claim page) ───────────────────────── */
[data-cf-trust="full"]{display:flex;flex-direction:column;gap:8px;min-width:0;flex-basis:100%}
[data-cf-trust="full"] .cf-trust{font-size:12px;padding:4px 8px;border-radius:7px}
.cf-trust-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf-trust-at{font:500 11px/1.3 var(--font-num);color:var(--ink3)}
.cf-trust-chks{display:flex;flex-wrap:wrap;gap:6px}
.cf-trust-chk{
  display:inline-flex;align-items:center;gap:5px;font:600 11px/1.3 var(--font-ui);color:var(--ink2);
  background:var(--s2);border:1px solid var(--line);border-radius:7px;padding:4px 8px;white-space:nowrap;
}
.cf-trust-chk b{font:800 12px/1 var(--font-num)}
.cf-trust-chk.is-pass b{color:var(--up)}
.cf-trust-chk.is-fail{color:var(--dn);background:var(--dnBg);border-color:transparent}
.cf-trust-chk.is-fail b{color:var(--dn)}
.cf-trust-chk.is-unknown{color:var(--ink3)}
.cf-trust-chk.is-info{color:var(--ink2)}
.cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The team line: a claimed profile, or the way to claim. */
.cf-trust-team{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cf-trust-teampill{
  font:700 10px/1.3 var(--font-ui);color:var(--accT);background:var(--accBg);
  padding:3px 7px;border-radius:6px;white-space:nowrap;
}
.cf-trust-desc{font:500 13px/1.4 var(--font-ui);color:var(--body);min-width:0;flex:1 1 220px;overflow-wrap:anywhere}
.cf-trust-links{display:inline-flex;gap:4px;flex-wrap:wrap}
.cf-trust-links a{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;
  font:600 12px/1 var(--font-ui);color:var(--ink);background:var(--s2);text-decoration:none;
}
.cf-trust-links a:hover{color:var(--accT)}
.cf-trust-claim{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:8px;
  font:700 12px/1 var(--font-ui);color:var(--accT);border:1px solid var(--acc);text-decoration:none;white-space:nowrap;
}
.cf-trust-claim:hover{background:var(--accBg)}
.cf-trust-claim:focus-visible,.cf-trust-links a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (pointer:coarse){
  .cf-trust-claim,.cf-trust-links a{min-height:44px;padding:0 14px}
}