/* ============================================================
   remix-c.css — NEYN-12112 · Variation C "IDENTITY HERO" (Robinhood-leaning)
   Loaded AFTER final.css + remix.css. Every rule scoped under body.remix-c,
   so it only expresses the DELTA from B (remix.css) — B's whole layout is
   inherited for free.
   The move (Robinhood frame): name + BIG PRICE up top-left as a bounded
   identity hero → hero chart (price removed, range tabs only) → "Key
   statistics" strip → rich profile body. Swap pinned top-right; rail put to
   work as swap → Agent summary → Safety. Identity intent preserved as a
   bounded hero, not a giant crown.
   ============================================================ */

/* ---------- C1 · IDENTITY HERO — bounded band at the top of the LEFT column ---------- */
/* .header is moved into .col-left (still the f-app scroll sentinel). Re-cast the
   compact remix strip as a Robinhood-style hero: name+price up top, profile below. */
body.remix-c .header{ position:relative; overflow:visible;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  padding:0 0 18px; margin:0 0 20px; border-bottom:1px solid var(--line); }

body.remix-c .idmain{ display:flex; align-items:flex-start; gap:16px; flex:1 1 auto; min-width:0;
  padding-right:120px; } /* keep identity text clear of the pinned Manage */
body.remix-c .idav{ width:56px; height:56px; border-radius:12px; background:var(--chipbg); flex-shrink:0; }
body.remix-c .idtxt{ min-width:0; display:flex; flex-direction:column; gap:6px; }
body.remix-c .idname{ font-size:21px; align-items:center; }

/* one-line descriptor (Robinhood asset blurb) */
body.remix-c .iddesc{ font-size:13px; color:var(--t666); font-weight:400; line-height:1.4; max-width:58ch; }

/* price + Manage — re-arranged (layout-bug fix):
   .idactions used to be a right-aligned column, but the wide .idmain forced it
   to wrap onto a second flex line, where it sat left-stuck with Manage orphaned
   under the delta. Now: .idactions IS the second row by design (flex-basis:100%),
   holding the BIG price + delta left-aligned directly under the identity block
   (true Robinhood), while .manage is lifted out and pinned absolute TOP-RIGHT of
   the hero band (mirrors where A/B place it in their identity strips).
   position:static overrides final.css `.header > *{position:relative}` so
   .manage anchors to .header, not to .idactions. */
body.remix-c .idactions{ position:static; display:flex; flex:1 1 100%;
  flex-direction:column; align-items:flex-start; gap:0; margin-top:2px; }
body.remix-c .heroprice{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
body.remix-c .heroprice .ch-val{ font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1; }
body.remix-c .heroprice .ch-chg{ font-size:13px; font-weight:500; font-family:var(--mono); }
body.remix-c .idactions .manage{ position:absolute; top:0; right:0; }

/* ---------- C2 · CHART HERO — price removed; range tabs only, right-aligned ---------- */
body.remix-c .charthero .ch-head{ justify-content:flex-end; margin-bottom:8px; }

/* ---------- C3 · KEY STATISTICS — full left-column strip under the chart ---------- */
body.remix-c .keystats{ display:block; border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin-bottom:22px; }
body.remix-c .kslabel{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t888); margin-bottom:14px; }
body.remix-c .ksgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 24px; }
/* .rs / .k / .v inherit their type styling from remix.css */

/* ---------- C4 · RAIL AGENT summary card (beneath the swap) ---------- */
body.remix-c .railagent .ragenthead{ margin-bottom:12px; }
body.remix-c .railagent .kv{ padding:5px 0; min-height:0; }
body.remix-c .agentjump{ display:inline-block; margin-top:12px; font-size:12px; font-weight:500;
  color:var(--acc); }
body.remix-c .agentjump:hover{ text-decoration:underline; }

/* ---------- MOBILE (rail hidden < 900 → keystats carries the vitals) ---------- */
@media (max-width:900px){
  body.remix-c .idmain{ flex:1 1 100%; padding-right:0; }
  body.remix-c .idav{ width:48px; height:48px; }
  body.remix-c .idname{ font-size:19px; }
  /* mobile: Manage back in flow — inline on the price row, pushed to the right edge */
  body.remix-c .idactions{ flex-direction:row; align-items:center; gap:14px;
    margin:6px 0 0; width:100%; justify-content:flex-start; }
  body.remix-c .heroprice{ flex-direction:row; align-items:baseline; gap:8px; }
  body.remix-c .idactions .manage{ position:static; margin-left:auto; }
  body.remix-c .heroprice .ch-val{ font-size:26px; }
  body.remix-c .ksgrid{ grid-template-columns:1fr 1fr; }
}