/* ──────────────────────────────────────────────────────────────────────────
   DCM.Wallet.Shared — wallet view styles, scoped under `.dcm-wallet-host`

   Every rule in this file is namespaced under `.dcm-wallet-host` so the
   shared component drops into hosts (DC-Dashboard / Tailwind, MAUI Hybrid)
   without leaking its hand-rolled CSS into their global namespace. The
   wallet's `<div class="dcm-wallet-host">` wrapper in WalletView.razor is
   the anchor — nothing inside it cares about the host's CSS framework,
   nothing outside it sees ours.

   Brand palette / variables come from the original DCM.Wallet/wwwroot/app.css;
   only the wallet-relevant subset is kept (the standalone host's lookup row,
   topbar, kv-list, pager etc. are dropped — they aren't rendered by this
   component).
   ────────────────────────────────────────────────────────────────────────── */

/* Self-hosted Inter (variable, latin). Bundled as a static web asset so the
   wallet renders in Inter identically across hosts — including the MAUI
   WebView and offline — instead of depending on the OS having Inter installed.
   The single variable file covers the 400/500/600/700 weights this UI uses.
   Relative url() resolves against this file's path
   (_content/DCM.Wallet.Shared/wallet.css → …/fonts/…). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/Inter-latin-variable.woff2") format("woff2");
}

.dcm-wallet-host {
    /* Cool neutrals — harmonise with the indigo brand */
    --c-bg:        #fafafd;
    --c-surface:   #ffffff;
    --c-border:    #ececf2;
    --c-divider:   #f3f3f8;

    /* Text */
    --c-ink:       #242424;
    --c-ink-soft:  #5a5a64;
    --c-ink-muted: #8b8b94;

    /* Driv3 brand — deep indigo with lavender soft surfaces */
    --c-accent:        #1D0C67;
    --c-accent-hover:  #6F5EB9;
    --c-accent-soft:   #F0EDFF;
    --c-accent-ink:    #1D0C67;
    --c-secondary:     #DFD8F7;

    /* Status colours */
    --c-pos:           #15803d;
    --c-pos-bg:        #ecfdf5;
    --c-pos-border:    #bbf7d0;

    --c-neg:           #b91c1c;
    --c-neg-bg:        #fef2f2;
    --c-neg-border:    #fecaca;

    --c-warn:          #92400e;
    --c-warn-bg:       #fef3c7;
    --c-warn-border:   #fde68a;

    --c-info:          #1e40af;
    --c-info-bg:       #eff6ff;
    --c-info-border:   #bfdbfe;

    /* Geometry */
    --r-card:    14px;
    --r-pill:    999px;
    --r-input:   8px;
    --gap:       20px;
    --gap-tight: 12px;

    /* Wallet locks down its own typography so the host's font stack doesn't
       bleed through and break the layout (rounded number columns rely on
       tabular-num support, which not every host font has). */
    color: var(--c-ink);
    font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
                 "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dcm-wallet-host *,
.dcm-wallet-host *::before,
.dcm-wallet-host *::after {
    box-sizing: border-box;
}

.dcm-wallet-host .wallet {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* ── Banners (info / error) ──────────────────────────────────────────────── */
.dcm-wallet-host .banner {
    padding: 12px 16px;
    border-radius: var(--r-card);
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.dcm-wallet-host .banner-title { font-weight: 600; }
.dcm-wallet-host .banner-body { color: inherit; opacity: 0.9; }
.dcm-wallet-host .banner-error {
    background: var(--c-neg-bg);
    border-color: var(--c-neg-border);
    color: var(--c-neg);
}
.dcm-wallet-host .banner-info {
    background: var(--c-info-bg);
    border-color: var(--c-info-border);
    color: var(--c-info);
}

/* ── Hero balance cards ──────────────────────────────────────────────────── */
.dcm-wallet-host .hero {
    display: grid;
    gap: var(--gap-tight);
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
    .dcm-wallet-host .hero { grid-template-columns: 1fr; }
}
.dcm-wallet-host .hero-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 132px;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
    position: relative;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
}
.dcm-wallet-host .hero-primary {
    background: linear-gradient(180deg, #ffffff 0%, var(--c-accent-soft) 100%);
    border-color: #d8d2f0;
}
.dcm-wallet-host .hero-card:hover { transform: translateY(-1px); }
.dcm-wallet-host .hero-card.selected {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.dcm-wallet-host .hero-card.selected .hero-eyebrow { color: var(--c-accent); }
.dcm-wallet-host .hero-card .check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    display: grid;
    place-items: center;
    font-size: 11px;
    color: transparent;
    transition: all 160ms ease;
}
.dcm-wallet-host .hero-card.selected .check {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: white;
}
.dcm-wallet-host .hero-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .hero-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .hero-value {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    line-height: 1.1;
}
.dcm-wallet-host .hero-secondary .hero-value { color: var(--c-ink-soft); }
.dcm-wallet-host .hero-currency {
    font-size: 14px;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .hero-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
}
.dcm-wallet-host .muted { color: var(--c-ink-muted); }
.dcm-wallet-host .muted-cur { color: var(--c-ink-muted); font-weight: 500; margin-left: 3px; }

/* Old "reserved chip below card" rule deleted — the new design puts the
   reserved chip in the hero's chips-row next to the transit chip, styled
   by the rule under `.transit-chip, .reserved-chip` further down. */

/* ── Primary action row (Top up button) ──────────────────────────────────── */
.dcm-wallet-host .actions {
    display: flex;
    gap: 10px;
}
.dcm-wallet-host .action-btn {
    flex: 1;
    padding: 14px 18px;
    background: var(--c-accent);
    color: var(--c-surface);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-card);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 120ms ease, border-color 120ms ease;
}
.dcm-wallet-host .action-btn:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
}
.dcm-wallet-host .action-btn .plus {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

/* ── Generic card ────────────────────────────────────────────────────────── */
.dcm-wallet-host .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 20px 22px;
}
.dcm-wallet-host .card-title {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-ink);
}
.dcm-wallet-host .card-sub {
    margin: 0;
    font-size: 13px;
    color: var(--c-ink-soft);
    line-height: 1.5;
}

/* ── Activity card with tabs ─────────────────────────────────────────────── */
.dcm-wallet-host .activity-card { padding: 0; }

.dcm-wallet-host .tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    margin: 14px 16px 4px;
    background: var(--c-divider);
    border-radius: var(--r-pill);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dcm-wallet-host .tabs::-webkit-scrollbar { display: none; }

.dcm-wallet-host .tab {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: calc(var(--r-pill) - 4px);
    background: transparent;
    color: var(--c-ink-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dcm-wallet-host .tab:hover { color: var(--c-ink); }
.dcm-wallet-host .tab:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.dcm-wallet-host .tab.is-active {
    background: var(--c-surface);
    color: var(--c-accent-ink);
    box-shadow: 0 1px 3px rgba(29, 12, 103, 0.08);
}
.dcm-wallet-host .tab-label { overflow: hidden; text-overflow: ellipsis; }
.dcm-wallet-host .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.dcm-wallet-host .tab.has-badge:not(.is-active) .tab-badge {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}

.dcm-wallet-host .activity-header {
    padding: 14px 16px 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.dcm-wallet-host .activity-header-meta { flex: 1; min-width: 0; }
.dcm-wallet-host .activity-header .card-title { margin: 0 0 4px; }
.dcm-wallet-host .activity-header .card-sub { margin: 0; }

/* ── Refresh button ──────────────────────────────────────────────────────── */
.dcm-wallet-host .refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dcm-wallet-host .refresh-btn:hover:not(:disabled) {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}
.dcm-wallet-host .refresh-btn:active:not(:disabled) { transform: scale(0.96); }
.dcm-wallet-host .refresh-btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.dcm-wallet-host .refresh-btn:disabled { opacity: 0.6; cursor: progress; }
.dcm-wallet-host .refresh-btn svg { display: block; }
.dcm-wallet-host .refresh-btn.is-spinning svg {
    animation: dcm-wallet-refresh-spin 0.9s linear infinite;
}
@keyframes dcm-wallet-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .dcm-wallet-host .refresh-btn.is-spinning svg { animation: none; }
}

/* ── Status pills ────────────────────────────────────────────────────────── */
.dcm-wallet-host .status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    text-transform: lowercase;
    background: var(--c-divider);
    color: var(--c-ink-soft);
    border: 1px solid var(--c-divider);
    line-height: 1.6;
}
.dcm-wallet-host .status-open,
.dcm-wallet-host .status-succeeded,
.dcm-wallet-host .status-active,
.dcm-wallet-host .status-posted     { background: var(--c-pos-bg); color: var(--c-pos); border-color: var(--c-pos-border); }
.dcm-wallet-host .status-pending,
.dcm-wallet-host .status-processing { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.dcm-wallet-host .status-failed,
.dcm-wallet-host .status-canceled,
.dcm-wallet-host .status-closed     { background: var(--c-neg-bg); color: var(--c-neg); border-color: var(--c-neg-border); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.dcm-wallet-host .table-wrap {
    margin: 0;
    padding: 0 0 12px;
    overflow-x: auto;
}
.dcm-wallet-host .ledger {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .ledger thead th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    border-bottom: 1px solid var(--c-divider);
    background: transparent;
}
.dcm-wallet-host .ledger tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-divider);
    vertical-align: middle;
}
.dcm-wallet-host .ledger tbody tr:last-child td { border-bottom: none; }
.dcm-wallet-host .ledger tbody tr:hover td { background: var(--c-bg); }
.dcm-wallet-host .ledger td.right,
.dcm-wallet-host .ledger th.right { text-align: right; }
.dcm-wallet-host .ledger td.positive { color: var(--c-pos); font-weight: 600; }
.dcm-wallet-host .ledger td.negative { color: var(--c-neg); font-weight: 600; }
.dcm-wallet-host .ledger td.desc {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

/* Mobile ledger transformation — collapse rows into stacked cards */
@media (max-width: 600px) {
    .dcm-wallet-host .table-wrap {
        overflow-x: visible;
        padding: 4px 12px 14px;
    }
    .dcm-wallet-host .ledger,
    .dcm-wallet-host .ledger thead,
    .dcm-wallet-host .ledger tbody,
    .dcm-wallet-host .ledger tr,
    .dcm-wallet-host .ledger td {
        display: block;
        width: 100%;
    }
    .dcm-wallet-host .ledger thead { display: none; }
    .dcm-wallet-host .ledger tbody tr {
        margin: 0 0 8px;
        padding: 12px 14px;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 12px;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date   status"
            "desc   desc"
            "type   amount";
        grid-row-gap: 6px;
        grid-column-gap: 10px;
        align-items: baseline;
    }
    .dcm-wallet-host .ledger tbody tr:last-child { margin-bottom: 0; }
    .dcm-wallet-host .ledger tbody tr:hover td { background: transparent; }
    .dcm-wallet-host .ledger tbody td { padding: 0; border: 0; }
    .dcm-wallet-host .td-date {
        grid-area: date;
        font-size: 12px;
        color: var(--c-ink-muted);
    }
    .dcm-wallet-host .td-desc {
        grid-area: desc;
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        cursor: default;
        font-size: 14px;
        line-height: 1.35;
        color: var(--c-ink);
        font-weight: 500;
    }
    .dcm-wallet-host .td-status { grid-area: status; justify-self: end; }
    .dcm-wallet-host .td-type {
        grid-area: type;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--c-ink-muted);
    }
    .dcm-wallet-host .td-amount {
        grid-area: amount;
        text-align: right;
        font-weight: 700;
        font-size: 15px;
    }
    .dcm-wallet-host .ledger tbody .status-pill {
        font-size: 11px;
        padding: 2px 8px;
    }
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.dcm-wallet-host .empty-state {
    margin: 0;
    padding: 18px 16px 22px;
    color: var(--c-ink-muted);
    font-size: 13px;
    text-align: center;
}
.dcm-wallet-host .empty-state-rich {
    text-align: center;
    padding: 40px 24px 48px;
}
.dcm-wallet-host .empty-state-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}
.dcm-wallet-host .empty-state-title {
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 4px;
}
.dcm-wallet-host .empty-state-body {
    color: var(--c-ink-muted);
    font-size: 13px;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Narrow-screen tab adjustments */
@media (max-width: 480px) {
    .dcm-wallet-host .tabs { margin: 12px 12px 4px; }
    .dcm-wallet-host .tab {
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* ── Pending invoices list ───────────────────────────────────────────────── */
.dcm-wallet-host .invoice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dcm-wallet-host .invoice-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--c-divider);
    transition: background 0.15s ease;
}
.dcm-wallet-host .invoice-row:first-child { border-top: 1px solid var(--c-border); }
.dcm-wallet-host .invoice-row.is-busy { background: var(--c-accent-soft); }
.dcm-wallet-host .invoice-row.is-selected { background: var(--c-accent-soft); }

/* Multi-select: per-row checkbox + bulk toolbar */
.dcm-wallet-host .invoice-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dcm-wallet-host .invoice-check input { width: 17px; height: 17px; cursor: pointer; }
.dcm-wallet-host .invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
}
.dcm-wallet-host .invoice-selectall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-muted);
    cursor: pointer;
}
.dcm-wallet-host .invoice-selectall input { width: 17px; height: 17px; cursor: pointer; }
.dcm-wallet-host .invoice-bulk-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dcm-wallet-host .invoice-meta { min-width: 0; }
.dcm-wallet-host .invoice-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.dcm-wallet-host .invoice-trip {
    font-weight: 600;
    color: var(--c-ink);
}
.dcm-wallet-host .invoice-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.dcm-wallet-host .tag-dispatched {
    background: var(--c-accent-soft);
    color: var(--c-accent-ink);
}
.dcm-wallet-host .tag-self {
    background: var(--c-info-bg);
    color: var(--c-info);
    border: 1px solid var(--c-info-border);
}
/* Owed-to-me status pills (executer's view of an invoice). */
.dcm-wallet-host .tag-awaiting {
    background: var(--c-warn-bg);
    color: var(--c-warn);
    border: 1px solid var(--c-warn-border);
}
.dcm-wallet-host .tag-paid {
    background: var(--c-pos-bg);
    color: var(--c-pos);
    border: 1px solid var(--c-pos-border);
}
.dcm-wallet-host .tag-cancelled {
    background: var(--c-neg-bg);
    color: var(--c-neg);
    border: 1px solid var(--c-neg-border);
}
/* Settled history rows read as muted so the awaiting ones stand out —
   on both invoice tabs. */
.dcm-wallet-host .owed-row.is-paid,
.dcm-wallet-host .owed-row.is-cancelled,
.dcm-wallet-host .invoice-row.ivrow.is-paid,
.dcm-wallet-host .invoice-row.ivrow.is-cancelled {
    opacity: 0.72;
}
/* "You're owed" headline above the owed-invoices list. */
.dcm-wallet-host .owed-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px 4px;
}
.dcm-wallet-host .owed-headline-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-ink);
}
.dcm-wallet-host .owed-headline-label {
    font-size: 13px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .invoice-date {
    font-size: 12px;
    color: var(--c-ink-muted);
}
/* Trip route line (pickup → dropoff) on a v2 invoice row. */
.dcm-wallet-host .iv-route {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dcm-wallet-host .iv-route .route-end {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46%;
}
.dcm-wallet-host .iv-route .route-arrow {
    color: var(--c-ink-muted);
    flex: 0 0 auto;
}
.dcm-wallet-host .invoice-amount {
    text-align: right;
    white-space: nowrap;
}
.dcm-wallet-host .invoice-amount-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}
.dcm-wallet-host .invoice-amount-currency {
    margin-left: 4px;
    font-size: 11px;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .btn-approve {
    background: var(--c-pos);
    color: #fff;
    border: 1px solid var(--c-pos);
    padding: 7px 14px;
    border-radius: var(--r-input);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.dcm-wallet-host .btn-approve:hover:not(:disabled) {
    filter: brightness(0.95);
    transform: translateY(-1px);
}
.dcm-wallet-host .btn-approve:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.dcm-wallet-host .btn-cancel {
    background: var(--c-surface);
    color: var(--c-neg);
    border: 1px solid var(--c-neg-border);
    padding: 7px 14px;
    border-radius: var(--r-input);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dcm-wallet-host .btn-cancel:hover:not(:disabled) {
    background: var(--c-neg-bg);
}
.dcm-wallet-host .btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (max-width: 560px) {
    .dcm-wallet-host .invoice-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "check meta amount"
            "check actions actions";
        grid-row-gap: 10px;
    }
    .dcm-wallet-host .invoice-check { grid-area: check; align-self: start; margin-top: 2px; }
    .dcm-wallet-host .invoice-meta { grid-area: meta; }
    .dcm-wallet-host .invoice-amount { grid-area: amount; }
}

/* ────────────────────────────────────────────────────────────────────────────
   Phase-1 redesign — ported from ui-wallet.html. Lives below the older
   `.hero` / `.card` / `.tabs` blocks so adopting hosts can adopt either
   skin without one bleeding into the other. The redesign uses:
     - `.ph`             — indigo header section
     - `.bal-area`       — centered Available balance hero
     - `.chips-row`      — in-transit + reserved chips under the balance
     - `.cta-row`        — Pay out / Top up CTAs (the indigo banner footer)
     - `.tabs-bar` + `.tb` — flat tab strip with refresh button
     - `.mx` / `.mx-fee` — activity-feed rows (with optional sub-fee row)
   See WalletView.razor for usage.
   ──────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .ph {
    background: var(--c-accent);
    color: #fff;
    padding: 16px 20px 20px;
    /* Full-bleed against the page back-header on MAUI / against the
       dashboard header on DC-Dashboard — no rounded corners, no margin.
       The illusion of "a rounded card sitting in white space" was the
       browser-default body margin showing through; with that gone the
       hero is flush. */
    border-radius: 0;
    margin: 0;
}

/* Screen-header strip (back / title / right slot) sits at the top of
   every screen. On the main wallet the left slot is empty (the page's
   own BackHeader handles app navigation); on the in-transit and card
   screens the left slot is the wallet-internal back arrow. */
.dcm-wallet-host .ph-nav {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    min-height: 30px;
}
.dcm-wallet-host .ph-title {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.dcm-wallet-host .ph-back,
.dcm-wallet-host .ph-right {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}
.dcm-wallet-host .ph-back {
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    line-height: 1;
    padding: 0;
}
.dcm-wallet-host .card-nav-btn {
    width: 34px;
    height: 30px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    transition: background 120ms ease;
}
.dcm-wallet-host .card-nav-btn:hover { background: rgba(255, 255, 255, 0.22); }
.dcm-wallet-host .card-nav-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--c-accent);
}

.dcm-wallet-host .bal-area {
    text-align: center;
    padding: 0 0 8px;
}
.dcm-wallet-host .bal-lbl {
    font-size: 12px;
    opacity: .65;
    margin: 0 0 4px;
    letter-spacing: .3px;
}
.dcm-wallet-host .bal-amt {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 14px;
    line-height: 1;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .bal-cur {
    font-size: 16px;
    font-weight: 600;
    opacity: .65;
    margin-left: 4px;
}

.dcm-wallet-host .chips-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 18px;
}
.dcm-wallet-host .transit-chip,
.dcm-wallet-host .reserved-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 99px;
    padding: 5px 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, .92);
    font-family: inherit;
    line-height: 1.4;
}
.dcm-wallet-host .transit-chip { cursor: pointer; transition: background 120ms ease; }
.dcm-wallet-host .transit-chip:hover { background: rgba(255, 255, 255, .2); }
/* "€X top-up on its way": styled like the reserved chip (same look in both
   themes, no button hover) but with no help cursor — it is purely informational. */
.dcm-wallet-host .topup-chip { cursor: default; }
.dcm-wallet-host .reserved-chip { cursor: help; }
.dcm-wallet-host .transit-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef9f27;
    flex-shrink: 0;
}

.dcm-wallet-host .cta-row {
    display: flex;
    gap: 10px;
    padding: 2px 0 4px;
}
.dcm-wallet-host .cta-btn {
    flex: 1;
    padding: 12px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s, transform .12s, opacity .15s;
    border: none;
}
.dcm-wallet-host .cta-btn.primary {
    background: #fff;
    color: var(--c-accent);
}
.dcm-wallet-host .cta-btn.primary:hover:not(:disabled) {
    background: #f0eeff;
}
.dcm-wallet-host .cta-btn.outline {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .3);
}
.dcm-wallet-host .cta-btn.outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, .2);
}
.dcm-wallet-host .cta-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Tabs strip — flat, with refresh on the right ─────────────────────── */
.dcm-wallet-host .tabs-bar {
    display: flex;
    align-items: center;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0 16px;
    gap: 4px;
}
.dcm-wallet-host .tb {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-muted);
    border: none;
    background: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dcm-wallet-host .tb.on {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
    font-weight: 700;
}
.dcm-wallet-host .tb .tab-badge {
    background: var(--c-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    line-height: 1.4;
}
.dcm-wallet-host .tab-refresh {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--c-ink-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s, color .12s;
}
.dcm-wallet-host .tab-refresh:hover:not(:disabled) {
    background: var(--c-divider);
    color: var(--c-ink);
}
.dcm-wallet-host .tab-refresh.is-spinning svg {
    animation: dcm-wallet-spin 1s linear infinite;
}
@keyframes dcm-wallet-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* Activity feed — date-grouped .mx rows with optional .mx-fee sub-rows ─ */
.dcm-wallet-host .activity-feed {
    padding: 4px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dcm-wallet-host .dhead {
    font-size: 11px;
    font-weight: 700;
    color: var(--c-ink-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 14px 4px 6px;
}
.dcm-wallet-host .activity-feed .dhead:first-child {
    padding-top: 4px;
}

.dcm-wallet-host .mx {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-divider);
    transition: background .12s;
}
.dcm-wallet-host .mx:hover { background: #faf9ff; }
.dcm-wallet-host .mx.first { border-radius: 14px 14px 0 0; }
.dcm-wallet-host .mx.last  {
    border-radius: 0 0 14px 14px;
    border-bottom: none;
    margin-bottom: 2px;
}
.dcm-wallet-host .mx.solo  {
    border-radius: 14px;
    border-bottom: none;
    margin-bottom: 2px;
}

.dcm-wallet-host .mx-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dcm-wallet-host .mx-mid {
    flex: 1;
    min-width: 0;
}
.dcm-wallet-host .mx-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-wallet-host .mx-ref {
    font-size: 11px;
    color: var(--c-ink-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-wallet-host .mx-rgt {
    text-align: right;
    flex-shrink: 0;
}
.dcm-wallet-host .mx-amt {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .mx-time {
    font-size: 11px;
    color: var(--c-ink-muted);
    margin: 0;
}
.dcm-wallet-host .mx-amt.c-pos { color: #3b6d11; }
.dcm-wallet-host .mx-amt.c-neg { color: #a32d2d; }

/* Sub-fee row — visually subordinate, connected to parent ────────── */
.dcm-wallet-host .mx-fee {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 18px;
    background: #faf9ff;
    border-bottom: 1px solid var(--c-divider);
}
.dcm-wallet-host .mx-fee.last {
    border-radius: 0 0 14px 14px;
    border-bottom: none;
    margin-bottom: 2px;
}
/* A standalone history card followed by its fee sub-row: flatten the
   card's bottom so the pair reads as one connected card, exactly like
   the Pending tab's fee rendering. */
.dcm-wallet-host .mx.solo.has-fee {
    border-radius: 14px 14px 0 0;
    margin-bottom: 0;
}
.dcm-wallet-host .mx-fee .fee-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.dcm-wallet-host .mx-fee .fee-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--c-accent-soft);
}
.dcm-wallet-host .mx-fee .fee-mid {
    flex: 1;
    min-width: 0;
}
.dcm-wallet-host .mx-fee .fee-name {
    font-size: 11.5px;
    font-weight: 600;
    color: #888;
    margin: 0 0 1px;
}
.dcm-wallet-host .mx-fee .fee-ref {
    font-size: 10.5px;
    color: #ccc;
    margin: 0;
}
.dcm-wallet-host .mx-fee .fee-rgt {
    text-align: right;
    flex-shrink: 0;
}
.dcm-wallet-host .mx-fee .fee-amt {
    font-size: 12.5px;
    font-weight: 700;
    color: #a32d2d;
    margin: 0;
}

/* ── Modal (top-up) ──────────────────────────────────────────────────────── */
.dcm-wallet-host .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 13, 10, 0.42);
    display: none;
    place-items: center;
    z-index: 100;
    padding: 16px;
    animation: dcm-wallet-modal-fade 160ms ease;
}
.dcm-wallet-host .modal-backdrop.open { display: grid; }
.dcm-wallet-host .modal {
    /* Reset Bootstrap 5's `.modal` defaults — when this RCL is hosted by
       DC-Dashboard, Bootstrap's global stylesheet applies `display:none;
       position:fixed; inset:0; width:100%; height:100%` to anything with
       class="modal", which hides our dialog box entirely (only the
       backdrop shaded the screen) and would otherwise take it out of the
       backdrop's grid centring. These overrides scope the reset under
       `.dcm-wallet-host` so it's no-op when the host doesn't ship
       Bootstrap (Dispatch-App / MAUI). */
    display: block;
    position: static;
    inset: auto;
    height: auto;
    margin: 0;
    pointer-events: auto;

    background: var(--c-surface);
    border-radius: 16px;
    border: 1px solid var(--c-border);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(15, 13, 10, 0.18);
    animation: dcm-wallet-modal-pop 200ms cubic-bezier(.2, .9, .35, 1);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
@keyframes dcm-wallet-modal-fade {
    from { opacity: 0 } to { opacity: 1 }
}
@keyframes dcm-wallet-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98) }
    to   { opacity: 1; transform: translateY(0) scale(1) }
}
.dcm-wallet-host .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--c-divider);
}
.dcm-wallet-host .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.dcm-wallet-host .modal-close {
    background: transparent;
    border: 0;
    color: var(--c-ink-muted);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: grid;
    place-items: center;
    transition: background 120ms ease, color 120ms ease;
}
.dcm-wallet-host .modal-close:hover {
    background: var(--c-divider);
    color: var(--c-ink);
}
.dcm-wallet-host .modal-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.dcm-wallet-host .modal-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .modal-helper {
    margin: 0;
    font-size: 13px;
    color: var(--c-ink-soft);
}

/* Amount input with currency prefix */
.dcm-wallet-host .amount-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.dcm-wallet-host .amount-field:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
    background: var(--c-surface);
}
.dcm-wallet-host .amount-prefix {
    padding: 0 14px;
    display: grid;
    place-items: center;
    color: var(--c-ink-muted);
    font-weight: 600;
    border-right: 1px solid var(--c-divider);
    background: var(--c-bg);
}
.dcm-wallet-host .amount-input {
    flex: 1;
    padding: 12px 14px;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    background: transparent;
    color: var(--c-ink);
    font-feature-settings: "tnum" 1;
    width: 100%;
}

/* Quick amount chips */
.dcm-wallet-host .quick-amounts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dcm-wallet-host .quick-chip {
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}
.dcm-wallet-host .quick-chip:hover { border-color: var(--c-accent); }
.dcm-wallet-host .quick-chip.active {
    background: var(--c-accent);
    color: var(--c-surface);
    border-color: var(--c-accent);
}

.dcm-wallet-host .submit-btn {
    width: 100%;
    padding: 14px 18px;
    background: var(--c-accent);
    color: var(--c-surface);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .submit-btn:hover:not(:disabled) {
    background: var(--c-accent-hover);
}
.dcm-wallet-host .submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Top-up "transfer from your bank" accordion ──────────────────────────── */
.dcm-wallet-host .bank-acc {
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    overflow: hidden;
}
.dcm-wallet-host .bank-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--c-ink);
}
.dcm-wallet-host .bank-acc-head-main {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-accent);
}
.dcm-wallet-host .bank-acc-head-main > span {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dcm-wallet-host .bank-acc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-ink);
}
.dcm-wallet-host .bank-acc-sub {
    font-size: 11.5px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .bank-acc-chev {
    color: var(--c-ink-muted);
    flex: 0 0 auto;
    transition: transform 160ms ease;
}
.dcm-wallet-host .bank-acc.open .bank-acc-chev { transform: rotate(180deg); }
.dcm-wallet-host .bank-acc-body {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--c-divider);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dcm-wallet-host .bank-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dcm-wallet-host .bank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
}
.dcm-wallet-host .bank-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dcm-wallet-host .bank-row-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .bank-row-value {
    font-size: 14px;
    color: var(--c-ink);
    word-break: break-all;
}
.dcm-wallet-host .bank-row-value.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}
.dcm-wallet-host .bank-copy-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-accent);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.dcm-wallet-host .bank-copy-btn:hover {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
}
.dcm-wallet-host .bank-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 16px;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .bank-share-btn:hover { background: var(--c-secondary); }

/* ── Pay-out modal ───────────────────────────────────────────────────────── */
.dcm-wallet-host .payout-type-toggle {
    display: flex;
    gap: 8px;
}
.dcm-wallet-host .pto {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    cursor: pointer;
}
.dcm-wallet-host .pto.on {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}
.dcm-wallet-host .pto.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.dcm-wallet-host .pto-name { font-size: 13.5px; font-weight: 600; color: var(--c-ink); }
.dcm-wallet-host .pto-sub { font-size: 11px; color: var(--c-ink-muted); margin-top: 1px; }

.dcm-wallet-host .payout-avail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-ink-muted);
    margin-top: -8px;
}
.dcm-wallet-host .payout-max-btn {
    border: 0;
    background: none;
    color: var(--c-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.dcm-wallet-host .bankchip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-bg);
    color: var(--c-accent);
    font-size: 13.5px;
}
.dcm-wallet-host .bankchip.muted { color: var(--c-ink-muted); }
.dcm-wallet-host .bankchip-name { color: var(--c-ink); font-weight: 500; }
.dcm-wallet-host .bankchip-change {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--c-ink-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.dcm-wallet-host .bank-picker {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    overflow: hidden;
}
.dcm-wallet-host .bank-picker-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--c-divider);
    background: var(--c-surface);
}
.dcm-wallet-host .bank-picker-row:last-child { border-bottom: 0; }
.dcm-wallet-host .bank-picker-row.active { background: var(--c-accent-soft); }
.dcm-wallet-host .bank-picker-select {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}
.dcm-wallet-host .bank-picker-row.active .bank-picker-select { color: var(--c-accent); }
.dcm-wallet-host .bank-remove-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    border: 0;
    border-left: 1px solid var(--c-divider);
    background: transparent;
    color: var(--c-ink-muted);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.dcm-wallet-host .bank-remove-btn:hover { color: var(--c-neg); background: var(--c-neg-bg); }
.dcm-wallet-host .bank-remove-confirm {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    background: var(--c-neg-bg);
}
.dcm-wallet-host .bank-remove-q {
    font-size: 13px;
    color: var(--c-neg);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dcm-wallet-host .bank-remove-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.dcm-wallet-host .bank-remove-cancel,
.dcm-wallet-host .bank-remove-do {
    padding: 6px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.dcm-wallet-host .bank-remove-cancel {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-soft);
}
.dcm-wallet-host .bank-remove-do {
    border: 0;
    background: var(--c-neg);
    color: #fff;
}
.dcm-wallet-host .bank-remove-cancel:disabled,
.dcm-wallet-host .bank-remove-do:disabled { opacity: 0.55; cursor: not-allowed; }

.dcm-wallet-host .feebox {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
}
.dcm-wallet-host .frow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--c-ink);
}
.dcm-wallet-host .frow-label { color: var(--c-ink-muted); }
.dcm-wallet-host .frow.total {
    padding-top: 7px;
    border-top: 1px solid var(--c-divider);
    font-weight: 600;
}
.dcm-wallet-host .frow.total span:last-child { color: var(--c-accent); }

.dcm-wallet-host .banner-warn {
    background: var(--c-warn-bg);
    border-color: var(--c-warn-border);
    color: var(--c-warn);
}

/* Pay-out destination — manage + add bank accounts. */
.dcm-wallet-host .payout-dest {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dcm-wallet-host .payout-dest-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dcm-wallet-host .payout-addbank-link {
    border: 0;
    background: none;
    color: var(--c-accent);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}
.dcm-wallet-host .bank-picker-main {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--c-ink);
}
.dcm-wallet-host .bank-picker-row .bank-picker-main svg { color: var(--c-accent); }
.dcm-wallet-host .bank-picker-row.active .bank-picker-main { color: var(--c-accent); }

.dcm-wallet-host .addbank-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-bg);
}
.dcm-wallet-host .addbank-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
    font-weight: 600;
}
.dcm-wallet-host .addbank-input {
    width: 100%;
    padding: 11px 12px;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-input);
    background: var(--c-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* 16px keeps iOS WKWebView from auto-zooming when the field is focused. */
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--c-ink);
}
.dcm-wallet-host .addbank-input:focus {
    outline: 0;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.dcm-wallet-host .addbank-actions {
    display: flex;
    gap: 8px;
}
.dcm-wallet-host .addbank-cancel,
.dcm-wallet-host .addbank-save {
    flex: 1;
    padding: 10px 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.dcm-wallet-host .addbank-cancel {
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-soft);
}
.dcm-wallet-host .addbank-save {
    border: 0;
    background: var(--c-accent);
    color: var(--c-surface);
}
.dcm-wallet-host .addbank-save:disabled,
.dcm-wallet-host .addbank-cancel:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────
   In-transit screen (`_screen == "transit"`) — "Earnings in transit" card,
   "available" navigation chip, pending PIs with progress rows, and an
   "instant payout" CTA placeholder.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .tc {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    color: #fff;
}
.dcm-wallet-host .tc-label {
    font-size: 10px;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .65;
    margin: 0 0 4px;
}
.dcm-wallet-host .tc-amt {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.1;
}
.dcm-wallet-host .tc-sub {
    font-size: 11px;
    opacity: .7;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dcm-wallet-host .autobadge {
    background: rgba(255, 255, 255, .15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    opacity: 1;
}

.dcm-wallet-host .avail-chip-wrap {
    text-align: center;
    margin-bottom: 4px;
}
.dcm-wallet-host .avail-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 99px;
    padding: 5px 12px;
    font-size: 12px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .avail-chip:hover { background: rgba(255, 255, 255, .2); }
.dcm-wallet-host .avail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #639922;
}

.dcm-wallet-host .transit-content {
    padding: 12px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dcm-wallet-host .ipill {
    background: var(--c-accent-soft);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.dcm-wallet-host .ipill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #534ab7;
    margin-top: 5px;
    flex-shrink: 0;
}
.dcm-wallet-host .itext {
    font-size: 12px;
    color: #3c3489;
    line-height: 1.5;
}

.dcm-wallet-host .sh {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--c-ink-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 4px 2px;
    margin-top: 2px;
}

.dcm-wallet-host .pcard {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 14px;
}
.dcm-wallet-host .pr {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.dcm-wallet-host .pico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dcm-wallet-host .pmid {
    flex: 1;
    min-width: 0;
}
.dcm-wallet-host .pmethod {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    margin: 0 0 2px;
}
.dcm-wallet-host .pdate {
    font-size: 11px;
    color: var(--c-ink-muted);
    margin: 0;
}
.dcm-wallet-host .prgt {
    text-align: right;
    flex-shrink: 0;
}
.dcm-wallet-host .pamt {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-accent);
    margin: 0 0 4px;
}

.dcm-wallet-host .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
}
.dcm-wallet-host .bproc  { background: #faeeda; color: #633806; }
.dcm-wallet-host .btoday { background: #eaf3de; color: #27500a; }
.dcm-wallet-host .brefunding { background: var(--c-neg-bg); color: var(--c-neg); }
.dcm-wallet-host .brefunded  { background: #f1efe8; color: #6f6a5a; }

/* Refunded history rows: amount muted + struck — the money went back. */
.dcm-wallet-host .c-refunded { color: var(--c-ink-muted); text-decoration: line-through; }

/* ── Refund action (In Transit cards + History rows) ───────────────── */
.dcm-wallet-host .refund-zone {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.dcm-wallet-host .refund-confirm {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--c-neg-bg);
}
/* Full-width error line inside an open confirm — shown at the point of
   action instead of only in the top-of-tab banner. */
.dcm-wallet-host .refund-err {
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-neg);
}
.dcm-wallet-host .refund-confirm.solo { margin: -6px 0 10px; }
.dcm-wallet-host .refund-q {
    font-size: 12.5px;
    color: var(--c-neg);
    min-width: 0;
}
.dcm-wallet-host .refund-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.dcm-wallet-host .refund-keep,
.dcm-wallet-host .refund-do {
    padding: 6px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.dcm-wallet-host .refund-keep {
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-ink-soft);
}
.dcm-wallet-host .refund-do {
    border: 0;
    background: var(--c-neg);
    color: #fff;
}
.dcm-wallet-host .refund-keep:disabled,
.dcm-wallet-host .refund-do:disabled { opacity: 0.55; cursor: not-allowed; }

.dcm-wallet-host .progrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
}
.dcm-wallet-host .progbg {
    flex: 1;
    height: 5px;
    background: #f0eef8;
    border-radius: 99px;
    overflow: hidden;
}
.dcm-wallet-host .progfill {
    height: 100%;
    border-radius: 99px;
}
.dcm-wallet-host .proglbl {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.dcm-wallet-host .allcta {
    background: var(--c-accent);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 120ms ease;
    margin-top: 6px;
}
.dcm-wallet-host .allcta:hover { background: var(--c-accent-hover); }
.dcm-wallet-host .actl {
    font-size: 13px;
    font-weight: 600;
}
.dcm-wallet-host .acts {
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    margin-top: 2px;
}
.dcm-wallet-host .actarr {
    background: rgba(255, 255, 255, .15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Card screen (`_screen == "card"`) — empty-state scaffold. Issuing
   integration ships in a follow-up; this surface lets the user toggle
   virtual / physical and tap "Request card" which fires a toast.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .card-empty {
    padding: 20px 16px 40px;
}
.dcm-wallet-host .req-wrap {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dcm-wallet-host .req-visual {
    margin: 4px auto 4px;
}
.dcm-wallet-host .req-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0;
}
.dcm-wallet-host .req-sub {
    font-size: 13px;
    color: var(--c-ink-soft);
    margin: 0 0 8px;
    line-height: 1.5;
}
.dcm-wallet-host .req-types {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.dcm-wallet-host .req-type {
    flex: 1;
    max-width: 170px;
    padding: 14px 10px;
    border: 1.5px solid var(--c-border);
    border-radius: 14px;
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dcm-wallet-host .req-type:hover { border-color: var(--c-accent); }
.dcm-wallet-host .req-type.on {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
}
.dcm-wallet-host .req-type-ico {
    width: 36px;
    height: 28px;
    border-radius: 6px;
    background: #f7f6ff;
    display: grid;
    place-items: center;
}
.dcm-wallet-host .req-type.on .req-type-ico { background: #fff; }
.dcm-wallet-host .req-type-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0;
}
.dcm-wallet-host .req-type-sub {
    font-size: 10.5px;
    color: var(--c-ink-muted);
    margin: 0;
    text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   Activity-feed search + filter row. Filter pills are UI only for now —
   the activity feed's _activityFilter handler matches each row's FilterKey
   string against the pill. Without movement_type metadata stamping (phase 2)
   the keys are best-effort heuristics in ActivityMapper.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .inv-top-area {
    padding: 10px 14px 8px;
    background: #f5f5fa;
    border-bottom: 1px solid #eee;
}
.dcm-wallet-host .inv-srch-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}
.dcm-wallet-host .inv-srch {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    padding: 7px 11px;
}
.dcm-wallet-host .inv-srch input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-ink);
    min-width: 0;
}
.dcm-wallet-host .inv-srch input::placeholder { color: #ccc; }
.dcm-wallet-host .inv-filter-btn {
    background: var(--c-surface);
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-accent);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.dcm-wallet-host .inv-filter-btn.active {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
}

/* ──────────────────────────────────────────────────────────────────────────
   Toast — bottom-centered, fades in for ~2.4s. Used for placeholder CTAs
   (Pay out, Instant payout, Request card) until those features ship.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-accent);
    color: #fff;
    padding: 10px 20px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 13, 10, 0.18);
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.dcm-wallet-host .toast.show { opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Progressive loading — skeletons + refresh progress bar
   --------------------------------------------------------------------------
   Goal: the page chrome (hero, chips, CTAs, tabs, list area) renders on the
   first paint instead of waiting for the snapshot fetch to land. Sections
   that depend on data show shimmering placeholders shaped like the real
   content so nothing reflows when the swap happens. On a refresh (snapshot
   already loaded), we keep the data on-screen and run a thin progress bar
   across the top of the hero — the wholesale "Loading…" empty state on
   every refresh was disorienting.
   ────────────────────────────────────────────────────────────────────────── */

.dcm-wallet-host .skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    isolation: isolate;
}
/* Variant used over white surfaces (activity feed / invoice list) — the hero
   sits on the indigo background where rgba(255,255,255,.12) reads as a soft
   highlight, while the lower list sections need a darker base to be visible. */
.dcm-wallet-host .activity-feed .skeleton,
.dcm-wallet-host .invoice-list .skeleton {
    background: rgba(15, 13, 10, 0.08);
}
.dcm-wallet-host .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: dcm-wallet-shimmer 1.4s ease-in-out infinite;
}
.dcm-wallet-host .activity-feed .skeleton::after,
.dcm-wallet-host .invoice-list .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(15, 13, 10, 0.06) 50%,
        transparent 100%
    );
}
@keyframes dcm-wallet-shimmer {
    100% { transform: translateX(100%); }
}

/* Hero balance placeholder — same vertical footprint as the real .bal-amt
   so the indigo block doesn't jump in height when data arrives. */
.dcm-wallet-host .skeleton-balance {
    width: 60%;
    max-width: 240px;
    height: 36px;
    margin: 8px auto 0;
    border-radius: 10px;
}

/* Chip-shaped placeholder for the in-transit / reserved chips. */
.dcm-wallet-host .skeleton-chip {
    width: 132px;
    height: 28px;
    border-radius: 99px;
}

/* Activity / invoice row placeholders — match the real .mx layout
   so the swap is reflow-free. */
.dcm-wallet-host .skeleton-row { pointer-events: none; }
.dcm-wallet-host .mx.skeleton-row .mx-ico {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dcm-wallet-host .skeleton-line {
    height: 12px;
    border-radius: 6px;
    margin: 4px 0;
}
.dcm-wallet-host .skeleton-line-title { width: 60%; }
.dcm-wallet-host .skeleton-line-sub   { width: 40%; height: 10px; }
.dcm-wallet-host .skeleton-line-amt   { width: 70px; margin-left: auto; }
.dcm-wallet-host .skeleton-line-time  { width: 50px; height: 10px; margin-left: auto; }

/* Date-group header placeholder (e.g. "Today" / "Yesterday"). */
.dcm-wallet-host .skeleton-dhead {
    width: 80px;
    height: 14px;
    border-radius: 6px;
    margin: 12px 16px;
}

/* Thin progress bar shown at the top of the hero while a refresh
   is in flight AND we already have data underneath. */
.dcm-wallet-host .refresh-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    z-index: 5;
}
.dcm-wallet-host .refresh-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 2px;
    animation: dcm-wallet-refresh-bar 1.2s ease-in-out infinite;
}
@keyframes dcm-wallet-refresh-bar {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* The hero section needs to be a positioning context so the absolute
   .refresh-bar above pins to its top edge instead of the page. */
.dcm-wallet-host .ph { position: relative; }

/* Dim CTA + tab buttons in the skeleton state — the disabled attribute
   is already on them, but the default visual treatment can make them
   look fully interactive otherwise. */
.dcm-wallet-host .cta-btn:disabled,
.dcm-wallet-host .tb:disabled,
.dcm-wallet-host .tab-refresh:disabled {
    opacity: 0.55;
    cursor: progress;
}

/* Tappable wallet rows that deep-link to their trip (read-only). */
.dcm-wallet-host .is-tappable {
    cursor: pointer;
}
.dcm-wallet-host .is-tappable:active {
    background: rgba(0, 0, 0, 0.04);
}

/* ── Settlement-breakdown sheet ─────────────────────────────────────── */
.dcm-wallet-host .settled-link {
    padding: 4px 10px;
    margin-top: 4px;
    border-radius: 7px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-accent, #534ab7);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.dcm-wallet-host .settled-link:disabled { opacity: 0.55; cursor: not-allowed; }

.dcm-wallet-host .stl-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.dcm-wallet-host .stl-total { font-size: 22px; font-weight: 700; }
.dcm-wallet-host .stl-date  { font-size: 12px; color: var(--c-muted, #8a879c); }

.dcm-wallet-host .stl-list { display: flex; flex-direction: column; margin-top: 8px; }
.dcm-wallet-host .stl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--c-border);
}
.dcm-wallet-host .stl-row:last-child { border-bottom: none; }
.dcm-wallet-host .stl-row.is-tappable { cursor: pointer; }
.dcm-wallet-host .stl-name { margin: 0; font-size: 14px; font-weight: 600; }
.dcm-wallet-host .stl-sub  { margin: 2px 0 0; font-size: 12px; color: var(--c-muted, #8a879c); }
.dcm-wallet-host .stl-amt  { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dcm-wallet-host .stl-amt.neg { color: var(--c-neg, #b3402f); }

/* ── Payment-details sheet ──────────────────────────────────────────── */
.dcm-wallet-host .pd-badge {
    font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3px 9px;
}
.dcm-wallet-host .bsettled { background: var(--c-pos-bg); color: var(--c-pos); }
.dcm-wallet-host .bpending { background: var(--c-warn-bg); color: var(--c-warn); }
/* Payout-floor hold: deliberately NOT amber. Amber (.bproc/'Tonight')
   promises movement tonight; this money is parked until later earnings
   clear Stripe's minimum, which can be days. Neutral grey reads as
   'waiting', not 'failing' — the sheet carries the explanation. */
.dcm-wallet-host .bhold { background: #eceaf3; color: #56536a; }
/* Same voice as the sheet's other secondary copy, boxed so the
   explanation reads as information rather than an error. */
.dcm-wallet-host .pd-hold {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f3f8;
    color: var(--c-muted, #8a879c);
    font-size: 12.5px;
    line-height: 1.45;
}
.dcm-wallet-host .pd-timeline { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dcm-wallet-host .pd-tl-row { display: flex; align-items: baseline; gap: 8px; }
.dcm-wallet-host .pd-tl-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-accent, #534ab7); flex: none; align-self: center;
}
.dcm-wallet-host .pd-tl-label { font-size: 13px; flex: 1; }
.dcm-wallet-host .pd-tl-time { font-size: 12px; color: var(--c-ink-muted, #8b8b94); font-variant-numeric: tabular-nums; }
.dcm-wallet-host .pd-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.dcm-wallet-host .pd-btn {
    width: 100%; padding: 10px 14px; border-radius: 9px;
    border: 1px solid var(--c-border); background: var(--c-surface);
    color: var(--c-ink); font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: center;
}
.dcm-wallet-host .pd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.dcm-wallet-host .pd-btn-primary {
    background: var(--c-accent, #1D0C67); border-color: var(--c-accent, #1D0C67); color: #fff;
}

/* ── v2 wallet menu + explainer sheets (phase 1) ─────────────────── */
.dcm-wallet-host .ph-right-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
/* The balance is now a button (opens the breakdown sheet) — undo the
   UA button chrome so it renders exactly like the old <p>. inline-block
   (not block + auto margins): .bal-area centers via text-align, and the
   host-prefixed .bal-amt margin rule out-specifies anything set here. */
.dcm-wallet-host button.bal-amt-btn {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    display: inline-block;
}
/* Reserved chip became a button (opens the explainer). */
.dcm-wallet-host button.reserved-chip {
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host button.reserved-chip:hover { background: rgba(255, 255, 255, .2); }

.dcm-wallet-host .wmenu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--c-border, #eef0f3);
    padding: 13px 2px;
    font-family: inherit;
    font-size: 14px;
    color: var(--c-ink, #16233a);
    cursor: pointer;
    text-align: left;
}
.dcm-wallet-host .wmenu-row:last-child { border-bottom: 0; }
.dcm-wallet-host .wmenu-row:hover { background: var(--c-bg, #f6f7f9); }
.dcm-wallet-host .wmenu-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcm-wallet-host .wmenu-name { font-weight: 600; }
.dcm-wallet-host .wmenu-sub { font-size: 11.5px; color: var(--c-ink-muted, #6b7686); }
.dcm-wallet-host .wmenu-chev { color: var(--c-ink-muted, #6b7686); font-size: 16px; }
.dcm-wallet-host .wmenu-soon {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--c-ink-muted, #6b7686);
    background: var(--c-bg, #f6f7f9);
    border: 1px solid var(--c-border, #eef0f3);
    border-radius: 99px;
    padding: 2px 8px;
}
.dcm-wallet-host .wmenu-soon-big {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
}

.dcm-wallet-host .wguide-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 14px;
}
.dcm-wallet-host .wguide-terms span {
    font-size: 12px;
    color: var(--c-ink, #16233a);
    background: var(--c-bg, #f6f7f9);
    border: 1px solid var(--c-border, #eef0f3);
    border-radius: 99px;
    padding: 4px 10px;
}

.dcm-wallet-host .wallet-help-row {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-accent, #1D0C67);
    cursor: pointer;
    text-align: center;
}
.dcm-wallet-host .wallet-disclosure {
    margin: 6px 14px 18px;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--c-ink-muted, #6b7686);
    text-align: center;
}
.dcm-wallet-host .modal-body .wallet-disclosure { margin: 14px 0 0; text-align: left; }

/* ═══ Wallet v2 phase 4 — desktop layout (dashboard host) ═══════════
   Below 1024px nothing here applies: the phone layout (azure hero,
   centered sheets) is untouched. At ≥1024px — the dashboard's embedded
   wallet — the available screen becomes rail + content, the hero takes
   the v2 white treatment, and every sheet docks as a right-hand drawer,
   mirroring the approved desktop design artifact.

   1240px, not 1024: the dashboard renders WalletView INLINE (no iframe),
   so this query measures the whole browser window INCLUDING the 250px
   sidebar. At a 1100px window the wallet column is only ~850px — far too
   narrow for the rail. 1240 guarantees the wallet column is ~990px+
   before the rail kicks in; below that, the phone layout is the safe
   answer at any width. */
@media (min-width: 1240px) {
    /* Available screen: sticky hero rail on the left, everything else
       in the content column. Row 1/99: the rail spans every content
       row the screen renders. */
    .dcm-wallet-host.wallet-main.host-web {
        max-width: 1360px;
        margin: 0 auto;
        padding: 24px 28px 40px;
    }
    .dcm-wallet-host.wallet-main.host-web.screen-available {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
    }
    .dcm-wallet-host.wallet-main.host-web.screen-available > .ph {
        grid-column: 1;
        grid-row: 1 / 99;
        position: sticky;
        top: 24px;
    }
    .dcm-wallet-host.wallet-main.host-web.screen-available > :not(.ph) {
        grid-column: 2;
    }
    /* Transit / card screens: a comfortable single reading column. */
    .dcm-wallet-host.wallet-main.host-web.screen-transit,
    .dcm-wallet-host.wallet-main.host-web.screen-card {
        max-width: 800px;
    }

    /* ── White hero card (v2 dashboard treatment; mobile stays azure) ── */
    .dcm-wallet-host.wallet-main.host-web .ph {
        background: var(--c-surface);
        color: var(--c-ink);
        border: 1px solid var(--c-border);
        border-radius: 16px;
        padding: 20px;
    }
    .dcm-wallet-host.wallet-main.host-web .bal-lbl {
        color: var(--c-ink-muted);
        opacity: 1;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        font-size: 10.5px;
    }
    .dcm-wallet-host.wallet-main.host-web .bal-amt { color: var(--c-accent); }
    .dcm-wallet-host.wallet-main.host-web .bal-cur { color: var(--c-ink-muted); opacity: 1; }
    .dcm-wallet-host.wallet-main.host-web .transit-chip,
    .dcm-wallet-host.wallet-main.host-web .reserved-chip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        color: var(--c-ink-soft);
    }
    .dcm-wallet-host.wallet-main.host-web .transit-chip:hover,
    .dcm-wallet-host.wallet-main.host-web button.reserved-chip:hover {
        background: var(--c-bg);
    }
    .dcm-wallet-host.wallet-main.host-web .cta-btn.primary {
        background: var(--c-accent);
        color: #fff;
    }
    .dcm-wallet-host.wallet-main.host-web .cta-btn.primary:hover:not(:disabled) {
        background: var(--c-accent-pressed, #160A4F);
    }
    .dcm-wallet-host.wallet-main.host-web .cta-btn.outline {
        background: var(--c-surface);
        color: var(--c-accent);
        border: 1.5px solid var(--c-accent);
    }
    .dcm-wallet-host.wallet-main.host-web .cta-btn.outline:hover:not(:disabled) {
        background: var(--c-accent-soft, rgba(29, 12, 103, .06));
    }
    /* In-transit hero internals hardcode white-on-azure — on the white
       desktop hero they vanished (white on white). Recolor for ink. */
    .dcm-wallet-host.wallet-main.host-web .tc {
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        color: var(--c-ink);
    }
    .dcm-wallet-host.wallet-main.host-web .tc-amt { color: var(--c-accent); }
    .dcm-wallet-host.wallet-main.host-web .autobadge {
        background: var(--c-accent-soft, rgba(29, 12, 103, .08));
        color: var(--c-accent);
    }
    .dcm-wallet-host.wallet-main.host-web .avail-chip {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        color: var(--c-ink-soft);
    }
    .dcm-wallet-host.wallet-main.host-web .avail-chip:hover { background: var(--c-bg); }
    .dcm-wallet-host.wallet-main.host-web .refresh-bar { background: var(--c-bg); }

    /* Header icon buttons + skeletons were tuned for the azure ground. */
    .dcm-wallet-host.wallet-main.host-web .card-nav-btn { color: var(--c-ink-soft); }
    .dcm-wallet-host.wallet-main.host-web .ph .skeleton { background: var(--c-bg); }
    .dcm-wallet-host.wallet-main.host-web .ph-back { color: var(--c-ink); }
    .dcm-wallet-host.wallet-main.host-web .ph-title { color: var(--c-ink); }

    /* ── Sheets dock as right-hand drawers (artifact's detail panel) ── */
    .dcm-wallet-host.host-web .modal-backdrop {
        padding: 0;
        place-items: stretch end;
    }
    .dcm-wallet-host.host-web .modal {
        width: 440px;
        max-width: 92vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
        border-right: 0;
        animation: dcm-wallet-drawer-in 200ms cubic-bezier(.2, .9, .35, 1);
    }
}
@keyframes dcm-wallet-drawer-in {
    from { opacity: 0; transform: translateX(24px) }
    to   { opacity: 1; transform: translateX(0) }
}
@media (prefers-reduced-motion: reduce) {
    .dcm-wallet-host.host-web .modal { animation: none; }
}

/* ═══ Wallet v2 — mobile visual language ════════════════════════════
   The v2 anatomy applied at every size and on both hosts (Issam's
   decision: v2 UI everywhere, only the hero COLOR stays azure on
   mobile). These override the older base rules above; the ≥1240px
   host-web block recolors what the white desktop hero needs. */

/* Hero typography per the v2 spec (uppercase label, 36/800 balance). */
.dcm-wallet-host .bal-lbl {
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: 10.5px;
    font-weight: 700;
    opacity: .75;
}
.dcm-wallet-host .bal-amt {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.3px;
}

/* Tappable refresh line under the chips. */
.dcm-wallet-host .updated-line {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .65);
    cursor: pointer;
}
.dcm-wallet-host .updated-line:hover:not(:disabled) { color: #fff; }
.dcm-wallet-host .updated-line:disabled { cursor: default; }

/* Tabs: the v2 segmented control replaces the underline strip —
   fully pill-rounded per the prototype's .seg (999px, 44px touch
   targets, elevated active pill). */
/* Prototype .segwrap structure: the WRAPPER scrolls (hidden scrollbar)
   and the pill itself is max-content — when a locale's labels are wider
   than the screen the whole pill stretches and swipes, border and all,
   instead of clipping buttons inside a fixed pill. With normal-length
   labels the min-width keeps it exactly full-width and nothing scrolls. */
.dcm-wallet-host .tabs-wrap {
    padding: 12px 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.dcm-wallet-host .tabs-wrap::-webkit-scrollbar { display: none; }
.dcm-wallet-host .tabs-bar {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 4px;
    margin: 0;
    gap: 4px;
    box-shadow: 0 1px 4px rgba(12, 12, 13, .05);
    width: max-content;
    min-width: 100%;
}
.dcm-wallet-host .tb {
    border-radius: 999px;
    border-bottom: 0;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    flex: 1 0 auto;
    justify-content: center;
}
.dcm-wallet-host .tb.on {
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    border-bottom: 0;
    box-shadow: 0 6px 16px rgba(29, 12, 103, .22);
}
.dcm-wallet-host .tb .tab-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dcm-wallet-host .tb.on .tab-badge {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* Desktop (white hero) recolors for the new hero elements. */
@media (min-width: 1240px) {
    .dcm-wallet-host.wallet-main.host-web .updated-line { color: var(--c-ink-muted); }
    .dcm-wallet-host.wallet-main.host-web .updated-line:hover:not(:disabled) { color: var(--c-ink); }
    .dcm-wallet-host.wallet-main.host-web .bal-lbl { opacity: 1; color: var(--c-ink-muted); }
}

/* Transaction-details sheet (v2 §6.2). */
.dcm-wallet-host .txn-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.dcm-wallet-host .txn-head .mx-ico { flex-shrink: 0; }
.dcm-wallet-host .stl-total.c-pos { color: var(--c-pos); }
.dcm-wallet-host .stl-total.c-neg { color: var(--c-ink); }
.dcm-wallet-host .txn-trip-btn { width: 100%; margin-top: 14px; }

/* v2 transit header: label + auto-transfer chip row, then the amount;
   available-link and the updated line share the row below. */
.dcm-wallet-host .tc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.dcm-wallet-host .tc-row .tc-label { margin: 0; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; font-size: 10px; }
.dcm-wallet-host .autochip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .15);
    border: 0;
    border-radius: 99px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    cursor: pointer;
    transition: background 120ms ease;
}
.dcm-wallet-host .autochip:hover { background: rgba(255, 255, 255, .25); }
.dcm-wallet-host .availlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.dcm-wallet-host .availlink .updated-line { margin-top: 0; }
@media (min-width: 1240px) {
    .dcm-wallet-host.wallet-main.host-web .autochip {
        background: var(--c-accent-soft, #F0EDFF);
        color: var(--c-accent);
    }
    .dcm-wallet-host.wallet-main.host-web .autochip:hover { background: var(--c-bg); }
}

/* v2 tab badges: solid azure with white text on every tab state. */
.dcm-wallet-host .tb:not(.on) .tab-badge {
    background: var(--c-accent);
    color: #fff;
}

/* Menu rows: leading icon wells per the prototype's mrow2. */
.dcm-wallet-host .wmenu-row { justify-content: flex-start; }
.dcm-wallet-host .wmenu-row .wmenu-chev,
.dcm-wallet-host .wmenu-row .wmenu-soon { margin-left: auto; }
.dcm-wallet-host .wmenu-ico {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-accent-soft, #F0EDFF);
    color: var(--c-accent);
    margin-right: 12px;
}

/* Phase 2a — payment-details sheet additions. */
.dcm-wallet-host .stl-amt.pos { color: var(--c-pos); }
.dcm-wallet-host .pd-ref-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 2px 0;
    font-family: inherit;
    color: var(--c-ink-muted);
    cursor: pointer;
}
.dcm-wallet-host .pd-ref-copy:hover { color: var(--c-ink); }
.dcm-wallet-host .pd-ref-copy .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

/* v2 activity filter sheet. */
.dcm-wallet-host .wf-grp {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 14px;
}
.dcm-wallet-host .wf-chip {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    transition: all 120ms ease;
}
.dcm-wallet-host .wf-chip.on {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}
.dcm-wallet-host .wf-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.dcm-wallet-host .wf-actions .pd-btn { flex: 1; }
.dcm-wallet-host .wf-actions .pd-btn-primary { flex: 2; }
.dcm-wallet-host .fcnt {
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--c-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    margin-left: 5px;
}

/* Phase 2 polish: row pills, bulk balance line, legend rows. */
.dcm-wallet-host .mx-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 8px;
    margin-bottom: 2px;
    white-space: nowrap;
}
.dcm-wallet-host .mx-pill.proc { background: #fdf3d7; color: #8a6d1a; }
.dcm-wallet-host .mx-pill.hold { background: #fdf3d7; color: #8a6d1a; }
.dcm-wallet-host .mx-pill.err  { background: #fcebeb; color: var(--c-neg); }

/* ── Statements sheet ──────────────────────────────────────────────── */
.dcm-wallet-host .wst-row { align-items: center; }
.dcm-wallet-host .wst-row .stl-mid { flex: 1; min-width: 0; }
.dcm-wallet-host .wst-dl { flex: 0 0 auto; white-space: nowrap; }
.dcm-wallet-host .wst-vat-nudge { color: #8a6d1a; background: #fdf3d7; border-radius: 8px; padding: 8px 10px; }
.dcm-wallet-host .wguide-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 14px;
}
.dcm-wallet-host .wguide-term {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--c-ink);
}
.dcm-wallet-host .wguide-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Transit-parity round: guide meanings, refund-in-sheet, help hint. */
.dcm-wallet-host .wguide-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dcm-wallet-host .wguide-txt b { font-size: 12.5px; font-weight: 700; color: var(--c-ink); }
.dcm-wallet-host .wguide-txt small { font-size: 11px; line-height: 1.45; color: var(--c-ink-muted); }
.dcm-wallet-host .wguide-term { align-items: flex-start; }
.dcm-wallet-host .wguide-help-btn { width: 100%; margin-top: 14px; }
.dcm-wallet-host .wguide-hint {
    text-align: center;
    font-size: 10.5px;
    color: var(--c-ink-muted);
    margin: 8px 0 0;
}
.dcm-wallet-host .pd-refund-btn {
    border-color: var(--c-neg, #b91c1c);
    color: var(--c-neg, #b91c1c);
}
.dcm-wallet-host .pd-refund-confirm { margin-top: 10px; }

/* ═══ Wallet v2 — §4.1 invoice-row anatomy + approve sheet + filter ═══
   The To-pay / To-receive rows drop their inline buttons for the v2 row
   anatomy (date + amount up top, who-line with a trip link, route), and
   actions move into the approve sheet. */
.dcm-wallet-host .invoice-row.ivrow {
    grid-template-columns: auto 1fr;
    grid-template-areas: none;
    align-items: start;
    padding: 12px 16px;
}
/* The narrow-screen legacy grid assigns .invoice-check to a named area
   that no longer exists on ivrow — put it back in normal flow. */
.dcm-wallet-host .invoice-row.ivrow .invoice-check {
    grid-area: auto;
    align-self: start;
    margin-top: 2px;
}
.dcm-wallet-host .invoice-row.ivrow.owed-row { grid-template-columns: 1fr; }
.dcm-wallet-host .iv-main { min-width: 0; cursor: pointer; }
.dcm-wallet-host .iv-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
}
.dcm-wallet-host .iv-time {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--c-ink);
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.dcm-wallet-host .iv-amt {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--c-ink);
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.dcm-wallet-host .iv-who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .iv-lbl { font-weight: 600; }
.dcm-wallet-host .iv-who b { color: var(--c-ink); font-weight: 700; }
.dcm-wallet-host .iv-sep { color: var(--c-divider); }
.dcm-wallet-host .iv-tlink {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-accent);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.dcm-wallet-host .iv-route {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
}
.dcm-wallet-host .iv-x {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-ink-muted);
}
/* Explainer line under each invoice tab's sumline (v2 "linfo"). */
.dcm-wallet-host .iv-linfo {
    margin: 4px 0 0;
    padding: 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-ink-muted);
}
.dcm-wallet-host .iv-sumline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dcm-wallet-host .iv-sumline .inv-filter-btn { margin-left: auto; }

/* Approve sheet (v2 apprSheet) — kv boxes, sticky-style actions, hint. */
.dcm-wallet-host .appr-kvbox {
    background: var(--c-bg);
    border-radius: 12px;
    padding: 2px 14px;
}
.dcm-wallet-host .appr-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    font-size: 13px;
    border-bottom: 1px solid var(--c-divider);
}
.dcm-wallet-host .appr-kv:last-child { border-bottom: 0; }
.dcm-wallet-host .appr-kk { color: var(--c-ink-muted); }
.dcm-wallet-host .appr-vv {
    font-weight: 700;
    text-align: right;
    color: var(--c-ink);
    font-feature-settings: "tnum" 1;
}
.dcm-wallet-host .appr-kv-total .appr-kk {
    font-weight: 700;
    color: var(--c-ink);
}
.dcm-wallet-host .appr-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dcm-wallet-host .appr-cancel-trip {
    border-color: var(--c-neg-bg, #fcebeb);
    color: var(--c-neg, #b91c1c);
}
.dcm-wallet-host .appr-triplink {
    text-align: center;
    color: var(--c-accent);
    font-weight: 700;
}
.dcm-wallet-host .appr-hint {
    margin: 0;
    font-size: 12px;
    color: var(--c-ink-muted);
    line-height: 1.5;
    text-align: center;
}

/* ═══ Wallet v2 — Pay out / Top up sheet visual pass ═══
   Feature set unchanged; this restyles the amount box, quick chips,
   speed tile and confirm button to the v2 sheet language, and presents
   modals as bottom sheets on mobile (the ≥1240px host-web drawer rules
   below override these on the dashboard). */
.dcm-wallet-host .amount-field {
    border-width: 1.5px;
    border-radius: 12px;
    min-height: 56px;
}
.dcm-wallet-host .amount-prefix {
    width: 48px;
    font-size: 18px;
    font-weight: 800;
}
.dcm-wallet-host .amount-input {
    font-size: 22px;
    font-weight: 800;
}
.dcm-wallet-host .quick-amounts { gap: 8px; flex-wrap: nowrap; }
.dcm-wallet-host .quick-chip {
    flex: 1;
    min-height: 44px;
    border-width: 1.5px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    padding: 6px 4px;
}
.dcm-wallet-host .quick-chip.active {
    background: var(--c-accent-soft);
    color: var(--c-accent);
    border-color: var(--c-accent);
}
.dcm-wallet-host .submit-btn {
    min-height: 48px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(29, 12, 103, 0.22);
}
.dcm-wallet-host .pto.on {
    background: var(--c-accent-soft);
    border: 1.5px solid var(--c-accent);
    border-radius: 12px;
}

/* Bottom-sheet presentation on mobile: every wallet modal docks to the
   bottom edge and slides up, with a CSS-only grab handle. The dashboard
   (host-web ≥1240px) keeps its right-hand drawer via the later rules. */
@media (max-width: 1239px) {
    .dcm-wallet-host .modal-backdrop {
        place-items: end center;
        padding: 0;
    }
    .dcm-wallet-host .modal {
        max-width: 560px;
        border-radius: 18px 18px 0 0;
        border-bottom: 0;
        max-height: 88vh;
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: dcm-wallet-sheet-up 250ms ease;
    }
    .dcm-wallet-host .modal::before {
        content: "";
        display: block;
        width: 38px;
        height: 5px;
        border-radius: 999px;
        background: var(--c-divider);
        margin: 10px auto 0;
    }
    .dcm-wallet-host .modal-head { padding-top: 8px; }
}
@keyframes dcm-wallet-sheet-up {
    from { opacity: 0.6; transform: translateY(24px) }
    to   { opacity: 1; transform: translateY(0) }
}
@media (prefers-reduced-motion: reduce) {
    .dcm-wallet-host .modal { animation: none; }
}

/* ═══ Wallet v2 — history polish ═══
   Rich empty-state action (prototype .ea) + nothing else: the history
   day groups reuse the activity feed's .dhead/.mx language, and the
   "Tonight" pill reuses the amber .bproc badge. */
.dcm-wallet-host .empty-state-action {
    background: none;
    border: 0;
    color: var(--c-accent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    min-height: 44px;
    margin-top: 4px;
    padding: 0 8px;
    cursor: pointer;
}
.dcm-wallet-host .transit-content .dhead { margin-top: 14px; }

/* "Show more" footer under the paged card-payment history. */
.dcm-wallet-host .history-more {
    display: block;
    width: 100%;
    margin-top: 12px;
    text-align: center;
    color: var(--c-accent);
    font-weight: 700;
}

/* ── Reserved sheet ─────────────────────────────────────────────────────── */
.dcm-wallet-host .rsv-intro { margin-bottom: 12px; }
.dcm-wallet-host .rsv-acc {
    border: 1px solid var(--c-border);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
}
.dcm-wallet-host .rsv-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dcm-wallet-host .rsv-acc-head > svg:first-child { color: var(--c-accent); flex-shrink: 0; }
.dcm-wallet-host .rsv-acc-title { flex: 1; font-size: 14px; font-weight: 600; }
.dcm-wallet-host .rsv-acc-chev { color: var(--c-muted, #8a879c); transition: transform .15s ease; flex-shrink: 0; }
.dcm-wallet-host .rsv-acc.open .rsv-acc-chev { transform: rotate(180deg); }
.dcm-wallet-host .rsv-acc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
}
.dcm-wallet-host .rsv-row { gap: 12px; }
.dcm-wallet-host .rsv-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--c-warn-bg);
    color: var(--c-warn);
}
.dcm-wallet-host .rsv-row .stl-mid { flex: 1; min-width: 0; }
.dcm-wallet-host .rsv-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.dcm-wallet-host .rsv-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--c-border);
    font-size: 15px;
    font-weight: 700;
}
.dcm-wallet-host .rsv-empty { margin-top: 12px; }