/* Middlesman app shell — mobile-first, used by the logged-in dashboard. */
:root {
    /* Light palette: admin pages that reuse these components. */
    --mm-bg: #f3f5f2;
    --mm-surface: #ffffff;
    --mm-surface-2: #f7f8f6;
    --mm-ink: #12201a;
    --mm-muted: #5b6b63;
    --mm-line: #d7ddd8;
    --mm-accent: #1b6b45;
    --mm-accent-text: #1b6b45;
    --mm-accent-ink: #ffffff;
    --mm-warn: #8a5a10;
    --mm-warn-bg: #fff4dc;
    --mm-danger: #8f2d2d;
    --mm-danger-bg: #fdecec;
    --mm-danger-solid: #8f2d2d;
    --mm-info: #1d4d72;
    --mm-info-bg: #e7f2f8;
    --mm-ok: #146c43;
    --mm-ok-bg: #e5f6ee;
    --mm-test: #7a4e00;
    --mm-test-bg: #fff1cc;
    --mm-radius: 16px;
    --mm-shadow: 0 1px 2px rgba(18, 32, 26, 0.06), 0 8px 24px rgba(18, 32, 26, 0.04);
    --mm-touch: 44px;
    --mm-pad: 16px;
    --mm-tabbar: 68px;
    --mm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mm-safe-top: env(safe-area-inset-top, 0px);
    --mm-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.mm-shell {
    /* Dark palette matching the site's dark theme (dark-premium-design.css / global-dark-fix.css),
       which forces light text on every page. A light shell under those rules was unreadable. */
    --mm-bg: #0f172a;
    --mm-surface: #1e293b;
    --mm-surface-2: #273449;
    --mm-ink: #e2e8f0;
    --mm-muted: #94a3b8;
    --mm-line: #334155;
    --mm-accent: #047857;       /* button background: white text at 5.5:1 */
    --mm-accent-text: #34d399;  /* accent used as text/outline on dark surfaces */
    --mm-accent-ink: #ffffff;
    --mm-warn: #fbbf24;
    --mm-warn-bg: rgba(251, 191, 36, 0.12);
    --mm-danger: #fca5a5;
    --mm-danger-bg: rgba(248, 113, 113, 0.14);
    --mm-danger-solid: #b91c1c;
    --mm-info: #93c5fd;
    --mm-info-bg: rgba(59, 130, 246, 0.14);
    --mm-ok: #6ee7b7;
    --mm-ok-bg: rgba(16, 185, 129, 0.14);
    --mm-test: #fcd34d;
    --mm-test-bg: rgba(245, 158, 11, 0.16);
    --mm-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.mm-shell {
    font-family: var(--mm-font);
    background: var(--mm-bg);
    color: var(--mm-ink);
}

body.mm-shell .dashboard-section,
body.mm-shell .dashboard {
    background: var(--mm-bg) !important;
    background-image: none !important;
}

.mm-app {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--mm-pad) calc(var(--mm-tabbar) + var(--mm-safe-bottom) + 24px);
}

.mm-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: calc(56px + var(--mm-safe-top));
    padding: calc(8px + var(--mm-safe-top)) 4px 8px;
    background: color-mix(in srgb, var(--mm-bg) 88%, transparent);
    backdrop-filter: blur(10px);
}

.mm-header h1,
.mm-header .mm-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    letter-spacing: -0.02em;
}

.mm-icon-btn,
.mm-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--mm-touch);
    min-height: var(--mm-touch);
    border: 0;
    border-radius: 12px;
    background: var(--mm-surface);
    color: var(--mm-ink);
    box-shadow: var(--mm-shadow);
    text-decoration: none;
}

.mm-icon-btn:focus-visible,
.mm-back:focus-visible,
.mm-btn:focus-visible,
.mm-tabbar a:focus-visible,
.mm-link:focus-visible {
    outline: 3px solid var(--mm-accent-text);
    outline-offset: 2px;
}

.mm-card {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
    padding: 18px;
    margin-bottom: 16px;
}

.mm-card h2,
.mm-card h5 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
}

.mm-muted,
.mm-card .text-muted,
.mm-help {
    color: var(--mm-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.mm-grid {
    display: grid;
    gap: 12px;
}

@media (min-width: 720px) {
    .mm-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .mm-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

.mm-stat {
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    padding: 16px;
    min-height: 118px;
}

.mm-stat .label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mm-muted);
    font-weight: 700;
}

.mm-stat .value {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    margin: 6px 0 4px;
}

.mm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mm-badge--ok { background: var(--mm-ok-bg); color: var(--mm-ok); }
.mm-badge--warn { background: var(--mm-warn-bg); color: var(--mm-warn); }
.mm-badge--danger { background: var(--mm-danger-bg); color: var(--mm-danger); }
.mm-badge--info { background: var(--mm-info-bg); color: var(--mm-info); }
.mm-badge--test { background: var(--mm-test-bg); color: var(--mm-test); }
.mm-badge--neutral { background: rgba(148, 163, 184, 0.16); color: var(--mm-ink); }

.mm-btn {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--mm-touch);
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: var(--mm-accent);
    color: var(--mm-accent-ink);
}

.mm-btn:disabled,
.mm-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mm-btn--ghost {
    background: var(--mm-surface);
    color: var(--mm-ink);
    border-color: var(--mm-line);
}

.mm-btn--danger {
    background: var(--mm-danger-solid);
    color: #fff;
}

.mm-btn--warn {
    background: #b45309;
    color: #fff;
}

.mm-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mm-sticky-action {
    position: sticky;
    bottom: calc(var(--mm-tabbar) + var(--mm-safe-bottom) + 8px);
    z-index: 15;
    padding-top: 8px;
}

@media (min-width: 992px) {
    .mm-sticky-action { bottom: 16px; }
}

.mm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.mm-field label {
    font-weight: 700;
    font-size: 0.9rem;
}

.mm-field input,
.mm-field select,
.mm-field textarea {
    min-height: var(--mm-touch);
    border: 1px solid var(--mm-line);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--mm-bg);
    color: var(--mm-ink);
    font-size: 16px; /* avoids iOS zoom */
}

.mm-addr {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}

.mm-addr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Label on its own line; the address takes the free width and wraps; Copy never shrinks. */
.mm-addr-row > strong { flex: 0 0 100%; }
.mm-addr-row > .mm-addr { flex: 1 1 0; min-width: 0; }
.mm-addr-row > .mm-btn { flex: 0 0 auto; }
/* Copy stays next to the value on a wide screen; on a phone the value gets its own line, Copy under it. */
.mm-addr-row { max-width: 36rem; }
@media (max-width: 479.98px) {
    .mm-addr-row > .mm-addr { flex-basis: 100%; }
}

.mm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mm-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--mm-line);
}

.mm-row:last-child { border-bottom: 0; }

.mm-empty {
    text-align: center;
    padding: 28px 12px;
    color: var(--mm-muted);
}

.mm-callout {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--mm-info-bg);
    color: var(--mm-info);
}

.mm-callout--warn { background: var(--mm-warn-bg); color: var(--mm-warn); border: 1px solid var(--mm-warn); }
/* The dark preset forces p, span and div to grey with !important: keep a warning's text amber. */
.mm-callout--warn, .mm-callout--warn p, .mm-callout--warn strong, .mm-callout--warn li, .mm-callout--warn span:not([class]) { color: var(--mm-warn) !important; }

.mm-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--mm-surface);
    border-top: 1px solid var(--mm-line);
    padding: 6px 8px calc(6px + var(--mm-safe-bottom));
}

body.mm-shell .mobile-sidebar-overlay {
    pointer-events: none;
}

body.mm-shell .mobile-sidebar-overlay.active {
    pointer-events: auto;
}

.mm-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--mm-touch);
    gap: 2px;
    color: var(--mm-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
}

.mm-tabbar a i { font-size: 1.1rem; }

.mm-tabbar a.active,
.mm-tabbar a[aria-current="page"] {
    color: var(--mm-accent-text);
    background: rgba(16, 185, 129, 0.15);
}

.mm-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200; /* above the tab bar, which would otherwise cover the confirm button */
    display: none;
}

.mm-sheet.is-open { display: block; }

.mm-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.65);
}

.mm-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mm-surface);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + var(--mm-safe-bottom));
    max-height: 86vh;
    max-height: 86dvh;
    overflow: auto;
    overscroll-behavior: contain;
}

/* Sheets render from <body>, outside the page wrappers, so set their text colours explicitly. */
.mm-sheet__panel { color: var(--mm-ink); }
.mm-sheet__panel h2 { color: var(--mm-ink); font-size: 1.15rem; font-weight: 800; margin: 0 0 4px; }
.mm-sheet__panel .mm-help { color: var(--mm-muted); }

/* Confirm/Cancel stay visible at the bottom of a long review instead of scrolling away. */
.mm-sheet__panel .mm-btn-row {
    position: sticky;
    bottom: calc(-20px - var(--mm-safe-bottom));
    margin: 12px -20px calc(-20px - var(--mm-safe-bottom));
    padding: 12px 20px calc(12px + var(--mm-safe-bottom));
    background: var(--mm-surface);
    border-top: 1px solid var(--mm-line);
}

.mm-live {
    min-height: 1.4em;
    color: var(--mm-ink);
    font-weight: 600;
}

.mm-progress {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.mm-progress span {
    flex: 1;
    min-width: 70px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 8px 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--mm-muted);
}

.mm-progress span.is-done { background: var(--mm-ok-bg); color: var(--mm-ok); }
.mm-progress span.is-now { background: rgba(16, 185, 129, 0.18); color: var(--mm-accent-text); outline: 2px solid var(--mm-accent-text); }

@media (max-width: 991.98px) {
    body.mm-shell .sidebar-menu { z-index: 50; }
    body.mm-shell .dashboard-header .user--name { display: none; }
}

@media (min-width: 992px) {
    .mm-tabbar { display: none; }
    .mm-app { padding-bottom: 40px; }
    body.mm-shell .dashboard-body { padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Hide decorative template chrome that fights the app shell */
body.mm-shell .phpdebugbar { display: none !important; }
body.mm-shell .mobile-bottom-nav:not(.mm-tabbar) { display: none !important; }

/* Review-before-signing lists (deal actions, sends) */
.mm-review {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 6px 12px;
    margin: 12px 0;
}
.mm-review dt { color: var(--mm-muted); font-weight: 600; font-size: 0.85rem; }
.mm-review dd { margin: 0; font-weight: 600; color: var(--mm-ink); overflow-wrap: anywhere; }
.mm-callout[hidden], .mm-review[hidden] { display: none; }
details > summary { cursor: pointer; font-weight: 700; min-height: var(--mm-touch); display: flex; align-items: center; }
details > summary:focus-visible { outline: 3px solid var(--mm-accent-text); outline-offset: 2px; border-radius: 8px; }

/* Receive QR: always dark modules on white, whatever the theme, so every scanner reads it. */
.mm-qr { width: 180px; height: 180px; margin: 0 auto; background: #fff; border-radius: 8px; }
.mm-qr svg { display: block; width: 100%; height: 100%; }

/* Send to address card (docs/DEPOSIT_ADDRESS_PHASE3.md 3.5). On a wide screen the warning, the amount and address
   rows, the QR and "I have sent it" form one column, and each Copy button follows its own value. */
#deposit-panel [data-deposit-pay] { max-width: 36rem; }
@media (min-width: 480px) {
    #deposit-panel .mm-addr-row > .mm-addr { flex: 0 1 auto; }
}
/* An empty message line stays in the page (it is a live region) but takes no room. */
#deposit-panel [data-deposit-message]:empty { min-height: 0; margin-bottom: 0 !important; }
/* On a phone each button gets the full width and its label may wrap, so none sticks out of the card. */
@media (max-width: 479.98px) {
    #deposit-panel .mm-btn-row > .mm-btn { flex: 1 1 100%; max-width: 100%; white-space: normal; text-align: center; }
}

/* In-page links (Pay from your deal wallet instead, a part card, Deadline) land below the sticky top bar. */
#deal-page [id] { scroll-margin-top: calc(72px + var(--mm-safe-top)); }

/* Deal page label/value rows: labels keep whole words, values take the rest and may wrap. */
#deal-page .mm-row > :first-child { flex: 0 0 40%; color: var(--mm-muted); overflow-wrap: normal; word-break: normal; }
#deal-page .mm-row > :last-child { flex: 1 1 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }

.mm-link { color: var(--mm-accent-text); }

/* Setting rows (Security page): the text wraps, the button or badge on the right keeps its words. */
.mm-row--action > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.mm-row--action > :last-child:not(:first-child) { flex: 0 0 auto; white-space: nowrap; }

/* A short label (token symbol) never shrinks next to a long address. */
.mm-row > span:first-child { flex-shrink: 0; }

/* Money record on the deal page (PRD 26): the ledger list uses the row layout without list markers. */
.mm-ledger { list-style: none; padding: 0; margin: 0 0 8px; }
.mm-ledger .is-reversed { opacity: 0.6; }

/* Admin crypto deals table. The admin template makes every table cell nowrap with wide padding,
   which pushed the arbitration column (resolve form and evidence files) off a 1366px screen. */
.mm-admin-deals th,
.mm-admin-deals td { white-space: normal; padding: 12px 14px; }
.mm-admin-deals td:nth-child(2) { max-width: 15rem; }
.mm-admin-deals td:nth-child(2) .small { display: inline-block; line-height: 1.35; }
.mm-admin-deals td:nth-child(1),
.mm-admin-deals td:nth-child(3),
.mm-admin-deals td:nth-child(4) { white-space: nowrap; }
.mm-admin-deals td:last-child { min-width: 18rem; max-width: 26rem; text-align: left; }
.mm-admin-deals td:last-child input { min-width: 9rem; }
.mm-admin-deals td:last-child li { overflow-wrap: anywhere; }
/* Phones: each row becomes a card, every cell under its column name (admin.js sets data-label). */
@media (max-width: 767.98px) {
    .mm-admin-deals thead { display: none; }
    .mm-admin-deals,
    .mm-admin-deals tbody,
    .mm-admin-deals tr,
    .mm-admin-deals td { display: block; width: 100%; }
    .mm-admin-deals tr { border-bottom: 1px solid var(--mm-line, #e5e7eb); padding: 8px 0; }
    .mm-admin-deals td,
    .mm-admin-deals td:nth-child(n),
    .mm-admin-deals td:last-child { white-space: normal; max-width: none; min-width: 0; padding: 6px 4px; text-align: left; border: 0; }
    .mm-admin-deals td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 600; color: var(--mm-muted, #5b6472); }
    .mm-admin-deals td[colspan]::before { content: none; }
    .mm-admin-deals .mm-addr { overflow-wrap: anywhere; }
}
/* Disabled dark buttons in the admin theme lost their label contrast. */
.btn--dark:disabled, .btn--dark.disabled { color: #fff !important; background-color: #6b7280 !important; opacity: 1; }

/* Notifications: bell, centre and settings */
.mm-bell { position: relative; }
.mm-bell[aria-current="page"] { color: var(--mm-accent-text); }
.mm-bell__count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mm-danger-solid);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.mm-bell__count[hidden] { display: none; }
.mm-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.mm-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.mm-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.mm-chips--scroll::-webkit-scrollbar { display: none; }
.mm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--mm-touch);
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--mm-line);
    background: var(--mm-surface);
    color: var(--mm-ink);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.mm-chip[aria-current="true"],
.mm-chip[aria-current="page"] {
    background: var(--mm-accent);
    border-color: var(--mm-accent);
    color: var(--mm-accent-ink);
}
.mm-chip:focus-visible { outline: 3px solid var(--mm-accent-text); outline-offset: 2px; }
.mm-chip__count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    font-size: 0.75rem;
    text-align: center;
}
.mm-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--mm-surface);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-radius);
    overflow: hidden;
}
.mm-notif + .mm-notif { border-top: 1px solid var(--mm-line); }
.mm-notif__link {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    color: var(--mm-ink);
    text-decoration: none;
}
.mm-notif__link:hover { background: var(--mm-surface-2); }
.mm-notif__link:focus-visible { outline: 3px solid var(--mm-accent-text); outline-offset: -3px; }
.mm-notif.is-unread .mm-notif__link { background: var(--mm-surface-2); }
.mm-notif__icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-info-bg);
    color: var(--mm-info);
}
.mm-notif__icon--security { background: var(--mm-danger-bg); color: var(--mm-danger); }
.mm-notif__icon--payments { background: var(--mm-ok-bg); color: var(--mm-ok); }
.mm-notif__icon--deals { background: var(--mm-warn-bg); color: var(--mm-warn); }
.mm-notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-notif__title { font-weight: 600; overflow-wrap: anywhere; }
.mm-notif.is-unread .mm-notif__title { font-weight: 800; }
.mm-notif__body {
    color: var(--mm-muted);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mm-notif__meta { color: var(--mm-muted); font-size: 0.8rem; }
.mm-notif__dot {
    flex: 0 0 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--mm-accent-text);
}
.mm-pref {
    border: 0;
    border-bottom: 1px solid var(--mm-line);
    margin: 0;
    padding: 12px 0;
    min-width: 0;
}
.mm-pref legend {
    float: none;
    width: auto;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 2px;
    padding: 0;
}
.mm-pref .mm-help { margin: 0 0 8px; }
.mm-pref__switches { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mm-pref__switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--mm-touch);
    font-weight: 600;
    cursor: pointer;
}
.mm-switch {
    width: 26px;
    height: 26px;
    accent-color: var(--mm-accent);
    cursor: pointer;
}
.mm-switch:focus-visible { outline: 3px solid var(--mm-accent-text); outline-offset: 2px; }

/* Legacy account pages inside the shell (milestone 6 survey, tools/e2e/pages-survey.mjs).
   The vendor's buttons were white on #4a90e2 (3.3:1) and 34-40px tall on phones. */
body.mm-shell {
    --mm-brand: #2f6fb8;        /* white text at 5.1:1 */
    --mm-code: #f9a8d4;         /* code on the dark surfaces at 8:1 */
}
body.mm-shell .btn--base,
body.mm-shell .btn-base,
body.mm-shell .btn-success,
body.mm-shell .btn--success,
body.mm-shell .bg--base:not(.text--base) {
    background: var(--mm-brand) !important;
    border-color: var(--mm-brand) !important;
    color: #fff !important;
}
body.mm-shell .btn--danger,
body.mm-shell .btn-danger {
    background: var(--mm-danger-solid) !important;
    border-color: var(--mm-danger-solid) !important;
    color: #fff !important;
}
body.mm-shell .btn--info,
body.mm-shell .btn-info {
    background: #1d4d72 !important;
    border-color: #1d4d72 !important;
    color: #fff !important;
}
body.mm-shell code { color: var(--mm-code); }
body.mm-shell .text--danger,
body.mm-shell small.text-danger { color: #fca5a5 !important; }

@media (max-width: 991.98px) {
    body.mm-shell .btn:not(.btn-close),
    body.mm-shell .input-group-text + .btn,
    body.mm-shell .mm-hit {
        min-height: var(--mm-touch);
        min-width: var(--mm-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    body.mm-shell .btn.w-100 { display: flex; }
    /* mobile-dashboard.css turns every .row.gy-4 into two columns; that is meant for the
       dashboard's summary cards only. Forms and profile panels stack on a phone. */
    body.mm-shell .dashboard-container-wrap .row.gy-4:not(:has(> div > .wizard-card)) {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    body.mm-shell .form-control,
    body.mm-shell .form-select,
    body.mm-shell .form--control {
        min-height: var(--mm-touch);
        font-size: 16px; /* below 16px iOS zooms the page when a field gets focus */
    }
}

/* The tab bar steps aside while the phone keyboard is open (middlesman-app.js) and while a dialog
   is open: it sat above Bootstrap's modals (z-index 1100 against 1055) and covered their buttons. */
body.mm-typing .mm-tabbar,
body.modal-open .mm-tabbar { display: none; }

/* A field next to a button shrinks instead of squeezing the button (Send: amount and Max). */
.mm-field .d-flex > input { min-width: 0; }

/* Wallet tab: its own stylesheet, middlesman-wallet.css, loaded on that page only. */

/* Identity verified badge (server-derived; see App\Services\Identity\IdentityBadge) */
.mm-idv-badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: -0.2em; white-space: nowrap; line-height: 1; }
.mm-idv-badge__seal { width: 1.15em; height: 1.15em; min-width: 16px; min-height: 16px; color: #16a34a; flex: 0 0 auto;
    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.25)); }
.mm-idv-badge--text { font-size: 0.875rem; font-weight: 700; }
.mm-idv-badge--text .mm-idv-badge__text { color: #22c55e; }
.mm-idv-badge--text .mm-idv-badge__seal { width: 1.3em; height: 1.3em; }
.mm-steps { padding-left: 1.25rem; margin: 0 0 12px; }
.mm-steps li { margin-bottom: 6px; }
.mm-steps li { list-style: decimal; }
.mm-consent { display: flex; align-items: flex-start; gap: 10px; }
.mm-consent input[type=checkbox] { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; }
.mm-consent label { font-weight: 400; }

/* Admin > Crypto area tabs (fourth brief, section 3): scroll sideways on a phone, 44 px targets. */
.mm-admin-tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
.mm-admin-tabs__link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px 8px 0 0; color: #334155 !important; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mm-admin-tabs__link:hover, .mm-admin-tabs__link:focus-visible { background: #f1f5f9; color: #0f172a !important; }
.mm-admin-tabs__link.is-active { color: #047857 !important; box-shadow: inset 0 -3px 0 #059669; }
.mm-addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; font-size: .875rem; }
.mm-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.mm-status--prepared, .mm-status--rejected { background: #fef3c7; color: #92400e !important; }
.mm-status--submitted { background: #dbeafe; color: #1e40af !important; }
.mm-status--confirmed { background: #d1fae5; color: #065f46 !important; }
.mm-status--failed { background: #fee2e2; color: #991b1b !important; }
.mm-status--withdrawn { background: #e2e8f0; color: #334155 !important; }
.mm-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-admin-deals td > .mm-num, .mm-admin-deals td > .mm-num.fw-bold, .card-body .mm-num.fw-bold { color: var(--mm-ink, #111827) !important; }

/* Deal time limit: countdown to delivery, or to the end of the buyer's review after delivery. */
.mm-countdown {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--mm-line);
    border-radius: 12px;
}
.mm-countdown__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.mm-countdown__head strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--mm-accent-text); }
.mm-countdown__track {
    height: 6px;
    margin: 8px 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}
.mm-countdown__track span { display: block; height: 100%; width: 0; background: var(--mm-accent-text); }
.mm-countdown.is-over { border-color: var(--mm-warn); background: var(--mm-warn-bg); }
.mm-countdown.is-over .mm-countdown__head strong { color: var(--mm-warn); }
.mm-countdown.is-over .mm-countdown__track span { background: var(--mm-warn); width: 100%; }
@media (prefers-reduced-motion: no-preference) {
    .mm-countdown__track span { transition: width 1s linear; }
}

/* A number and its unit, or a choice and its button, side by side. */
.mm-inline-fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.mm-inline-fields > input { flex: 1 1 120px; min-width: 0; }
.mm-inline-fields > select { flex: 1 1 140px; min-width: 0; }

/* Unread count on an Inbox tab (direct messages). */
.mm-segment__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
    border-radius: 999px; background: #dc2626; color: #fff; font-size: 0.72rem; font-weight: 700;
}

/* Four top-bar buttons (back, messages, notifications, account) on a phone: keep the title readable. */
.mm-header .mm-title { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
    .mm-header { gap: 8px; }
    .mm-header .mm-title { font-size: 1.05rem; }
}