/* ═══════════════════════════════════════════════════════════════════════════
   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;
    /* NOTE: Standalone page sits below the fixed dense MudAppBar (48px) inside MudMainContent —
       subtract it so the column fits the content area and the bottom action bar stays reachable.
       The embedded host (--embedded, below) overrides this back to 100% to fill its popover. */
    height: calc(100dvh - 48px);
    max-width: 640px;
    margin: 0 auto;
    /* NOTE: clip, not hidden — nothing on the station may ever scroll sideways on a phone, and clip
       does not turn the page into a scroll container (overflow-y stays visible). */
    overflow-x: clip;
    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;
}

/* ── light theme — warm beige "paper" ────────────────────────────────────────
   Applied to the STANDALONE page only when the app is in light mode (the class is
   withheld from the embedded Artist Office popover, which always sits on the dark
   office canvas). Every surface reads as warm beige with near-black warm text;
   accents/status keep their hue but drop in lightness so text stays legible on the
   pale ground. Only the var block changes — the whole file already draws through it. */
.mw-tus-page--light {
    /* canvas — beige, with the faintest warm bloom instead of the dark brand glows */
    --mw-tus-bg: hsl(41 44% 90%);
    --mw-tus-glow-1: hsl(41 58% 84%);
    --mw-tus-glow-2: hsl(28 48% 86%);

    /* surfaces — cream cards raised a touch off the beige ground */
    --mw-tus-surface: hsl(42 52% 95%);
    --mw-tus-surface-elev: hsl(43 56% 97%);

    /* borders — warm dark hairlines */
    --mw-tus-border: hsla(34 32% 20% / 0.16);
    --mw-tus-border-strong: hsla(34 32% 20% / 0.28);

    /* text — near-black warm, readable on beige */
    --mw-tus-text: hsl(30 20% 15%);
    --mw-tus-text-dim: hsl(32 15% 35%);
    --mw-tus-text-faint: hsl(35 12% 50%);

    /* accent — MitWare violet, darkened for contrast on the light ground */
    --mw-tus-accent: hsl(263 60% 50%);
    --mw-tus-accent-soft: hsl(263 48% 42%);
    --mw-tus-accent-tint: hsla(263 60% 50% / 0.12);
    --mw-tus-accent-line: hsla(263 60% 50% / 0.34);

    /* status — same hues, dropped in lightness so they read as text/pills on beige */
    --mw-tus-green: hsl(152 60% 30%);
    --mw-tus-green-dim: hsla(152 58% 32% / 0.15);
    --mw-tus-amber: hsl(33 84% 37%);
    --mw-tus-amber-dim: hsla(36 80% 44% / 0.17);
    --mw-tus-blue: hsl(210 72% 42%);
    --mw-tus-blue-dim: hsla(210 72% 42% / 0.14);
    --mw-tus-red: hsl(351 62% 45%);
}

/* Light grid overlay — warm dark hairlines (the dark theme's white lines vanish on beige). */
.mw-tus-page--light.mw-tus-page:not(.mw-tus-page--embedded)::after {
    background-image:
        linear-gradient(hsla(34 32% 20% / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, hsla(34 32% 20% / 0.05) 1px, transparent 1px);
}

/* 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. NOTE: The compose bottom sheet and its scrim
   are excluded — they are fixed viewport layers (.mw-bsheet / .mw-bsheet-scrim, app.css) that
   happen to be direct children of the page root (they need its scoped theme variables). This file
   loads after app.css and this selector matches their specificity, so without the exclusion it wins
   and turns them into in-flow blocks: the closed sheet then lands at the end of the page column,
   translated 104% down, as a phantom strip far below the station. */
.mw-tus-page > *:not(.mw-bsheet, .mw-bsheet-scrim, .mw-tus-topsheet, .mw-tus-topsheet-scrim) {
    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;
}

/* 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);
}

/* ── 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);
}

/* Override standing: no ceiling, so the pill states what was spent rather than what is left. */
.mw-tus-budget-pill--override {
    color: var(--mw-tus-text);
    border-color: var(--mw-tus-border);
    background: transparent;
}

.mw-tus-budget-override {
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mw-tus-text);
}

/* The standalone strip is tappable — it opens the budget tile (top sheet). */
.mw-tus-budget-strip--tap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mw-tus-budget-caret {
    margin-left: auto;
    display: inline-flex;
    color: var(--mw-tus-text-faint);
    transition: transform 0.25s ease;
}

.mw-tus-budget-caret--open {
    transform: rotate(180deg);
}

/* ── budget tile — top sheet (the compose bottom sheet's mirror) ────────────
   Fixed panel sliding down from the top edge, scrim below it. Rendered inside
   .mw-tus-page (excluded from the atmosphere z-lift above) so the scoped theme
   variables reach it. */
.mw-tus-topsheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 1340;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mw-tus-topsheet-scrim--open {
    opacity: 1;
    pointer-events: auto;
}

.mw-tus-topsheet {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1350;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 6px;
    background: var(--mw-tus-surface);
    border: 1px solid var(--mw-tus-border-strong);
    border-top: none;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.5);
    color: var(--mw-tus-text);
    font-family: var(--mw-tus-font-body);
    transform: translateY(-104%);
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.28, 1);
}

.mw-tus-topsheet--open {
    transform: translateY(0);
}

/* Grab handle sits at the BOTTOM — the sheet hangs from the top edge. */
.mw-tus-topsheet-grab {
    flex: none;
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--mw-tus-border-strong);
    margin: 4px auto 2px;
}

.mw-tus-bud-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);
}

.mw-tus-bud-empty {
    font-size: 0.8rem;
    color: var(--mw-tus-text-dim);
    padding: 4px 0 8px;
}

.mw-tus-bud-bars {
    display: flex;
    justify-content: space-evenly;
    gap: 12px;
    padding: 2px 0 6px;
}

.mw-tus-bud-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}

.mw-tus-bud-left {
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
}

.mw-tus-bud-left-sub {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mw-tus-text-faint);
    margin-bottom: 3px;
}

/* Every track shares ONE height — each bar is normalized to its own original window budget,
   so the grey block always reads as "the consumed share of MY budget". */
.mw-tus-bud-track {
    width: 46px;
    height: 132px;
    border-radius: 10px;
    border: 1px solid var(--mw-tus-border-strong);
    background: var(--mw-tus-surface-elev);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

/* Consumed drains from the top — greyed and hatched so it reads as "gone", not as a second value. */
.mw-tus-bud-consumed {
    flex: none;
    background: repeating-linear-gradient(-45deg,
        hsla(0 0% 60% / 0.16) 0 5px,
        hsla(0 0% 60% / 0.06) 5px 10px);
}

.mw-tus-bud-fill {
    flex: 1;
    border-top: 2px solid var(--mw-tus-bud-color);
    background: linear-gradient(to top,
        color-mix(in srgb, var(--mw-tus-bud-color) 70%, transparent),
        color-mix(in srgb, var(--mw-tus-bud-color) 40%, transparent));
}

.mw-tus-bud-spent {
    font-size: 0.66rem;
    font-family: var(--mw-tus-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--mw-tus-text-faint);
    margin-top: 2px;
}

/* No budget and no override — the station is a lookup tool; the banner says so up front.
   An inset edge-glow card in the warning color (recipe:
   docs/plans/mitware-theme/edge-glow-and-tail-corner.md) — tail corner top-left, amber glow
   climbing from the bottom-left corner, quiet amber wash inside the hairline. */
.mw-tus-budget-banner {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 14px 6px;
    padding: 11px 13px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border-top-left-radius: 4px;
    border: 1.5px solid transparent;
    background:
        /* wash: a whisper of the warning color inside the card */
        linear-gradient(
            color-mix(in srgb, var(--mw-tus-amber) 7%, transparent),
            color-mix(in srgb, var(--mw-tus-amber) 7%, transparent)) padding-box,
        /* fill: flat surface tone, padding-box only */
        linear-gradient(var(--mw-tus-surface), var(--mw-tus-surface)) padding-box,
        /* glow: corner-anchored radial living in the border ring */
        radial-gradient(135% 125% at 0% 100%,
            color-mix(in srgb, var(--mw-tus-amber) 80%, transparent) 0%,
            color-mix(in srgb, var(--mw-tus-amber) 45%, transparent) 40%,
            transparent 72%) border-box,
        /* base: hairline everywhere the glow has faded */
        linear-gradient(var(--mw-tus-border-strong), var(--mw-tus-border-strong)) border-box;
    box-shadow: -3px 2px 9px -8px color-mix(in srgb, var(--mw-tus-amber) 65%, transparent);
    color: var(--mw-tus-amber);
}

.mw-tus-budget-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mw-tus-budget-banner-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mw-tus-budget-banner-text span {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--mw-tus-text-dim);
}

/* ── body scroll region ─────────────────────────────────────────────────── */
.mw-tus-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    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;
}

/* ── refusal banner (no budget, artist-restricted target) ───────────────── */
.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); }

/* ── unregistered-chip note (informational, sits above the composer) ────── */
/* Deliberately quieter than .mw-tus-nyi: this one explains a consequence, it does not refuse anything. */
.mw-tus-unreg-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border-radius: 10px;
    background: var(--mw-tus-amber-dim);
    padding: 9px 11px;
    margin: 4px 0 10px;
    font-size: 0.78rem;
    color: var(--mw-tus-text-dim);
    line-height: 1.4;
}

/* ── balance strip (current → new) ──────────────────────────────────────── */
/* The shared chip-balance readout sits where the old per-currency cards did; it brings its own grid, so the
   container only supplies the spacing. */
.mw-tus-balances {
    margin: 12px 0 4px;
}

/* Where the composed amount lands — projected from the EFFECTIVE balance (on-chip + already in flight), so the
   operator sees the real destination rather than a number that ignores money already sent. */
.mw-tus-projection {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 4px;
    padding: 9px 10px;
    border: 1px solid var(--mw-tus-border-strong);
    border-radius: 11px;
    background: var(--mw-tus-surface-elev);
}

.mw-tus-projection-title {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
}

.mw-tus-projection-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-variant-numeric: tabular-nums;
}

.mw-tus-projection-row .mud-icon-root {
    font-size: 15px;
    color: var(--mud-palette-text-disabled);
}

.mw-tus-projection-from {
    margin-left: auto;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.mw-tus-projection-to {
    color: var(--mud-palette-success);
    font-weight: 700;
    font-size: 1.05rem;
}

.mw-tus-projection-to--debit {
    color: var(--mud-palette-error);
}

.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);
}