/* ============================================================================
   Deposits — the on-ramp from the chain into the platform's own ledger.

   The page reads top to bottom as one sentence: where the account stands, the
   movement you are about to make, then everything that has already moved. The
   bridge panel is drawn as the route a deposit actually takes — the visitor's
   wallet on one side, the platform's on the other — so the destination address
   is stated once instead of repeated on every row of the history.

   Colour is spent only where the system's semantics apply: green for value
   that has landed, violet for value in flight, red for a deposit that failed.
   Solana's own purple appears exactly once, on the mark that names the chain.
   The accent stays on the primary action, which is the deposit button.
   ========================================================================= */

.dep {
  padding-block: var(--sp-8) var(--sp-16);
}

.dep__head {
  margin-block-end: var(--sp-8);
}

.dep__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0 0 var(--sp-2);
}

.dep__subtitle {
  color: var(--ink-300);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   The position — the system's ledger strip: cells separated by a 1px gap that
   shows the rule colour through, so the separators resolve on both axes and in
   both writing directions.
   ------------------------------------------------------------------------ */

.dep-position {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-block-end: var(--sp-6);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.dep-position__cell {
  background: var(--ink-900);
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}

.dep-position__label {
  margin: 0 0 var(--sp-1);
}

.dep-position__value {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin: 0;
}

/* Value that has landed in the balance. Matches the ledger, where money in is
   the claimed green. */
.dep-position__value--in {
  color: var(--solved);
}

/* Value in flight: it has left the wallet but the chain has not confirmed it,
   which is the system's "held" state. A zero here stays body ink — nothing is
   being held, so nothing needs a hue. */
.dep-position__value--held {
  color: var(--locked);
}

/* ---------------------------------------------------------------------------
   The bridge — the deposit itself, composed as the route between two wallets.
   ------------------------------------------------------------------------ */

.dep-bridge {
  margin-block-end: var(--sp-12);
}

/* The chain mark. Solana's purple is third-party brand, spent once, and it
   never travels without the word beside it. */
.dep-chain {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-300);
  white-space: nowrap;
}

.dep-chain__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--brand-solana-purple);
  flex: none;
}

/* Direction lives in a custom property rather than in a [dir="rtl"] override of
   each rule: the attribute selector outranks the responsive one, and media
   queries add no specificity, which would strand the flow arrow pointing the
   wrong way on an RTL desktop. */
.dep-route {
  --dep-flow: 1;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

[dir="rtl"] .dep-route {
  --dep-flow: -1;
}

.dep-route__end {
  min-width: 0;
}

.dep-route__key {
  margin: 0 0 var(--sp-2);
}

/* The flow arrow, pointing down the route while the panel is stacked. */
.dep-route__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-500);
  transform: rotate(90deg);
}

/* The one other icon on this surface that means a direction rather than a
   thing: the arrow leaving the door has to leave by the trailing edge in
   Hebrew, the same as everything else on the page. */
.dep-route__disconnect .icon {
  transform: scaleX(var(--dep-flow));
}

.dep-route__connect {
  max-width: 100%;
}

.dep-route__wallet {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
}

/* A read-only identifier, so it is set on the page ground rather than in the
   sunken well that reads as an input on this system. */
.dep-route__addr {
  font-size: var(--fs-sm);
  color: var(--ink-100);
  min-width: 0;
}

/* The destination is the one address on this page that is never abbreviated:
   the visitor is about to send real value to it, so all 44 characters stay
   readable and the string wraps rather than ellipsising. */
.dep-route__full {
  display: block;
  width: 100%;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-100);
  word-break: break-all;
}

.dep-route__disconnect,
.dep-route__copy {
  flex: none;
  color: var(--ink-300);
}

.dep-route__disconnect:hover,
.dep-route__copy:hover {
  color: var(--ink-050);
}

/* ---------------------------------------------------------------------------
   The amount — the one control on the page that moves money, so it takes the
   accent and it takes the full width of the panel section.
   ------------------------------------------------------------------------ */

.dep-amount {
  display: grid;
  gap: var(--sp-3);
  grid-template-areas:
    "field"
    "hint"
    "submit";
  padding: var(--sp-5);
}

.dep-amount__field {
  grid-area: field;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.dep-amount__hint {
  grid-area: hint;
  margin: 0;
}

.dep-amount__submit {
  grid-area: submit;
  margin-block-start: var(--sp-1);
}

/* The control is one LTR island — the figure, its padding and the unit suffix
   all resolve on the same side. Forcing `direction: ltr` on the input alone put
   the digits against the left edge under dir="rtl" while `inset-inline-end`
   put the CB suffix there too, and the two collided. A CB amount is a machine
   value, so the whole control reads left-to-right in every locale. */
.dep-amount__control {
  position: relative;
  display: flex;
  align-items: center;
  direction: ltr;
}

.dep-amount__input {
  font-size: var(--fs-xl);
  font-weight: 600;
  padding-block: var(--sp-3);
  padding-inline-end: 4rem;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Firefox and WebKit both draw spinners that fight the unit suffix for the
   same corner; the figure is typed, not stepped. */
.dep-amount__input::-webkit-outer-spin-button,
.dep-amount__input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.dep-amount__input[type="number"] {
  appearance: textfield;
}

.dep-amount__unit {
  position: absolute;
  inset-inline-end: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-300);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Notes — three temperatures. Work in progress is muted with a turning ring, a
   missing wallet extension is a precondition with a way out, and only a real
   failure is red.
   ------------------------------------------------------------------------ */

.dep-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.dep-note .icon {
  flex: none;
  margin-block-start: 0.15em;
}

.dep-note--work {
  color: var(--ink-300);
}

.dep-note--info {
  color: var(--ink-300);
}

.dep-note--error {
  background: var(--danger-wash);
  color: var(--danger);
}

/* Rendered outside a panel when deposits are closed, so it draws its own edge. */
.dep-note--standalone {
  margin-block-end: var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ink-850);
}

.dep-note__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: var(--sp-1);
  color: var(--ink-050);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.dep-note__link:hover {
  color: var(--accent);
}

/* A ring that turns, not a spinning icon: at 14px an outlined circle reads as
   a dot, and the gap in the ring is what makes the rotation legible. */
.dep-note__spinner {
  flex: none;
  width: 14px;
  height: 14px;
  margin-block-start: 0.2em;
  border: 2px solid var(--ink-700);
  border-block-start-color: var(--ink-200);
  border-radius: var(--r-full);
  animation: dep-spin 900ms linear infinite;
}

@keyframes dep-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
   The history
   ------------------------------------------------------------------------ */

.dep-history__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  margin: 0 0 var(--sp-4);
}

/* The Isolation Rule, applied to figures. `.num` carries the mono face and
   tabular figures but not `direction`/`unicode-bidi` — only `.mono` and `.addr`
   do. Under dir="rtl" a leading "+" is a neutral character and renders on the
   trailing side, so every signed figure on this surface is isolated. */
.dep-position__value,
.dep-amount-value,
.dep-row__time .num {
  direction: ltr;
  unicode-bidi: isolate;
}

.dep-ledger-wrap {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.dep-ledger {
  width: 100%;
  border-collapse: collapse;
}

.dep-ledger thead th {
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-900);
  border-block-end: 1px solid var(--line);
  text-align: start;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}

/* The transaction column absorbs the leftover width; every other column sizes
   to its own content. `max-width: 0` on the cell is what actually lets an
   88-character signature ellipsise: without it the cell's min-content width is
   the whole untruncated string, and the amount and time columns get pushed off
   the end of the panel. */
.dep-ledger thead th:nth-child(2),
.dep-row__detail {
  width: 100%;
  max-width: 0;
}

.dep-ledger__end {
  text-align: end;
}

.dep-day th {
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink-900);
  border-block: 1px solid var(--line);
  text-align: start;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-300);
}

.dep-ledger tbody:first-of-type .dep-day th {
  border-block-start: 0;
}

.dep-row > * {
  padding: var(--sp-3) var(--sp-4);
  border-block-start: 1px solid var(--line);
  vertical-align: top;
}

/* The day heading already draws the rule above the first row of its group. */
.dep-day + .dep-row > * {
  border-block-start: 0;
}

.dep-row:hover > * {
  background: var(--ink-800);
}

.dep-row__status {
  white-space: nowrap;
}

/* Only value still in flight pulses. A confirmed or failed deposit has
   finished moving and its dot holds still. */
.dep-row__status .chip--locked .chip__dot {
  animation: chip-pulse 2.4s var(--ease) infinite;
}

.dep-row__detail {
  font-size: var(--fs-sm);
}

.dep-row__tx {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.dep-row__tx .addr {
  color: var(--ink-100);
}

.dep-row__link {
  display: inline-flex;
  flex: none;
  color: var(--ink-400);
  transition: color var(--dur-1) var(--ease);
}

.dep-row__link:hover {
  color: var(--accent);
}

.dep-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-block-start: var(--sp-1);
}

/* Secondary ink, not tertiary: these sit on the row's hover fill, where
   --ink-400 drops to 4.31:1. */
.dep-row__from {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-300);
  min-width: 0;
}

.dep-row__party {
  color: var(--ink-200);
  text-decoration: none;
  min-width: 0;
  transition: color var(--dur-1) var(--ease);
}

.dep-row__party .addr {
  font-size: var(--fs-xs);
  color: inherit;
}

.dep-row__party:hover {
  color: var(--ink-050);
  text-decoration: underline;
}

/* Why a deposit is still in flight, or what the chain said when it failed. The
   chip already carries the state, so this line stays quiet in either case. */
.dep-row__note {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ink-300);
  unicode-bidi: isolate;
}

.dep-row__amount {
  text-align: end;
  white-space: nowrap;
}

.dep-amount-value {
  font-size: var(--fs-base);
  font-weight: 600;
}

.dep-amount-value--in {
  color: var(--solved);
}

/* Pending and failed alike: the figure is stated but it has not been credited,
   so it does not get the green that means "this is in your balance". */
.dep-amount-value--held {
  color: var(--ink-300);
}

/* The amount is keyed by the column head on wide viewports and by an inline
   micro label once the table stops being a table. */
.dep-row__key {
  display: none;
}

.dep-row__time {
  text-align: end;
  white-space: nowrap;
  font-size: var(--fs-sm);
  color: var(--ink-300);
}

/* ---------------------------------------------------------------------------
   Below 768px the table stops being a table: each row becomes a small grid of
   state / amount, transaction detail, then time.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .dep {
    padding-block: var(--sp-6) var(--sp-12);
  }

  .dep__head {
    margin-block-end: var(--sp-6);
  }

  .dep__title {
    font-size: var(--fs-2xl);
  }

  .dep-route,
  .dep-amount {
    padding: var(--sp-4);
  }

  /* Two columns at this width, and the odd trailing cell spans the row rather
     than leaving a stray rule-coloured block beside it. */
  .dep-position {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dep-position__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .dep-ledger,
  .dep-ledger tbody,
  .dep-ledger tr,
  .dep-ledger th,
  .dep-ledger td {
    display: block;
  }

  .dep-ledger thead {
    display: none;
  }

  /* Qualified by the table so it outranks the `.dep-ledger tr` reset above;
     without the extra specificity the row stays a block and the cells stack in
     source order. */
  .dep-ledger tr.dep-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "status amount"
      "detail detail"
      "time   time";
    gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-block-start: 1px solid var(--line);
  }

  .dep-day + .dep-row {
    border-block-start: 0;
  }

  .dep-row > * {
    padding: 0;
    border-block-start: 0;
  }

  .dep-row__status {
    grid-area: status;
  }

  .dep-row__amount {
    grid-area: amount;
  }

  .dep-row__detail {
    grid-area: detail;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .dep-row__time {
    grid-area: time;
    text-align: start;
  }

  .dep-row__key {
    display: inline;
    margin-inline-end: var(--sp-1);
    color: var(--ink-400);
  }
}

/* ---------------------------------------------------------------------------
   From 640px the route reads across: origin, arrow, destination.
   ------------------------------------------------------------------------ */

@media (min-width: 640px) {
  .dep-route {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--sp-5);
  }

  .dep-route__arrow {
    margin-block-start: 1.6rem;
    transform: scaleX(var(--dep-flow));
  }

  /* The button bottom-aligns with the input, not with the block of hint copy
     underneath it, so the two controls sit on one baseline. */
  .dep-amount {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "field submit"
      "hint  hint";
    align-items: end;
    column-gap: var(--sp-4);
  }

  .dep-amount__submit {
    width: auto;
    margin-block-start: 0;
    padding-block: 0.8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dep-note__spinner {
    animation: none;
    border-block-start-color: var(--ink-200);
  }
}