/*
 * The beta's screens, in GhosterDex's own language.
 *
 * ## What this file used to get wrong
 *
 * It defined its own palette: blue-tinted slate greys, 12px radii, a mint pill
 * for every action. Everything it produced was internally consistent and looked
 * like a different application bolted onto this one. GhosterDex is neutral grey
 * not blue, its cards are 24px not 12px, and its primary action is a silver
 * gradient pill rather than a coloured block. It also has a light theme, which a
 * hardcoded dark screen simply ignores.
 *
 * So there is no palette here now. Every colour, radius, font and shadow is the
 * app's own variable from styles.css, which means these screens follow the app
 * wherever it goes, including into light mode, and cannot drift from it.
 *
 * ## The one idea worth keeping
 *
 * A market screen shows the market's numbers and your numbers at once, and it
 * helps to be able to tell them apart without reading. So market data sits at
 * --text-dim and yours comes forward to --text, with --success reserved for
 * things you own rather than for every tick. That is a weighting, not a second
 * palette: it is the same restraint the rest of the app already uses between a
 * label and its value.
 *
 * Fallbacks are given on every var() because these files load before the app's
 * stylesheet on a cold start, and an unstyled trading screen for one frame is
 * worse than a slightly wrong one.
 */

.gl {
  /* Market data: present, readable, one step back. */
  --gl-market: var(--text-dim, #9aa4b2);
  --gl-market-dim: var(--text-faint, #5f6873);
  --gl-market-faint: var(--text-faint, #5f6873);

  /* Yours: the app's own foreground. */
  --gl-mine: var(--text, #f5f6f8);
  --gl-live: var(--success, #34e8a4);
  --gl-loss: var(--red, #ff5c7a);
  --gl-risk: var(--amber, #f0c46a);

  /* The market's direction, drained a step so a ticking screen stays calm. */
  --gl-bid: color-mix(in srgb, var(--success, #34e8a4) 68%, var(--text-faint, #5f6873));
  --gl-ask: color-mix(in srgb, var(--red, #ff5c7a) 68%, var(--text-faint, #5f6873));
  --gl-bid-wash: color-mix(in srgb, var(--success, #34e8a4) 13%, transparent);
  --gl-ask-wash: color-mix(in srgb, var(--red, #ff5c7a) 13%, transparent);
  --gl-live-soft: color-mix(in srgb, var(--success, #34e8a4) 15%, transparent);
  --gl-loss-soft: color-mix(in srgb, var(--red, #ff5c7a) 15%, transparent);
  --gl-risk-soft: color-mix(in srgb, var(--amber, #f0c46a) 14%, transparent);

  /* Surfaces and edges, straight from the app's elevation ladder. */
  --gl-void: var(--bg, #050609);
  --gl-deep: var(--bg-elev, #0d0f13);
  --gl-panel: var(--glass, rgba(255, 255, 255, 0.04));
  --gl-panel-2: var(--glass-2, rgba(255, 255, 255, 0.08));
  --gl-edge: var(--stroke, rgba(255, 255, 255, 0.11));
  --gl-edge-soft: var(--stroke-soft, rgba(255, 255, 255, 0.06));

  /* The app's rounding, which is a lot rounder than a trading screen expects
     and is most of why the old version felt foreign. */
  --gl-radius: var(--radius-md, 16px);
  --gl-radius-lg: var(--radius-lg, 24px);
  --gl-radius-sm: var(--radius-sm, 12px);

  --gl-ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  font-family: var(--font, Inter, system-ui, sans-serif);
}

.gl *,
.gl *::before,
.gl *::after {
  box-sizing: border-box;
}

/* Numbers must not reflow as they tick. */
.gl-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── the full-screen shell ──────────────────────────────────────────────────
   Only perps takes the whole screen. Everything else is a panel over the app. */

.gl-screen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: var(--gl-void);
  color: var(--gl-market);
  overscroll-behavior: contain;
  /* Comes up from slightly below and slightly small, which reads as the screen
     arriving rather than being swapped in. Short enough not to be in the way. */
  animation: gl-screen-in 0.28s var(--gl-ease) both;
}
@keyframes gl-screen-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}
.gl-screen.gl-leaving {
  animation: gl-screen-out 0.2s var(--gl-ease) both;
}
@keyframes gl-screen-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}

.gl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  flex: none;
}
.gl-back {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 6px 8px 6px 0;
  color: var(--gl-mine);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}
.gl-back svg {
  flex: none;
}
.gl-back:active {
  opacity: 0.55;
}

/* ── a floating panel over the app ──────────────────────────────────────────
   For everything that is not perps. Sits on the app rather than replacing it,
   because the app underneath is still where you are. */

.gl-float {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gl-float-scrim {
  position: absolute;
  inset: 0;
  background: var(--backdrop, rgba(1, 2, 4, 0.72));
  backdrop-filter: blur(4px);
  animation: gl-fade 0.22s var(--gl-ease) both;
}
.gl-float-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--sheet-bg, #0d0f13);
  backdrop-filter: blur(24px);
  border-top-left-radius: var(--gl-radius-lg);
  border-top-right-radius: var(--gl-radius-lg);
  border-top: 1px solid var(--gl-edge-soft);
  color: var(--gl-mine);
  animation: gl-float-in 0.3s var(--gl-ease) both;
}
@keyframes gl-float-in {
  from {
    transform: translateY(26px);
    opacity: 0.45;
  }
}
.gl-float.gl-leaving .gl-float-card {
  animation: gl-float-out 0.2s var(--gl-ease) both;
}
.gl-float.gl-leaving .gl-float-scrim {
  animation: gl-fade 0.2s var(--gl-ease) reverse both;
}
@keyframes gl-float-out {
  to {
    transform: translateY(22px);
    opacity: 0;
  }
}

/* ── the readout that no exchange has ─────────────────────────────────────── */

.gl-veil {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 9px;
  padding: 0 11px;
  height: 31px;
  flex: none;
  border-radius: 999px;
  background: var(--gl-live-soft);
  border: 1px solid color-mix(in srgb, var(--success, #34e8a4) 26%, transparent);
  font-size: 11.5px;
  color: var(--gl-mine);
  text-align: left;
}
.gl-veil-eye {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--gl-live);
}
.gl-veil-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0;
  text-align: left;
}
.gl-veil-body b {
  color: var(--gl-live);
  font-weight: 600;
}
.gl-veil-more {
  flex: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--gl-live);
  font: inherit;
  font-weight: 600;
}

/* Proof of life, not an alarm. */
.gl-veil-eye::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--gl-live);
  opacity: 0;
  animation: gl-breathe 3.4s var(--gl-ease) infinite;
}
@keyframes gl-breathe {
  0% { transform: scale(0.55); opacity: 0.45; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

/* ── mine vs the market ─────────────────────────────────────────────────────
   A weighting, not a second palette. */

.gl-mine {
  color: var(--gl-mine);
  position: relative;
}
.gl-mine::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: var(--gl-live);
}

/* ── sheets, matching the app's own ─────────────────────────────────────────── */

.gl-sheet {
  position: fixed;
  inset: 0;
  z-index: 3300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gl-scrim {
  position: absolute;
  inset: 0;
  background: var(--backdrop, rgba(1, 2, 4, 0.72));
  backdrop-filter: blur(4px);
  animation: gl-fade 0.2s var(--gl-ease) both;
}
.gl-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow-y: auto;
  /* A sheet scrolls up and down and NEVER sideways. Setting only overflow-y
     is not the same as saying that: CSS resolves the other axis from
     `visible` to `auto`, so the card quietly became scrollable in both
     directions, and any rail wider than the screen made it so. Swiping the
     category rail then dragged the whole sheet across once the rail hit its
     end, leaving the rows off-screen with their prices stranded at the
     edge. */
  overflow-x: hidden;
  background: var(--sheet-bg, #0d0f13);
  backdrop-filter: blur(24px);
  border-top-left-radius: var(--gl-radius-lg);
  border-top-right-radius: var(--gl-radius-lg);
  border-top: 1px solid var(--gl-edge-soft);
  padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  animation: gl-rise 0.28s var(--gl-ease) both;
}
.gl-grab {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--gl-edge);
  margin: 4px auto 14px;
}
.gl-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--gl-mine);
}
@keyframes gl-fade {
  from { opacity: 0; }
}
@keyframes gl-rise {
  from { transform: translateY(18px); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-screen, .gl-screen.gl-leaving, .gl-scrim, .gl-card,
  .gl-float-scrim, .gl-float-card, .gl-veil-eye::after {
    animation: none;
  }
}

/* The app's primary action: a silver gradient pill, not a coloured block. This
   single rule is most of what made the old version feel like somebody else's
   app. */
.gl-cta {
  width: 100%;
  margin-top: 18px;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--grad, linear-gradient(135deg, #ffffff, #dde5ee 55%, #93a2b5));
  color: var(--cta-text, #0a0d12);
  font-family: var(--font, Inter, sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1px;
  box-shadow:
    0 16px 40px -12px color-mix(in srgb, var(--ink, #fff) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent);
  transition: transform 0.13s, filter 0.15s;
}
.gl-cta:active {
  transform: scale(0.98);
  filter: brightness(1.06);
}
.gl-cta[disabled] {
  background: var(--bg-elev-2, #13161b);
  color: var(--gl-market-faint);
  border: 1px solid var(--gl-edge-soft);
  box-shadow: none;
}

.gl-prose {
  display: grid;
  gap: 12px;
}
.gl-prose p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gl-market);
}
.gl-prose b {
  color: var(--gl-mine);
  font-weight: 600;
}

/* ── the payment control, shared ─────────────────────────────────────────────
   Every screen that spends money uses this exact markup, so it is styled once
   here rather than four times in three stylesheets. Label left, coin pill
   right: the shape the Gifts flow settled on. */
.gl-payrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  background: none;
  border: 0;
  text-align: left;
}
.gl-paylabel {
  font: 500 14.5px Inter, system-ui, sans-serif;
  color: var(--gl-market-dim, #9aa7bb);
}
.gl-paypill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge-soft, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.gl-paypill img,
.gl-paypill .pd-coin,
.gl-paypill .fd-logo {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  flex: none;
}
.gl-paypill b {
  font: 700 15px Inter, system-ui, sans-serif;
  color: var(--gl-mine, #eef2f8);
  white-space: nowrap;
}
.gl-paysub {
  font-size: 13px;
  color: var(--gl-market-dim, #9aa7bb);
  white-space: nowrap;
}
.gl-paychev {
  color: var(--gl-market-faint, #7c8798);
  font-size: 17px;
  line-height: 1;
  transform: rotate(90deg);
  flex: none;
}
.gl-payrow:active .gl-paypill {
  background: rgba(255, 255, 255, 0.09);
}

/* The grab zone. touch-action only applies to the element a touch STARTS on,
   which is why listening on the card itself never received a real finger: the
   browser had already claimed the gesture for scrolling. */
.gl-draghandle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  touch-action: none;
  z-index: 3;
}
.gl-card {
  position: relative;
}

/* The overlay dock rides above the beta's own screens (gl-screen at 3000)
   and their sheets (3100, 3300): whether money landed must be visible from
   anywhere, which is the entire reason the dock exists. Everything else
   about its look comes from the app's own stylesheet, by class name. */
/* Doubled selectors on purpose: the app's own .dock rule carries the same
   single-class specificity and loads later, so a bare .fd-dock ties and
   loses. Two classes outrank it whatever the stylesheet order. */
.dock.fd-dock,
.dock-puck.fd-dock {
  z-index: 3350;
}

/* ── the v2.6 capsule bar, returned by owner request ─────────────────────
   Not a reconstruction: these rules are lifted verbatim from the v2.6
   build's own compiled stylesheet (GhosterDex-test.apk in the stable
   folder), then re-scoped with doubled selectors so they outrank the 2.7
   slab whatever the load order. The 2.7 beam and seam are hidden; the
   active tab wears v2.6's own glass lozenge and underline tick. */
.bottom-nav.bottom-nav {
  position: fixed;
  bottom: 14px;
  left: 50%;
  right: auto;
  transform: translate(-50%);
  width: calc(100% - 28px);
  max-width: 452px;
  height: 68px;
  z-index: 30;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid var(--stroke);
  border-radius: 24px;
  box-shadow: 0 22px 50px -14px rgba(0, 0, 0, 0.55),
    inset 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: stretch;
  padding: 6px;
  padding-bottom: 6px;
  margin-bottom: env(safe-area-inset-bottom);
  overflow: visible;
}
/* The 2.7 slab's keyboard slide wrote a bare translateY, which would undo
   the capsule's centering; v2.6's own rule keeps both transforms. */
body.kb-open .bottom-nav.bottom-nav {
  transform: translate(-50%) translateY(28px);
}
.bottom-nav.bottom-nav::before {
  display: none;
}
.bottom-nav .nav-beam,
.bottom-nav .nav-spill {
  display: none;
}
.bottom-nav .nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 18px;
  transition: color 0.18s, background 0.18s;
}
.bottom-nav .nav-item.on {
  color: var(--text);
  background: var(--glass-2);
  box-shadow: inset 0 0 0 1px var(--stroke-soft),
    inset 0 1px 0 var(--bump-hi),
    0 6px 14px -9px var(--bump-shadow);
}
.bottom-nav .nav-item.on svg {
  color: var(--ink);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--ink) 60%, transparent));
}
/* v2.6's underline tick, verbatim including its later transition kill. */
.bottom-nav .nav-item::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ink) 70%, transparent);
  transform: scaleX(0);
  transition: none;
}
.bottom-nav .nav-item.on::before {
  transform: scaleX(1);
}

/* A sheet thrown away by the thumb has already animated out: its exit is
   the swipe itself. Without this the leaving keyframes re-assert their own
   transform, outranking the inline one, and the card springs back up to
   fade in place — a ghost over the page after the gesture has finished. */
.gl-float-card.gl-swiped,
.gl-card.gl-swiped {
  animation: none !important;
}