/*
 * Pattaya Bar Simulator — mobile stylesheet.
 *
 * Scope: viewport SIZE is the source of truth for which surface shows,
 * with a pointer-type tie-break for the wide-but-short zone.
 *
 *   DESKTOP BAND: `(min-width: 768px) and (min-height: 600px),
 *                  (min-width: 768px) and (any-pointer: fine)`
 *     i.e. wide AND (tall OR has a fine pointer). A laptop with a short
 *     window (browser chrome eating height, a half-height window) has a
 *     mouse/trackpad, so it stays DESKTOP instead of collapsing to the
 *     narrow mobile column.
 *   MOBILE BAND (the exact complement): `(max-width: 767px),
 *                  (max-height: 599px) and (not (any-pointer: fine))`
 *     i.e. narrow OR (short AND no fine pointer). A large phone in
 *     landscape is wide but short AND touch-only (no fine pointer), so it
 *     stays on the mobile surface.
 *
 * The two bands are exact complements, so exactly one of .m-only / .d-only
 * is ever shown, with zero User-Agent sniffing. `any-pointer: fine` (not
 * `pointer: fine`) so a touch laptop with a trackpad counts as desktop.
 * The `body.force-desktop` / `body.force-mobile` classes override the bands
 * at any size for the explicit "show me the other UI" preference
 * (?ui=desktop / ?ui=mobile). The 600px height floor + the pointer tie-break
 * are the tunable constants for the wide-short decision.
 *
 * Structure:
 *   1. :root design tokens (--mc-* per CC_DESIGN_SPEC.md)
 *   2. @media mobile:
 *        a. hide desktop chrome
 *        b. NEW mobile chrome — header pill, bottom nav, more sheet,
 *           FAB, sub-tabs (CC_DESIGN_SPEC.md § Global chrome)
 *        c. Phase A fallbacks (trimmed 2026-06-10) — only the rules
 *           still live on surfaces with no .m-only rebuild: admin
 *           pages, auth/onboarding pages, shared modals, the 16px
 *           input floor. Per-page rules for rebuilt pages are gone.
 *   3. @media desktop — hide mobile-only chrome.
 *
 * The --mc-* tokens are the spec's canonical values. They mirror the
 * existing --gold/--border/--red/etc. so either set works.
 */

:root {
    --mc-bg:         #ffffff;
    --mc-card:       #ffffff;
    --mc-inset:      #f0f1f5;
    --mc-border:     #dcdee5;
    --mc-border-sub: #e8eaef;
    --mc-text:       #1a1b2e;
    --mc-text-sec:   #5a5c6e;
    --mc-muted:      #8a8d9e;
    --mc-accent:     #3b82f6;
    --mc-accent-2:   #60a5fa;
    --mc-green:      #16a34a;
    --mc-red:        #dc2626;
    --mc-gold:       #b8860b;
    --mc-orange:     #d97706;
    --mc-blue:       #2563eb;
    --mc-purple:     #7c3aed;
    --mc-pink:       #db2777;
    --mc-cashier:    #0e7490;  /* cashier names — deep teal, reads on white cards */
    /* Noto Sans Thai listed as fallback so the ฿ glyph (U+0E3F) renders
       correctly on systems where Inter is missing the Thai range. The
       browser does per-character fallback so Latin chars still use Inter. */
    --mc-font:       "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {

    /* ---------- global layout: room for header + bottom nav ---------- */
    .content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        padding-top: calc(56px + env(safe-area-inset-top) + 8px) !important;
    }

    /* ---------- hide desktop chrome ---------- */
    .bar-header,
    .hamburger,
    .mobile-top-shield,
    .sidebar,
    .sidebar-backdrop,
    .scan-bill-btn,
    .admin-cog-btn,
    .notif-bell,
    .notif-dropdown,
    .notif-backdrop,
    .app-bar,
    /* Section tabs (My Ladies / Scouting / Girlfriends, Finance sections,
       Compete sections) are desktop-only — the redesign uses .m-subtabs
       inside each page. Hide them on mobile so there's only one tab row. */
    .section-tabs,
    /* Dirty-tricks legacy sub-tab pills — replaced by .m-subtabs on mobile. */
    #dtSubTabs,
    /* Admin impersonation switcher (Switch User dropdown) — desktop-only.
       Admins can use desktop to switch accounts. */
    #adminSwitcher,
    .admin-dropdown { display: none !important; }

    /* Force the body background to white on mobile regardless of theme.
       Per CC_DESIGN_SPEC.md the mobile design is light-mode only; the
       header, bottom nav, and FAB all assume light surfaces. The desktop
       theme (classic/dark/chang) continues to apply at ≥721px. */
    body {
        background: var(--mc-bg) !important;
        color: var(--mc-text) !important;
    }

    /* (Reverted v1.33.68) overscroll-behavior-y:none was added 2026-06-20 to
       stop the fixed bottom nav lifting during momentum flings. It sits in the
       regression window for the Android "one-finger won't scroll, page zooms"
       reports, so it is rolled back together with the bottom-nav compositor
       promotion (v1.33.66) to return mobile scrolling to the known-good state
       from before the 2026-06-20 nav-pinning work. Re-add only after on-device
       testing on Android, where this whole class reproduces but desktop /
       DevTools / Playwright emulation does not. */

    /* ============================================================
       MOBILE HEADER — 56px fixed top bar.
       [bar-switcher pill] [🔍] [🔔●]
       ============================================================ */
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px 10px;
        padding-top: calc(8px + env(safe-area-inset-top));
        background: var(--mc-bg);
        border-bottom: 1px solid var(--mc-border);
        font-family: var(--mc-font);
    }

    .m-barpill {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
        padding: 4px 10px 4px 4px;
        border: 1px solid var(--mc-border);
        border-radius: 999px;
        background: var(--mc-inset);
        color: var(--mc-text);
        cursor: pointer;
        font: inherit;
        text-align: left;
    }
    .m-barpill:hover { border-color: var(--mc-accent); }
    .m-barpill:active { background: color-mix(in srgb, var(--mc-accent) 6%, var(--mc-inset)); }

    .m-barpill-logo {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #fff;
        font-weight: 800;
    }
    .m-barpill-meta {
        min-width: 0;
        overflow: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }
    .m-barpill-name {
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-barpill-bal {
        font-size: 11px;
        font-weight: 800;
        color: var(--mc-gold);
        margin-top: 2px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .m-barpill-chev {
        font-size: 9px;
        color: var(--mc-muted);
        flex-shrink: 0;
    }

    .m-header-icons {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    .m-iconbtn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--mc-border);
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        padding: 0;
        color: var(--mc-text);
        text-decoration: none;
        position: relative;
    }
    .m-iconbtn:hover { border-color: var(--mc-accent); }
    .m-iconbtn:active { background: color-mix(in srgb, var(--mc-accent) 8%, transparent); }
    .m-iconbtn-dot {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 8px;
        height: 8px;
        background: var(--mc-red);
        border-radius: 50%;
        border: 2px solid var(--mc-bg);
    }

    /* ============================================================
       SUB-TABS — segmented pill row under page titles.
       Markup: .m-subtabs > .m-subtab (optional .m-subtab-count chip)
       ============================================================ */
    .m-subtabs {
        display: flex;
        gap: 4px;
        background: var(--mc-inset);
        border-radius: 10px;
        padding: 4px;
        margin: 10px 0 14px;
    }
    .m-subtab {
        flex: 1;
        text-align: center;
        padding: 7px 0;
        font-size: 12px;
        font-weight: 700;
        border-radius: 7px;
        white-space: nowrap;
        background: transparent;
        color: var(--mc-text-sec);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0;
        font-family: inherit;
        cursor: pointer;
        text-decoration: none;
        min-height: 32px;
    }
    .m-subtab.active {
        background: var(--mc-card);
        color: var(--mc-accent);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
    .m-subtab-count {
        font-size: 10px;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--mc-border);
        color: var(--mc-muted);
        font-weight: 700;
    }
    .m-subtab.active .m-subtab-count {
        background: rgba(59, 130, 246, 0.15);
        color: var(--mc-accent);
    }

    /* ============================================================
       FAB — bill-scan floating button, bottom-right, above the nav.
       ============================================================ */
    .m-fab {
        position: fixed;
        right: 16px;
        bottom: calc(72px + env(safe-area-inset-bottom) + 12px);
        z-index: 990;
        width: 56px;
        height: 56px;
        border: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        color: #fff;
        font-size: 22px;
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .m-fab:hover { filter: brightness(1.05); }
    .m-fab:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5); }
    /* Hide the FAB on the 3D World — full-screen canvas owns the viewport */
    body.world-page .m-fab { display: none !important; }

    /* ============================================================
       MORE SHEET — slides up from bottom, contains nav + profile +
       admin + footer. See _mobile_more_sheet.html for markup.
       ============================================================ */
    .mobile-more-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1400;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0s linear 0.2s;
    }
    .mobile-more-backdrop.open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s, visibility 0s;
    }
    .mobile-more-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        max-height: 92vh;
        max-height: 92dvh;
        background: var(--mc-card);
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
        font-family: var(--mc-font);
    }
    .mobile-more-sheet.open { transform: translateY(0); }

    .mms-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1rem 0.75rem;
        border-bottom: 1px solid var(--mc-border);
        position: relative;
    }
    .mms-top::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--mc-border);
    }
    .mms-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--mc-text);
        margin-top: 4px;
    }
    .mms-close {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--mc-border);
        background: transparent;
        color: var(--mc-text);
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Bar switcher inside the sheet */
    .mms-barswitch-wrap { padding: 0.75rem 0.85rem 0.3rem; }
    .mms-barswitch {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem 0.8rem;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        color: var(--mc-text);
        font: inherit;
        cursor: pointer;
        text-align: left;
    }
    .mms-barswitch:hover { border-color: var(--mc-accent); }
    .mms-bar-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        color: #fff;
    }
    .mms-bar-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }
    .mms-bar-name {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mc-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mms-bar-bal {
        font-size: 0.72rem;
        color: var(--mc-gold);
        margin-top: 2px;
        font-variant-numeric: tabular-nums;
    }
    /* "Last night's net" delta beside the balance — green ▲ / red ▼ — so an
       earner swept to ฿0 reads differently from a bar bleeding fixed costs. */
    .mms-bar-delta {
        margin-left: 6px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .mms-bar-delta.up { color: var(--mc-green); }
    .mms-bar-delta.down { color: var(--mc-red); }
    .mms-bar-chev {
        font-size: 0.8rem;
        color: var(--mc-text-sec);
        transition: transform 0.15s;
    }
    .mms-barswitch-wrap.open .mms-bar-chev { transform: rotate(180deg); }

    .mms-bar-list {
        display: none;
        flex-direction: column;
        gap: 0.3rem;
        margin-top: 0.5rem;
        padding: 0.4rem;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
    }
    .mms-bar-list.open { display: flex; }
    .mms-bar-item {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.55rem 0.65rem;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid transparent;
        /* Items render as <button> (inside a per-bar POST form) or <a>
           (the "New Bar" tile). Reset native form/link chrome so they
           look like flat rows. */
        background: transparent;
        font: inherit;
        color: inherit;
        text-align: left;
        text-decoration: none;
        width: 100%;
        appearance: none;
        -webkit-appearance: none;
        min-height: 44px;
    }
    .mms-bar-item:hover {
        background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
        border-color: var(--mc-border);
    }
    /* Each bar item is wrapped in its own POST form. The form is just a
       transport — visually it shouldn't add any margin or layout. */
    .mms-bar-item-form { margin: 0; padding: 0; display: block; }

    /* Nav grid */
    .mms-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
        padding: 0.85rem;
    }
    .mms-nav-item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.75rem 0.8rem;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        text-decoration: none;
        color: var(--mc-text);
        font-size: 0.88rem;
        font-weight: 600;
        min-height: 48px;
    }
    .mms-nav-item:hover {
        border-color: var(--mc-accent);
        color: var(--mc-text);
    }
    .mms-nav-item.active {
        background: color-mix(in srgb, var(--mc-accent) 14%, transparent);
        border-color: var(--mc-accent);
        color: var(--mc-text);
    }
    .mms-nav-emoji {
        font-size: 1.2rem;
        line-height: 1;
        flex-shrink: 0;
    }
    /* Count badge — matches the bottom-nav red dot so tapping "More"
       because of the dot leads to an obvious "here's the N waiting for
       you" landmark on the Inbox link. */
    .mms-nav-count {
        margin-left: auto;
        background: var(--mc-red);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 800;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    .mms-divider {
        border: none;
        border-top: 1px solid var(--mc-border);
        margin: 0.5rem 1rem;
    }

    /* Profile row + admin row */
    .mms-profile {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.8rem 1rem;
        text-decoration: none;
        color: var(--mc-text);
    }
    .mms-profile:hover { background: color-mix(in srgb, var(--mc-accent) 8%, transparent); }
    .mms-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        flex-shrink: 0;
    }
    .mms-avatar-placeholder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }
    .mms-profile-meta {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .mms-profile-name {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--mc-text);
    }
    .mms-profile-sub {
        font-size: 0.72rem;
        color: var(--mc-text-sec);
        margin-top: 2px;
    }
    .mms-profile-chev {
        font-size: 1.2rem;
        color: var(--mc-muted);
    }

    /* Admin row — red tint per spec. */
    .mms-admin,
    .mms-admin:hover {
        background: color-mix(in srgb, var(--mc-red) 7%, transparent) !important;
    }
    .mms-admin .mms-profile-name { color: var(--mc-red); }
    .mms-admin .mms-avatar-placeholder {
        background: color-mix(in srgb, var(--mc-red) 12%, transparent);
        border-color: color-mix(in srgb, var(--mc-red) 35%, transparent);
        color: var(--mc-red);
    }

    /* Footer row — links + version */
    .mms-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 1rem;
        padding: 0.85rem 1rem 1rem;
        border-top: 1px solid var(--mc-border);
        margin-top: 0.35rem;
    }
    .mms-foot-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.2rem;
        font-size: 0.8rem;
        color: var(--mc-text-sec);
        text-decoration: none;
    }
    .mms-foot-link:hover { color: var(--mc-text); }
    .mms-foot-icon { font-size: 0.9rem; }
    .mms-foot-logout { color: var(--mc-red); }
    .mms-version {
        margin-left: auto;
        font-size: 0.68rem;
        color: var(--mc-muted);
        font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
    }

    /* ============================================================
       BOTTOM NAV — 5 slots: Home · Staff · Finance · Compete · More
       ============================================================ */
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        /* Plain position:fixed, NO compositor promotion. The translateZ(0) /
           backface-visibility / will-change:transform layer hints added on
           2026-06-20 (to pin the bar during a momentum-scroll fling) are the
           leading suspect for the Android "page won't scroll" reports that
           started right after. A permanent will-change:transform plus a 3D
           transform on a fixed element can trip Android compositor
           hit-testing so the main document scroller stops responding to
           touch. That failure mode is real-device-only and invisible to
           desktop / DevTools / Playwright emulation, where the page (incl.
           the live prod leaderboard, driven with synthetic touch) scrolls
           fine, which is why it could not be reproduced locally. Reverted to
           the long-standing known-good. The minor nav-lift-on-fling cosmetic
           is an acceptable trade for restoring scroll. */
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: var(--mc-card);
        border-top: 1px solid var(--mc-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
        font-family: var(--mc-font);
    }
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 6px;
        min-width: 0;
        min-height: 48px;
        font: inherit;
        border: 0;
        background: transparent;
        color: var(--mc-muted);
        text-decoration: none;
        border-radius: 8px;
        position: relative;
        cursor: pointer;
    }
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover {
        background: color-mix(in srgb, var(--mc-accent) 8%, transparent);
    }
    .mobile-bottom-nav .mbn-emoji {
        font-size: 20px;
        line-height: 1;
        filter: grayscale(0.3);
    }
    .mobile-bottom-nav .mbn-label {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
    }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active {
        color: var(--mc-accent);
        background: rgba(59, 130, 246, 0.10);
    }
    .mobile-bottom-nav a.active .mbn-label,
    .mobile-bottom-nav button.active .mbn-label { font-weight: 700; }
    .mobile-bottom-nav a.active .mbn-emoji,
    .mobile-bottom-nav button.active .mbn-emoji { filter: none; }
    .mobile-bottom-nav .mbn-dot {
        position: absolute;
        top: 4px;
        right: 22%;
        width: 8px;
        height: 8px;
        background: var(--mc-red);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--mc-card);
    }

    /* ============================================================
       PHASE A responsive fallbacks (trimmed 2026-06-10).
       The per-page rules for templates rebuilt as .m-only/.d-only
       pairs (home, bank, roster, draft, freelancers, matchup,
       leaderboard, world, feed, achievements, groups) were deleted
       once their desktop markup stopped rendering below 768px.
       What remains is live on surfaces that still serve desktop-ish
       markup with no .m-only sibling:
       - admin pages (tables, stat grids, headers)
       - auth + onboarding pages (login, reset, quickstart,
         select-cashier)
       - shared modals opened from BOTH surfaces (bank transfer box,
         the generic *-overlay padding reset incl. the school modal)
       - the 16px input floor that stops iOS focus-zoom
       Don't add per-page rules here; new pages get .m-* blocks.
       ============================================================ */

    /* page header row (H1 + action button). The [class*="-page"]
       arm substring-matches .m-page wrappers too, so this spacing
       intentionally also applies to rebuilt mobile pages. */
    .content > .page-header,
    .content > [class*="-page"] > div:first-child {
        gap: 0.5rem !important;
        margin-bottom: 0.85rem !important;
    }
    .content h1 {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.15rem !important;
    }
    .content .subtitle,
    .content .page-sub {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }
    .btn-primary { min-height: 44px; }

    /* tables → horizontal scroll (admin pages + any bare <table>) */
    .content table,
    table.admin-table,
    table.data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
        font-size: 0.78rem;
    }
    .content table thead,
    .content table tbody,
    .content table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }
    .content table th,
    .content table td {
        padding: 0.45rem 0.55rem !important;
    }
    table.admin-table th:first-child,
    table.admin-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--mc-card);
        z-index: 2;
    }

    /* data grids → 2 cols on phone, 1 col below 380. .stat-grid is
       the admin KPI grid; .cashier-grid is the shared select-cashier
       onboarding list (laid out as a flex column by the page, so
       only the gap bites there). */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .cashier-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.55rem !important;
    }
    @media (max-width: 380px) {
        .stat-grid,
        .cashier-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .stat-card { padding: 0.6rem 0.7rem !important; }
    .stat-card .label { font-size: 0.6rem !important; line-height: 1.2 !important; }
    .stat-card .value { font-size: 1.1rem !important; line-height: 1.15 !important; }

    /* modals → full-screen sheets. The bank transfer box is opened
       from the .m-only bank UI too; the generic *-overlay padding
       reset hits live mobile overlays (school modal, swap, tour). */
    .transfer-overlay,
    [class$="-overlay"],
    [class*="-overlay "] { padding: 0 !important; }
    .transfer-overlay .transfer-box {
        width: calc(100vw - 1rem) !important;
        max-width: 100% !important;
        max-height: calc(100vh - 2rem) !important;
        max-height: calc(100dvh - 2rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
        padding: 1rem 1rem 1.1rem !important;
    }
    .transfer-overlay .transfer-box h3 {
        font-size: 1.1rem !important;
        padding-right: 2rem;
    }
    .transfer-overlay .close-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.4rem !important;
    }

    /* forms: 16px inputs (prevents iOS zoom) */
    .content input[type="text"],
    .content input[type="number"],
    .content input[type="email"],
    .content input[type="password"],
    .content input[type="search"],
    .content input[type="tel"],
    .content input[type="url"],
    .content input[type="date"],
    .content select,
    .content textarea {
        font-size: 16px !important;
        max-width: 100%;
        box-sizing: border-box;
    }

}

/* ---------- hide mobile-only chrome on the desktop band (wide AND tall).
   force-mobile re-shows these via !important + later source order. ---------- */
@media (min-width: 768px) and (min-height: 600px), (min-width: 768px) and (any-pointer: fine) {
    .mobile-bottom-nav,
    .mobile-header,
    .mobile-more-sheet,
    .mobile-more-backdrop,
    .m-fab { display: none !important; }
}

/* ============================================================
   PHASE 2 — Page-level mobile redesign helpers.

   .m-only / .d-only are parallel-markup toggles used while we
   transition templates page-by-page: mobile block renders only
   on <=767px, desktop block only on >=768px. The goal is to
   delete the desktop block and its Phase A overrides once each
   page's mobile redesign is verified.
   ============================================================ */

/* Surface visibility toggle. The mobile band hides desktop-only content;
   the desktop band hides mobile-only content. Both hides EXCLUDE the
   opposite force-* class so an explicit override keeps the other surface
   visible at its NATURAL display (an explicit display:block/revert would
   break the author display of .m-stat-grid, .m-card, inline .m-only
   pills, etc.). */
@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {
    body:not(.force-desktop) .d-only { display: none !important; }
}
@media (min-width: 768px) and (min-height: 600px), (min-width: 768px) and (any-pointer: fine) {
    body:not(.force-mobile) .m-only { display: none !important; }
}

/* Keep the mobile surface a centred phone-width column when it is shown on
   a WIDE viewport (a large phone in landscape, or ?ui=mobile forced on a
   desktop). No effect on a real phone: its width is already below the cap,
   so max-width is inert and margin:auto is a no-op. */
.m-page { max-width: 560px; margin-left: auto; margin-right: auto; }

@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {

    /* Page wrapper — overrides .content's 2rem padding on mobile,
       matches the mockup canvas (16px gutter). */
    .m-page {
        padding: 0 16px 16px;
        font-family: var(--mc-font);
        color: var(--mc-text);
    }
    .m-page-title {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.015em;
        line-height: 1;
        margin: 2px 0 0;
        color: var(--mc-text);
    }

    .m-eyebrow {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--mc-muted);
    }

    .m-green     { color: var(--mc-green); }
    .m-red       { color: var(--mc-red); }
    .m-gold      { color: var(--mc-gold); }
    .m-orange    { color: var(--mc-orange); }
    .m-purple    { color: var(--mc-purple); }
    .m-pink      { color: var(--mc-pink); }
    .m-text-sec  { color: var(--mc-text-sec); }
    .m-muted     { color: var(--mc-muted); }

    /* Hero card — tinted-gradient feature block. Tints: blue (drop),
       gold (money), orange (rivalry), green (group), purple (prestige). */
    .m-hero {
        padding: 18px;
        border-radius: 16px;
    }
    .m-hero-blue {
        background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(96,165,250,0.04));
        border: 2px solid rgba(59,130,246,0.22);
    }
    .m-hero-gold {
        background: linear-gradient(135deg, rgba(184,134,11,0.10), rgba(184,134,11,0.02));
        border: 2px solid rgba(184,134,11,0.25);
    }
    .m-hero-big {
        font-size: 30px;
        font-weight: 800;
        margin-top: 6px;
        letter-spacing: -0.02em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        color: var(--mc-text);
    }
    .m-hero-money {
        font-size: 30px;
        font-weight: 800;
        color: var(--mc-gold);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
        margin-top: 6px;
    }

    /* Pills (status/tag chips) */
    .m-pills-row {
        display: flex;
        gap: 6px;
        margin-top: 10px;
        flex-wrap: wrap;
    }
    .m-pill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-pill-gold   { background: color-mix(in srgb, var(--mc-gold) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--mc-gold) 40%, transparent);   color: var(--mc-gold); }
    .m-pill-green  { background: color-mix(in srgb, var(--mc-green) 15%, transparent);  border: 1px solid color-mix(in srgb, var(--mc-green) 40%, transparent);  color: var(--mc-green); }
    .m-pill-red    { background: color-mix(in srgb, var(--mc-red) 15%, transparent);    border: 1px solid color-mix(in srgb, var(--mc-red) 40%, transparent);    color: var(--mc-red); }
    .m-pill-orange { background: color-mix(in srgb, var(--mc-orange) 15%, transparent); border: 1px solid color-mix(in srgb, var(--mc-orange) 40%, transparent); color: var(--mc-orange); }
    .m-pill-blue   { background: color-mix(in srgb, var(--mc-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--mc-accent) 40%, transparent); color: var(--mc-accent); }
    .m-pill-purple { background: color-mix(in srgb, var(--mc-purple) 15%, transparent); border: 1px solid color-mix(in srgb, var(--mc-purple) 40%, transparent); color: var(--mc-purple); }
    .m-pill-pink   { background: color-mix(in srgb, var(--mc-pink) 15%, transparent);   border: 1px solid color-mix(in srgb, var(--mc-pink) 40%, transparent);   color: var(--mc-pink); }
    .m-pill-muted  { background: var(--mc-inset); border: 1px solid var(--mc-border); color: var(--mc-text-sec); }

    /* StatCard 2×2 grid */
    .m-stat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 12px;
    }
    .m-stat-card {
        padding: 12px;
        border-radius: 12px;
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
    }
    .m-stat-num {
        font-size: 22px;
        font-weight: 800;
        color: var(--mc-text);
        line-height: 1;
        margin-top: 6px;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }
    .m-stat-trend {
        font-size: 11px;
        font-weight: 600;
        margin-top: 4px;
    }

    /* Card (generic bordered container) */
    .m-card {
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
        border-radius: 12px;
        padding: 12px 14px;
        margin-top: 12px;
    }
    .m-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .m-card-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--mc-text);
    }
    .m-seeall {
        font-size: 11px;
        color: var(--mc-accent);
        font-weight: 600;
        text-decoration: none;
    }

    /* Feed row (icon · text · meta) */
    .m-feedrow {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        border-top: 1px solid var(--mc-border-sub);
        text-decoration: none;
        color: inherit;
    }
    .m-feedrow:first-child { border-top: 0; }
    .m-feedrow-icon {
        font-size: 16px;
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }
    .m-feedrow-text {
        flex: 1;
        min-width: 0;
        font-size: 12px;
        color: var(--mc-text-sec);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .m-feedrow-meta {
        font-size: 10px;
        color: var(--mc-muted);
        font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
        flex-shrink: 0;
    }

    /* Search input */
    .m-search-wrap {
        position: relative;
        margin-top: 10px;
    }
    .m-search-input {
        width: 100%;
        padding: 9px 12px 9px 34px;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        border-radius: 8px;
        font-size: 16px; /* iOS no-zoom */
        font-family: var(--mc-font);
        color: var(--mc-text);
        box-sizing: border-box;
        outline: none;
    }
    .m-search-input:focus { border-color: var(--mc-accent); }
    .m-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        color: var(--mc-muted);
        pointer-events: none;
    }

    /* Horizontal chips row */
    .m-chips-row {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0 2px;
        margin-bottom: 4px;
    }
    .m-chip {
        flex-shrink: 0;
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
        color: var(--mc-text-sec);
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }
    .m-chip.active {
        background: var(--mc-accent);
        border-color: var(--mc-accent);
        color: #fff;
    }

    /* Staff row list */
    .m-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 12px;
    }
    .m-staff-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 10px;
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
        text-decoration: none;
        color: inherit;
        min-height: 54px;
    }
    .m-staff-row.m-starred {
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
    }
    .m-staff-row.m-released {
        opacity: 0.55;
    }
    .m-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 14px;
        flex-shrink: 0;
    }
    .m-staff-meta {
        flex: 1;
        min-width: 0;
    }
    .m-staff-name-row {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
    .m-staff-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--mc-text);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-staff-star { font-size: 11px; flex-shrink: 0; }
    .m-staff-level {
        font-size: 9px;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--mc-inset);
        color: var(--mc-text-sec);
        font-weight: 700;
        flex-shrink: 0;
    }
    .m-staff-sub {
        font-size: 11px;
        color: var(--mc-muted);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .m-status-dot {
        font-size: 16px;
        line-height: 1;
        flex-shrink: 0;
    }
    .m-status-green  { color: var(--mc-green); }
    .m-status-red    { color: var(--mc-red); }
    /* .m-status-orange + .m-status-muted retained ONLY for legacy
       non-presence usages (e.g. "on leave" status text). Presence
       itself is strictly binary — see CLAUDE.md. */
    .m-status-orange { color: var(--mc-orange); }
    .m-status-muted  { color: var(--mc-muted); }

    /* Empty states — centered emoji, title, body, CTA */
    .m-empty {
        text-align: center;
        padding: 48px 24px 32px;
    }
    .m-empty-icon {
        font-size: 56px;
        line-height: 1;
        margin-bottom: 16px;
        opacity: 0.85;
    }
    .m-empty-title {
        font-size: 18px;
        font-weight: 800;
        color: var(--mc-text);
        margin-bottom: 8px;
    }
    .m-empty-body {
        font-size: 13px;
        color: var(--mc-text-sec);
        line-height: 1.4;
        margin-bottom: 20px;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .m-empty-cta {
        display: inline-block;
        padding: 12px 24px;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        border-radius: 10px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    /* When a .m-page is present, zero out .content's default padding since
       .m-page owns its own gutter. Desktop .content padding is untouched. */
    .content:has(.m-page) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ============================================================
       Modal polish — hire, transfer, swap, scouting compare.
       All share .swap-overlay/.swap-box or .transfer-overlay/.transfer-box
       markers. On mobile they become near-full-screen sheets with
       the light design-system palette.
       ============================================================ */
    .swap-overlay,
    .transfer-overlay {
        background: rgba(26, 27, 46, 0.55) !important;
        padding: 8px !important;
        align-items: flex-end !important;
    }
    .swap-overlay.open,
    .transfer-overlay.open {
        display: flex !important;
    }
    .swap-overlay .swap-box,
    .transfer-overlay .transfer-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-top-left-radius: 18px !important;
        border-top-right-radius: 18px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        padding: 16px 14px 18px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        color: var(--mc-text);
        font-family: var(--mc-font);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
        position: relative;
    }
    /* Drag handle affordance on the sheet top */
    .swap-overlay .swap-box::before,
    .transfer-overlay .transfer-box::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--mc-border);
        pointer-events: none;
    }
    .swap-overlay h3,
    .transfer-overlay h3 {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--mc-text) !important;
        margin: 8px 0 4px !important;
        padding-right: 40px;
    }
    .swap-overlay .swap-sub,
    .transfer-overlay .subtitle,
    .transfer-overlay p {
        font-size: 12px !important;
        color: var(--mc-text-sec) !important;
    }
    .swap-overlay .close-btn,
    .transfer-overlay .close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        border: 1px solid var(--mc-border) !important;
        background: transparent !important;
        color: var(--mc-text) !important;
        font-size: 18px !important;
    }
    /* Search / filter bars inside the modal */
    .swap-overlay input[type="text"],
    .swap-overlay input[type="search"],
    .transfer-overlay input[type="text"],
    .transfer-overlay input[type="number"],
    .transfer-overlay select {
        background: var(--mc-inset) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 8px !important;
        color: var(--mc-text) !important;
        font-family: var(--mc-font) !important;
    }
    /* Venue filter pills + sort controls */
    .swap-overlay .swap-venue-filters,
    .swap-overlay .sort-controls {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin: 10px 0;
    }
    .swap-overlay .swap-venue-filters button,
    .swap-overlay .sort-controls button {
        padding: 5px 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        background: var(--mc-inset) !important;
        border: 1px solid var(--mc-border) !important;
        color: var(--mc-text-sec) !important;
    }
    .swap-overlay .swap-venue-filters button.active,
    .swap-overlay .sort-controls button.active,
    .swap-overlay .sort-controls .sort-btn.active {
        background: var(--mc-accent) !important;
        border-color: var(--mc-accent) !important;
        color: #fff !important;
    }
    /* Candidate list rows inside the hire modal */
    .swap-overlay .swap-list {
        margin-top: 10px;
    }
    .swap-overlay .swap-item,
    .swap-overlay .swap-row,
    .swap-overlay .hire-row {
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        color: var(--mc-text) !important;
        margin-bottom: 6px !important;
    }
    .swap-overlay .swap-item:hover,
    .swap-overlay .swap-row:hover {
        border-color: var(--mc-accent) !important;
    }
    /* Primary CTA inside modals */
    .swap-overlay button.hire-btn,
    .swap-overlay button.buy-btn,
    .swap-overlay .confirm-btn,
    .transfer-overlay .confirm-btn,
    .transfer-overlay button[type="submit"]:not(.close-btn) {
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2)) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        font-family: var(--mc-font) !important;
    }

    /* ============================================================
       Swap modals (hire cashier / replace girl / swap bench) —
       mobile: style candidate rows to match .m-staff-row cards and
       colour the presence dot green / orange / red based on state.
       ============================================================ */
    .swap-overlay .swap-item {
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        margin-bottom: 6px;
        color: var(--mc-text) !important;
    }
    .swap-overlay .swap-item:hover { border-color: var(--mc-accent) !important; }
    .swap-overlay .swap-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        object-fit: cover;
    }
    .swap-overlay .swap-name {
        color: var(--mc-text) !important;
        font-weight: 800 !important;
        font-size: 14px !important;
    }
    .swap-overlay .swap-venue {
        color: var(--mc-text-sec) !important;
        font-size: 11px !important;
    }
    .swap-overlay .swap-cost {
        color: var(--mc-gold) !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums;
        font-size: 14px !important;
    }
    .swap-overlay .swap-btn {
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2)) !important;
        color: #fff !important;
        border: 0 !important;
        border-radius: 10px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        min-height: 40px !important;
    }
    .swap-overlay .swap-btn:disabled { opacity: 0.4 !important; }
    /* Presence dot — binary green (present) / red (not).
       See CLAUDE.md: presence has only two states. */
    .swap-overlay .presence-wrap {
        position: relative;
        display: inline-block;
    }
    .swap-overlay .presence-wrap .presence-dot {
        position: absolute !important;
        bottom: -1px !important;
        right: -1px !important;
        width: 11px !important;
        height: 11px !important;
        border-radius: 50% !important;
        background: var(--mc-red) !important;
        border: 2px solid var(--mc-card) !important;
    }
    .swap-overlay .presence-wrap .presence-dot.active {
        background: var(--mc-green) !important;
    }
    /* 7-day heatmap: fits mobile row, squares slightly bigger */
    .swap-overlay .heatmap-7d {
        padding-left: 0 !important;
        margin-top: 6px !important;
        gap: 3px !important;
    }
    .swap-overlay .heatmap-7d > div {
        width: 14px !important;
        height: 14px !important;
        border-radius: 2px !important;
    }
    /* Loyalty/CAPT/level/fatigue pills rendered inline with the name
       on mobile only (via .m-only spans in the template). */
    .swap-overlay .m-only { display: inline-flex !important; }

    /* ============================================================
       Dirty-tricks picker — /dirty-tricks page grid.
       Applies our m-card look to the existing .trick-card markup.
       ============================================================ */
    .trick-card {
        background: var(--mc-card) !important;
        border: 1px solid var(--mc-border) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        flex-direction: row !important;
        text-align: left !important;
        gap: 12px !important;
    }
    .trick-card .trick-icon {
        font-size: 28px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: var(--mc-inset) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .trick-card .trick-name {
        color: var(--mc-text) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }
    .trick-card .trick-desc {
        color: var(--mc-text-sec) !important;
        font-size: 12px !important;
        margin-top: 3px !important;
    }
    .trick-card .trick-cost {
        color: var(--mc-gold) !important;
        font-weight: 800 !important;
        font-size: 12px !important;
    }
    .trick-card .trick-actions {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    .trick-card button,
    .trick-card .buy-btn {
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2)) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        min-height: 36px;
    }
    .trick-card.disabled {
        opacity: 0.5 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE DARK THEME — Pattaya Bar Simulator
   Scoped to mobile only. Desktop has its own multi-theme system under
   themes/*.css and body[data-theme=...]; this stays out of its way.
   Activated by body.theme-dark. Default (body.theme-light) = no-op.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {

    body.theme-dark {
        /* surfaces */
        --mc-bg: #0a0b12;
        --mc-card: #141622;
        --mc-card-elev: #1a1d2e;
        --mc-inset: #0e0f18;

        /* borders */
        --mc-border: #252838;
        --mc-border-sub: #1c1f2c;

        /* text */
        --mc-text: #f5f6fa;
        --mc-text-sec: #a4a7b8;
        --mc-muted: #6b6e80;

        /* accents — app brand stays blue, shifted lighter for dark contrast */
        --mc-accent: #5b8cff;
        --mc-accent-2: #7ba3ff;

        /* nightlife neon — HERO CARDS ONLY. Never on body text, list rows,
           or chips-at-rest. Use it like a spotlight, not like paint. */
        --mc-neon: #ff3b8b;
        --mc-neon-2: #a855f7;

        /* semantic — money gold brightens so it reads on dark surfaces */
        --mc-gold: #fbbf24;
        --mc-green: #22c55e;
        --mc-red: #ef4444;
        --mc-orange: #f59e0b;
        --mc-purple: #a855f7;

        /* hero gradients (dark-tinted — the colour lives in the glow, not
           the gradient body). */
        --mc-hero-gold: linear-gradient(135deg, #2a1e0a 0%, #1a140a 60%, #141622 100%);
        --mc-hero-blue: linear-gradient(135deg, #0d1a3a 0%, #101528 60%, #141622 100%);
        --mc-hero-neon: linear-gradient(135deg, #2a0a24 0%, #1a0a2e 60%, #141622 100%);
        --mc-hero-red:  linear-gradient(135deg, #2a0d12 0%, #1a0a10 60%, #141622 100%);
        --mc-hero-purple: linear-gradient(135deg, #1f0d35 0%, #140a24 60%, #141622 100%);

        /* glows — outer box-shadow + 1px inner highlight for hero cards */
        --mc-glow-neon: 0 0 24px rgba(255, 59, 139, 0.25),
                        inset 0 0 1px rgba(255, 59, 139, 0.6);
        --mc-glow-gold: 0 0 24px rgba(251, 191, 36, 0.18),
                        inset 0 0 1px rgba(251, 191, 36, 0.5);
        --mc-glow-blue: 0 0 24px rgba(91, 140, 255, 0.18),
                        inset 0 0 1px rgba(91, 140, 255, 0.5);

        /* generic card shadow (subtle inset + lift) */
        --mc-card-shadow: inset 0 1px 0 rgba(255,255,255,0.03),
                          0 8px 24px rgba(0,0,0,0.4);
    }

    /* Pills — solid-fill punches too hard on dark; flip to alpha-blend. */
    body.theme-dark .m-pill-blue   { background: rgba(91, 140, 255, 0.15); color: #a4bfff; }
    body.theme-dark .m-pill-green  { background: rgba(34, 197, 94, 0.15); color: #5eead4; }
    body.theme-dark .m-pill-red    { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
    body.theme-dark .m-pill-gold   { background: rgba(251, 191, 36, 0.12); color: var(--mc-gold); }
    body.theme-dark .m-pill-orange { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
    body.theme-dark .m-pill-purple { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; }
    body.theme-dark .m-pill-muted  { background: rgba(255, 255, 255, 0.06); color: var(--mc-text-sec); }

    /* Hero cards — tinted gradient body, colour lives in glow + 1px border. */
    body.theme-dark .m-hero-gold {
        background: var(--mc-hero-gold);
        border: 1px solid rgba(251, 191, 36, 0.25);
        box-shadow: var(--mc-glow-gold);
    }
    body.theme-dark .m-hero-blue {
        background: var(--mc-hero-blue);
        border: 1px solid rgba(91, 140, 255, 0.25);
        box-shadow: var(--mc-glow-blue);
    }
    body.theme-dark .m-hero-neon {
        background: var(--mc-hero-neon);
        border: 1px solid rgba(255, 59, 139, 0.25);
        box-shadow: var(--mc-glow-neon);
    }
    body.theme-dark .m-hero-red {
        background: var(--mc-hero-red);
        border: 1px solid rgba(239, 68, 68, 0.25);
    }
    body.theme-dark .m-hero-purple {
        background: var(--mc-hero-purple);
        border: 1px solid rgba(168, 85, 247, 0.25);
    }

    /* Generic .m-card picks up the subtle shadow in dark. */
    body.theme-dark .m-card {
        box-shadow: var(--mc-card-shadow);
    }

    /* Bottom-nav active icon — brand blue, not neon. */
    body.theme-dark .m-bottom-nav .active {
        color: var(--mc-accent);
    }

    /* Avatars — subtle ring so same-colour hashes don't vanish on same-colour cards. */
    body.theme-dark .m-avatar {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    /* Presence dots — ring colour flips to card bg so dot pops off the avatar. */
    body.theme-dark .m-presence-dot {
        box-shadow: 0 0 0 2px var(--mc-card);
    }

    /* Search field — lifted from page, not the card. */
    body.theme-dark .m-search-wrap {
        background: var(--mc-inset);
        border: 1px solid var(--mc-border);
    }
    body.theme-dark .m-search-input { color: var(--mc-text); }
    body.theme-dark .m-search-input::placeholder { color: var(--mc-muted); }

    /* Chips — inactive gain 1px border to carve out from dark bg. */
    body.theme-dark .m-chip {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--mc-border);
        color: var(--mc-text-sec);
    }
    body.theme-dark .m-chip.active {
        background: var(--mc-accent);
        border-color: var(--mc-accent);
        color: #fff;
    }

    /* Primary buttons on card — accent blue, not neon. */
    body.theme-dark .m-btn-primary {
        background: var(--mc-accent);
        color: #fff;
    }

    /* ─── Theme picker (Appearance section on /profile) ─────────────── */

    .m-theme-picker {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .m-theme-card {
        position: relative;
        border-radius: 10px;
        padding: 12px;
        border: 1.5px solid var(--mc-border);
        text-align: center;
        cursor: pointer;
        min-height: 80px;
        font-family: var(--mc-font);
    }
    .m-theme-card.light { background: #ffffff; color: #1a1b2e; border-color: #dcdee5; }
    .m-theme-card.dark  { background: #0a0b12; color: #f5f6fa; border-color: #252838; }
    .m-theme-card.active {
        border-color: var(--mc-accent);
        box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.2),
                    0 0 16px rgba(91, 140, 255, 0.3);
    }
    .m-theme-card .m-theme-preview {
        height: 28px;
        border-radius: 6px;
        margin-bottom: 8px;
        border: 1px solid rgba(0,0,0,0.08);
    }
    .m-theme-card.light .m-theme-preview { background: #f0f1f5; }
    .m-theme-card.dark  .m-theme-preview { background: #141622; border-color: #1c1f2c; }
    .m-theme-card .m-theme-name {
        font-size: 12px;
        font-weight: 700;
    }
    .m-theme-card.active::after {
        content: "✓";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--mc-accent);
        color: #fff;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {
    /* ==================================================================
       STAFF / LADIES PAGE — mobile card list
       ------------------------------------------------------------------
       Replaces the desktop .roster-table + .pitch-wrap with a dense,
       swipeable card list. The markup lives in _mobile_staff_list.html
       and is {% include %}'d at the top of roster.html's body block —
       this block hides the desktop views below 720px so both systems
       coexist without overlap.
    ================================================================== */

    /* Hide the desktop roster views on mobile. Whitelist approach —
       instead of enumerating every desktop child class (pitch-wrap,
       perf-table-wrap, captainSection, synergy-bar, venue-breakdown,
       lineup-toggle, alert banners…) which is error-prone and has
       already leaked a second roster through twice, we hide ALL
       direct children of .roster-page and only let the mobile UI
       and script/style tags render.
       Scoped to body:not(.force-desktop) so force-desktop mode can
       show the desktop content again — the unscoped selector had
       specificity (0,5,2) which no force-desktop rule could beat. */
    body:not(.force-desktop) .roster-page > *:not(.m-staff-wrap):not(.m-staff-fab):not(.m-staff-fab-wrap):not(script):not(style) {
        display: none !important;
    }
    /* show the mobile card list (hidden above 720px via default) */
    body:not(.force-desktop) .m-staff-wrap { display: block !important; }

    /* --- wrapper + head --- */
    .m-staff-wrap {
        padding: 0 0.25rem;
        font-family: var(--mc-font);
        color: var(--mc-text);
        background: var(--mc-bg);
        min-height: 100vh;
    }
    /* Ensure the roster-page background follows the mobile palette on
       phones — otherwise the desktop theme's body bg (classic purple,
       dark, chang green) leaks through as the outer page colour.
       Not applied in force-desktop mode — the theme bg is correct there. */
    body:not(.force-desktop) .roster-page { background: var(--mc-bg); }
    .m-staff-head { padding: 0.25rem 0.5rem 0.5rem; }
    .m-staff-title {
        font-size: 1.5rem; font-weight: 800;
        letter-spacing: -0.01em; margin: 0 0 0.15rem;
        color: var(--mc-text);
    }
    .m-staff-sub {
        font-size: 0.78rem; color: var(--mc-text-sec);
        margin-bottom: 0.5rem;
    }
    .m-staff-sub .m-warn {
        color: var(--mc-red); font-weight: 700;
    }

    /* --- filter chips --- */
    .m-staff-filters {
        display: flex; gap: 6px; overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.25rem 0.5rem 0.75rem;
        scrollbar-width: none;
    }
    .m-staff-filters::-webkit-scrollbar { display: none; }
    .m-chip {
        flex-shrink: 0;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        font-size: 0.72rem; font-weight: 700;
        background: var(--mc-card); color: var(--mc-text-sec);
        border: 1px solid var(--mc-border);
        cursor: pointer; white-space: nowrap;
    }
    .m-chip.active {
        background: var(--mc-accent);
        color: #fff; border-color: transparent;
    }
    .m-chip-sort { margin-left: auto; }

    /* --- section header --- */
    .m-staff-section { margin-bottom: 1rem; }
    .m-staff-section-head {
        display: flex; align-items: center; gap: 8px;
        padding: 0.75rem 0.5rem 0.5rem;
        position: sticky; top: 48px; /* sits below mobile-header */
        background: var(--mc-bg);
        z-index: 2;
    }
    .m-sec-icon { font-size: 0.95rem; }
    .m-sec-label {
        font-size: 0.68rem; font-weight: 800;
        letter-spacing: 0.1em; text-transform: uppercase;
        color: var(--mc-text-sec);
    }
    .m-sec-count {
        font-size: 0.7rem; font-weight: 700;
        color: var(--mc-muted);
        font-variant-numeric: tabular-nums;
    }
    .m-sec-action {
        margin-left: auto;
        background: transparent;
        border: 1px solid var(--mc-border);
        color: var(--mc-text-sec);
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        font-size: 0.65rem; font-weight: 700;
        cursor: pointer;
    }
    .m-sec-hire-btn {
        margin-left: auto;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        border: none; color: #fff;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        font-size: 0.7rem; font-weight: 700;
        cursor: pointer;
        min-height: 30px;
    }
    .m-fl-empty {
        display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
        padding: 1rem 0.75rem;
        border: 1px dashed var(--mc-border);
        border-radius: 12px;
        background: var(--mc-card);
        margin: 0 0.5rem;
    }
    .m-fl-empty-txt {
        font-size: 0.72rem; color: var(--mc-text-sec); text-align: center;
    }
    .m-fl-empty .m-sec-hire-btn { margin-left: 0; min-height: 36px; padding: 0.4rem 1rem; }

    /* --- card --- */
    .m-staff-card {
        position: relative;
        margin: 0 0.25rem 0.5rem;
        border-radius: 14px;
        overflow: hidden;
        background: transparent; /* the -body is the visible surface */
    }
    .m-card-body {
        position: relative;
        display: flex; gap: 10px;
        padding: 11px 12px 11px 14px;
        background: var(--mc-card);
        border: 1px solid var(--mc-border);
        border-radius: 14px;
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index: 2;
        align-items: flex-start;
    }
    .m-staff-card.m-open .m-card-body {
        box-shadow: -8px 0 16px rgba(0,0,0,0.10);
    }

    /* priority accent stripe — drawn on the card-body's left edge */
    .m-priority-captain   .m-card-body { box-shadow: inset 3px 0 0 var(--mc-gold),      0 0 8px rgba(255,215,0,0.25); }
    .m-priority-burnt     .m-card-body { box-shadow: inset 3px 0 0 var(--mc-red),       0 0 8px rgba(231,76,60,0.25); }
    .m-priority-overpaid  .m-card-body { box-shadow: inset 3px 0 0 var(--mc-red),       0 0 8px rgba(231,76,60,0.18); }
    .m-priority-hot       .m-card-body { box-shadow: inset 3px 0 0 var(--mc-green),     0 0 8px rgba(46,204,113,0.22); }

    /* --- portrait + rank --- */
    .m-portrait-wrap {
        position: relative; flex-shrink: 0;
    }
    .m-portrait {
        width: 44px; height: 44px; border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--mc-border);
        display: block;
    }
    .m-portrait-fallback {
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.3rem; background: var(--mc-card);
    }
    .m-portrait-fl     { border-color: var(--mc-green) !important; }
    .m-portrait-bench  { border-color: var(--mc-accent) !important; }
    .m-portrait-empty  { border-style: dashed !important; opacity: 0.6; }

    .m-rank {
        position: absolute; top: -5px; left: -5px;
        min-width: 18px; height: 18px;
        padding: 0 5px; border-radius: 999px;
        background: var(--mc-card); border: 1px solid var(--mc-border);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 9px; font-weight: 800; color: var(--mc-text-sec);
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    .m-rank-fl    { color: var(--mc-green); border-color: rgba(46,204,113,0.4); }
    .m-rank-bench { color: var(--mc-accent); border-color: rgba(52,152,219,0.4); }
    .m-card-cashier .m-rank { color: var(--mc-gold); border-color: rgba(255,215,0,0.4); }

    /* presence dot (reuses existing .presence-dot from _presence.html) */
    .m-portrait-wrap .presence-dot {
        position: absolute; bottom: 0; right: 0;
        box-shadow: 0 0 0 2px var(--mc-card);
    }

    /* --- card main (text content) --- */
    .m-card-main {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; gap: 3px;
    }
    .m-row-1 {
        display: flex; align-items: center; gap: 6px;
        min-width: 0;
    }
    .m-name {
        font-weight: 800; font-size: 0.95rem;
        letter-spacing: -0.005em;
        color: var(--mc-text);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 160px;
    }
    .m-name a { color: inherit; text-decoration: none; }
    .m-name a:hover { text-decoration: underline; }

    .m-card-menu {
        margin-left: auto;
        background: transparent; border: none;
        color: var(--mc-muted);
        font-size: 1.1rem; font-weight: 700;
        padding: 0 4px;
        cursor: pointer;
        line-height: 1;
    }

    /* tag pills (CAPT, BURNT, HOT, BENCH, LOYALTY…) */
    .m-tag {
        display: inline-flex; align-items: center; gap: 2px;
        padding: 1px 6px; border-radius: 999px;
        font-size: 9px; font-weight: 800;
        letter-spacing: 0.03em;
        white-space: nowrap;
        line-height: 1.4;
    }
    .m-tag-gold  { background: rgba(255,215,0,0.16);  color: var(--mc-gold); }
    .m-tag-red   { background: rgba(231,76,60,0.15);  color: var(--mc-red); }
    .m-tag-green { background: rgba(46,204,113,0.15); color: var(--mc-green); }
    .m-tag-blue  { background: rgba(52,152,219,0.15); color: var(--mc-accent); }
    .m-tag-loy   { background: rgba(46,204,113,0.75); color: #fff; }
    .m-tag-green-sub {
        background: rgba(46,204,113,0.08); color: var(--mc-green);
        border: 1px solid rgba(46,204,113,0.22);
    }

    .m-row-2 {
        display: flex; align-items: center; gap: 5px;
        font-size: 0.72rem;
        color: var(--mc-text-sec);
        min-width: 0;
    }
    .m-venue {
        color: var(--mc-muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 90px;
    }
    .m-sep { color: var(--mc-muted); }
    .m-paid { font-variant-numeric: tabular-nums; }
    .m-dim  { color: var(--mc-muted); }

    .m-mv-pill {
        display: inline-flex; align-items: center;
        padding: 1px 6px; border-radius: 999px;
        font-size: 10px; font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
    .m-mv-pill.up   { background: rgba(46,204,113,0.14); color: var(--mc-green); }
    .m-mv-pill.down { background: rgba(231,76,60,0.14);  color: var(--mc-red); }

    /* --- row 3 (data strip) --- */
    .m-row-3 {
        display: flex; align-items: center; gap: 8px;
        margin-top: 4px;
        min-width: 0;
    }
    .m-drinks {
        padding: 1px 6px; border-radius: 999px;
        font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .m-drinks-high   { background: rgba(46,204,113,0.14); color: var(--mc-green); }
    .m-drinks-medium { background: rgba(241,196,15,0.14); color: #b88a00; }
    .m-drinks-low    { background: rgba(231,76,60,0.14);  color: var(--mc-red); }

    .m-form-dots {
        display: inline-flex; gap: 3px; align-items: stretch;
    }
    /* Form pills — chunky bars instead of tiny dots so the
       red/amber/green pattern is readable at thumb-scroll
       distance. Old 7×7 circles read as a uniform grey row on
       low-DPI mobile screens (Jamie's complaint, 2026-04-27). */
    .m-form-dots i {
        width: 6px; height: 14px; border-radius: 2px;
        background: var(--mc-muted);
        display: inline-block;
    }
    /* Form-bar colours match the Captain picker + the scouting/returners
       heatmaps: high=green, medium=gold, low=red, present(worked, no sale)=blue,
       null/off=grey. Present MUST be blue (not gold) so it reads distinct from
       medium — the unified "present = blue" standard set 2026-05-25. See
       _mobile_staff_list.html form_dots macro. */
    .m-form-dots i.high    { background: var(--mc-green); }
    .m-form-dots i.med     { background: var(--mc-gold); }
    .m-form-dots i.low     { background: var(--mc-red); }
    .m-form-dots i.present { background: var(--mc-accent); }
    .m-form-dots i.off     { background: var(--mc-border); opacity: 0.5; }

    .m-fatigue { margin-left: auto; }
    .m-fatigue .fatigue-pill {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* --- coach note (own row under the data strip, full-width) --- */
    .m-coach-row {
        margin-top: 5px;
        padding: 3px 8px; border-radius: 6px;
        background: rgba(59,130,246,0.08); color: var(--mc-accent);
        font-size: 10.5px; font-weight: 600; font-style: italic;
        line-height: 1.3;
    }

    /* --- MV cost pill on bench (what she'd cost to activate) +
           freelancer claim fee. Gold = it's money, tabular-nums. --- */
    .m-mv-cost {
        display: inline-flex; align-items: center;
        padding: 0 6px; border-radius: 4px;
        background: rgba(184,134,11,0.10); color: var(--mc-gold);
        font-size: 10px; font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em; white-space: nowrap;
    }

    /* --- last-shift hint for bench rows --- */
    .m-last-shift {
        font-size: 10.5px; color: var(--mc-muted);
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }

    /* --- swipe actions underneath card-body --- */
    .m-card-actions {
        position: absolute; top: 0; right: 0; bottom: 0;
        display: flex;
        z-index: 1;
        border-radius: 14px;
        overflow: hidden;
    }
    .m-act {
        border: none;
        width: 72px;
        color: #fff;
        font-size: 11px; font-weight: 700;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        cursor: pointer;
        line-height: 1.1;
    }
    .m-act span { font-size: 1rem; }
    .m-act small {
        font-size: 9px; font-weight: 600; opacity: 0.85;
        font-variant-numeric: tabular-nums;
    }
    .m-act-train   { background: #9b59b6; }
    .m-act-replace { background: var(--mc-accent); }
    .m-act-swap    { background: #14b8a6; }
    .m-act-bench   { background: #0891b2; }
    .m-act-release { background: var(--mc-red); }
    .m-act-unbench { background: var(--mc-accent); }
    .m-act-transfer { background: var(--mc-purple); }
    .m-act-message { background: var(--mc-accent); }
    /* Slots-full Unbench: greyed + dimmed, mirroring desktop's
       .btn-unbench.blocked. Tapping shows the "slots full, Swap instead"
       helper (unbenchBlockedFromEl) instead of bouncing the harsh error.
       Specificity (.m-act.m-act-blocked) beats .m-act-unbench's accent bg. */
    .m-act.m-act-blocked { background: var(--mc-muted); opacity: 0.6; }

    /* Bench cards now carry up to 6 actions (Unbench + Swap + Replace +
       Train + Release + Transfer). 6 × 72px overflows a phone-width
       card, and the card's overflow:hidden clips the leftmost button —
       which was making the new Unbench invisible. Shrink bench-card
       action buttons so all six fit. */
    .m-card-bench .m-act {
        width: 58px;
        font-size: 10px;
    }
    .m-card-bench .m-act span { font-size: 14px; }
    .m-card-bench .m-act small { font-size: 8.5px; }

    /* --- empty slot ---
       Overrides `.m-empty { padding: 48px 24px 32px }` which is the
       page-level empty-state component's padding. When the same class
       lands on a staff card, that 48px top + 32px bottom stacks on the
       wrapper and blows the spacing out (each empty slot ~140px tall
       instead of ~68px). Zero the padding + text-align so the card
       renders with normal row spacing. */
    .m-staff-card.m-empty {
        padding: 0;
        text-align: left;
    }
    .m-staff-card.m-empty .m-card-body { opacity: 0.65; }
    .m-hire-inline {
        margin-left: auto; align-self: center;
        background: var(--mc-accent);
        color: #fff; border: none;
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        font-size: 0.72rem; font-weight: 700;
        cursor: pointer;
    }

    /* --- foot hint --- */
    .m-staff-foot {
        text-align: center;
        font-size: 0.68rem;
        color: var(--mc-muted);
        padding: 0.5rem 0 1.5rem;
    }

    /* --- Optimize roster FAB ---
       The wrap is the positioned container; the pill + close button are
       static inside it. Lets us stack an × without the pill shifting. #1
    */
    .m-staff-fab-wrap {
        position: fixed;
        right: 14px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 50;
        display: none;  /* shown only on .roster-page — see below */
        align-items: center; gap: 4px;
    }
    .m-staff-fab {
        position: static;
        padding: 0.72rem 1.1rem;
        border-radius: 999px;
        background: var(--mc-accent);
        color: #fff;
        border: none;
        font-size: 0.82rem; font-weight: 800;
        display: inline-flex; align-items: center; gap: 6px;
        box-shadow: 0 8px 22px color-mix(in srgb, var(--mc-accent) 50%, transparent),
                    0 0 0 1px rgba(255,255,255,0.08) inset;
        cursor: pointer;
    }
    .m-staff-fab span { font-size: 0.95rem; }
    .m-staff-fab-close {
        width: 28px; height: 28px; border-radius: 999px;
        border: 1px solid var(--mc-border);
        background: var(--mc-card); color: var(--mc-text-sec);
        font-size: 16px; line-height: 1; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    /* Show the wrap only on the roster page. */
    .roster-page ~ .m-staff-fab-wrap,
    .roster-page .m-staff-fab-wrap,
    body:has(.roster-page) .m-staff-fab-wrap { display: inline-flex; }
}

/* hide mobile staff list + FAB on the desktop band (wide AND tall) */
@media (min-width: 768px) and (min-height: 600px), (min-width: 768px) and (any-pointer: fine) {
    .m-staff-wrap,
    .m-staff-fab-wrap,
    .m-staff-fab { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Legacy mobile staff block hidden — the new /staff mobile UI now lives
   in _mobile_staff_list.html inside .roster-page. We keep the old wrapper
   in the template only so the captain/transfer overlays + staff sheet
   (all position:fixed) remain mounted and reachable by their existing JS.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {
    body .m-page.m-staff-page.m-only > *:not(#mCaptainOverlay):not(#mTransferOverlay):not(#mStaffSheet):not(#mStaffSheetBackdrop) {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Hard override for the swap/hire modals on mobile. The inline <style>
   block inside _hire_modal.html paints .swap-item with the desktop
   `--bg-input` token, which resolves to dark on most desktop themes —
   and the inline style block loads AFTER mobile.css, so even our earlier
   !important rules lose in some browsers. This block lives at the very
   end of mobile.css to guarantee it's the last word.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {
    body .swap-overlay .swap-list,
    body .swap-overlay .swap-list .swap-item,
    body .swap-overlay .swap-list .swap-row,
    body .swap-overlay .swap-list .hire-row,
    body .swap-overlay .swap-item.swap-girl-item {
        background: var(--mc-card) !important;
        border-color: var(--mc-border) !important;
        color: var(--mc-text) !important;
    }
    body .swap-overlay .swap-name,
    body .swap-overlay .swap-list .swap-name {
        color: var(--mc-text) !important;
    }
    body .swap-overlay .swap-venue,
    body .swap-overlay .swap-list .swap-venue {
        color: var(--mc-text-sec) !important;
    }
    body .swap-overlay .swap-cost,
    body .swap-overlay .swap-list .swap-cost {
        color: var(--mc-gold) !important;
    }
    body .swap-overlay .swap-avatar {
        border-color: var(--mc-border) !important;
    }
    /* Modal chrome: title + subtitle legible on the white modal bg */
    body .swap-overlay .swap-modal h3 {
        color: var(--mc-text) !important;
    }
    body .swap-overlay .swap-sub {
        color: var(--mc-text-sec) !important;
    }
    /* Heatmap cells inside the modal should match the mobile palette. */
    body .swap-overlay .heatmap-7d .cell {
        border-color: var(--mc-border-sub) !important;
    }
}

/* The @media (pointer: fine) desktop-forcing block was removed in the
   2026-06-25 viewport refactor. Viewport SIZE (the width+height bands) is
   now the single source of truth, so a mouse/trackpad no longer forces the
   desktop surface: a fine-pointer device in a narrow OR short window gets
   the mobile surface like any other small screen, and a user who wants the
   desktop UI uses ?ui=desktop (the force-desktop class below). This also
   retired the srv-mobile/srv-desktop served-surface machinery it relied on. */

/* ═══════════════════════════════════════════════════════════════════════
   Force-desktop override — when `body.force-desktop` is set (profile
   toggle "Ignore touch input"), suppress the `.m-*` mobile chrome and
   let the desktop CSS render responsively. The desktop stylesheet
   already handles narrow viewports: at `@media (max-width: 768px),
   (pointer: coarse)` it slides the sidebar off-screen and shows the
   `.hamburger` toggle (see style.css ~line 735). We just need to stop
   the `.mobile-header` / `.mobile-bottom-nav` / `.m-only` elements
   from showing on top.

   Core visibility rules fire at ALL widths so force-desktop stays
   consistent as the window resizes. The width-specific overrides
   (sidebar size, content gutter) fire only when wide enough to fit
   the full desktop shell.
   ═══════════════════════════════════════════════════════════════════════ */
body.force-desktop .m-only { display: none !important; }
/* Use display:block explicitly — revert/initial are unreliable when
   competing against an !important none from the (pointer:coarse) media
   query: revert can roll back to that cascaded none rather than the
   user-agent default. All .d-only wrappers are <div> elements so
   block is always correct here. */
body.force-desktop .d-only { display: block !important; }

/* Hide mobile-only chrome regardless of width. Pure mobile blocks
   (`.m-page`, `.m-hero`, etc.) should never surface in force-desktop
   mode — the desktop `.d-only` blocks carry the full UI. */
body.force-desktop .mobile-bottom-nav,
body.force-desktop .mobile-header,
body.force-desktop .mobile-more-sheet,
body.force-desktop .mobile-more-backdrop,
body.force-desktop .m-staff-fab-wrap,
body.force-desktop .m-staff-wrap,
body.force-desktop .m-page,
body.force-desktop .m-card,
body.force-desktop .m-hero,
body.force-desktop .m-subtabs,
body.force-desktop .m-stat-grid,
body.force-desktop .m-chips-row,
body.force-desktop .m-search-wrap { display: none !important; }

/* Undo mobile.css's body bg/color override so the desktop theme
   (classic/dark/chang) paints the page as it does on a real desktop.
   NOTE: the theme files define --bg-body (not --bg), so use that token. */
body.force-desktop {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* Re-show desktop chrome. Floating icons stay fixed in the top-right
   regardless of width so we want them on at every size. */
body.force-desktop .bar-header,
body.force-desktop .scan-bill-btn,
body.force-desktop .admin-cog-btn,
body.force-desktop .notif-bell { display: flex !important; }
body.force-desktop #adminSwitcher { display: inline-block !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Force-mobile override, the mirror of force-desktop. Set when the player
   chose "show me the mobile UI" (?ui=mobile -> ui_pref cookie -> body class).
   Shows the mobile surface + chrome and hides the desktop surface + chrome
   at ALL viewport sizes, beating the width/height bands by source order.
   The desktop-band hide of .m-only already excludes .force-mobile, so the
   mobile content keeps its natural display; we only need to hide .d-only,
   swap the chrome, and apply the mobile palette/spacing. On a wide-AND-tall
   screen the mobile component styling (scoped to the mobile band) does not
   fire, so the surface is "functional but untuned" there, which is the
   accepted trade-off for this niche override (the .m-page cap centres it).
   ═══════════════════════════════════════════════════════════════════════ */
body.force-mobile .d-only { display: none !important; }

/* Hide desktop chrome at every width. */
body.force-mobile .sidebar,
body.force-mobile .sidebar-backdrop,
body.force-mobile .section-tabs,
body.force-mobile .app-bar,
body.force-mobile .bar-header,
body.force-mobile .hamburger,
body.force-mobile .mobile-top-shield,
body.force-mobile #adminSwitcher { display: none !important; }

/* Show the mobile chrome the desktop-band rule would otherwise hide. */
body.force-mobile .mobile-header { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 900 !important; }
body.force-mobile .mobile-bottom-nav { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 900 !important; }

/* Mobile palette + content spacing so the surface is usable at any size. */
body.force-mobile {
    background: var(--mc-bg) !important;
    color: var(--mc-text) !important;
}
body.force-mobile .content {
    margin-left: 0 !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    padding-top: calc(56px + env(safe-area-inset-top) + 8px) !important;
}

/* --- Narrow force-desktop: rely on the desktop stylesheet's own
   hamburger + slide-out sidebar rules at `@media (max-width: 767px)`.
   We still need to force the sidebar to be `display: flex`
   (mobile.css flipped it to display:none) and show the hamburger,
   but leave the `transform: translateX(-100%)` that hides it
   off-screen ALONE. --- */
@media (max-width: 767px) {
    body.force-desktop .sidebar {
        display: flex !important;
        flex-direction: column !important;
    }
    body.force-desktop .hamburger,
    body.force-desktop .mobile-top-shield { display: flex !important; }
    /* Desktop CSS already zeroes content margin and adds top padding for
       the hamburger — nothing else needed here. */
}

/* --- Wide force-desktop: full two-column desktop layout. At ≥768px the
   desktop's own mobile rule doesn't fire, so we restore the fixed
   sidebar on the left and the content gutter beside it. --- */
@media (min-width: 768px) {
    body.force-desktop .content {
        margin-left: 220px !important;
        padding: 2rem !important;
        /* app-bar is fixed at top:0, height:56px — match the normal desktop
           padding-top (4rem ≈ 64px) so content sits clear of it. */
        padding-top: 4rem !important;
        padding-bottom: 2rem !important;
        max-width: none !important;
    }
    body.force-desktop .sidebar {
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        width: 220px !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        padding: 1.5rem 1rem !important;
        background: var(--bg-sidebar) !important;
        border-right: 1px solid var(--border) !important;
        z-index: 100 !important;
    }
    /* App-bar: fully fixed, starting after the sidebar — mirrors the
       `pointer: fine` desktop rule in style.css but applies here for
       pointer:coarse touch-laptop users who have force-desktop enabled.
       Without position:fixed the app-bar renders in-flow (left: has no
       effect), pushing content down and leaving the mobile-top-shield
       (which is full-width) to block the sidebar top. */
    body.force-desktop .app-bar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 220px !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 900 !important;
        background: var(--bg-card) !important;
        border-bottom: 1px solid var(--border) !important;
        align-items: center !important;
        padding: 0 1rem !important;
    }
    /* Re-enable pointer events on the bar-switcher inside the app-bar.
       The coarse media query never fires the pointer:fine style.css rule
       that sets .app-bar-bar-wrap { pointer-events: auto }, so we must
       do it here. */
    body.force-desktop .app-bar-bar-wrap {
        pointer-events: auto !important;
        position: relative !important;
    }
    /* Mobile-top-shield is a full-viewport-width fixed bar (z-index 1050)
       used on narrow/touch layouts. At wide widths with the proper fixed
       app-bar above, it must be hidden — otherwise it bleeds over the
       left sidebar (which has z-index 100). */
    body.force-desktop .mobile-top-shield {
        display: none !important;
    }
    body.force-desktop .section-tabs { display: flex !important; }
    body.force-desktop .hamburger { display: none !important; }
}

/* =============================================================
   Onboarding mobile primitives — /create, /select-cashier, /draft
   Shared .m-onb-* components + per-page overrides.
   Scoped strictly under @media (max-width: 767px).
   Uses existing --mc-* tokens; no new tokens introduced.
   ============================================================= */
@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {

    /* ---------- shared hero + sticky CTA ---------- */
    .m-onb-hero {
        padding: 18px 16px 14px;
        background: var(--mc-bg);
    }
    .m-onb-hero h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1.15;
        color: var(--mc-text);
    }
    .m-onb-hero .m-onb-sub {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 1.45;
        color: var(--mc-text-sec);
    }

    .m-onb-sticky-cta {
        position: sticky;
        bottom: 0;
        z-index: 30;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--mc-bg);
        border-top: 1px solid var(--mc-border-sub);
        box-shadow: 0 -4px 16px rgba(15, 30, 50, 0.04);
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 16px;
    }
    .m-onb-sticky-cta .m-onb-meta {
        flex: 0 1 auto;
        min-width: 0;
        line-height: 1.15;
    }
    .m-onb-sticky-cta .m-onb-meta-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--mc-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .m-onb-sticky-cta .m-onb-meta-value {
        font-size: 15px;
        font-weight: 800;
        color: var(--mc-text);
        font-variant-numeric: tabular-nums;
    }
    .m-onb-sticky-cta .m-onb-primary {
        flex: 1 1 auto;
        min-height: 52px;
        padding: 14px 20px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        color: #fff;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
        text-align: center;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .m-onb-sticky-cta .m-onb-primary:disabled,
    .m-onb-sticky-cta .m-onb-primary[aria-disabled="true"] {
        background: var(--mc-inset);
        color: var(--mc-muted);
        box-shadow: none;
        cursor: not-allowed;
    }
    .m-onb-sticky-cta[data-m-onb-hide="1"] { display: none !important; }

    /* Segmented tab strip (in-page content switch — NOT section nav). */
    .m-onb-tabs {
        display: flex;
        margin: 0 16px 14px;
        background: var(--mc-inset);
        border-radius: 12px;
        padding: 4px;
        gap: 2px;
    }
    .m-onb-tab {
        flex: 1;
        border: 0;
        min-height: 40px;
        padding: 8px 10px;
        background: transparent;
        color: var(--mc-text-sec);
        font-family: inherit;
        font-weight: 700;
        font-size: 13px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .m-onb-tab[aria-selected="true"] {
        background: var(--mc-bg);
        color: var(--mc-text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    /* 10-slot progress pips (drops into .m-hero-blue on /draft). */
    .m-onb-ticks {
        display: flex;
        gap: 4px;
        margin: 10px 0 0;
    }
    .m-onb-ticks span {
        flex: 1;
        height: 6px;
        border-radius: 99px;
        background: rgba(255, 255, 255, 0.2);
    }
    .m-onb-ticks span[data-on="1"] {
        background: #fff;
    }

    /* ---------- /create — tabs swap between Build / Buy ---------- */
    .create-page {
        margin: 0 !important;
        padding: 0 0 16px !important;
        max-width: none !important;
        /* Prevent any rogue child (chip-row, absolute btns) from extending
           past the viewport and creating a horizontal scroll that makes
           the right side appear to have more padding than the left. */
        overflow-x: hidden;
    }
    .create-page > h1,
    .create-page > .subtitle {
        display: none; /* replaced by .m-onb-hero injected by the template */
    }
    .create-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        /* Desktop sets `align-items: start` which, in a flex column,
           collapses each child to its content width instead of stretching
           across the viewport — causes massive right-side whitespace. */
        align-items: stretch !important;
    }
    .create-panel,
    .market-panel {
        display: none !important;
        margin: 0 16px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        height: auto !important;
    }
    .create-layout[data-m-onb-tab="build"] .create-panel { display: block !important; }
    .create-layout[data-m-onb-tab="buy"]   .market-panel  { display: flex !important; flex-direction: column; }

    .create-panel > h2,
    .create-panel > .panel-sub,
    .market-panel > h2,
    .market-panel > .panel-sub {
        display: none !important;
    }

    .step-section { margin-bottom: 18px; }
    .step-label {
        font-size: 12px;
        font-weight: 800;
        color: var(--mc-text-sec);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 8px;
        gap: 0;
    }
    .step-label .step-num { display: none; }

    .create-panel form > .step-section:first-of-type > div[style*="display:flex"] {
        gap: 0 !important;
        position: relative;
    }
    .bar-name-input {
        width: 100%;
        min-height: 52px;
        padding: 0 56px 0 16px !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--mc-border) !important;
        background: var(--mc-bg) !important;
        color: var(--mc-text) !important;
        font-size: 16px !important;
        font-weight: 600;
        box-sizing: border-box;
    }
    #surpriseMeBtn {
        position: absolute !important;
        right: 6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--mc-inset) !important;
        color: var(--mc-accent) !important;
        font-size: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }
    #surpriseMeBtn::before {
        content: "🎲";
        font-size: 18px;
    }

    /* Colour grid → 3-col swatch tiles */
    .create-panel .colour-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .create-panel .colour-option {
        width: auto !important;
        height: auto !important;
        aspect-ratio: auto !important;
        border-radius: 12px !important;
        border: 2px solid var(--mc-border) !important;
        padding: 0 0 22px !important;
        overflow: hidden !important;
        transform: none !important;
        position: relative !important;
        /* Preserve the inline gradient bg the template paints. */
    }
    .create-panel .colour-option.selected {
        border-color: var(--mc-accent) !important;
        transform: none !important;
    }
    .create-panel .colour-option::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 22px;
        background: var(--mc-bg);
        border-top: 1px solid var(--mc-border-sub);
    }
    .create-panel .colour-option .colour-name {
        position: absolute !important;
        bottom: 4px;
        left: 0;
        right: 0;
        transform: none !important;
        font-size: 10px !important;
        font-weight: 700;
        color: var(--mc-text-sec);
        text-align: center;
        white-space: normal;
        line-height: 1.2;
        z-index: 1;
    }
    .create-panel .colour-option.selected .colour-name { color: var(--mc-accent); }
    /* Force a minimum visible swatch height above the name strip. */
    .create-panel .colour-option {
        min-height: 58px;
    }

    /* Logo grid → 6-col emoji tiles */
    .create-panel .logo-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }
    .create-panel .logo-option {
        width: auto !important;
        aspect-ratio: 1 / 1;
        height: auto !important;
        border-radius: 10px !important;
        background: var(--mc-bg) !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    .create-panel .logo-option .icon { font-size: 22px !important; }
    .create-panel .logo-option .label { display: none !important; }
    .create-panel .logo-option.selected {
        background: color-mix(in srgb, var(--mc-accent) 8%, var(--mc-bg)) !important;
        border-color: var(--mc-accent) !important;
    }

    /* Personality fieldset — collapsible */
    .personality-section {
        margin-top: 6px !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
    }
    .m-onb-personalise-toggle {
        width: 100%;
        min-height: 48px;
        border: 1.5px solid var(--mc-border-sub);
        border-radius: 12px;
        background: var(--mc-bg);
        color: var(--mc-text);
        font-family: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        gap: 8px;
        list-style: none;
    }
    .m-onb-personalise-toggle::-webkit-details-marker { display: none; }
    .m-onb-personalise-toggle .m-onb-chev {
        color: var(--mc-muted);
        font-size: 14px;
        transition: transform 0.2s;
    }
    details.personality-section[open] .m-onb-personalise-toggle .m-onb-chev {
        transform: rotate(180deg);
    }
    .m-onb-personalise-body {
        margin-top: 10px;
        padding: 14px;
        border: 1.5px solid var(--mc-border-sub);
        border-radius: 12px;
        background: var(--mc-bg);
        /* Contain children (chip rows scroll internally). Without this,
           the chip-row's negative margin leaks out and the whole page
           gets a horizontal scroll, making everything appear off-centre. */
        overflow: hidden;
        box-sizing: border-box;
        max-width: 100%;
    }
    .create-panel .personality-label {
        font-size: 11px !important;
        font-weight: 800;
        color: var(--mc-muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 6px;
    }
    .create-panel .chip-row {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0;
        padding: 2px 0;
        min-width: 0;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .create-panel .chip-row::-webkit-scrollbar { display: none; }
    .create-panel .chip-option {
        flex-shrink: 0;
        padding: 7px 12px !important;
        min-height: 32px;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    /* Hide the in-form submit — sticky CTA replaces it on mobile. */
    .create-panel .submit-btn { display: none !important; }

    /* Buy-a-bar side */
    .market-panel {
        padding: 0 !important;
        gap: 10px;
    }
    .market-panel .balance-note {
        margin: 10px 0 0 !important;
        padding: 10px 12px !important;
        border-radius: 10px;
        background: color-mix(in srgb, var(--mc-gold) 8%, var(--mc-bg)) !important;
        border: 1px solid var(--mc-border-sub);
        font-size: 12px;
    }
    .market-panel .listing-list {
        padding: 0 !important;
        margin: 0 !important;
        gap: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .market-panel .listing-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        background: var(--mc-bg) !important;
        border: 1px solid var(--mc-border-sub) !important;
        gap: 10px !important;
    }
    .market-panel .listing-logo {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    .market-panel .listing-info h4 { font-size: 14px !important; }
    .market-panel .listing-info .listing-meta,
    .market-panel .listing-info .seller { font-size: 11px !important; }
    .market-panel .listing-price { font-size: 14px !important; }
    .market-panel .buy-bar-btn {
        min-height: 36px;
        padding: 0 14px !important;
        font-size: 11px !important;
    }

    /* ---------- /select-cashier ---------- */
    .cashier-page {
        margin: 0 !important;
        padding: 0 0 16px !important;
        max-width: none !important;
    }
    .cashier-page > h1,
    .cashier-page > .subtitle {
        display: none; /* replaced by .m-onb-hero */
    }
    .cashier-page .balance-header {
        margin: 0 16px 10px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        background: var(--mc-inset) !important;
        border: 1px solid var(--mc-border-sub) !important;
    }
    .cashier-page .balance-header .amount {
        font-size: 15px !important;
        color: var(--mc-gold) !important;
        font-variant-numeric: tabular-nums;
    }
    .cashier-page #pickBestCashierBtn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        white-space: nowrap;
    }
    .cashier-page .sort-controls {
        padding: 2px 16px 6px !important;
        margin: 0 0 8px !important;
        display: flex !important;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cashier-page .sort-controls::-webkit-scrollbar { display: none; }
    .cashier-page .sort-controls .sort-label { display: none; }
    .cashier-page .sort-controls .sort-btn {
        flex-shrink: 0;
        padding: 7px 12px !important;
        min-height: 32px;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        border: 1.5px solid var(--mc-border) !important;
        background: var(--mc-bg) !important;
        color: var(--mc-text-sec) !important;
        white-space: nowrap;
    }
    .cashier-page .sort-controls .sort-btn.active {
        border-color: var(--mc-accent) !important;
        color: var(--mc-accent) !important;
        background: color-mix(in srgb, var(--mc-accent) 10%, transparent) !important;
    }
    /* Venue filter chips — same horizontal scroll-row treatment as the
       sort controls above. */
    .cashier-page .venue-filters {
        padding: 2px 16px 6px !important;
        margin: 0 0 4px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cashier-page .venue-filters::-webkit-scrollbar { display: none; }
    .cashier-page .venue-filters .venue-filter {
        flex-shrink: 0;
        padding: 7px 12px !important;
        min-height: 32px;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        border: 1.5px solid var(--mc-border) !important;
        background: var(--mc-bg) !important;
        color: var(--mc-text-sec) !important;
        white-space: nowrap;
    }
    .cashier-page .venue-filters .venue-filter.active {
        border-color: var(--mc-accent) !important;
        color: var(--mc-accent) !important;
        background: color-mix(in srgb, var(--mc-accent) 10%, transparent) !important;
    }
    .cashier-page .cashier-grid {
        padding: 0 16px !important;
        gap: 8px !important;
    }
    .cashier-page .cashier-card {
        width: 100%;
        min-height: 72px;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        border: 1.5px solid var(--mc-border-sub) !important;
        background: var(--mc-bg) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .cashier-page .cashier-card:hover {
        transform: none !important;
    }
    .cashier-page .cashier-portrait,
    .cashier-page .cashier-portrait-placeholder {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0;
        font-size: 18px;
    }
    .cashier-page .cashier-info { flex: 1; min-width: 0; }
    .cashier-page .cashier-info h3 {
        font-size: 15px !important;
        font-weight: 800;
        margin: 0 !important;
        color: var(--mc-text);
    }
    .cashier-page .venue-tag {
        display: inline-block !important;
        margin: 2px 0 0 !important;
        padding: 1px 8px !important;
        font-size: 10px !important;
        font-weight: 700;
        border-radius: 99px;
    }
    .cashier-page .cashier-stats {
        gap: 8px !important;
        margin-top: 4px;
    }
    .cashier-page .cashier-stats .stat { font-size: 11px !important; }
    .cashier-page .cashier-card > div:last-child {
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
        flex-shrink: 0;
        width: auto !important;
    }
    .cashier-page .cost {
        font-size: 13px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        font-variant-numeric: tabular-nums;
    }
    .cashier-page .cost::after {
        content: " / yr";
        color: var(--mc-muted);
        font-size: 10px;
        font-weight: 600;
    }
    .cashier-page .select-btn {
        min-height: 32px !important;
        padding: 4px 12px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
    }
}

/* Dark-mode polish — onboarding sticky CTA shadow too pale on dark bg. */
@media (max-width: 767px), (max-height: 599px) and (not (any-pointer: fine)) {
    body.theme-dark .m-onb-sticky-cta {
        border-top-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    }
    body.theme-dark .m-onb-tab[aria-selected="true"] {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   /upgrades — mobile redesign primitives (.m-up-*)
   Mirrors the desktop .up-* layout but tuned for mobile (horizontal-scroll
   capacity rail, collapsed prestige + danger zone, accordion customisation,
   tile-per-upgrade grid).  Uses existing --mc-* tokens per MOBILE_DESIGN_SPEC.
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero card with capacity rail */
.m-up-hero {
    position: relative;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-top: 12px;
}
.m-up-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(380px 180px at 100% -30%, color-mix(in srgb, var(--mc-gold) 16%, transparent), transparent 60%);
}
.m-up-hero-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--mc-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.m-up-hero-eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mc-accent);
}
.m-up-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--mc-text);
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 4px 0 0;
    position: relative;
}
.m-up-hero-sub {
    font-size: 0.78rem;
    color: var(--mc-text-sec);
    margin-top: 4px;
    position: relative;
}
.m-up-bal-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--mc-border-sub);
    position: relative;
}
.m-up-bal-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--mc-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.m-up-bal-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--mc-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
.m-up-3d {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mc-accent) 30%, transparent);
    min-height: 36px;
    flex-shrink: 0;
}

/* Capacity rail — horizontal scroll on mobile */
.m-up-rail {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    position: relative;
}
.m-up-rail::-webkit-scrollbar { display: none; }
.m-up-kpi {
    flex: 0 0 auto;
    min-width: 110px;
    padding: 10px 12px;
    border: 1px solid var(--mc-border-sub);
    border-radius: 10px;
    background: var(--mc-inset);
}
.m-up-kpi .lbl {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--mc-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.m-up-kpi .val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--mc-text);
    margin-top: 3px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.m-up-kpi .val.good { color: var(--mc-green); }
.m-up-kpi .val.blue { color: var(--mc-accent); }
.m-up-kpi .val.muted { color: var(--mc-text-sec); }
.m-up-kpi .sub {
    font-size: 0.62rem;
    color: var(--mc-muted);
    margin-top: 2px;
}

/* Recommended-next callout */
.m-up-recco {
    position: relative;
    border-radius: 14px;
    padding: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc-gold) 14%, var(--mc-card)), color-mix(in srgb, var(--mc-gold) 6%, var(--mc-card)));
    border: 1px solid color-mix(in srgb, var(--mc-gold) 38%, var(--mc-border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mc-gold) 16%, transparent);
}
.m-up-recco::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--mc-gold) 18%, transparent), transparent 60%);
}
.m-up-recco .pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--mc-gold);
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
}
.m-up-recco h3 {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--mc-gold);
    margin: 6px 0 0;
    position: relative;
}
.m-up-recco .body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    position: relative;
}
.m-up-recco .ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc-gold) 30%, var(--mc-card)), color-mix(in srgb, var(--mc-gold) 14%, var(--mc-card)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc-gold) 30%, transparent);
}
.m-up-recco .info { flex: 1; min-width: 0; }
.m-up-recco .nm {
    font-size: 1rem;
    font-weight: 800;
    color: var(--mc-text);
    line-height: 1.15;
}
.m-up-recco .ds {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    margin-top: 4px;
    line-height: 1.35;
}
.m-up-recco .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 0.68rem;
}
.m-up-recco .pb { color: var(--mc-green); font-weight: 700; }
.m-up-recco .ow { color: var(--mc-muted); font-weight: 600; }
.m-up-recco .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--mc-gold) 30%, transparent);
    position: relative;
}
.m-up-recco .pr {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--mc-gold);
    font-variant-numeric: tabular-nums;
}
.m-up-recco-btn {
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-orange));
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border: 0;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mc-gold) 35%, transparent);
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 40px;
}

/* Prestige collapsed details — purple/gold marquee */
.m-up-prestige {
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #4c1d95 0%, #1e1b4b 60%, #0f172a 100%);
    border: 1px solid #5b21b6;
    box-shadow: 0 4px 14px rgba(76, 29, 149, 0.30);
    position: relative;
}
.m-up-prestige::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px 200px at 100% -20%, rgba(245,158,11,0.18), transparent 60%);
}
.m-up-prestige > summary {
    list-style: none;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
}
.m-up-prestige > summary::-webkit-details-marker { display: none; }
.m-up-prestige .crown {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid rgba(245, 158, 11, 0.36);
    flex-shrink: 0;
}
.m-up-prestige .ttl { flex: 1; min-width: 0; }
.m-up-prestige .ttl .h {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.15;
}
.m-up-prestige .ttl .l {
    font-size: 0.66rem;
    opacity: 0.7;
    margin-top: 2px;
}
.m-up-prestige .gain-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.40);
    color: #86efac;
    font-size: 0.74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.m-up-prestige .chev {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    transition: transform 200ms;
}
.m-up-prestige[open] .chev { transform: rotate(180deg); }
.m-up-prestige .body {
    padding: 0 14px 14px;
    position: relative;
}
.m-up-prestige .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.m-up-prestige .stat .lb {
    font-size: 0.56rem;
    font-weight: 700;
    opacity: 0.55;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.m-up-prestige .stat .vl {
    font-size: 1rem;
    font-weight: 900;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.m-up-prestige .stat .vl.gain { color: #86efac; }
.m-up-prestige .stat .vl.gold { color: #fbbf24; }
.m-up-prestige .checklist {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.m-up-prestige .cl-hd {
    font-size: 0.62rem;
    font-weight: 800;
    color: #86efac;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.m-up-prestige .cri {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.m-up-prestige .cri:last-child { border-bottom: 0; }
.m-up-prestige .cri .mk {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.20);
    color: #86efac;
    font-size: 0.6rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.m-up-prestige .cri.pending .mk {
    background: rgba(248, 113, 113, 0.20);
    color: #fca5a5;
}
.m-up-prestige .cri .lb { flex: 1; min-width: 0; opacity: 0.85; }
.m-up-prestige .cri.ok .lb {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.30);
    opacity: 0.55;
}
.m-up-prestige .cri .pg {
    font-size: 0.66rem;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}
.m-up-prestige .ret {
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #9b59b6, #f1c40f);
    color: #fff;
    font-weight: 800;
    font-size: 0.86rem;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(155, 89, 182, 0.35);
    font-family: var(--mc-font);
    min-height: 48px;
}
.m-up-prestige .ret:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    box-shadow: none;
}
.m-up-prestige .pre {
    font-size: 0.66rem;
    opacity: 0.65;
    text-align: center;
    margin-top: 8px;
}

/* Bar completion strip */
.m-up-bc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m-up-bc .em {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mc-gold) 14%, transparent);
    color: var(--mc-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--mc-gold) 30%, transparent);
}
.m-up-bc .mid { flex: 1; min-width: 0; }
.m-up-bc .row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.m-up-bc .ttl {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-bc .ct {
    font-size: 0.66rem;
    color: var(--mc-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.m-up-bc .pct {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--mc-green);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.m-up-bc .bar {
    margin-top: 5px;
    height: 5px;
    border-radius: 3px;
    background: var(--mc-inset);
    overflow: hidden;
}
.m-up-bc .fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-gold));
}
.m-up-bc .tier {
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mc-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc-gold) 28%, transparent);
    color: var(--mc-orange);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Owned banner */
.m-up-owned {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--mc-green) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc-green) 22%, transparent);
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--mc-text-sec);
}
.m-up-owned .em {
    color: var(--mc-green);
    font-weight: 800;
    flex-shrink: 0;
}
.m-up-owned b {
    color: var(--mc-text);
    font-weight: 800;
}

/* Category header */
.m-up-cat-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 2px;
    margin-top: 6px;
}
.m-up-cat-hd .ic {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.m-up-cat-hd .ic.cap {
    background: color-mix(in srgb, var(--mc-accent) 12%, transparent);
    color: var(--mc-accent);
}
.m-up-cat-hd .ic.com {
    background: color-mix(in srgb, var(--mc-red) 10%, transparent);
    color: var(--mc-red);
}
.m-up-cat-hd .ic.cos {
    background: color-mix(in srgb, var(--mc-purple) 12%, transparent);
    color: var(--mc-purple);
}
.m-up-cat-hd .ic.real {
    background: color-mix(in srgb, var(--mc-gold) 14%, transparent);
    color: var(--mc-orange);
}
.m-up-cat-hd .ic.trn {
    background: color-mix(in srgb, var(--mc-accent) 14%, transparent);
    color: var(--mc-accent);
}
.m-up-cat-hd .admin-flag {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mc-red) 14%, transparent);
    color: var(--mc-red);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Active-ride picker — chip-style row above the Transport tiles. Mirrors
   the .m-chip pattern but rendered as <button> for form-submit. 44px
   min-height to satisfy the tap-target rule from CLAUDE.md. */
.m-ride-pick {
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--mc-card);
    margin: 6px 0 10px;
}
.m-ride-pick-h {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.m-ride-pick-h strong {
    font-size: 0.78rem;
    color: var(--mc-text);
    font-weight: 700;
}
.m-ride-pick-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.m-ride-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--mc-border);
    background: var(--mc-card);
    color: var(--mc-text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.m-ride-pick-btn.active {
    border-color: var(--mc-accent);
    background: color-mix(in srgb, var(--mc-accent) 10%, transparent);
}
.m-ride-pick-btn .on {
    font-size: 0.62rem;
    color: var(--mc-accent);
    font-weight: 800;
    margin-left: 2px;
}
.m-up-cat-hd h2 {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--mc-text);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.m-up-cat-hd .ct {
    margin-left: auto;
    font-size: 0.66rem;
    color: var(--mc-muted);
    font-weight: 700;
}

/* Tile — single upgrade card, mobile spacing */
.m-up-tile {
    position: relative;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m-up-tile.maxed {
    background: color-mix(in srgb, var(--mc-green) 4%, var(--mc-card));
    border-color: color-mix(in srgb, var(--mc-green) 24%, var(--mc-border));
}
.m-up-tile.recco {
    border-color: color-mix(in srgb, var(--mc-gold) 38%, var(--mc-border));
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mc-gold) 14%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-gold) 8%, var(--mc-card)), var(--mc-card));
}
.m-up-tile.locked { opacity: 0.62; }
.m-up-tile.free {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-green) 8%, var(--mc-card)), var(--mc-card));
    border-color: color-mix(in srgb, var(--mc-green) 28%, var(--mc-border));
}
.m-up-tile-pin {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mc-gold);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.m-up-tile-pin.green { background: var(--mc-green); }
.m-up-tile-top {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.m-up-tile-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--mc-inset);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    border: 1px solid var(--mc-border-sub);
}
.m-up-tile.recco .m-up-tile-ic {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc-gold) 22%, var(--mc-card)), color-mix(in srgb, var(--mc-gold) 10%, var(--mc-card)));
    border-color: color-mix(in srgb, var(--mc-gold) 35%, var(--mc-border));
}
.m-up-tile.maxed .m-up-tile-ic {
    background: color-mix(in srgb, var(--mc-green) 10%, var(--mc-card));
    border-color: color-mix(in srgb, var(--mc-green) 28%, var(--mc-border));
}
.m-up-tile-info { flex: 1; min-width: 0; }
.m-up-tile-info .nm {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--mc-text);
    line-height: 1.2;
}
.m-up-tile-info .ds {
    font-size: 0.72rem;
    color: var(--mc-text-sec);
    line-height: 1.35;
    margin-top: 3px;
}
.m-up-tile-meta {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    flex-wrap: wrap;
}
.m-up-tile-meta .pb { color: var(--mc-green); font-weight: 700; }
.m-up-tile-meta .ow { color: var(--mc-muted); font-weight: 600; }
.m-up-tile-meta .ow b { color: var(--mc-text); font-weight: 800; }
.m-up-tile-meta .lk {
    color: var(--mc-red);
    font-weight: 700;
}
.m-up-tile-prog {
    height: 4px;
    border-radius: 2px;
    background: var(--mc-inset);
    overflow: hidden;
}
.m-up-tile-prog i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-gold));
}
.m-up-tile-prog.done i {
    background: linear-gradient(90deg, var(--mc-green), color-mix(in srgb, var(--mc-green) 70%, white));
}
.m-up-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed var(--mc-border-sub);
    gap: 10px;
}
.m-up-tile-foot .pr {
    font-size: 1rem;
    font-weight: 900;
    color: var(--mc-gold);
    font-variant-numeric: tabular-nums;
}
.m-up-tile-foot .pr.muted {
    color: var(--mc-muted);
    font-size: 0.85rem;
}
.m-up-tile-foot .pr.free { color: var(--mc-green); }
.m-up-btn {
    padding: 9px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    color: #fff;
    font-weight: 800;
    font-size: 0.74rem;
    border: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-accent) 30%, transparent);
    cursor: pointer;
    letter-spacing: 0.02em;
    min-width: 72px;
    min-height: 38px;
    font-family: var(--mc-font);
}
.m-up-btn.gold {
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-orange));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-gold) 30%, transparent);
}
.m-up-btn.green {
    background: linear-gradient(135deg, var(--mc-green), color-mix(in srgb, var(--mc-green) 75%, black));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--mc-green) 25%, transparent);
}
.m-up-btn:disabled,
.m-up-btn.dis {
    background: var(--mc-inset);
    color: var(--mc-muted);
    box-shadow: none;
    cursor: not-allowed;
}

/* Customisation card with accordion sections */
.m-up-cust {
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.m-up-cust-h h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-cust-h .sub {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    margin-top: 3px;
}
.m-up-acc {
    border-top: 1px solid var(--mc-border-sub);
    padding-top: 12px;
}
.m-up-acc:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.m-up-acc > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
    min-height: 36px;
}
.m-up-acc > summary::-webkit-details-marker { display: none; }
.m-up-acc .lbl {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mc-text);
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.m-up-acc .lbl .b {
    font-size: 0.6rem;
    color: var(--mc-muted);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--mc-inset);
    margin-left: 4px;
}
.m-up-acc .pick {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-up-acc .pick .sw {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.m-up-acc .chev {
    color: var(--mc-muted);
    transition: transform 200ms;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.m-up-acc[open] .chev { transform: rotate(180deg); }
.m-up-acc .body { margin-top: 10px; }

/* Chip rows used inside accordions */
.m-up-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.m-up-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border-sub);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--mc-text);
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 38px;
}
.m-up-chip.sel {
    background: color-mix(in srgb, var(--mc-accent) 10%, transparent);
    border-color: var(--mc-accent);
    color: var(--mc-accent);
    font-weight: 800;
}
.m-up-chip .e { font-size: 0.95rem; }
.m-up-chip .sw {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Hype-board poster row inside Customisation accordion */
.m-up-poster-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border-sub);
}
.m-up-poster {
    width: 56px;
    height: 78px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    object-fit: cover;
}
.m-up-poster-info {
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    line-height: 1.4;
}
.m-up-poster-info .nm {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--mc-text);
    margin-bottom: 3px;
}
.m-up-poster-btn {
    margin-top: 8px;
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mc-text);
    cursor: pointer;
    font-family: var(--mc-font);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 36px;
}

/* Status cosmetics block (motto + founder title) */
.m-up-cos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.m-up-cos-h h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-cos-h .sub {
    font-size: 0.74rem;
    color: var(--mc-text-sec);
    margin-top: 3px;
}
.m-up-cos-block {
    padding-top: 12px;
    border-top: 1px solid var(--mc-border-sub);
}
.m-up-cos-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}
.m-up-cos-block .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.m-up-cos-block .nm {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-cos-block .pr {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-gold);
    font-variant-numeric: tabular-nums;
}
.m-up-cos-block .pr.unlocked {
    color: var(--mc-green);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.m-up-cos-block .ds {
    font-size: 0.72rem;
    color: var(--mc-text-sec);
    margin-top: 4px;
    line-height: 1.4;
}
.m-up-cos-input-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.m-up-cos-input {
    flex: 1;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border);
    font-size: 0.85rem;
    color: var(--mc-text);
    font-family: var(--mc-font);
    outline: none;
    min-height: 40px;
}
.m-up-cos-input:focus { border-color: var(--mc-accent); }
.m-up-cos-go {
    padding: 0 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mc-gold), var(--mc-orange));
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border: 0;
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 40px;
}
.m-up-title-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.m-up-title-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--mc-inset);
    border: 1px solid var(--mc-border-sub);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--mc-text);
    cursor: pointer;
    font-family: var(--mc-font);
    min-height: 38px;
}
.m-up-title-pill.sel {
    background: color-mix(in srgb, var(--mc-gold) 14%, transparent);
    border-color: var(--mc-gold);
    color: var(--mc-orange);
    font-weight: 800;
}

/* Danger zone collapsed details */
.m-up-danger {
    background: var(--mc-card);
    border: 1px solid color-mix(in srgb, var(--mc-red) 25%, var(--mc-border));
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.m-up-danger > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    min-height: 48px;
}
.m-up-danger > summary::-webkit-details-marker { display: none; }
.m-up-danger .em {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mc-red) 10%, transparent);
    color: var(--mc-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--mc-red) 22%, transparent);
}
.m-up-danger .ttl {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-red);
}
.m-up-danger .sub {
    font-size: 0.7rem;
    color: var(--mc-muted);
    font-weight: 600;
}
.m-up-danger .chev {
    color: var(--mc-muted);
    transition: transform 200ms;
    margin-left: auto;
}
.m-up-danger[open] .chev { transform: rotate(180deg); }
.m-up-danger .body { padding: 0 14px 14px; }
.m-up-sell {
    background: var(--mc-inset);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    padding: 11px;
}
.m-up-sell .nm {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mc-text);
}
.m-up-sell .ds {
    font-size: 0.7rem;
    color: var(--mc-text-sec);
    margin-top: 2px;
}
.m-up-sell-form {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: stretch;
}
.m-up-sell-form .ipt {
    flex: 1;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--mc-card);
    border: 1px solid var(--mc-border);
    font-size: 0.85rem;
    color: var(--mc-text);
    outline: none;
    font-family: var(--mc-font);
    min-height: 40px;
}
.m-up-sell-form .list-btn {
    padding: 0 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mc-red), #b91c1c);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
    border: 0;
    cursor: pointer;
    letter-spacing: 0.04em;
    font-family: var(--mc-font);
    min-height: 40px;
}

/* Cert filter — HIDE. The cert-filter.js shared script toggles
   `.cert-dim` on any `[data-cert]` row whose cert isn't in the active
   chip set; we render that as display:none so the player sees a
   filtered list, not a noisy half-faded one.
   Empty / capacity placeholder rows opt out via [data-cert-row-skip].

   History: this used to render a 55% translucent overlay so action
   buttons (RELEASE / SWAP / HIRE) stayed reachable on offline rows
   without the row itself looking interactive. In practice users
   couldn't tell the difference between "dimmed" and "shown" — the
   filter looked like it wasn't working. Switched to display:none on
   2026-05-15 to match the long-standing /scouting behaviour. If you
   want to act on an offline staff member, toggle the Offline pill
   back on. The class name stays `.cert-dim` for back-compat with the
   shared JS that already toggles it. */
.cert-dim {
    display: none !important;
}

/* ---- Cert dots — unified across desktop + mobile ---------------- */
/* One canonical definition so the three-dot vocabulary looks identical
   in every chip row, every dot-legend, and any inline reference. The
   `--mc-green` / `--mc-red` tokens (from mobile.css :root) drive both
   the mobile chip family AND the desktop one — there is no theme-
   per-bar shift here, by design (CLAUDE.md: blue is the brand colour;
   presence dots stay neutral).

   Three classes:
     .cert-dot-c   solid green disc      = Confirmed (clocked in / worked)
     .cert-dot-p   hollow green ring     = Predicted (≥60% likely today)
     .cert-dot-o   solid red disc        = Offline

   The legacy `.m-cert-dot-*` aliases stay in roster.html / scouting.html
   for source-style continuity but inherit the same colours from these
   shared rules. */

.cert-dot,
.m-cert-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
    vertical-align: middle;
}

.cert-dot-c, .m-cert-dot-c { background: var(--mc-green); }
.cert-dot-p, .m-cert-dot-p {
    background: transparent;
    border: 2px solid var(--mc-green);
    box-sizing: border-box;
}
.cert-dot-o, .m-cert-dot-o { background: var(--mc-red); }

/* Inline three-dot legend — for modals / surfaces that don't carry the
   filter chips but still want to teach the dot vocabulary. Rendered
   by the `dot_legend()` macro in `_cert_chips.html`. */
.cert-legend {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: 0.55rem;
    font-size: 11px; line-height: 1;
    color: var(--mc-text-sec, var(--text-secondary, #5a5c6e));
    font-variant-numeric: tabular-nums;
}
.cert-legend .cert-legend-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
}

/* ---- Cert chip row — global styles -----------------------------------
   These rules used to live as inline <style> blocks in roster.html and
   scouting.html only. After Step 2 of the alignment rollout the chip
   row appears on /girlfriends, /returners, /freelancers, /draft-girls,
   /scout-meta and the staff-picker modals — surfaces that don't load
   those inline blocks. The chips fell back to bare .venue-chip /
   .m-chip defaults (white background, no themed colours) which looked
   broken.

   Hoisted into mobile.css so every page that loads base.html (i.e.
   every page) gets the themed chip styling. Selectors deliberately
   stay specific enough (`.venue-chip.cert-chip`, `.m-chip.m-cert-chip`)
   to override the generic chip rules without needing !important. */

/* Mobile chip row — uses --mc-* tokens (always-on light surfaces) */
.m-chip.m-cert-chip,
.m-cert-chip {
    display: inline-flex; align-items: center; gap: 6px;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.m-chip.m-cert-chip.active,
.m-cert-chip.active { opacity: 1; }

.m-chip.m-cert-chip.active[data-cert="c"],
.m-chip.m-cert-chip.active[data-m-cert="c"] {
    background: rgba(22,163,74,0.12);
    border-color: var(--mc-green);
    color: var(--mc-green);
    font-weight: 800;
}
.m-chip.m-cert-chip.active[data-cert="p"],
.m-chip.m-cert-chip.active[data-m-cert="p"] {
    background: rgba(22,163,74,0.06);
    border-color: var(--mc-green);
    color: var(--mc-green);
    font-weight: 800;
}
.m-chip.m-cert-chip.active[data-cert="o"],
.m-chip.m-cert-chip.active[data-m-cert="o"] {
    background: rgba(220,38,38,0.10);
    border-color: var(--mc-red);
    color: var(--mc-red);
    font-weight: 800;
}

/* Desktop chip row — uses --green / --red theme tokens so each bar's
   skin can recolour (matching the rest of the venue-filter family). */
.venue-filter-bar .venue-chip.cert-chip,
.venue-chip.cert-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.venue-filter-bar .venue-chip.cert-chip.active,
.venue-chip.cert-chip.active { opacity: 1; }

.venue-chip.cert-chip.active[data-cert="c"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.venue-chip.cert-chip.active[data-cert="p"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, transparent);
}
.venue-chip.cert-chip.active[data-cert="o"] {
    border-color: var(--red);
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* Scouting uses .filter-pill.cert-pill — same vocabulary, different
   class family. Keep that path themed too. The pills already have
   .filter-pill base styling; only the cert variants need defining. */
.filter-pill.cert-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.filter-pill.cert-pill.active { opacity: 1; }
.filter-pill.cert-pill.active[data-cert="c"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.filter-pill.cert-pill.active[data-cert="p"] {
    border-color: var(--green);
    color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, transparent);
}
.filter-pill.cert-pill.active[data-cert="o"] {
    border-color: var(--red);
    color: var(--red);
    background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* ---- "Show all" reset (rendered by _cert_chips.html, toggled by
   cert-filter.js) -----------------------------------------------------
   Appears in the presence-filter row ONLY when the filter is currently
   hiding staff; one click/tap clears the filter and shows everyone.
   Styled as an accent action so it reads as a fix, not another c/p/o
   pill. The player should never feel their roster vanished with no way
   back. */
.cert-showall {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--scheme-primary);
    background: color-mix(in srgb, var(--scheme-primary) 16%, transparent);
    color: var(--scheme-primary);
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, border-color .15s;
}
.cert-showall:hover {
    background: color-mix(in srgb, var(--scheme-primary) 28%, transparent);
}
.cert-showall[hidden] { display: none; }

/* Mobile variant — blue app accent per the mobile design system. */
.m-cert-showall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--mc-accent);
    background: color-mix(in srgb, var(--mc-accent) 12%, transparent);
    color: var(--mc-accent);
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    min-height: 36px;
    white-space: nowrap;
}
.m-cert-showall[hidden] { display: none; }

/* ---- Base shapes for chip families used by _cert_chips.html --------
   Hoisted from roster.html's inline <style> so every page that mounts
   the cert chip row gets a properly-shaped pill button, not the
   browser default <button> rectangle. */

.venue-chip {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1;
}
.venue-chip:hover {
    border-color: var(--scheme-primary);
    color: var(--text-primary);
}
.venue-chip.active {
    border-color: var(--scheme-primary);
    color: var(--scheme-primary);
    background: color-mix(in srgb, var(--scheme-primary) 10%, transparent);
}

/* Base shape for .filter-pill (scouting's chip family). Same pill
   silhouette as .venue-chip so the cert chips look identical across
   surfaces regardless of which class family the macro chose. */
.filter-pill {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    line-height: 1;
}
.filter-pill:hover {
    border-color: var(--scheme-primary);
    color: var(--text-primary);
}
.filter-pill.active {
    border-color: var(--scheme-primary);
    color: var(--scheme-primary);
    background: color-mix(in srgb, var(--scheme-primary) 10%, transparent);
}