/* ---- 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/cf-charts.css ---- */
/* Cartel Family — shared chart primitives (see cf-charts.js), dressed in
   Syndicate Noir (COMPONENTS.md §16): every line carries a two-step glow
   trail in its own colour, the end point is a 9px dot ringed in the ground
   with the shared pulse, the readouts are glass with a gold edge. Tokens
   only; the line colour itself comes from cf-charts.js (read off <body>). */

/* the glow trail: the path's `color` is its stroke (set by cf-charts.js) */
.cf-line{filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 55%,transparent)) drop-shadow(0 0 12px color-mix(in srgb,currentColor 35%,transparent))}
.cf-line--spark{filter:drop-shadow(0 0 3px color-mix(in srgb,currentColor 50%,transparent))}

.cf-chart{position:relative;width:100%}
.cf-chart-svg{display:block;width:100%;height:100%;overflow:visible}

/* The tooltip is an HTML element rather than SVG text: it needs to stay
   upright and legibly sized while the SVG itself is stretched by
   preserveAspectRatio:none, which would distort any text drawn inside it. */
.cf-chart-tip{
  /* The design's readout: 132px wide, value over clock time, centred. */
  position:absolute;top:-6px;transform:translateX(-50%);box-sizing:border-box;
  width:132px;text-align:center;
  pointer-events:none;opacity:0;transition:opacity var(--t-fast,.13s);
  background:var(--glass-strong);border:1px solid rgb(var(--glow) / .3);border-radius:var(--r-sm);
  padding:6px 9px;white-space:nowrap;z-index:5;
  box-shadow:var(--shadow-3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cf-chart-tip.on{opacity:1}
.cf-chart-tip b{
  display:block;color:var(--ink);font:500 12px/1.3 var(--font-num);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;
}
.cf-chart-tip i{display:block;color:var(--ink2);font:500 10px/1.3 var(--font-num);font-style:normal;margin-top:1px}

.cf-chart-end{position:absolute;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:2;
  box-shadow:0 0 0 3px rgb(var(--ground-rgb) / .85),0 0 14px currentColor;width:9px;height:9px}
/* The live pulse (cf-charts.js addPulse): a ring the size of the dot, grown
   and faded by ONE requestAnimationFrame loop for the page -- transform and
   opacity only. At rest it is invisible decoration; the dot is the mark. */
.cf-pulse-ring{position:absolute;inset:0;border-radius:50%;opacity:0;
  pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
.cf-spark-end{position:absolute;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:2}
/* The latest value on the right edge (opts.lastLabel); slides with the line. */
.cf-chart-last{position:absolute;right:0;transform:translateY(-50%);z-index:3;
  font:600 11px/1.3 var(--font-num);color:var(--onAcc);
  padding:2px 6px;border-radius:6px;white-space:nowrap;pointer-events:none;
  font-variant-numeric:tabular-nums}
/* A redraw with a new series cross-fades: the old drawing on top, fading. */
.cf-chart-ghost{position:absolute;inset:0;pointer-events:none;z-index:1}

/* Label of the dashed gold entry line (CFCharts.area opts entry + entryLabel). */
.cf-chart-entry{
  position:absolute;left:8px;transform:translateY(-100%);margin-top:-4px;
  font:600 11px/1.3 var(--font-num);color:var(--onAcc);background:var(--acc);
  padding:2px 6px;border-radius:6px;white-space:nowrap;pointer-events:none;
}

/* Candles: OHLC readout top-left; the price under the pointer shown as
   gold pill on the right edge. */
.cf-ohlc{
  position:absolute;left:8px;top:8px;display:flex;gap:12px;flex-wrap:wrap;
  font:500 12px/1.3 var(--font-num);color:var(--ink2);background:var(--glass-strong);
  border:1px solid rgb(var(--glow) / .3);border-radius:var(--r-sm);padding:6px 10px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  pointer-events:none;opacity:0;transition:opacity .13s;z-index:4;max-width:calc(100% - 16px);
}
.cf-ohlc.on{opacity:1}
.cf-ohlc b{font-weight:500}
.cf-ohlc b.up{color:var(--up)}
.cf-ohlc b.down{color:var(--dn)}
.cf-chart-pricepill{
  position:absolute;right:0;transform:translateY(-50%);
  font:600 11px/1.3 var(--font-num);color:var(--onAcc);background:var(--acc);
  padding:3px 6px;border-radius:6px;pointer-events:none;opacity:0;z-index:4;
}
.cf-chart-pricepill.on{opacity:1}
.cf-candles{cursor:crosshair;touch-action:pan-y;user-select:none}

.cf-chart-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:120px;height:100%;color:var(--muted);
  font-size:12px;text-align:center;padding:18px 12px;
}
.cf-chart-empty svg{opacity:.5}

.cf-spark{display:block;width:100%;line-height:0}
/* The spark readout sits above the line so a finger does not cover it. */
.cf-spark{position:relative}
.cf-spark-tip{top:auto;bottom:calc(100% + 4px);padding:3px 7px;width:auto;min-width:0}
.cf-spark-tip b{font-size:11.5px}
.cf-spark-svg{display:block;width:100%;height:100%}

/* donut */
.cf-donut{display:flex;flex-direction:column;align-items:center;gap:12px}
.cf-donut-svg{display:block;width:168px;height:168px;max-width:100%}
.cf-donut-center{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:168px;height:168px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.cf-donut-center b{
  color:var(--text);font-size:17px;font-weight:600;letter-spacing:-.02em;
  font-family:var(--font-mono);
}
.cf-donut-center i{color:var(--muted);font-size:10px;font-style:normal;
  text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
.cf-donut-legend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;width:100%}
.cf-dl-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.cf-dl-item i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.cf-dl-item b{color:var(--text);font-weight:700;
  font-family:var(--font-mono)}

/* A card wrapper pages can reuse so charts sit consistently. */
.cf-chart-card{
  position:relative;border-radius:var(--r-lg);padding:16px 18px 14px;
  background: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);
}
.cf-chart-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:12px;flex-wrap:wrap}
.cf-chart-title{font:600 var(--fs-micro,11px)/1.2 var(--font-mono);letter-spacing:var(--tr-caps,.16em);
  text-transform:uppercase;color:var(--muted)}
.cf-chart-value{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.02em;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cf-chart-delta{font-size:11.5px;font-weight:600;font-family:var(--font-mono)}
.cf-chart-delta.up{color:var(--green)}
.cf-chart-delta.down{color:var(--red)}
.cf-chart-delta.flat{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .cf-chart-tip,.cf-ohlc{transition:none}
  .cf-pulse-ring,.cf-chart-ghost{display:none}
  .cf-line,.cf-line--spark{filter:none}
}
/* bars(): the optional label row under the slots (opts.ticks). */
.cf-chart-axis{position:relative;height:16px;margin-top:2px}
.cf-chart-axis span{position:absolute;top:0;transform:translateX(-50%);font:500 10px var(--font-num);color:var(--ink3);white-space:nowrap}

/* Keyboard readout (opts.keyboard; always on for heatmap and histogram):
   the chart is focusable and shows a visible focus ring. */
.cf-chart-kb{outline:none;border-radius:8px}
.cf-chart-kb:focus-visible{box-shadow:var(--focus-ring,0 0 0 2px var(--bg),0 0 0 4px var(--accT))}

/* donut(): a hovered / focused legend row (opts.hover). */
.cf-dl-item[tabindex]{cursor:pointer;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.cf-dl-item.on{color:var(--text)}
.cf-dl-item[tabindex]:focus-visible{outline:2px solid var(--accT);outline-offset:1px}

/* heatmap(): squares keep their shape; a long range scrolls in its own box. */
.cf-heat{display:flex;flex-direction:column;gap:8px}
.cf-heat-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-top:2px}
.cf-heat-svg{display:block;height:auto}
/* SVG text never wraps; it only must not inherit a nowrap meant for HTML text. */
.cf-heat-svg text{white-space:normal;user-select:none}
.cf-heat-legend{display:flex;align-items:center;gap:3px;justify-content:flex-end;
  font:500 10px var(--font-num);color:var(--ink3)}
.cf-heat-legend span{margin:0 4px}
.cf-heat-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.cf-heat-tip{transform:translate(-50%,calc(-100% - 8px));width:auto;min-width:132px;max-width:220px}

/* histogram(): the marker's label rides above the plot. */
.cf-hist{height:100%}
.cf-hist-marker{position:absolute;top:0;transform:translateX(-50%);pointer-events:none;
  font:600 10px/1.3 var(--font-num);color:var(--onAcc);background:var(--acc);
  padding:1px 6px;border-radius:5px;white-space:nowrap}
.cf-hist-axis{height:18px;margin-top:0}


/* ── CFPriceChart (cf-price-chart.js): price pane, volume pane, readout ── */
.cf-pc{position:relative}
.cf-pc-wrap{position:relative;border-radius:12px;overflow:hidden;background:var(--s1)}
.cf-pc{outline:none;border-radius:12px}
.cf-pc:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accT)}
/* Candle mode's live dot: placed by transform on the library's coordinates. */
.cf-pc-dot{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;
  pointer-events:none;z-index:3;box-shadow:0 0 0 3px rgb(var(--ground-rgb) / .85),0 0 14px rgb(var(--glow) / .6)}
.cf-pc-price,.cf-pc-vol{position:relative;width:100%}
.cf-pc-vol{border-top:1px solid var(--line)}
.cf-pc-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:220px;
  color:var(--ink3);font:500 13px/1.4 var(--font-body);text-align:center;padding:0 16px}
.cf-pc-tip{position:absolute;top:10px;left:12px;z-index:4;pointer-events:none;opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-fast,.14s),transform var(--t-fast,.14s);background:var(--glass-strong);border:1px solid rgb(var(--glow) / .3);border-radius:var(--r-sm);
  padding:7px 10px;box-shadow:var(--shadow-3);max-width:min(92%,420px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cf-pc-tip.on{opacity:1;transform:none}
.cf-pc-tip.right{left:auto;right:64px}
.cf-pc-tip i{display:block;font:500 10px/1.3 var(--font-num);color:var(--ink3);font-style:normal;letter-spacing:.02em}
.cf-pc-tip b{display:flex;flex-wrap:wrap;gap:4px 10px;font:600 12px/1.4 var(--font-num);color:var(--ink);
  font-variant-numeric:tabular-nums;margin-top:2px}
.cf-pc-tip em{display:inline-block;margin-top:2px;font:600 11px/1.3 var(--font-num);font-style:normal}
.cf-pc-tip em.up{color:var(--up)} .cf-pc-tip em.dn{color:var(--dn)}
.cf-pc-tip small{display:block;margin-top:2px;font:500 10px/1.3 var(--font-num);color:var(--ink2)}
/* Entrance: a left-to-right reveal on first paint, a crossfade on a rebuild.
   Both are added from script and removed on animationend; the resting state
   is fully visible, so a paused tab never leaves a chart hidden. */
.cf-pc-reveal{animation:cfPcReveal var(--t-draw,.7s) var(--ease-out) both}
@keyframes cfPcReveal{from{clip-path:inset(0 100% 0 0);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}}
.cf-pc-swap{animation:cfPcSwap var(--t-med,.28s) var(--ease-out) both}
@keyframes cfPcSwap{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cf-pc-reveal,.cf-pc-swap{animation:none}.cf-pc-tip{transition:none}}