/* ============================================================================
   AVFX CRM — THE MONEY OPERATION FORM
   Specification: docs/packets/PACKET-16-money-operation-kit.md
   Tokens only (ADR-0009); logical properties only (ADR-0008).
   ========================================================================== */

/* The amount with its currency beside it, so "500" is never read without
   knowing what it is 500 of. */
.mf-amount { display: flex; align-items: center; gap: var(--space-3); }
.mf-amount .input { flex: 1; text-align: end; }
.mf-amount__ccy { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* The effect: labels on one side, figures aligned on their end edge so the
   decimal points line up (03-UX-PATTERNS §9). */
.mf-effect__rows { display: grid; gap: var(--space-2); max-inline-size: 520px; margin-inline-start: auto; }
.mf-effect__row { display: flex; justify-content: space-between; gap: var(--space-6); }
.mf-effect__row dt { color: var(--color-text-secondary); }
.mf-effect__row dd { text-align: end; }
.mf-effect__row--total {
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
  font-weight: var(--fw-semi);
}

/* A gap between two groups of effect rows — the account the money leaves,
   then the account it reaches (Packet 17). */
.mf-effect__gap { block-size: var(--space-2); }

/* The locked rate (Packet 17): the rate, when the lock expires, Refresh. */
.mf-rate__panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.mf-rate__item { display: flex; flex-direction: column; gap: var(--space-1); }
.mf-rate__k { font-size: var(--fs-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.mf-rate__v { font-weight: var(--fw-semi); }
.mf-rate__panel .btn { margin-inline-start: auto; }