/* ============================================================================
   MASTER-DATA MODAL REDESIGN  ·  2026-07-26
   ----------------------------------------------------------------------------
   Shared shell for the master-data edit modals:
     · Customer  →  "Sheet"  (.mm-sheet)  one scroll + numbered sections +
                              scroll-spy stepper rail + sticky action bar
     · Employee  →  "Folder" (.mm-folder) rounded folder tabs above the card
   plus the shared field kit (ⓘ tooltips, toggle switches, validation dots),
   the card-per-contact editor and the CR80 employee ID badge + print sheet.

   NAMING: every class is `mm-` prefixed and every rule is scoped under
   `.mm-modal` / `.mm-overlay`. The generic names in the design mockup (.btn,
   .in, .sw, .grid, .note, .panel, .i) would have collided head-on with
   main.css / forms.css / components.css.

   LIGHT THEME: this file paints BOTH themes by hand (project standard — never
   ship a white-box light mode). Light uses the Harbor marine-blue palette that
   themes.css already defines for the rest of the app.

   WHY SO MANY `!important`s IN THE LIGHT BLOCK: themes.css ships very broad
   light rules that would otherwise flatten this UI —
       [data-theme="light"] button   { background:#fff; color:#102033;
                                       border:1px solid #b9cedb !important }
       [data-theme="light"] span     { color: inherit !important }
       [data-theme="light"] input,
       [data-theme="light"] select,
       [data-theme="light"] textarea { background/color/border !important }
       [data-theme="light"] label / p / h1-h6 / small { color !important }
   Every switch, tooltip icon, tab, stepper button and trash button in here is
   a <button>, so without !important they would all render as plain white app
   buttons. `<section>`/`<article>` are avoided in the markup for the same
   reason (themes.css force-paints those too).
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────
   Dark is the default (matches :root in themes.css); light re-declares the
   same names, so no component rule below ever needs a theme selector. */
.mm-overlay,
.mm-modal.mm-modal,
.mm-tip {
    --mm-modal: #1e293b;
    --mm-surface: #1e293b;
    --mm-tert: #334155;
    --mm-hover: #475569;

    --mm-text: #f1f5f9;
    --mm-text2: #cbd5e1;
    --mm-muted: #94a3b8;

    --mm-border: #334155;
    --mm-border-s: #42536b;

    --mm-accent: #f97316;
    --mm-accent-h: #ea6a0c;
    --mm-on-accent: #ffffff;
    --mm-accent-grad: linear-gradient(180deg, #f97316, #c2410c);

    --mm-tint: rgba(249, 115, 22, 0.13);
    --mm-tint2: #16213a;
    --mm-tint-line: rgba(249, 115, 22, 0.32);

    --mm-ok: #22c55e;
    --mm-danger: #ef4444;
    --mm-warn: #eab308;
    --mm-danger-tint: rgba(239, 68, 68, 0.13);
    --mm-ok-tint: rgba(34, 197, 94, 0.13);
    --mm-warn-tint: rgba(234, 179, 8, 0.13);

    --mm-sw-off: #475569;
    --mm-ring: 0 0 0 3px rgba(249, 115, 22, 0.3);
    --mm-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 28px 64px -20px rgba(0, 0, 0, 0.72);
    --mm-shadow-s: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 20px -10px rgba(0, 0, 0, 0.6);

    --mm-tip-bg: #4a5b71;
    --mm-tip-fg: #f8fafc;
    --mm-tip-bd: #7186a1;

    --mm-r1: 4px;
    --mm-r2: 8px;
    --mm-r3: 12px;
    --mm-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --mm-disp: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}

[data-theme="light"] .mm-overlay,
[data-theme="light"] .mm-modal.mm-modal,
[data-theme="light"] .mm-tip {
    /* Harbor marine blue — the same values themes.css uses for the rest of
       the light app, so this modal sits in the family and not next to it. */
    --mm-modal: #ffffff;
    --mm-surface: #ffffff;
    --mm-tert: #eef4f8;
    --mm-hover: #e6f3f8;

    --mm-text: #102033;
    --mm-text2: #33465a;
    --mm-muted: #536579;

    --mm-border: #d6e2ea;
    --mm-border-s: #b9cedb;

    --mm-accent: #0a5989;
    --mm-accent-h: #084a73;
    --mm-on-accent: #ffffff;
    --mm-accent-grad: linear-gradient(180deg, #0d6ea6, #0a5989 55%, #084a73);

    --mm-tint: #e6f3f8;
    --mm-tint2: #eef4f8;
    --mm-tint-line: #bcd9e8;

    --mm-ok: #2c8c62;
    --mm-danger: #c2362c;
    --mm-warn: #9a5d10;
    --mm-danger-tint: #fbecea;
    --mm-ok-tint: #e6f3ec;
    --mm-warn-tint: #fbf1e2;

    --mm-sw-off: #cfdde7;
    --mm-ring: 0 0 0 3px rgba(10, 89, 137, 0.12);
    --mm-shadow: 0 1px 2px rgba(16, 32, 51, 0.07), 0 18px 44px -16px rgba(10, 89, 137, 0.34);
    --mm-shadow-s: 0 1px 2px rgba(16, 32, 51, 0.06), 0 4px 12px -6px rgba(10, 89, 137, 0.22);

    --mm-tip-bg: #0e2438;
    --mm-tip-fg: #eaf3f9;
    --mm-tip-bd: #1c3d5a;
}

/* ── Overlay + panel ──────────────────────────────────────────────────── */
.mm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(620px 330px at 20% 0%, rgba(2, 132, 199, 0.19), transparent 70%),
        rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(2px);
}

/* main.css ships a global `.visible { display:block !important }` utility that
   beats `.mm-overlay.visible { display:flex }` no matter the specificity, which
   makes align/justify-center inert and pins the panel to the top-left. Re-assert
   with !important — same fix the customer page already carries for its old modal. */
.mm-overlay.mm-open,
.mm-overlay.visible {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .mm-overlay {
    background:
        radial-gradient(620px 330px at 20% 0%, rgba(10, 89, 137, 0.14), transparent 70%),
        rgba(15, 32, 51, 0.42);
}

.mm-modal.mm-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(96vw, 1060px);
    max-height: min(92vh, calc(100vh - 2rem));
    min-width: 0;
    background: var(--mm-modal);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-r3);
    box-shadow: var(--mm-shadow);
    color: var(--mm-text);
    font-family: var(--mm-mono);
    font-size: 13.5px;
    line-height: 1.55;
    overflow: hidden;
    animation: mmIn 0.2s ease both;
    /* Container queries drive the responsive collapse — same DOM on desktop
       and phone, no second template. */
    container-type: inline-size;
    container-name: mmw;
}

@keyframes mmIn {
    from { opacity: 0; transform: translateY(8px) scale(0.995); }
    to   { opacity: 1; transform: none; }
}

.mm-modal.mm-modal *,
.mm-modal.mm-modal *::before,
.mm-modal.mm-modal *::after { box-sizing: border-box; }

.mm-modal.mm-modal h1, .mm-modal.mm-modal h2, .mm-modal.mm-modal h3, .mm-modal.mm-modal h4 {
    font-family: var(--mm-disp);
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
    color: var(--mm-text) !important;
}

.mm-modal.mm-modal p { margin: 0; color: var(--mm-text2) !important; }

/* ── Buttons ──────────────────────────────────────────────────────────────
   `!important` on background/color/border is NOT optional here: themes.css
   declares `[data-theme="light"] button { background:#fff; color:#102033;
   border:1px solid #b9cedb !important }`, and !important beats any
   specificity. The doubled-class boost alone is not enough. */
.mm-btn.mm-btn {
    border: 1px solid var(--mm-border-s) !important;
    background: var(--mm-surface) !important;
    color: var(--mm-text2) !important;
    padding: 7px 15px;
    border-radius: var(--mm-r2);
    cursor: pointer;
    font-family: var(--mm-mono);
    font-size: 12px;
    transition: 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.mm-btn.mm-btn:hover { background: var(--mm-hover) !important; color: var(--mm-text) !important; }
.mm-btn.mm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mm-btn-p.mm-btn-p {
    background: var(--mm-accent-grad) !important;
    border-color: transparent !important;
    color: var(--mm-on-accent) !important;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, var(--mm-shadow-s);
}
.mm-btn-p.mm-btn-p:hover { filter: brightness(1.07); color: var(--mm-on-accent) !important; }

.mm-btn-dn.mm-btn-dn { color: var(--mm-danger) !important; border-color: var(--mm-danger) !important; }
.mm-btn-dn.mm-btn-dn:hover { background: var(--mm-danger) !important; border-color: var(--mm-danger) !important; color: #fff !important; }

.mm-btn-gh.mm-btn-gh { background: transparent !important; border-color: transparent !important; color: var(--mm-muted) !important; }
.mm-btn-gh.mm-btn-gh:hover { background: var(--mm-tert) !important; color: var(--mm-text) !important; }

.mm-btn-sm.mm-btn-sm { padding: 4px 10px; font-size: 11px; }

.mm-btn.mm-btn svg {
    width: 13px; height: 13px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}

.mm-x.mm-x {
    width: 30px; height: 30px; flex: none;
    border-radius: var(--mm-r2);
    border: 1px solid var(--mm-border) !important;
    background: transparent !important;
    color: var(--mm-muted) !important;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.15s;
}
.mm-x.mm-x:hover { background: var(--mm-danger) !important; border-color: var(--mm-danger) !important; color: #fff !important; }
.mm-x.mm-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.mm-trash.mm-trash {
    width: 28px; height: 28px; flex: none;
    border-radius: var(--mm-r1);
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--mm-muted) !important;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.14s;
}
.mm-trash.mm-trash:hover { background: var(--mm-danger) !important; color: #fff !important; }
.mm-trash.mm-trash svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* ── Fields ───────────────────────────────────────────────────────────── */
.mm-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 15px 18px;
}
.mm-c3  { grid-column: span 3; }
.mm-c4  { grid-column: span 4; }
.mm-c5  { grid-column: span 5; }
.mm-c6  { grid-column: span 6; }
.mm-c7  { grid-column: span 7; }
.mm-c8  { grid-column: span 8; }
.mm-c12 { grid-column: span 12; }

.mm-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.mm-lb.mm-lb {
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--mm-muted) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.mm-rq.mm-rq { color: var(--mm-danger) !important; font-weight: 700; }

.mm-modal.mm-modal .mm-in,
.mm-modal.mm-modal .mm-sl,
.mm-modal.mm-modal .mm-ta {
    width: 100%;
    background: var(--mm-surface) !important;
    border: 1px solid var(--mm-border-s) !important;
    color: var(--mm-text) !important;
    border-radius: var(--mm-r2);
    padding: 8px 11px;
    font-family: var(--mm-mono);
    font-size: 12.5px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.mm-modal.mm-modal .mm-ta { resize: vertical; min-height: 76px; line-height: 1.6; }
.mm-modal.mm-modal .mm-in:hover,
.mm-modal.mm-modal .mm-sl:hover,
.mm-modal.mm-modal .mm-ta:hover { border-color: var(--mm-muted) !important; }
.mm-modal.mm-modal .mm-in:focus,
.mm-modal.mm-modal .mm-sl:focus,
.mm-modal.mm-modal .mm-ta:focus {
    outline: none;
    border-color: var(--mm-accent) !important;
    box-shadow: var(--mm-ring);
}
.mm-modal.mm-modal .mm-in::placeholder,
.mm-modal.mm-modal .mm-ta::placeholder { color: var(--mm-muted) !important; opacity: 0.7; }
.mm-modal.mm-modal .mm-in:disabled,
.mm-modal.mm-modal .mm-sl:disabled {
    background: var(--mm-tert) !important;
    color: var(--mm-muted) !important;
    cursor: not-allowed;
    border-style: dashed !important;
}
.mm-modal.mm-modal .mm-in-ro { background: var(--mm-tert) !important; color: var(--mm-text2) !important; }

.mm-modal.mm-modal .mm-sl {
    appearance: none;
    cursor: pointer;
    padding-right: 30px;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 15px) 51%, calc(100% - 10px) 51%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.mm-hint.mm-hint { font-size: 10.5px; color: var(--mm-muted) !important; }

.mm-msg.mm-msg {
    font-size: 11px;
    color: var(--mm-danger) !important;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.4;
}
.mm-msg.mm-msg svg { width: 12px; height: 12px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

.mm-fld.mm-err .mm-in,
.mm-fld.mm-err .mm-sl,
.mm-fld.mm-err .mm-ta {
    border-color: var(--mm-danger) !important;
    background: var(--mm-danger-tint) !important;
}

.mm-pw { position: relative; }
.mm-pw-eye.mm-pw-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    border: 0 !important; background: transparent !important;
    color: var(--mm-muted) !important;
    cursor: pointer; padding: 4px 6px; border-radius: var(--mm-r1);
    font-family: var(--mm-mono); font-size: 9.5px; letter-spacing: 0.1em;
}
.mm-pw-eye.mm-pw-eye:hover { color: var(--mm-text) !important; background: var(--mm-tert) !important; }

/* ── ⓘ info icon + floating tooltip ───────────────────────────────────── */
.mm-i.mm-i {
    width: 15px; height: 15px; flex: none;
    border-radius: 50%;
    border: 1px solid var(--mm-border-s) !important;
    background: var(--mm-tert) !important;
    color: var(--mm-muted) !important;
    font-family: var(--mm-disp);
    font-size: 9.5px; font-weight: 700; line-height: 1;
    cursor: help; padding: 0;
    display: inline-grid; place-items: center;
    transition: 0.14s;
}
.mm-i.mm-i:hover,
.mm-i.mm-i.mm-pin {
    background: var(--mm-accent) !important;
    border-color: var(--mm-accent) !important;
    color: var(--mm-on-accent) !important;
}

/* One floating box for the whole page — lives on <body> so it escapes every
   scroll container and overflow:hidden panel. */
.mm-tip {
    position: fixed; top: 0; left: 0;
    z-index: 3200;
    max-width: min(310px, 78vw);
    background: var(--mm-tip-bg);
    color: var(--mm-tip-fg);
    border: 1px solid var(--mm-tip-bd);
    border-radius: var(--mm-r2);
    padding: 9px 12px;
    font-family: var(--mm-mono);
    font-size: 11.5px;
    line-height: 1.5;
    box-shadow: 0 16px 38px -10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
}
.mm-tip.mm-on { opacity: 1; }
.mm-tip::after {
    content: '';
    position: absolute;
    left: var(--mm-cx, 50%);
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--mm-tip-bg);
    bottom: -12px;
}
.mm-tip.mm-below::after {
    bottom: auto; top: -12px;
    border-top-color: transparent;
    border-bottom-color: var(--mm-tip-bg);
}

/* ── Toggle switch ────────────────────────────────────────────────────── */
.mm-sw.mm-sw {
    position: relative;
    width: 40px; height: 23px; flex: none;
    border-radius: 999px !important;
    background: var(--mm-sw-off) !important;
    border: 1px solid var(--mm-border-s) !important;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}
.mm-sw-k {
    position: absolute; top: 2px; left: 2px;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
    transition: transform 0.22s cubic-bezier(0.3, 0.85, 0.35, 1);
}
.mm-sw.mm-sw[aria-checked="true"] { background: var(--mm-accent) !important; border-color: transparent !important; }
.mm-sw.mm-sw[aria-checked="true"] .mm-sw-k { transform: translateX(17px); }
.mm-sw.mm-sw:hover { filter: brightness(1.06); }
.mm-sw.mm-sw:disabled { opacity: 0.45; cursor: not-allowed; }

.mm-sw-sm { width: 33px; height: 19px; }
.mm-sw-sm .mm-sw-k { width: 14px; height: 14px; top: 1.5px; left: 1.5px; }
.mm-sw-sm[aria-checked="true"] .mm-sw-k { transform: translateX(14px); }

/* ── Setting rows / section heads / notes ─────────────────────────────── */
.mm-setrow {
    display: flex; align-items: center; gap: 16px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--mm-border);
}
.mm-setrow:last-child { border-bottom: 0; }
.mm-setrow-l { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mm-setrow-l .mm-lb.mm-lb {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
    color: var(--mm-text) !important;
    font-weight: 600;
}
.mm-setmeta.mm-setmeta { font-size: 10.5px; color: var(--mm-muted) !important; }
.mm-setrow-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.mm-sh { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.mm-sh h4 {
    font-family: var(--mm-mono) !important;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mm-text2) !important;
    font-weight: 700;
}
.mm-rule { flex: 1; height: 1px; background: var(--mm-border); }

.mm-note.mm-note {
    display: flex; gap: 9px;
    padding: 9px 12px;
    border-radius: var(--mm-r2);
    background: var(--mm-tint);
    border: 1px solid var(--mm-tint-line);
    font-size: 11.5px;
    color: var(--mm-text2) !important;
    line-height: 1.5;
}
.mm-note.mm-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke: var(--mm-accent); fill: none; stroke-width: 1.8; }
.mm-note.mm-note span { color: var(--mm-text2) !important; }
.mm-note.mm-note.mm-note-warn { background: var(--mm-warn-tint); border-color: var(--mm-warn); }
.mm-note.mm-note.mm-note-warn svg { stroke: var(--mm-warn); }

.mm-pill.mm-pill, .mm-chip.mm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid var(--mm-border);
    background: var(--mm-tert);
    color: var(--mm-muted) !important;
    white-space: nowrap;
}
.mm-pill-ok.mm-pill-ok { background: var(--mm-ok-tint); border-color: var(--mm-ok); color: var(--mm-ok) !important; }
.mm-pill-off.mm-pill-off { background: var(--mm-tert); border-color: var(--mm-border-s); color: var(--mm-muted) !important; }
.mm-chip-key.mm-chip-key { background: var(--mm-tint); border-color: var(--mm-tint-line); color: var(--mm-accent) !important; }
.mm-chip-key.mm-chip-key svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ── Selectable cards (stock divisions / modules) ─────────────────────── */
.mm-cards { display: grid; gap: 10px; }
.mm-cards-2 { grid-template-columns: 1fr 1fr; }

.mm-dvc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-r2);
    background: var(--mm-surface);
    transition: 0.18s;
    position: relative;
    overflow: hidden;
}
.mm-dvc::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: transparent; transition: 0.18s;
}
.mm-dvc.mm-on { border-color: var(--mm-tint-line); background: var(--mm-tint); }
.mm-dvc.mm-on::before { background: var(--mm-accent); }
.mm-dvc:hover { border-color: var(--mm-muted); }
.mm-dvc-ic.mm-dvc-ic {
    width: 34px; height: 34px; flex: none;
    grid-row: 1 / span 2;
    border-radius: var(--mm-r2);
    display: grid; place-items: center;
    background: var(--mm-tert);
    color: var(--mm-muted) !important;
    transition: 0.18s;
}
.mm-dvc-ic.mm-dvc-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-dvc.mm-on .mm-dvc-ic.mm-dvc-ic { background: var(--mm-accent); color: var(--mm-on-accent) !important; }
.mm-dvc-t.mm-dvc-t { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--mm-text) !important; }
.mm-dvc-s.mm-dvc-s { font-size: 10.5px; color: var(--mm-muted) !important; }
.mm-dvc-c { grid-row: 1 / span 2; grid-column: 3; }

/* ── Contacts — CARD PER CONTACT (Design 2 editor) ────────────────────── */
.mm-cclist { display: grid; gap: 10px; }

.mm-cc {
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-r3);
    background: var(--mm-surface);
    overflow: hidden;
    transition: 0.18s;
}
.mm-cc:hover { border-color: var(--mm-border-s); }
.mm-cc.mm-off { opacity: 0.62; }
/* The contact holding the portal login is visually promoted. */
.mm-cc.mm-key { border-color: var(--mm-tint-line); box-shadow: 0 0 0 1px var(--mm-tint-line); }

.mm-cc-top {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    background: var(--mm-tint2);
    border-bottom: 1px solid var(--mm-border);
}
.mm-ava.mm-ava {
    width: 32px; height: 32px; flex: none;
    border-radius: 9px;
    display: grid; place-items: center;
    font-family: var(--mm-disp);
    font-size: 11.5px; font-weight: 700;
    background: var(--mm-tert);
    color: var(--mm-text2) !important;
}
.mm-cc.mm-key .mm-ava.mm-ava { background: var(--mm-accent); color: var(--mm-on-accent) !important; }

.mm-cc-id { display: grid; gap: 5px; grid-template-columns: 1fr 1fr; flex: 1; min-width: 0; }
.mm-cc-act { display: flex; align-items: center; gap: 8px; flex: none; }

/* THE two-column boolean grid: Discharge | Order created
                                Order dispatched | Arrival notice
                                Contact active | */
.mm-cc-grid {
    padding: 12px 13px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 22px;
}
.mm-cc-b { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mm-text2) !important; }
.mm-cc-b .mm-lbx.mm-lbx { display: flex; align-items: center; gap: 6px; color: var(--mm-text2) !important; }
.mm-cc-b .mm-sw.mm-sw { margin-left: auto; }
.mm-cc-sep { grid-column: 1 / -1; height: 1px; background: var(--mm-border); margin: 1px 0; }

.mm-cc-portal {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px dashed var(--mm-tint-line);
    border-radius: var(--mm-r2);
    background: var(--mm-tint);
}
.mm-cc-portal .mm-in { max-width: 190px; }
.mm-cc-portal .mm-lbx.mm-lbx {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: var(--mm-text) !important;
}
.mm-cc-portal .mm-lbx.mm-lbx svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mm-cc-note.mm-cc-note { font-size: 10.5px; color: var(--mm-muted) !important; }

.mm-cttools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.mm-ctcount.mm-ctcount { font-size: 11px; color: var(--mm-muted) !important; }
.mm-ctcount.mm-ctcount b { color: var(--mm-text2) !important; }

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 3 — "SHEET"  (Edit Customer)
   ══════════════════════════════════════════════════════════════════════ */
.mm-sheet { width: min(96vw, 1000px); }

.mm-sheet-head {
    flex: 0 0 auto;
    padding: 20px 24px 17px;
    border-bottom: 1px solid var(--mm-border);
    display: flex; align-items: flex-start; gap: 16px;
    background: radial-gradient(700px 200px at 0% 0%, var(--mm-tint) 0%, transparent 70%);
}
.mm-sheet-head h3 { font-size: 26px; letter-spacing: -0.025em; }
.mm-eyebrow.mm-eyebrow {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mm-muted) !important;
    margin-bottom: 7px !important;
}
.mm-head-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mm-head-tags { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

.mm-sheet-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 0;
}

.mm-rail {
    border-right: 1px solid var(--mm-border);
    padding: 18px 14px;
    background: var(--mm-tint2);
    overflow: auto;
}
.mm-stepper { list-style: none; margin: 0; padding: 0; position: relative; }
.mm-stepper::before {
    content: '';
    position: absolute; left: 12px; top: 12px; bottom: 12px;
    width: 1px; background: var(--mm-border);
}
.mm-stepper li { position: relative; }

.mm-step.mm-step {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 8px 6px;
    border-radius: var(--mm-r2);
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: var(--mm-muted) !important;
    font-family: var(--mm-mono);
    transition: 0.16s;
}
.mm-step.mm-step:hover { background: var(--mm-hover) !important; color: var(--mm-text) !important; }
.mm-step-n.mm-step-n {
    width: 25px; height: 25px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700;
    background: var(--mm-modal);
    border: 1px solid var(--mm-border);
    color: var(--mm-muted) !important;
    transition: 0.2s;
    z-index: 1;
}
.mm-step-t.mm-step-t { display: flex; flex-direction: column; line-height: 1.3; padding-top: 3px; min-width: 0; }
.mm-step-t.mm-step-t b { font-size: 12px; font-weight: 600; color: inherit !important; }
.mm-step-t.mm-step-t em { font-style: normal; font-size: 9.5px; opacity: 0.8; color: inherit !important; }

.mm-step.mm-step[aria-current="true"] { color: var(--mm-text) !important; }
.mm-step.mm-step[aria-current="true"] .mm-step-n.mm-step-n {
    background: var(--mm-accent-grad);
    border-color: transparent;
    color: var(--mm-on-accent) !important;
    box-shadow: 0 0 0 4px var(--mm-tint);
}
/* Validation: the owning stepper item grows a red dot. */
.mm-step-dot {
    position: absolute; right: 8px; top: 14px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mm-danger);
    box-shadow: 0 0 0 3px var(--mm-danger-tint);
}

.mm-scroll {
    overflow: auto;
    padding: 0 26px 24px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.mm-scroll::-webkit-scrollbar { width: 9px; }
.mm-scroll::-webkit-scrollbar-thumb { background: var(--mm-border-s); border-radius: 9px; border: 2px solid var(--mm-modal); }

.mm-sec { padding: 24px 0; border-bottom: 1px solid var(--mm-border); }
.mm-sec:last-child { border-bottom: 0; }
.mm-sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.mm-sec-head h4 { font-size: 19px; letter-spacing: -0.02em; }
.mm-snum.mm-snum { font-family: var(--mm-disp); font-size: 11px; font-weight: 700; color: var(--mm-accent) !important; letter-spacing: 0.1em; }
.mm-sdesc.mm-sdesc { margin-left: auto; font-size: 10.5px; color: var(--mm-muted) !important; text-align: right; max-width: 34ch; }

.mm-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px;
    border-top: 1px solid var(--mm-border);
    background: var(--mm-tint2);
    position: sticky;
    bottom: 0;
}
.mm-foot-note.mm-foot-note { font-size: 11px; color: var(--mm-muted) !important; display: flex; align-items: center; gap: 6px; }
.mm-foot-btns { margin-left: auto; display: flex; gap: 8px; }
.mm-kbd.mm-kbd {
    font-size: 9.5px;
    border: 1px solid var(--mm-border-s);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 5px;
    background: var(--mm-surface);
    color: var(--mm-muted) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   DESIGN 1 — "FOLDER"  (Edit Employee)
   ══════════════════════════════════════════════════════════════════════ */
/* The folder tabs sit ABOVE the card, so the modal element itself carries no
   chrome — .mm-fcard is the panel. */
.mm-folder {
    width: min(96vw, 940px);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

.mm-tabs {
    display: flex; gap: 4px;
    padding-left: 16px;
    margin-bottom: -1px;
    position: relative;
    z-index: 3;
    overflow: auto;
    scrollbar-width: none;
    flex: 0 0 auto;
}
.mm-tabs::-webkit-scrollbar { display: none; }

.mm-tab.mm-tab {
    position: relative;
    top: 2px;
    border: 1px solid var(--mm-border) !important;
    border-bottom: none !important;
    background: var(--mm-tint2) !important;
    border-radius: 9px 9px 0 0 !important;
    padding: 9px 16px 10px;
    cursor: pointer;
    color: var(--mm-muted) !important;
    font-family: var(--mm-mono);
    font-size: 12px;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap;
    transition: 0.16s;
}
.mm-tab.mm-tab:hover { color: var(--mm-text) !important; background: var(--mm-hover) !important; }
.mm-tab.mm-tab[aria-selected="true"] {
    background: var(--mm-modal) !important;
    color: var(--mm-text) !important;
    font-weight: 600;
    top: 0;
    padding-bottom: 11px;
}
.mm-tab.mm-tab[aria-selected="true"]::before {
    content: '';
    position: absolute; left: -1px; right: -1px; top: -1px;
    height: 3px;
    background: var(--mm-accent-grad);
    border-radius: 9px 9px 0 0;
}
/* Paints over the card's top border so the active tab reads as continuous
   with the card underneath — the "folder" illusion. */
.mm-tab.mm-tab[aria-selected="true"]::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 3px;
    background: var(--mm-modal);
}
.mm-tab-n.mm-tab-n {
    font-size: 9.5px;
    background: var(--mm-tert) !important;
    border-radius: 999px;
    padding: 1px 6px;
    color: var(--mm-muted) !important;
    font-weight: 600;
}
.mm-tab.mm-tab[aria-selected="true"] .mm-tab-n.mm-tab-n { background: var(--mm-accent) !important; color: var(--mm-on-accent) !important; }
/* Validation: the owning tab grows a red dot. */
.mm-tab-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mm-danger);
    box-shadow: 0 0 0 3px var(--mm-danger-tint);
}

.mm-fcard {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(min(92vh, 100vh - 2rem) - 44px);
    background: var(--mm-modal);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-r3);
    box-shadow: var(--mm-shadow);
    overflow: hidden;
}

.mm-head {
    flex: 0 0 auto;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mm-border);
    background: linear-gradient(180deg, var(--mm-tint2), var(--mm-modal));
}
.mm-head h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.mm-body {
    flex: 1 1 auto;
    padding: 20px;
    overflow: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
.mm-body::-webkit-scrollbar { width: 9px; }
.mm-body::-webkit-scrollbar-thumb { background: var(--mm-border-s); border-radius: 9px; border: 2px solid var(--mm-modal); }

.mm-panel { display: none; }
.mm-panel.mm-on { display: block; animation: mmFade 0.26s ease both; }
@keyframes mmFade {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

.mm-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--mm-border);
    background: var(--mm-tint2);
}

/* ══════════════════════════════════════════════════════════════════════
   EMPLOYEE ID CARD — CR80, 85.6 × 54 mm
   ----------------------------------------------------------------------
   Every internal dimension is in `em`, and the card's own font-size is
   derived from its width. That makes the whole card resolution-independent:
   set --mm-idcw to 364px on screen or to 85.6mm for print and the artwork
   scales exactly, instead of a print run coming out with screen-sized text
   crammed into a smaller card.
   ══════════════════════════════════════════════════════════════════════ */
.mm-idc.mm-idc {
    --mm-idcw: 364px;
    width: var(--mm-idcw);
    max-width: 100%;
    aspect-ratio: 85.6 / 54;
    font-size: calc(var(--mm-idcw) * 0.0303);
    flex: none;
    perspective: 1400px;
}
.mm-idc-in {
    position: relative;
    width: 100%; height: 100%;
    transition: transform 0.75s cubic-bezier(0.2, 0.75, 0.2, 1);
    transform-style: preserve-3d;
}
.mm-idc.mm-idc.mm-flip .mm-idc-in { transform: rotateY(180deg); }

.mm-idc-f {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1.18em;
    overflow: hidden;
    display: flex; flex-direction: column;
    color: #eaf3f9 !important;
    /* The badge keeps its marine livery in BOTH themes — a printed card does
       not change with the UI theme. */
    background: linear-gradient(142deg, #0d6a9f 0%, #0a5989 34%, #0e4c75 62%, #082e4c 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 20px 40px -16px rgba(3, 26, 45, 0.85),
        0 0 0 1px rgba(255, 255, 255, 0.09) inset;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.mm-idc-f::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 108% -18%, rgba(56, 189, 248, 0.34), transparent 56%),
        repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px);
}
.mm-idc-b { transform: rotateY(180deg); background: linear-gradient(200deg, #0b3f63, #082e4c 70%); }

.mm-idc-top { display: flex; align-items: center; gap: 0.73em; padding: 0.82em 1.18em 0; position: relative; z-index: 2; }
.mm-idc-mark { width: 1.72em; height: 1.72em; flex: none; }
.mm-idc-brand.mm-idc-brand {
    font-family: var(--mm-disp);
    font-size: 0.95em; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #eaf3f9 !important;
}
.mm-idc-brand.mm-idc-brand em {
    display: block; font-style: normal;
    font-family: var(--mm-mono);
    font-size: 0.67em; letter-spacing: 0.2em;
    opacity: 0.62; font-weight: 400;
}
.mm-idc-kind.mm-idc-kind {
    margin-left: auto;
    font-size: 0.68em; letter-spacing: 0.22em; text-transform: uppercase;
    opacity: 0.72;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 3px;
    padding: 0.18em 0.55em;
    color: #eaf3f9 !important;
}

.mm-idc-mid { display: flex; gap: 1.09em; padding: 0.82em 1.18em; flex: 1; position: relative; z-index: 2; min-height: 0; }
.mm-idc-who { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.mm-idc-name.mm-idc-name {
    font-family: var(--mm-disp);
    font-size: 1.72em; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
    color: #ffffff !important;
    overflow-wrap: anywhere;
}
.mm-idc-role.mm-idc-role {
    display: inline-flex; align-items: center; gap: 0.55em;
    margin-top: 0.45em;
    font-size: 0.82em; letter-spacing: 0.15em; text-transform: uppercase;
    color: #bfe4f7 !important;
}
.mm-idc-role.mm-idc-role b { width: 0.64em; height: 0.64em; border-radius: 2px; background: var(--mm-lvl, #38bdf8); box-shadow: 0 0 8px var(--mm-lvl, #38bdf8); }
.mm-idc-dl.mm-idc-dl {
    margin: 0.82em 0 0;
    display: grid; grid-template-columns: auto auto; gap: 0.18em 1.09em;
    font-size: 0.73em; letter-spacing: 0.09em;
}
.mm-idc-dl.mm-idc-dl dt { opacity: 0.55; text-transform: uppercase; color: #eaf3f9 !important; }
.mm-idc-dl.mm-idc-dl dd { margin: 0; font-weight: 600; color: #eaf3f9 !important; }

/* THE QR is the anchor of the right-hand half: big, and centred on both axes
   inside its own column. */
.mm-idc-qr {
    margin-left: auto;
    align-self: center;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.45em;
    flex: none;
    padding-right: 0.18em;
}
.mm-qrt.mm-qrt {
    /* The QR is the anchor of the right-hand half. Sized as a share of the
       CARD WIDTH (10em, where 1em = 3.03% of the card) = 30.4% of 85.6 mm =
       26 mm printed, of which ~1.5 mm is the white quiet zone a QR needs.
       Scales with --mm-idcw at any render size instead of being pinned to a
       pixel count, which is what made it look small on a scaled-up card. */
    width: 10em; height: 10em;
    background: #fff !important;
    border-radius: 0.64em;
    padding: 0.45em;
    line-height: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34);
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.45s;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
/* qrcode.min.js renders a fixed-pixel canvas (plus an <img> fallback). Force
   both to fill the em-sized frame so the QR scales with the card and prints
   from a high-resolution source. */
.mm-qrt.mm-qrt canvas,
.mm-qrt.mm-qrt img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.mm-qrt.mm-qrt img[style] { margin: 0 !important; }
.mm-idc.mm-idc.mm-rot .mm-qrt.mm-qrt { transform: scale(1.1) rotate(4deg); filter: blur(1px); }
.mm-idc-scan.mm-idc-scan { font-size: 0.64em; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; color: #eaf3f9 !important; }

.mm-idc-strip.mm-idc-strip {
    display: flex; align-items: center; gap: 0.73em;
    padding: 0.45em 1.18em;
    position: relative; z-index: 2;
    background: rgba(0, 0, 0, 0.26);
    font-size: 0.73em; letter-spacing: 0.14em;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #eaf3f9 !important;
}
.mm-idc-strip.mm-idc-strip b { font-weight: 600; opacity: 0.95; color: #eaf3f9 !important; }
.mm-idc-strip.mm-idc-strip span { margin-left: auto; opacity: 0.55; color: #eaf3f9 !important; }

.mm-idc-mag { height: 2.36em; background: linear-gradient(180deg, #020a12, #0a1a26); margin-top: 1.09em; }
.mm-idc-back-txt.mm-idc-back-txt { padding: 0.82em 1.18em; font-size: 0.68em; line-height: 1.55; opacity: 0.68; color: #eaf3f9 !important; }

.mm-idc-wrap { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }

/* Locked ID-card state: shown INSTEAD of the badge for an account nobody has
   taken possession of yet. Same footprint as the card so the pane does not
   jump when it unlocks. */
.mm-locked.mm-locked {
    width: 364px;
    max-width: 100%;
    aspect-ratio: 85.6 / 54;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    text-align: center;
    border: 1px dashed var(--mm-border-s);
    border-radius: 13px;
    background: var(--mm-tint2);
    color: var(--mm-muted) !important;
}
.mm-locked.mm-locked svg {
    width: 26px; height: 26px;
    fill: none; stroke: var(--mm-muted); stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
}
.mm-locked.mm-locked b { color: var(--mm-text) !important; font-size: 13px; font-weight: 600; }
.mm-locked.mm-locked span { font-size: 11.5px; line-height: 1.55; color: var(--mm-muted) !important; }
.mm-idc-side { flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 13px; }
.mm-tokenrow.mm-tokenrow { display: flex; gap: 7px; align-items: center; }
.mm-tokenrow.mm-tokenrow .mm-in { font-size: 11.5px; letter-spacing: 0.08em; }

.mm-steps.mm-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: mmstep; }
.mm-steps.mm-steps li { display: flex; gap: 9px; align-items: flex-start; font-size: 11.5px; color: var(--mm-text2) !important; }
.mm-steps.mm-steps li::before {
    counter-increment: mmstep;
    content: counter(mmstep);
    width: 18px; height: 18px; flex: none;
    border-radius: 50%;
    background: var(--mm-tert);
    color: var(--mm-muted);
    font-size: 9.5px;
    display: grid; place-items: center;
    font-weight: 700;
    margin-top: 1px;
}

.mm-seg.mm-seg {
    display: flex;
    background: var(--mm-tert);
    border: 1px solid var(--mm-border);
    border-radius: var(--mm-r2);
    padding: 2px; gap: 2px;
    max-width: 300px;
}
.mm-seg.mm-seg button {
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--mm-mono);
    font-size: 10.5px;
    color: var(--mm-muted) !important;
    transition: 0.15s;
}
.mm-seg.mm-seg button[aria-pressed="true"] {
    background: var(--mm-modal) !important;
    color: var(--mm-text) !important;
    font-weight: 600;
    box-shadow: var(--mm-shadow-s);
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT — real browser print dialog, A4, FOLD PAIRS at true 85.6 × 54 mm
   ----------------------------------------------------------------------
   The sheet prints on plain paper, not on blank CR80 plastic: each badge
   comes out as ONE 85.6 × 108 mm block — the FRONT face on top, the BACK
   face directly below it, sharing the long 85.6 mm edge. Cut the solid
   outer outline once, fold on the dashed centre line, and the two halves
   meet back-to-back as a two-sided card at exactly CR80 size.

   ── WHY THE BACK IS PRE-ROTATED 180° ──────────────────────────────────
   Folding is a 180° rotation of the lower half about the shared (crease)
   edge, swinging it backwards until it sits behind the upper half. Three
   consequences, in order:

     1. The crease becomes the BOTTOM edge of the finished card (it was the
        bottom edge of the front face, and the front face is not moved).
     2. The back sheet's printed TOP edge is the edge that touched the
        crease, so after the fold the back's "top" is at the card's BOTTOM.
     3. Turning a landscape card over the natural way — about its vertical
        axis, like turning a page — leaves the crease at the bottom. So the
        back is seen with its printed top at the bottom: UPSIDE DOWN.

   Pre-rotating the back face by 180° on the sheet cancels step 2 exactly,
   so the finished card reads upright on both sides. (Vector proof: the
   fold maps a page-up vector +y to −y; the left-right flip maps y to y;
   composed, +y ↦ −y, i.e. inverted. The 180° pre-rotation is the inverse.)
   ══════════════════════════════════════════════════════════════════════ */

/* -- [hidden] guard -------------------------------------------------------
   Components in here declare an explicit `display`, which beats the UA
   stylesheet's `[hidden] { display:none }`. Elements toggled with the
   `hidden` attribute (the portal-login chip on a contact card) would stay
   visible without it. */
.mm-modal [hidden],
.mm-overlay [hidden] { display: none !important; }

#mmPrintRoot { display: none; }

@media print {
    @page {
        size: A4 portrait;
        /* 15 mm all round. Width check: 210 − 30 = 180 mm printable, and a
           2-up run of fold pairs is 2 × 85.6 + 8 mm gutter = 179.2 mm.
           Height check: 297 − 30 = 267 mm printable, and a 2 × 2 run is
           2 × 108 + 5 mm row gap = 221 mm, leaving 46 mm for the footer. */
        margin: 15mm;
    }

    /* Hide the whole application; only the print sheet survives. */
    body > *:not(#mmPrintRoot) { display: none !important; }
    body.mm-printing { background: #fff !important; }

    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mmPrintRoot {
        display: block !important;
        /* A definite, page-sized box is what makes true vertical centring
           possible: A4 297 mm − the two 15 mm @page margins = 267 mm. The
           old rule was `position: static` with no height, so the sheet had
           nothing to centre against and printed hard against the top edge. */
        position: relative !important;
        height: 267mm;
        background: #fff !important;
        color: #102033 !important;
        /* #mmPrintRoot is a direct <body> child, OUTSIDE .mm-overlay, so the
           modal's font tokens do not reach it — re-declare the two the card
           and the footer actually use or they fall back to the body font. */
        --mm-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
        --mm-disp: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    }

    /* The card block, dead-centre in the printable area on BOTH axes. */
    .mm-print-sheet {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(var(--mm-cols, 1), 85.6mm);
        column-gap: 8mm;
        row-gap: 5mm;
        justify-content: center;
        align-content: center;
    }

    /* ── the fold pair ────────────────────────────────────────────────
       85.6 × 108 mm: two 54 mm faces sharing the long edge, no gap
       between them — a gap would push the crease off the card edge and
       the folded card would come out taller than 54 mm. */
    .mm-fold {
        position: relative;
        width: 85.6mm;
        height: 108mm;
        /* Never let a pair straddle a page break: half a card is waste. */
        break-inside: avoid;
        page-break-inside: avoid;
        /* CUT HERE — one solid outline around the whole pair, flush with the
           artwork (offset 0) so a cut on the line yields exactly 85.6 × 54
           per face. Anything drawn outside it is trimmed away. */
        outline: 0.3mm solid #0a5989;
        outline-offset: 0;
    }
    /* FOLD HERE — light dashed line straight across the shared edge. */
    .mm-fold::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 54mm;
        border-top: 0.3mm dashed rgba(255, 255, 255, 0.72);
        z-index: 6;
    }
    /* The "fold" label sits OUTSIDE the cut outline, in the gutter, so it
       is thrown away with the trim and never prints on the finished card.
       5 pt keeps it inside the 8 mm gutter of a 2-up run. */
    .mm-fold-tag {
        position: absolute;
        top: 54mm;
        left: 100%;
        transform: translate(1mm, -50%);
        font-family: var(--mm-mono);
        font-size: 5pt;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
        color: #536579 !important;
        z-index: 6;
    }

    /* ── flatten the 3-D flip: BOTH faces print, stacked ──────────────── */
    .mm-fold .mm-idc.mm-idc {
        --mm-idcw: 85.6mm;
        width: 85.6mm !important;
        height: 108mm !important;
        aspect-ratio: auto;
        perspective: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .mm-fold .mm-idc-in {
        position: relative !important;
        width: 100%;
        height: 100%;
        transform: none !important;
        transform-style: flat !important;
        transition: none !important;
    }
    /* Faces stop being stacked absolutes and become two 54 mm blocks in
       normal flow — front first, back second. */
    .mm-fold .mm-idc-f {
        position: relative !important;
        inset: auto !important;
        width: 85.6mm !important;
        height: 54mm !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backface-visibility: visible !important;
        -webkit-backface-visibility: visible !important;
        transform: none !important;
        overflow: hidden;
        background: linear-gradient(142deg, #0d6a9f 0%, #0a5989 34%, #0e4c75 62%, #082e4c 100%) !important;
    }
    /* THE 180° PRE-ROTATION — see the long note above this @media block.
       Without it every finished card reads upside-down on the reverse. */
    .mm-fold .mm-idc-f.mm-idc-b {
        transform: rotate(180deg) !important;
        background: linear-gradient(200deg, #0b3f63, #082e4c 70%) !important;
    }
    .mm-fold .mm-idc.mm-idc,
    .mm-fold .mm-idc.mm-idc * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .mm-fold .mm-qrt.mm-qrt {
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }

    /* Cut/fold guide + sign-in tutorial: printed ONCE per sheet, pinned to
       the foot of the printable area. Deliberately not on the card, which
       has no room and would carry the instructions round the warehouse.
       Two columns keep it under ~25 mm so it clears a centred 2 × 2 run. */
    .mm-print-foot {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        font-family: var(--mm-mono);
        color: #102033 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .mm-print-foot-h {
        display: flex;
        align-items: baseline;
        gap: 6mm;
        border-top: 0.3mm solid #b9cedb;
        padding-top: 2mm;
        margin-bottom: 2mm;
    }
    .mm-print-foot-h h4 {
        margin: 0;
        font-family: var(--mm-disp);
        font-size: 9.5pt;
        color: #0a5989 !important;
    }
    .mm-print-cut.mm-print-cut {
        margin: 0 0 0 auto;
        font-size: 7pt;
        letter-spacing: 0.05em;
        text-align: right;
        color: #536579 !important;
    }
    .mm-print-tut {
        columns: 2;
        column-gap: 8mm;
    }
    .mm-print-tut ol {
        margin: 0 0 2mm;
        padding-left: 5mm;
        font-size: 7.5pt;
        line-height: 1.45;
    }
    .mm-print-tut li { margin-bottom: 0.6mm; break-inside: avoid; }
    .mm-print-tut p {
        margin: 0;
        font-size: 7pt;
        line-height: 1.45;
        color: #33465a !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — container queries on the modal itself (same DOM)
   ══════════════════════════════════════════════════════════════════════ */
@container mmw (max-width: 820px) {
    .mm-grid > [class*="mm-c"] { grid-column: span 12; }
    .mm-c-half { grid-column: span 6; }

    .mm-sheet-body { grid-template-columns: 1fr; }
    .mm-rail { border-right: 0; border-bottom: 1px solid var(--mm-border); padding: 10px 12px; }
    .mm-stepper { display: flex; gap: 7px; overflow: auto; scrollbar-width: none; }
    .mm-stepper::before { display: none; }
    .mm-stepper li { flex: none; }
    .mm-step.mm-step { flex-direction: column; align-items: center; gap: 4px; width: 84px; text-align: center; }
    .mm-step-t.mm-step-t em { display: none; }
    .mm-step-dot { right: 20px; top: 2px; }

    .mm-cc-id { grid-template-columns: 1fr; }
    .mm-cc-grid { grid-template-columns: 1fr; }
    .mm-cards-2 { grid-template-columns: 1fr; }
    .mm-idc-wrap { gap: 16px; }
    .mm-idc.mm-idc { --mm-idcw: 100%; }
}

@container mmw (max-width: 560px) {
    .mm-sheet-head { padding: 14px 16px 12px; }
    .mm-sheet-head h3 { font-size: 20px; }
    .mm-scroll { padding: 0 14px 18px; }
    .mm-bar, .mm-foot { padding: 10px 14px; }
    .mm-foot-note.mm-foot-note { display: none; }
    .mm-foot-btns { margin-left: 0; width: 100%; }
    .mm-foot-btns .mm-btn.mm-btn { flex: 1; justify-content: center; }
    .mm-body { padding: 14px; }
}