/* ============================================================
   remix-simple.css — NEYN-12112 · Archetype E "CONSUMER SIMPLE"
   (the Coinbase answer). Loaded AFTER final.css + remix.css; every
   rule scoped under body.remix-simple so it only expresses the
   archetype DELTA — B's engine (expandable rows, agent gating,
   obsidian dark, manage accordion) is inherited from body.remix.
   The move (Rish's own reference: "Coinbase — a clean financial
   primitive"): one calm CENTERED ~720px column, generous white-
   space, price as the emotional center, ONE primary action.
   No rail, no dense grids. The agent shows up as a PERSON in the
   flow — a "What the agent is saying" voice card of full casts —
   not a metadata box.
   ============================================================ */

/* ---------- E0 · single centered column ----------
   .col-right is parked off-screen (NOT display:none — it stays the
   layout-bearing clone source for f-app's #swap page); the page
   relies on the persistent trade CTA instead. */
body.remix-simple .body{ display:block; position:relative;
  max-width:768px; margin:0 auto; padding:10px 24px 8px; }
body.remix-simple .col-right{ display:block !important; position:absolute;
  left:-9999px; top:0; width:var(--rail); visibility:hidden; }

/* vertical rhythm of the stacked column */
body.remix-simple .col-left > .esec,
body.remix-simple .col-left > .skey,
body.remix-simple .col-left > .voicewrap{ margin-bottom:44px; }
body.remix-simple .activity{ margin-bottom:44px; }
body.remix-simple .evid{ grid-template-columns:1fr; gap:44px; padding:0 0 12px; }
body.remix-simple .ecol{ gap:44px; }
body.remix-simple #sec-activity{ scroll-margin-top:calc(var(--navh) + var(--sliverh) + 14px); }

/* ---------- E1 · identity block, centered (Coinbase asset header) ---------- */
body.remix-simple .header{ border-bottom:none; flex-direction:column; align-items:center;
  gap:14px; max-width:768px; margin:0 auto; padding:38px 24px 4px; }
body.remix-simple .idmain{ flex-direction:column; align-items:center; text-align:center; gap:14px; }
body.remix-simple .idav{ width:64px; height:64px; border-radius:16px; }
body.remix-simple .idtxt{ align-items:center; gap:8px; }
body.remix-simple .idname{ justify-content:center; font-size:22px; }
body.remix-simple .iddesc{ font-size:13.5px; font-weight:400; color:var(--t666);
  line-height:1.55; max-width:52ch; text-align:center; }
body.remix-simple .idsub{ justify-content:center; }
body.remix-simple .idactions{ margin:0; }

/* ---------- E2 · BIG price + full-width sparkline (price = the emotional center) ----------
   Markup order inside .charthero is inherited from B; flex `order` +
   display:contents on .ch-head re-stack it: price → chart → axis → range tabs. */
body.remix-simple .charthero{ display:flex; flex-direction:column;
  border:none; border-radius:0; padding:0; margin:6px 0 26px; }
body.remix-simple .ch-head{ display:contents; }
body.remix-simple .ch-price{ order:1; flex-direction:column; align-items:center; gap:9px; width:100%; }
body.remix-simple .ch-val{ font-size:44px; }
body.remix-simple .ch-chg{ font-size:14px; }
body.remix-simple .charthero .chartbg{ order:2; width:100%; height:200px; margin-top:18px;
  background:none; }
body.remix-simple .ch-axis{ order:3; width:100%; }
body.remix-simple .charthero .chartlabel{ order:4; align-self:center; margin-top:12px; }
body.remix-simple[data-chart="expanded"] .charthero .chartbg{ height:300px; }

/* ---------- E3 · ONE primary action — the full-column trade pill ---------- */
body.remix-simple .tradecta{ display:flex; width:100%; align-items:center; justify-content:center;
  gap:9px; height:52px; border:none; border-radius:999px;
  background:var(--cta); color:var(--cta-ink); font-size:15px; font-weight:700;
  margin:0 0 44px; }
body.remix-simple .tradecta:hover{ opacity:.88; }
body.remix-simple .tradecta .swp{ font-size:16px; font-weight:400; }

/* the #swap route (built by f-app) opens as a full page ≤900px per final.css;
   under this archetype it ALSO opens on desktop — as a centered modal-like
   overlay (scrim + 420px card), so the one CTA works at every width. */
@media (min-width:901px){
  body.remix-simple .swappage{ background:var(--scrim); flex-direction:column;
    align-items:center; justify-content:flex-start; padding:9vh 24px 24px; }
  body.remix-simple .swappage.open{ display:flex !important; }
  body.remix-simple .swappage .sp-head{ width:420px; max-width:100%;
    background:var(--pop); border:1px solid var(--line); border-radius:14px 14px 0 0; }
  body.remix-simple .swappage .sp-head .mstrip{ display:block; }
  body.remix-simple .swappage .sp-body{ flex:0 1 auto; width:420px; max-width:100%;
    background:var(--pop); border:1px solid var(--line); border-top:none;
    border-radius:0 0 14px 14px; padding:18px 18px 22px; overflow-y:auto; }
}

/* ---------- E4 · "WHAT THE AGENT IS SAYING" — the agent-signifier ----------
   The agent is a voice, not a metadata card: its 3 latest casts as rich
   quote blocks. Gated by the agent axis via final.css's .agent-block. */
body.remix-simple .voicecard{ border:1px solid var(--line); border-radius:14px; padding:18px 20px 16px; }
body.remix-simple .vhead{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
body.remix-simple .vav{ width:28px; height:28px; border-radius:50%; background:var(--chipbg); flex-shrink:0; }
body.remix-simple .vhead b{ font-size:14px; font-weight:700; color:var(--ink); }
body.remix-simple .vhead a:hover b{ text-decoration:underline; }
body.remix-simple .vlive{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  color:var(--pos); background:var(--pos-bg); border-radius:999px; padding:3px 8px; }
body.remix-simple .vlive i{ width:6px; height:6px; border-radius:50%; background:var(--pos);
  animation:vpulse 1.6s ease infinite; }
@keyframes vpulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
body.remix-simple .vsub{ font-size:12px; color:var(--t888); margin-left:auto; }
body.remix-simple .vq{ background:var(--navfill); border-radius:12px; padding:13px 15px; margin-bottom:10px; }
body.remix-simple .vq p{ font-size:14px; font-weight:400; line-height:1.55; color:var(--t333); }
body.remix-simple .vqmeta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:9px;
  font-family:var(--mono); font-size:11px; color:var(--t888); font-variant-numeric:tabular-nums; }
body.remix-simple .vqmeta b{ font-weight:500; color:var(--t666); }
body.remix-simple .vall{ display:inline-block; margin-top:5px; font-size:12.5px; font-weight:500; color:var(--acc); }
body.remix-simple .vall:hover{ text-decoration:underline; }
body.remix-simple .voicequiet{ font-size:13px; color:var(--t666); border:1px dashed var(--line);
  border-radius:12px; padding:14px 16px; text-align:center; }

/* ---------- E5 · key stats (2 rows × 3) + safety badges ---------- */
body.remix-simple .skeygrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 24px;
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
/* .rs / .k / .v inherit their type styling from remix.css */
body.remix-simple .skeysafe{ margin-top:16px; }
/* .raillabel + .railverdict styling inherited from remix.css */

/* ---------- E6 · About ---------- */
body.remix-simple .aboutp{ font-size:13.5px; font-weight:400; line-height:1.6;
  color:var(--t333); max-width:60ch; }

/* ---------- MOBILE (already one column — tighten; the docked tradebar owns the CTA) ---------- */
@media (max-width:900px){
  body.remix-simple .header{ align-items:center; padding:26px 16px 2px; }
  body.remix-simple .body{ padding:8px 16px; }
  body.remix-simple .ch-val{ font-size:36px; }
  body.remix-simple .charthero .chartbg{ height:170px; }
  body.remix-simple[data-chart="expanded"] .charthero .chartbg{ height:250px; }
  body.remix-simple .tradecta{ display:none; }
  body.remix-simple .skeygrid{ grid-template-columns:1fr 1fr; padding:16px; }
  body.remix-simple .col-left > .esec,
  body.remix-simple .col-left > .skey,
  body.remix-simple .col-left > .voicewrap,
  body.remix-simple .activity{ margin-bottom:36px; }
  body.remix-simple .evid{ gap:36px; }
  body.remix-simple .ecol{ gap:36px; }
}