/* ═══════════════════════════════════════════════════════════════════════════
   Top-up station (mobile) — prefix mw-tus-*
   Full-screen one-thumb cashless top-up: find a person (checked-in list / chip
   id / NFC) → compose a load in the bottom sheet → send.
   Composer rows/receipt reuse .mw-comp-compose-* (mw-compensations.css); this
   file styles only the station chrome around them.

   Skin: the command-palette aesthetic of the Artist Office dashboard
   (artist-buro.css) — deep near-black canvas with soft brand glows, flat
   hairline-bordered surfaces, color in milligrams (docs/plans/mitware-theme/).
   All custom properties are scoped to .mw-tus-page so nothing leaks.
   ═══════════════════════════════════════════════════════════════════════════ */

.mw-tus-page {
    /* canvas (mirrors --mw-ab-* in artist-buro.css) */
    --mw-tus-bg: #07070a;
    --mw-tus-glow-1: hsl(263 75% 12%);
    --mw-tus-glow-2: hsl(220 60% 9%);

    /* surfaces */
    --mw-tus-surface: hsl(240 12% 9%);
    --mw-tus-surface-elev: hsl(240 11% 11.5%);

    /* borders */
    --mw-tus-border: hsla(0 0% 100% / 0.06);
    --mw-tus-border-strong: hsla(0 0% 100% / 0.10);

    /* text */
    --mw-tus-text: hsl(0 0% 96%);
    --mw-tus-text-dim: hsl(240 5% 60%);
    --mw-tus-text-faint: hsl(240 5% 40%);

    /* accent — MitWare violet */
    --mw-tus-accent: hsl(263 90% 67%);
    --mw-tus-accent-soft: hsl(263 70% 79%);
    --mw-tus-accent-tint: hsla(263 90% 67% / 0.10);
    --mw-tus-accent-line: hsla(263 90% 67% / 0.30);

    /* status — calm, not neon */
    --mw-tus-green: hsl(152 55% 56%);
    --mw-tus-green-dim: hsla(152 55% 56% / 0.13);
    --mw-tus-amber: hsl(38 92% 62%);
    --mw-tus-amber-dim: hsla(38 92% 62% / 0.13);
    --mw-tus-blue: hsl(210 80% 65%);
    --mw-tus-blue-dim: hsla(210 80% 65% / 0.13);
    --mw-tus-red: hsl(351 75% 64%);

    --mw-tus-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-tus-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 640px;
    margin: 0 auto;
    background: var(--mw-tus-bg);
    color: var(--mw-tus-text);
    font-family: var(--mw-tus-font-body);
    -webkit-font-smoothing: antialiased;
}

/* NOTE: Embedded host (a popover/panel owns the viewport) — fill the host instead of the screen. */
.mw-tus-page--embedded {
    height: 100%;
    max-width: none;
    margin: 0;
}

/* Atmosphere — soft brand glows, masked grid (standalone page only; an embedded popover is too
   small for atmosphere and already sits on the host's canvas). Same recipe as .mw-ab-dashboard. */
.mw-tus-page:not(.mw-tus-page--embedded)::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 18% 0%, var(--mw-tus-glow-1), transparent 60%),
        radial-gradient(ellipse 50% 40% at 92% 100%, var(--mw-tus-glow-2), transparent 60%);
    opacity: 0.8;
    pointer-events: none;
}

.mw-tus-page:not(.mw-tus-page--embedded)::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(hsla(0 0% 100% / 0.015) 1px, transparent 1px),
        linear-gradient(90deg, hsla(0 0% 100% / 0.015) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
    pointer-events: none;
}

/* Content rides above the atmosphere pseudo-layers. */
.mw-tus-page > * {
    position: relative;
    z-index: 1;
}

/* ── header — flat strip on the canvas, hairline separator ──────────────── */
.mw-tus-hd {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mw-tus-border);
    background: transparent;
}

.mw-tus-hd-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border-top-left-radius: 4px;
    display: grid;
    place-items: center;
    color: var(--mw-tus-green);
    background: var(--mw-tus-green-dim);
    border: 1px solid color-mix(in srgb, var(--mw-tus-green) 30%, transparent);
}

.mw-tus-hd-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
    flex: 1;
    min-width: 0;
}

.mw-tus-hd-title small {
    display: block;
    font-weight: 500;
    font-size: 0.72rem;
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--mw-tus-text-dim);
    margin-top: 1px;
}

/* NOTE: Header chip-scan button — starts the native scan (iOS system sheet / Android overlay). */
.mw-tus-hd-scan {
    flex: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mw-tus-blue);
    border: 1px solid color-mix(in srgb, var(--mw-tus-blue) 40%, transparent);
    background: var(--mw-tus-blue-dim);
    border-radius: 99px;
    padding: 6px 12px;
}

.mw-tus-hd-scan--active {
    color: #071018;
    background: var(--mw-tus-blue);
}

.mw-tus-session {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mw-tus-text-dim);
    border: 1px solid var(--mw-tus-border-strong);
    border-radius: 99px;
    padding: 5px 11px;
}

/* ── provider freshness strip ───────────────────────────────────────────── */
.mw-tus-fresh {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    color: var(--mw-tus-text-dim);
    border-bottom: 1px solid var(--mw-tus-border);
    background: transparent;
}

.mw-tus-fresh-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--mw-tus-green);
    box-shadow: 0 0 6px color-mix(in srgb, var(--mw-tus-green) 60%, transparent);
}

.mw-tus-fresh-dot--stale {
    background: var(--mw-tus-amber);
    box-shadow: 0 0 6px color-mix(in srgb, var(--mw-tus-amber) 60%, transparent);
}

.mw-tus-fresh-dot--off {
    background: var(--mw-tus-text-faint);
    box-shadow: none;
}

.mw-tus-fresh-provider {
    font-weight: 600;
    color: var(--mw-tus-text);
}

.mw-tus-fresh-age {
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
}

.mw-tus-fresh-spacer { flex: 1; }

/* ── operator budget strip ──────────────────────────────────────────────── */
.mw-tus-budget-strip {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 14px;
    font-size: 0.75rem;
    color: var(--mw-tus-text-dim);
    border-bottom: 1px solid var(--mw-tus-border);
    background: transparent;
}

.mw-tus-budget-pill {
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--mw-tus-green);
    border: 1px solid color-mix(in srgb, var(--mw-tus-green) 35%, transparent);
    background: var(--mw-tus-green-dim);
    border-radius: 99px;
    padding: 2px 9px;
}

.mw-tus-budget-pill--empty {
    color: var(--mw-tus-amber);
    border-color: color-mix(in srgb, var(--mw-tus-amber) 35%, transparent);
    background: var(--mw-tus-amber-dim);
}

/* ── body scroll region ─────────────────────────────────────────────────── */
.mw-tus-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 16px;
}

.mw-tus-body--grid {
    padding: 2px 0 0;
    display: flex;
    flex-direction: column;
}

/* ── finder switch spacing ──────────────────────────────────────────────── */
.mw-tus-switch { padding: 0 14px 4px; }

/* ── uuid pane ──────────────────────────────────────────────────────────── */
.mw-tus-uuid-hint {
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--mw-tus-text-faint);
    margin: 8px 2px 0;
    min-height: 1em;
}

/* ── nfc pane ───────────────────────────────────────────────────────────── */
.mw-tus-nfc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 10px 10px;
}

.mw-tus-nfc-pad {
    position: relative;
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}

.mw-tus-nfc-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--mw-tus-blue) 55%, transparent);
    animation: mw-tus-nfc-pulse 2.2s ease-out infinite;
}

.mw-tus-nfc-ring:nth-child(2) { animation-delay: 0.7s; }
.mw-tus-nfc-ring:nth-child(3) { animation-delay: 1.4s; }

@keyframes mw-tus-nfc-pulse {
    0%   { transform: scale(0.55); opacity: 0.9; }
    70%  { opacity: 0.12; }
    100% { transform: scale(1.18); opacity: 0; }
}

.mw-tus-nfc-core {
    position: relative;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--mw-tus-blue) 22%, transparent), var(--mw-tus-surface));
    border: 1px solid color-mix(in srgb, var(--mw-tus-blue) 40%, transparent);
    box-shadow: 0 0 30px -6px color-mix(in srgb, var(--mw-tus-blue) 60%, transparent);
    color: var(--mw-tus-blue);
}

.mw-tus-nfc-title {
    font-weight: 700;
    font-size: 1rem;
}

.mw-tus-nfc-sub {
    font-size: 0.8rem;
    color: var(--mw-tus-text-dim);
    line-height: 1.5;
    max-width: 240px;
    margin: 6px auto 0;
}

/* ── android scan overlay ───────────────────────────────────────────────── */
/* NOTE: Android reader mode is silent — this overlay IS the scan dialog. iOS never shows it
   (Core NFC presents the system sheet). Reuses the .mw-tus-nfc-* pad visuals. The overlay sits
   OUTSIDE .mw-tus-page in the markup, so the canvas color is spelled out here. */
.mw-tus-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
    background: color-mix(in srgb, #07070a 92%, transparent);
    backdrop-filter: blur(6px);
    color: hsl(0 0% 96%);
}

/* ── resolve card (chip-uid / nfc preview) — tail-corner surface card ───── */
.mw-tus-rez {
    margin-top: 14px;
    border: 1px solid var(--mw-tus-border-strong);
    border-radius: 14px;
    border-top-left-radius: 5px;
    background: var(--mw-tus-surface);
    padding: 12px;
}

.mw-tus-rez-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.mw-tus-badge {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--mw-tus-font-mono);
    border-radius: 99px;
    padding: 3px 8px;
}

.mw-tus-badge--known {
    color: var(--mw-tus-green);
    border: 1px solid color-mix(in srgb, var(--mw-tus-green) 35%, transparent);
    background: var(--mw-tus-green-dim);
}

.mw-tus-badge--unreg {
    color: var(--mw-tus-amber);
    border: 1px solid color-mix(in srgb, var(--mw-tus-amber) 35%, transparent);
    background: var(--mw-tus-amber-dim);
}

/* ── target banner — tail-corner surface card ───────────────────────────── */
.mw-tus-target {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--mw-tus-border-strong);
    border-radius: 14px;
    border-top-left-radius: 5px;
    background: var(--mw-tus-surface);
    padding: 11px 12px;
    margin-bottom: 4px;
}

/* The avatar carries the person's affiliation in milligrams — violet tint, not a filled block. */
.mw-tus-target-av {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border-top-left-radius: 5px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--mw-tus-accent-soft);
    background: var(--mw-tus-accent-tint);
    border: 1px solid var(--mw-tus-accent-line);
}

.mw-tus-target-av--unreg {
    color: var(--mw-tus-amber);
    background: var(--mw-tus-amber-dim);
    border-color: color-mix(in srgb, var(--mw-tus-amber) 35%, transparent);
}

.mw-tus-target-main {
    flex: 1;
    min-width: 0;
}

.mw-tus-target-name {
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-tus-target-sub {
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    color: var(--mw-tus-text-dim);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── not-implemented banner (personless path) ───────────────────────────── */
.mw-tus-nyi {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: 1px dashed color-mix(in srgb, var(--mw-tus-amber) 45%, var(--mw-tus-border));
    border-radius: 12px;
    border-top-left-radius: 4px;
    background: var(--mw-tus-amber-dim);
    padding: 11px 13px;
    margin: 10px 0 4px;
    font-size: 0.8rem;
    color: var(--mw-tus-text-dim);
    line-height: 1.45;
}

.mw-tus-nyi b { color: var(--mw-tus-text); }

/* ── balance strip (current → new) ──────────────────────────────────────── */
.mw-tus-balances {
    display: flex;
    gap: 7px;
    margin: 12px 0 4px;
}

.mw-tus-bal {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--mw-tus-border-strong);
    border-radius: 11px;
    background: var(--mw-tus-surface-elev);
    padding: 8px 9px;
}

.mw-tus-bal-name {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--mw-tus-font-mono);
    color: var(--mw-tus-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}

.mw-tus-bal-val {
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.mw-tus-bal-new {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mw-tus-green);
}

.mw-tus-bal-new--debit { color: var(--mw-tus-red); }

.mw-tus-bal-arrow {
    font-size: 0.7rem;
    color: var(--mw-tus-text-faint);
}

.mw-tus-section-title {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--mw-tus-font-mono);
    color: var(--mw-tus-text-faint);
    margin: 16px 2px 6px;
}

/* ── action bar ─────────────────────────────────────────────────────────── */
.mw-tus-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mw-tus-border-strong);
    background: var(--mw-tus-surface);
}

.mw-tus-bar .mw-tus-bar-primary { flex: 1; }

/* ── list-card cell (checked-in MwDataGrid) ─────────────────────────────── */
.mw-tus-person {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mw-tus-person-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-tus-person-meta {
    font-family: var(--mw-tus-font-mono);
    font-size: 0.68rem;
    color: var(--mw-tus-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.mw-tus-pip {
    font-variant-numeric: tabular-nums;
    font-size: 0.66rem;
    border-radius: 6px;
    padding: 2px 6px;
    border: 1px solid var(--mw-tus-border-strong);
    color: var(--mw-tus-text-dim);
}

.mw-tus-pip--in {
    color: var(--mw-tus-green);
    border-color: color-mix(in srgb, var(--mw-tus-green) 35%, transparent);
}

.mw-tus-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--mw-tus-text-faint);
    padding: 28px 16px;
    font-size: 0.85rem;
}

/* ── guests on the canvas — the compact grid and the bottom sheet pick up the
      station surfaces instead of the MudBlazor palette ─────────────────────── */

/* The checked-in list rides the canvas directly; row hairlines carry the separation. */
.mw-tus-page .mw-dg-compact {
    background: transparent;
}

/* The compose bottom sheet becomes a station surface (it renders inside .mw-tus-page,
   so the scoped variables reach it). */
.mw-tus-page .mw-bsheet {
    background: var(--mw-tus-surface);
    border-color: var(--mw-tus-border-strong);
}

.mw-tus-page .mw-bsheet-grab {
    background: var(--mw-tus-border-strong);
}