/* ============================================================
   remix.css — NEYN-12112 · "sticky-swap remix" (Rish feedback on v39)
   Loaded AFTER final.css; every rule scoped under body.remix so the
   canonical final-token-detail.html is untouched.
   The move (Rish's node 197-27 = uniswap / matcha / robinhood):
     · identity demoted from a full masthead to a COMPACT top strip
     · chart PROMOTED to a 2/3 hero (real module, no expand-click)
     · swap PINNED top-right in the 1/3 rail
     · the rail (which uniswap/matcha/robinhood all leave empty) put to
       WORK: swap → stats (the "1/3") → trust verdict = a trade console
     · identity/agent nature now expressed through the body (live feed +
       agent card below), Robinhood-style, not through a giant crown
   ============================================================ */

/* ---------- identity strip (reuses .header as the scroll sentinel for f-app.js) ---------- */
body.remix .header{ position:static; overflow:visible;
  display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  padding:14px var(--pgpad) 12px; border-bottom:1px solid var(--line); }
body.remix .idmain{ display:flex; align-items:center; gap:14px; min-width:0; }
body.remix .idav{ width:44px; height:44px; border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg,#8a63ff,#6b3ffb); flex-shrink:0; }
body.remix .idtxt{ min-width:0; display:flex; flex-direction:column; gap:5px; }
body.remix .idname{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:19px; font-weight:600; line-height:1.15; color:var(--ink); letter-spacing:-.01em; }
body.remix .idname .tk{ font-weight:400; color:var(--t666); }
body.remix .idok{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500;
  color:var(--pos); background:var(--pos-bg); border-radius:5px; padding:2px 7px; line-height:15px; }
body.remix .idsub{ display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap;
  font-size:12px; color:var(--t666); }
body.remix .idsub .hpill{ font-size:12px; }
body.remix .idlaunch{ display:inline-flex; align-items:center; gap:6px; color:var(--t666); }
body.remix .idlaunch .lsq{ width:13px; height:13px; border-radius:50%; background:var(--chipbg); flex-shrink:0; }
body.remix .idlaunch b{ color:var(--ink); font-weight:500; }
body.remix .newpill{ font-size:10px; font-weight:600; letter-spacing:.03em; color:var(--acc);
  background:var(--acc-bg); border:1px solid var(--acc-br); border-radius:4px; padding:1px 5px; line-height:14px; }
body.remix .idaddr{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:11.5px; color:var(--t888); }
body.remix .idactions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
body.remix .idactions .manage{ display:none; align-items:center; gap:6px; font-size:12px; font-weight:500;
  color:var(--ink); background:var(--bg); border:1px solid var(--t888); border-radius:5px; padding:6px 11px; }
body.remix .idactions .manage:hover{ border-color:var(--ink); }
body.remix[data-viewer="admin"] .idactions .manage{ display:inline-flex; }
/* agentstatus keeps final.css's state gating; just tidy inline placement here */
body.remix .idname .agentstatus{ font-size:11px; padding:2px 7px; }

/* ---------- CHART HERO (2/3, real, no click) ---------- */
body.remix .charthero{ border:1px solid var(--line); border-radius:12px; padding:16px 18px 12px; margin-bottom:22px; }
body.remix .ch-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px; }
body.remix .ch-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
body.remix .ch-val{ font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1; }
body.remix .ch-chg{ font-size:13px; font-weight:500; font-family:var(--mono); }
/* range tabs: un-hide + un-absolute the shared .chartlabel so the switcher stays wired */
body.remix .charthero .chartlabel{ display:inline-flex; position:static; top:auto; left:auto; margin:0; }
body.remix .charthero .chartbg{ position:relative; inset:auto; height:230px; display:block;
  border-radius:8px; overflow:hidden;
  background:
    repeating-linear-gradient(to bottom, transparent 0 45px, var(--line) 45px 46px); }
body.remix .charthero .chartbg svg{ width:100%; height:100%; }
body.remix .charthero .charea{ fill:var(--pos); opacity:.10; stroke:none; }
body.remix .charthero .chartbg polyline{ stroke:var(--pos); stroke-width:2; }
body.remix .ch-axis{ display:flex; justify-content:space-between; margin-top:8px;
  font-size:11px; color:var(--t999); font-variant-numeric:tabular-nums; }
body[data-chart="expanded"].remix .charthero .chartbg{ height:320px; }

/* ---------- RIGHT RAIL = trade console (swap → stats → verdict), sticky as a unit ---------- */
/* +--sliverh clears the collapsed identity sliver (mirrors final.css's .swap-card
   rule — the missing term made the sliver overlap the pinned rail's top ~30px) */
body.remix .railwrap{ position:sticky; top:calc(var(--navh) + var(--sliverh) + 14px);
  display:flex; flex-direction:column; gap:18px; }
body.remix .swap-card{ position:static; top:auto;
  border:1px solid var(--line); border-radius:12px; padding:16px; }
body.remix .raillabel{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t888); margin-bottom:10px; }
body.remix .railcard{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
body.remix .railstats{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
body.remix .rs{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.remix .rs .k{ font-size:11px; color:var(--t666); font-weight:400; white-space:nowrap; }
body.remix .rs .v{ font-size:16px; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
body.remix .rs .v .d{ font-size:11px; font-weight:500; font-family:var(--mono); margin-left:5px; }
body.remix .railverdict{ display:flex; flex-wrap:wrap; gap:8px; }
body.remix .railverdict .mhbadge{ cursor:default; }

/* ---------- mobile stats strip (rail is hidden < 900 → keep vitals in the column) ---------- */
body.remix .mstats{ display:none; }

/* ---------- top-of-body spacing ---------- */
body.remix .body{ padding-top:20px; }

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  body.remix .header{ align-items:flex-start; }
  body.remix .idactions{ margin-left:auto; }
  body.remix .charthero{ padding:14px 14px 10px; margin-bottom:16px; }
  body.remix .ch-val{ font-size:26px; }
  body.remix .mstats{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px 12px;
    border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:20px; }
}

/* ============================================================
   SHARED ENGINE UPGRADE (remix-ix.js) — exploration pages only
   ============================================================ */

/* ---------- expandable activity rows ----------
   The panel (.rowx) is the row's OWN grid child spanning all columns —
   never a sibling — so f-app's children.length count and seed-clone
   load-more stay correct. */
body.remix .actlist .row{ height:auto; min-height:44px;
  grid-template-columns:20px 1fr auto 14px; cursor:pointer; }
body.remix .actlist .row .rowcaret{ font-size:11px; line-height:1; color:var(--t999);
  justify-self:end; align-self:center; transition:transform .15s ease; }
body.remix .actlist .row:hover .rowcaret{ color:var(--t666); }
body.remix .actlist .row.open{ background:var(--navfill); }
body.remix .actlist .row.open .rowcaret{ transform:rotate(180deg); }

body.remix .rowx{ grid-column:1/-1; padding:0 0 10px 32px; cursor:default; }
body.remix .rxhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12px; color:var(--t666); margin-bottom:6px; }
body.remix .rxhead b{ font-size:13px; font-weight:700; color:var(--ink); }
body.remix .rxhead .rxt{ font-size:11px; color:var(--t999); }
body.remix .rxplat{ font-size:10px; font-weight:500; font-family:var(--mono); letter-spacing:.02em;
  text-transform:uppercase; color:var(--t888); border:1px solid var(--line);
  border-radius:3px; padding:1px 5px; }
body.remix .rxbody{ font-size:13px; line-height:1.5; color:var(--t333);
  white-space:normal; max-width:58ch; }
body.remix .rxkv{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;
  font-family:var(--mono); font-size:11px; color:var(--t888); }
body.remix .rxkv b{ font-weight:500; color:var(--ink); }
body.remix .rxgrid{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px;
  max-width:420px; font-size:12px; }
body.remix .rxgrid .k{ color:var(--t666); }
body.remix .rxgrid .v{ font-family:var(--mono); font-size:11.5px; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:normal; }
body.remix .rxcast{ margin-top:10px; border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; max-width:420px; }
body.remix .rxcast .rxch{ font-size:11px; font-weight:600; color:var(--t888); margin-bottom:5px; }
body.remix .rxcast .rxct{ font-size:12.5px; line-height:1.5; color:var(--t333); white-space:normal; }
body.remix .rxactions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
body.remix .rxbtn{ font-size:11.5px; font-weight:600; color:var(--t666); background:var(--bg);
  border:1px solid var(--line); border-radius:5px; padding:5px 10px; cursor:pointer; }
body.remix .rxbtn:hover{ color:var(--ink); border-color:var(--t888); }

/* ---------- agent-axis feed gating ----------
   No agent / v1-locked ⇒ the token has NO Farcaster/X presence: hide the
   social filter chips and every social row (incl. combined "trade fc"). */
body.remix[data-agent="noagent"]  .actbar [data-filter-set="fc"],
body.remix[data-agent="noagent"]  .actbar [data-filter-set="x"],
body.remix[data-agent="v1locked"] .actbar [data-filter-set="fc"],
body.remix[data-agent="v1locked"] .actbar [data-filter-set="x"]{ display:none; }
body.remix[data-agent="noagent"]  .actlist .row[data-kind~="fc"],
body.remix[data-agent="noagent"]  .actlist .row[data-kind~="x"],
body.remix[data-agent="v1locked"] .actlist .row[data-kind~="fc"],
body.remix[data-agent="v1locked"] .actlist .row[data-kind~="x"]{ display:none; }

/* ---------- obsidian dark (exploration set only) ----------
   The canonical page keeps the full-black #030303 canvas; here the dark
   canvas lifts to obsidian grey. Surfaces/borders are white-alpha in
   final.css so they survive the lighter bg; --cta-ink re-anchored to the
   new canvas so text on the white CTA matches it. */
body.remix[data-theme="dark"]{
  --bg:#121214; --pop:#1b1b1e;
  --cta-ink:#121214;
}

/* ---------- Manage drawer rework (markup transformed by remix-ix.js) ---------- */
body.remix .mdrawer .msec{ padding:0; }
body.remix .mdrawer .msec:not(.closed){ padding-bottom:14px; }
body.remix .mdrawer .msec .mst{ min-height:44px; cursor:pointer; user-select:none;
  font-size:13px; font-weight:600; color:var(--ink); }
body.remix .mdrawer .msec .mst .mflag{ margin-left:auto; }
body.remix .mdrawer .mcaret{ flex-shrink:0; font-size:12px; line-height:1; color:var(--t888);
  transition:transform .15s ease; }
body.remix .mdrawer .msec:not(.closed) .mcaret{ transform:rotate(180deg); }
body.remix .mdrawer .msec.closed .mdesc,
body.remix .mdrawer .msec.closed .mctl{ display:none; }
body.remix .mdrawer .mdesc{ margin-top:0; }
body.remix .mdrawer .mctl{ margin-top:12px; flex-direction:column; align-items:stretch; gap:12px; }
body.remix .mdrawer .mctl .mfield{ width:100%; flex:none; }
body.remix .mdrawer .mctl .mbtn{ align-self:flex-end; }
body.remix .mdrawer .mctl .mtoggle{ align-self:flex-start; }
body.remix .mdrawer .msec.proposed{ padding:0 14px; margin-top:14px; }
body.remix .mdrawer .msec.proposed:not(.closed){ padding-bottom:14px; }