/* ===========================================================================
   utilities.css — a small, closed set of single-purpose classes.
   ---------------------------------------------------------------------------
   Deliberately NOT a utility framework. Every class here exists because it
   removed an inline style attribute from a real page. If a layout needs more
   than two of these stacked, it wants a component instead.

   All spacing utilities use logical properties so they behave in RTL.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------- */

/* Vertical rhythm. The workhorse: replaces dozens of ad-hoc margins. */
.stack { display: flex; flex-direction: column; gap: var(--gap-stack); }
.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }

/* Horizontal group that wraps rather than overflowing. */
.row {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    flex-wrap: wrap;
}

.row-3 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-4 { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.row--nowrap { flex-wrap: nowrap; }
.row--top { align-items: flex-start; }
.row--baseline { align-items: baseline; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--center { justify-content: center; }

/* Pushes everything after it to the inline end. */
.push { margin-inline-start: auto; }

.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Text
   --------------------------------------------------------------------------- */
.t-2xs { font-size: var(--text-2xs); }
.t-xs { font-size: var(--text-xs); }
.t-sm { font-size: var(--text-sm); }
.t-md { font-size: var(--text-md); }
.t-lg { font-size: var(--text-lg); }
.t-xl { font-size: var(--text-xl); }

.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-secondary { color: var(--text-secondary); }
.t-strong { color: var(--text); }
.t-accent { color: var(--accent-text); }
.t-danger { color: var(--danger); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }

.t-medium { font-weight: var(--weight-medium); }
.t-semibold { font-weight: var(--weight-semibold); }
.t-bold { font-weight: var(--weight-bold); }

.t-start { text-align: start; }
.t-center { text-align: center; }
.t-end { text-align: end; }

.t-nowrap { white-space: nowrap; }
.t-break { overflow-wrap: anywhere; }

/* Micro-label: the uppercase caption above a value. */
.t-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/* Removes the 78ch prose measure from base.css where a paragraph must fill
   its container (inside a narrow card, a table cell). */
.t-full { max-width: none; }

/* ---------------------------------------------------------------------------
   Spacing. A deliberately short list — components own their own padding.
   --------------------------------------------------------------------------- */
.mt-0 { margin-block-start: 0; }
.mt-2 { margin-block-start: var(--space-2); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mb-0 { margin-block-end: 0; }
.mb-2 { margin-block-end: var(--space-2); }
.mb-4 { margin-block-end: var(--space-4); }

.p-0 { padding: 0; }
.p-4 { padding: var(--space-4); }
.p-card { padding: var(--pad-card); }

/* ---------------------------------------------------------------------------
   Visibility
   --------------------------------------------------------------------------- */
.hidden { display: none !important; }

/* Responsive show/hide. Named by what they do, not by breakpoint number. */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .only-mobile { display: none !important; }
}

@media (max-width: 1024px) {
    .hide-tablet { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Surface helpers — for the occasional inset region inside a card.
   --------------------------------------------------------------------------- */
.well {
    padding: var(--pad-card-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.divider {
    height: 1px;
    background: var(--border-subtle);
    border: 0;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Copy-to-clipboard target — wallet addresses, tx hashes, reference codes.
   --------------------------------------------------------------------------- */
.copyable {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    /* Addresses and hashes are Latin and never mirror or wrap mid-token. */
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Scroll containers
   --------------------------------------------------------------------------- */
.scroll-y {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   Aspect boxes — chart containers that must not collapse before data loads.
   --------------------------------------------------------------------------- */
.ratio-chart { aspect-ratio: 16 / 9; }
.ratio-square { aspect-ratio: 1; }

/* ---------------------------------------------------------------------------
   DEMO DATA. Product policy: sample or seeded figures are never presented as
   real. This wrapper marks a whole region, and .badge--demo marks a single
   value. Both are required where the data is not live.
   --------------------------------------------------------------------------- */
.is-demo {
    position: relative;
    border: 1px dashed var(--pending);
    border-radius: var(--radius-md);
}

.is-demo::before {
    content: attr(data-demo-label);
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: var(--space-3);
    transform: translateY(-50%);
    padding-inline: var(--space-2);
    background: var(--canvas);
    color: var(--pending);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}