/*
 * Funding, in the ghost lens.
 *
 * The lens rule earns its keep here more than anywhere: a status row is cold
 * while it reads zero and lights up the moment there is money in it, so "have I
 * actually got anything to trade with" is answerable at a glance rather than by
 * reading three numbers. Both are driven by .gl-mine from ghost-lens.css, so the
 * lit state is the same lit state as a filled order field and an open position.
 */

.fd-title {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--gl-mine);
  letter-spacing: -0.01em;
}

.fd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

.fd-intro p {
  margin: 6px 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gl-market-dim);
}

/* ── the address ───────────────────────────────────────────────────────────── */

.fd-addr {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  margin-bottom: 14px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid color-mix(in srgb, var(--success, #34e8a4) 20%, transparent);
  position: relative;
}
.fd-addr-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gl-market-faint);
}
.fd-addr-val {
  /* Wraps rather than truncates. An address you cannot read in full is an
     address you cannot check, and this is the one string on the screen where a
     wrong character costs the whole transfer. */
  font-size: 13px;
  line-height: 1.45;
  color: var(--gl-mine);
  word-break: break-all;
  font-weight: 500;
}
.fd-copy {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--gl-live-soft);
  border: 1px solid color-mix(in srgb, var(--success, #34e8a4) 36%, transparent);
  color: var(--gl-live);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
}
.fd-copy:active {
  filter: brightness(1.15);
}

/* ── status ────────────────────────────────────────────────────────────────── */

.fd-rows {
  display: grid;
  gap: 1px;
  margin-bottom: 16px;
  border-radius: var(--gl-radius);
  overflow: hidden;
  background: var(--gl-edge-soft);
}
.fd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  background: var(--gl-deep);
}
/* The lit state comes from .gl-mine, which draws the bar down the left edge. Its
   marker sits outside the element, so the row needs room for it. */
.fd-row.gl-mine {
  padding-left: 17px;
}
.fd-row.gl-mine::before {
  left: 6px;
}
.fd-row b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gl-market);
}
.fd-row.gl-mine b {
  color: var(--gl-mine);
}
.fd-note {
  display: block;
  font-size: 10.5px;
  color: var(--gl-market-faint);
  margin-top: 2px;
}
.fd-val {
  flex: none;
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gl-market-dim);
}
.fd-row.gl-mine .fd-val {
  color: var(--gl-live);
}

/* ── the journey trail ────────────────────────────────────────

   The steps themselves wear the app's own .trail classes, so its shipped
   stylesheet draws the rail, the ticks and the spinner exactly as it does
   for a confidential swap. Only the heading above them lives here, and it
   carries the same values the app applies inline to that heading, read out
   of the bundle rather than eyeballed: display font, 20px, centred, with a
   13.5px dim subtitle under it. */

.fd-trailwrap {
  padding: 10px 4px 6px;
}
.fd-trailhead {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  text-align: center;
}
.fd-trailsub {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 13.5px;
  text-align: center;
  overflow-wrap: anywhere;
}

.fd-hint {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gl-market-faint);
  text-align: center;
}
.fd-err {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--gl-radius-sm);
  background: color-mix(in srgb, var(--red, #ff5c7a) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #ff5c7a) 28%, transparent);
  font-size: 11.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--red, #ff5c7a) 55%, var(--text, #f5f6f8));
}

.gl-cta[disabled] {
  opacity: 0.35;
}


/* ── the amount, the source, and what is happening ─────────────────────────────
   Replaces the old address card. Nothing here shows an address: the destination
   is derived on the device and never needs reading, so putting it on screen only
   invited someone to check a thing they cannot verify anyway. */

.fd-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 16px;
}
.fd-headline-l {
  font-size: 13px;
  color: var(--gl-market);
}
.fd-headline-v {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--gl-mine);
}

.fd-amount {
  padding: 13px 16px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  margin-bottom: 9px;
}
.fd-amount-l {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gl-market-faint);
  margin-bottom: 2px;
}
.fd-amount-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.fd-cur {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--gl-market-dim);
}
.fd-amount-row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--gl-mine);
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.fd-amount-row input::placeholder {
  color: var(--gl-market-faint);
}
/* The label row carries Max on the right, so the two read as one control
   rather than a caption with a stray button under it. */
.fd-amount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.fd-amount-head .fd-amount-l {
  margin-bottom: 0;
}
.fd-max {
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gl-edge);
  background: var(--gl-panel-2);
  color: var(--gl-mine);
}
/* What actually lands, under the field where the number is being typed. */
.fd-net {
  min-height: 15px;
  margin: -4px 4px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--gl-market-faint);
}

.fd-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--gl-radius);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
  color: var(--gl-market);
  font: inherit;
  text-align: left;
}
.fd-pay:active {
  background: var(--gl-panel-2);
}
.fd-pay-l {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gl-market-faint);
  margin-bottom: 2px;
}
.fd-pay b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gl-mine);
}
.fd-pay svg {
  flex: none;
  color: var(--gl-market-faint);
}

.fd-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gl-edge-soft);
  text-align: left;
  font: inherit;
  color: var(--gl-market);
}
.fd-opt b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gl-mine);
}
.fd-opt.on b {
  color: var(--gl-live);
}
.fd-opt-sub {
  display: block;
  font-size: 12px;
  color: var(--gl-market);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.fd-opt-usd {
  flex: none;
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--gl-mine);
}

/* Coin logos, from the app's own same-origin endpoint. */
.fd-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gl-panel-2);
}
.fd-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* When the endpoint has no mark for a symbol, the initials are a better answer
   than a broken-image glyph. */
.fd-logo.fallback {
  font-family: var(--font-display, 'Space Grotesk', Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--gl-market);
}
.fd-pay {
  gap: 12px;
}
.fd-pay-m {
  flex: 1;
  min-width: 0;
}
.fd-opt {
  gap: 12px;
}

/* The withdraw screen's own facts block: what is free, what is equity, and
   what margin is holding, because those three differ the moment a position is
   open and only the first one can actually leave. */
.fd-facts {
  display: grid;
  gap: 9px;
  padding: 12px 13px;
  margin-bottom: 14px;
  border-radius: var(--gl-radius, 16px);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.fd-fact {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}
.fd-fact span:first-child {
  color: var(--gl-market-dim);
}
.fd-fact span:last-child {
  color: var(--gl-mine);
  font-variant-numeric: tabular-nums;
}

/* ── stranded money ──────────────────────────────────────────────────────────
   A quiet panel, not an alarm: the money is safe and the copy says so. The
   second door is deliberately the quieter button, so "into the venue" reads
   as the main road and "back home" as the exit ramp. */
.fd-stranded {
  margin-top: 14px;
  padding: 4px 14px 14px;
  border-radius: var(--gl-radius-lg);
  background: var(--gl-panel);
  border: 1px solid var(--gl-edge-soft);
}
.fd-stranded .gl-cta {
  margin-top: 12px;
  padding: 13px;
  font-size: 14.5px;
}
.gl-cta.fd-quiet {
  background: var(--gl-panel-2);
  color: var(--gl-mine);
  border: 1px solid var(--gl-edge);
  box-shadow: none;
}

/* Money on a HIP-3 book, listed under the totals that already include it.
   Set back a step: it is an explanation of the figure above, not a third
   figure competing with it. */
.fd-fact-book span:first-child,
.fd-fact-book span:last-child {
  color: var(--gl-market);
  font-size: 13px;
}

/* ── Pay with: the Gram Zone picker, used rather than imitated ──────────────
 *
 * The rows are the app's own `.pk-row` / `.pk-meta` / `.pk-check` /
 * `.pk-short`, so this picker and the gifts, premium and stars one are the
 * same design by construction and cannot drift apart. Only the two things
 * that sheet gets from React components are rebuilt here: the sub-line and
 * the network stamp on the coin.
 */
.fd-paysub {
  margin: 0 2px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-faint, #6b7280);
}
.fd-payface { position: relative; display: inline-flex; flex: none; }
/* The network on the corner, ringed so it lifts off the row the way the
   balance rows and the bottom nav counter do. This is only the ring: the
   tile inside it is the app's own .net-badge, so a logo here is dressed
   exactly as it is on the Assets list. */
.fd-paychain {
  position: absolute;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  box-shadow: 0 0 0 2px var(--bg-elev, #12151a);
}
.fd-paychain .net-badge { border-radius: 50%; }

/* The sheet is a gl-card, which does not carry the app's sheet padding, so
   the borrowed rows get the breathing room they expect. */
.fd-sheet .pk-list { margin-top: 2px; }
.fd-sheet .pk-row { padding: 10px 8px; border-radius: 14px; }

/* The Gram Zone payment block, inside the deposit sheet.
   .detail-rows / .detail-row / .k / .v / .gd-payasset all come from the app's
   own stylesheet; only the spacing to the sheet's other blocks is ours. */
.fd-payrows { margin: 18px 2px 20px; gap: 12px; }
.fd-payusd { color: var(--text-dim); font-weight: 600; }
.fd-sheet .pk-meta b { display: flex; align-items: baseline; gap: 5px; }
.fd-payrows .gd-payasset .gift-rar { margin-left: 1px; }