/* ---- static/app-ux.css ---- */
/* Cartel Family shared UX/performance layer.
   Keeps every server-rendered page on one mobile canvas and prevents fixed UI
   from covering content. Page-specific redesigns remain authoritative. */
/* The canvas colour comes from the theme, not from a literal.
   This was `background:#080d12` on html AND body, loaded on every page, so it
   overrode the light palette entirely: a themed light page rendered light
   content inside a black frame, and even in dark mode the frame (#080d12) was
   not the same dark as --bg (#0b1420).
   The fallback keeps the old value for any page that loads this file without
   cf-theme.css, so nothing that was dark becomes unstyled. */
html,body{background-color:var(--bg,#080d12)}
body{background-image:var(--ground,none)}
a,button,[role="button"]{-webkit-tap-highlight-color:transparent}
img{max-width:100%}

/* Pausing animation on a hidden page is now done in app-ux.js, and only for
   INFINITE animations -- see the long note there. The rule that used to live
   here paused every animation with one selector:

       html.oa-page-hidden *{animation-play-state:paused!important}

   An entrance animates from opacity:0 with fill-mode both, so pausing it
   saved nothing and left the content it was revealing permanently invisible
   wherever the page painted while hidden: a background tab, an OS thumbnail,
   a screenshot, a print. The Traders podium and the whole home feed both
   rendered as blank pages this way.

   .oa-decor remains as an opt-in for anything that genuinely wants to be
   frozen by class rather than by its iteration count, and .oa-anim-once is
   kept as an explicit "never pause this" for markup that already carries it. */
html.oa-page-hidden .oa-decor,
html.oa-page-hidden .oa-decor::before,
html.oa-page-hidden .oa-decor::after{animation-play-state:paused!important}
html.oa-page-hidden .oa-anim-once,
html.oa-page-hidden .oa-anim-once::before,
html.oa-page-hidden .oa-anim-once::after{animation-play-state:running!important}

@media(max-width:767px){
  /* Same as above. The !important here was overriding the theme on phones
     specifically, which is where most people would see it. */
  html,body{max-width:100%;overflow-x:hidden;background-color:var(--bg,#080d12)!important;-webkit-text-size-adjust:100%}
  body{min-height:100dvh}
  a,button,[role="button"]{touch-action:manipulation}

  /* The shared bottom nav itself occupies about 98px including its inner
     padding. Older rules reserved 118-132px, leaving a visible dead strip at
     the bottom of many pages. Keep only the space the fixed control needs. */
  html body.oa-shared-ux{padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))!important}
  html body.oa-shared-ux.oa-portfolio .wlt-center{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important}

  /* iOS zooms the viewport when a focused form control is below 16px. That
     creates the apparent page jump seen in in-app browsers, so text controls
     use a native-app-safe minimum without changing toggles/ranges. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select{font-size:16px!important;max-width:100%}

  /* One X/Instagram-style solid app chrome. Blur on fixed/sticky layers is
     expensive in iOS/Phantom and causes visible repaint/jank while scrolling. */
  .pt-nb-topbar,.oa-bottom-nav{background:var(--bg,#080d12)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

  /* Shared modal behaviour: all old and new modal shells stay above the
     persistent bottom nav, with scrolling contained inside the modal. */
  .s-modal,.modal-backdrop,.gd-modal-backdrop,.modal-back,.w-modal-back,
  [class*="modal-backdrop"]{
    z-index:1500!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    overscroll-behavior:contain
  }
  .s-card,.modal,.gd-modal,.modal-box,.w-modal-box{
    max-height:calc(100dvh - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
  }
  html.oa-modal-open,html.oa-modal-open body{overflow:hidden!important;overscroll-behavior:none!important}

  /* Ordinary document pages need a safe zone above the fixed nav, but not a
     second oversized safe zone. Fullscreen/workspace pages opt out below. */
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .page,
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .page-wrap,
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .pr-wrap,
  body:not(.oa-home-mobile):not(.oa-portfolio):not(.oa-live-v2) .content{
    padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important
  }

  /* Messages is a fullscreen workspace. Once a thread is open its composer
     must own the bottom edge; the global nav must not cover it. */
  body.oa-thread-open{padding-bottom:0!important;overflow:hidden!important}
  body.oa-thread-open .oa-bottom-nav{display:none!important}
  body.oa-thread-open .pt-nb-topbar{display:none!important}

  /* Prevent generic horizontal clipping caused by desktop-width children. */
  #app,.main,.page,.page-wrap{max-width:100vw}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Keep the outgoing document visible until the next route can paint.
   This is a progressive enhancement: unsupported browsers use normal links.
   Do NOT swap server-rendered trading/wallet HTML into an SPA: each route
   owns its API subscriptions, authentication checks and teardown lifecycle. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 115ms ease-in both oa-route-out;
}
::view-transition-new(root) {
  animation: 115ms ease-out both oa-route-in;
}
@keyframes oa-route-out {
  from { opacity: 1 }
  to { opacity: 1 }
}
@keyframes oa-route-in {
  from { opacity: .90 }
  to { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),::view-transition-new(root) {
    animation-duration: .01ms !important;
  }
}


/* ---- static/shared-trade-card-v2.css ---- */
/* Cartel Family shared token/trade card v2 — Home-style card for standalone surfaces. */
.oa-stc{position:relative;overflow:hidden;width:100%;max-width:100%;min-height:138px;background:#0d1117;border:1px solid rgba(var(--accent-rgb),.5);border-radius:16px;font-family:'JetBrains Mono',monospace;cursor:pointer;isolation:isolate;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.oa-stc-banner{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.72;transform:scale(1.01)}
.oa-stc-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,11,15,.95) 0%,rgba(8,11,15,.78) 52%,rgba(8,11,15,.36) 100%),linear-gradient(180deg,rgba(8,11,15,.15),rgba(8,11,15,.72))}
.oa-stc-content{position:relative;z-index:1;padding:18px 20px 14px}
.oa-stc-main{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.oa-stc-left{min-width:0;flex:1}
.oa-stc-title{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:10px}
.oa-stc-title strong{font-size:20px;color:#eef1f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oa-stc-side{display:inline-flex;align-items:center;border-radius:7px;padding:4px 8px;font-size:11px;font-weight:800;line-height:1;border:1px solid currentColor}
.oa-stc-side.buy{color:#00d084;background:rgba(0,208,132,.08)}
.oa-stc-side.sell{color:#ff4d6a;background:rgba(255,77,106,.08)}
.oa-stc-prices{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#9aa3af;font-size:12px;line-height:1.45}
.oa-stc-prices b{font-weight:600;color:#c8ced7}.oa-stc-prices em{font-style:normal;color:#eef1f5}
.oa-stc-pnl{margin-top:8px;color:var(--accent-ink);font-size:15px;font-weight:700}
.oa-stc-pct{font-size:34px;font-weight:800;line-height:1;white-space:nowrap;text-shadow:0 4px 20px rgba(0,0,0,.4)}
.oa-stc-pct.pos{color:#00d084}.oa-stc-pct.neg{color:#ff4d6a}
.oa-stc-footer{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);color:#e3e7ec;font-family:'Geist',system-ui,sans-serif;font-size:12px;font-weight:600}
.oa-stc:hover .oa-stc-footer{color:var(--accent-ink)}.oa-stc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gd-post-body .oa-stc,.gd-composer-trade-preview .oa-stc{margin-top:8px}
.gd-composer-trade-preview .oa-stc{max-width:360px}
.msg-bubble.msg-trade .oa-stc{margin:0}
@media(max-width:767px){
  .oa-stc{min-height:126px;border-radius:14px}
  .oa-stc-content{padding:15px 16px 12px}
  .oa-stc-title{margin-bottom:8px}.oa-stc-title strong{font-size:17px}
  .oa-stc-prices{font-size:10.5px;gap:6px}.oa-stc-pnl{font-size:13px;margin-top:6px}
  .oa-stc-pct{font-size:27px}.oa-stc-footer{font-size:11px;margin-top:11px;padding-top:8px}
  body.oa-thread-open .msg-bubble.msg-trade:has(.oa-stc){width:calc(100vw - 74px)!important;max-width:520px!important}
}


/* ---- static/feed-action-icons.css ---- */
/* Cartel Family feed action icons — reply / repost / like / bookmark */
.fc-actions .fc-action{min-height:36px;padding:6px 8px!important;margin:0!important;border-radius:10px;gap:7px!important;color:#707b89!important;transition:color .15s,background-color .15s,transform .12s}
.fc-actions .fc-action:active{transform:scale(.96)}
.fc-actions .oa-feed-action-icon{width:21px;height:21px;flex:0 0 21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fc-actions .oa-feed-action-count{font:500 12px/1 'JetBrains Mono',monospace;color:inherit;min-width:8px}
.fc-actions .oa-action-reply:hover{color:var(--accent-ink)!important;background:rgba(var(--accent-rgb),.08)!important}
.fc-actions .oa-action-repost:hover,.fc-actions .oa-action-repost.reposted{color:#3ad29b!important;background:rgba(58,210,155,.08)!important}
.fc-actions .oa-action-like:hover,.fc-actions .oa-action-like.liked{color:#ff6075!important;background:rgba(255,96,117,.08)!important}
.fc-actions .oa-action-like.liked .oa-feed-action-icon{fill:currentColor}
.fc-actions .oa-action-bookmark:hover,.fc-actions .oa-action-bookmark.active{color:var(--accent-ink)!important;background:rgba(var(--accent-rgb),.08)!important}
.fc-actions .oa-action-bookmark.active .oa-feed-action-icon{fill:currentColor}
.fc-actions .fc-view-count{flex:0 0 auto;white-space:nowrap;line-height:1.2;min-width:max-content;padding:6px 2px;margin-left:auto!important;overflow:visible!important}
@media(max-width:767px){
 .fc-actions{display:grid!important;grid-template-columns:repeat(4,minmax(38px,auto)) minmax(48px,1fr);align-items:center!important;gap:3px!important;width:100%!important;overflow:visible!important}
 .fc-actions .fc-action{padding:7px 5px!important;min-width:0!important;justify-content:center}
 .fc-actions .oa-feed-action-icon{width:22px;height:22px;flex-basis:22px}
 .fc-actions .oa-feed-action-count{font-size:11.5px}
 .fc-actions .fc-view-count{justify-self:end!important;margin-left:0!important;padding:7px 3px!important;font-size:10.5px!important;text-align:right!important;max-width:none!important;overflow:visible!important}
 .feed-card,.fc-card,.fc-inner{overflow:visible}
}