/* =============================================================================
   mh-badge.css - THE STAFF ID CARD.

   THE DESIGN IS LANDED EXACTLY. Every declaration below is byte-for-byte from
   _handoff/Staff ID card/export/card.css - the same 638x1013 shell, the same
   rotated header panel, the same 216px photo ring, the same 233px QR disc
   hanging off the footer, the same shadows. Nothing is my taste.

   TWO THINGS WERE RENAMED, AND NEITHER CHANGES A PIXEL:

   1. THE CLASS NAMES ARE NAMESPACED bdg-. The design ships .idc .hdr .photo
      .body .nm .pill .rows .foot .ring - and EVERY ONE of those already exists
      in this application. `.pill` alone has 67 CSS rules and 39 uses in markup.
      Landing them as-is would have restyled pills, photos, bodies and footers
      across every screen - the same failure as the `pd-` collision that shrank
      every detail card, but far wider. The design is the pixels; a class name is
      plumbing, and the newcomer yields.

   2. THE :root TOKENS ARE PREFIXED bdg-. The export defines --brand, --ink-1,
      --line and --font-sans at :root. This app already defines its own palette
      there. Left alone, a printed badge would have repainted the application.

   WHAT WAS DROPPED: the export's page chrome (body, .frame, .fr-label). That
   styles the MOCK PAGE the card was presented on, not the card itself; keeping
   body{} would have turned the whole app cream.

   THE FONTS ARE ALREADY OURS. The export linked Google Fonts for Hanken Grotesk
   and IBM Plex Mono; this app self-hosts both, so the card renders in exactly the
   same faces with no external request - which the production CSP would refuse.

   DISPLAY RESOLUTION. 638x1013 is a CR80 badge at print scale and must keep that
   shape or it stops being the design. So it is not made fluid: it is SCALED to
   fit its stage, and the stage is measured in --mh-vh/--mh-vw, never bare vh/vw,
   because the app carries a root zoom that raw viewport units ignore.
   ============================================================================= */

.mh-app .bdg-card-scope {
    --bdg-brand:#3E6B57;
    --bdg-brand-600:#34594A;
    --bdg-brand-700:#284638;
    --bdg-ink-1:#1C2733;
    --bdg-ink-2:#3B474B;
    --bdg-ink-3:#677579;
    --bdg-ink-4:#9AA7B3;
    --bdg-line:rgba(28,39,51,.14);
    --bdg-font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
    --bdg-font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}

/* ---- the stage: centres the card and scales it to the room available ---- */
.mh-app .bdg-stage {
    display: grid; place-items: center; width: 100%;
    min-height: calc(70 * var(--mh-vh, 1vh));
    padding: 16px 0 24px; overflow: hidden;
}
/* Scale factor is measured and set by the page, so the card never overflows and
   never grows past its true print size. */
/* transform-origin is TOP LEFT, not top center, and that matters.
   The fit element is given the card's DRAWN size (see MHBadge in shell.js) so the
   layout box matches what is painted. With a CENTRE origin the 638px-wide card
   inside a 413px-wide box scales about the BOX's centre, not its own, and lands
   offset to the right - the card and the action bar below it stopped sharing a
   centre line, which is what the CEO saw. From the top-left corner the card maps
   0..638 onto 0..413 exactly, so painted box and layout box are the same
   rectangle and everything centres together. */
.mh-app .bdg-fit { transform: scale(var(--bdg-scale, 1)); transform-origin: top left; flex: none; }

/* ---- print: the card alone, at actual size ---- */
@media print {
    .mh-app .bdg-stage { min-height: 0; padding: 0; overflow: visible; }
    .mh-app .bdg-fit   { transform: none; }
    .bdg-noprint, .zr-rail, .topbar, .mht, .fb-fab { display: none !important; }
}

/* =============================================================================
   THE DESIGN'S OWN card.css BELOW - declarations verbatim, selectors namespaced.
   ============================================================================= */
/* ---------- card shell ---------- */
.mh-app .bdg-idc{width:638px;height:1013px;border-radius:34px;position:relative;overflow:hidden;background:#fff;color:var(--bdg-ink-1);flex:none;display:flex;flex-direction:column;box-shadow:0 30px 70px -24px rgba(20,30,25,.4),0 3px 10px rgba(20,30,25,.14),inset 0 1px 0 rgba(255,255,255,.6)}
.mh-app .bdg-hdr{height:324px;flex:none;position:relative;background:var(--bdg-brand);overflow:hidden;box-shadow:0 4px 12px 0 #00000091;transform:translate(61px,-305px) rotate(330deg) scale(2.53,2.05)}
.mh-app .bdg-photo{position:absolute;left:50%;top:155px;transform:translateX(-50%);width:216px;height:216px;border-radius:50%;background:#fff;padding:9px;box-shadow:0 16px 32px -10px rgba(20,30,25,.4)}
.mh-app .bdg-photo .bdg-ring{width:100%;height:100%;border-radius:50%;border:6px solid var(--bdg-brand-700);overflow:hidden;background:#fff}
.mh-app .bdg-photo .bdg-ring img{width:100%;height:100%;object-fit:cover;display:block}
.mh-app .bdg-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:64px 44px 24px;gap:18px;text-align:center;position:relative}
.mh-app .bdg-nm{font-size:30px;font-weight:800;color:var(--bdg-ink-1);letter-spacing:-.01em}
.mh-app .bdg-pill{background:var(--bdg-brand-700);color:#fff;font-weight:700;font-size:15px;padding:10px 26px;border-radius:999px;letter-spacing:.01em}
.mh-app .bdg-rows{align-self:stretch;margin-top:16px;display:flex;flex-direction:column;gap:15px;text-align:left;padding:0 8px}
.mh-app .bdg-rows .bdg-r{display:flex;gap:8px;font-size:22px}
.mh-app .bdg-rows .bdg-r b{width:172px;flex:none;color:var(--bdg-ink-1);font-weight:700}
.mh-app .bdg-rows .bdg-r span{color:var(--bdg-ink-2);font-weight:600}
.mh-app .bdg-foot{height:110px;flex:none;background:var(--bdg-brand);border-radius:0;display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:relative;filter:drop-shadow(0 -5px 9px rgba(0,0,0,.42))}
.mh-app .bdg-footwrap{display:flex;align-items:center;gap:12px}
.mh-app .bdg-footwrap img{height:44px;width:auto;display:block}
.mh-app .bdg-qrbadge{position:absolute;right:30px;top:-52px;width:132px;height:132px;border-radius:22px;background:#fff;box-shadow:0 14px 26px rgba(20,30,25,.22);padding:10px;z-index:1}
.mh-app .bdg-qrbadge img{width:100%;height:100%;display:block}

/* =============================================================================
   THE HOLD - shown instead of the card when there is no photograph on file.
   Sized and centred like the card it replaces, so the popup does not jump.
   ============================================================================= */
.mh-app .bdg-hold {
    width: min(420px, calc(88 * var(--mh-vw, 1vw)));
    background: var(--mh-surface, #fff);
    border: 1px solid var(--mh-line, #D9DFE7);
    border-radius: 18px;
    padding: 30px 28px 24px;
    text-align: center;
    box-shadow: 0 18px 48px rgba(20, 32, 38, .28);
}
.mh-app .bdg-hold-ic {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
    display: grid; place-items: center;
    background: rgba(78, 124, 114, .12); color: var(--mh-green-d, #2E4A43);
}
.mh-app .bdg-hold-ic svg { width: 26px; height: 26px; }
.mh-app .bdg-hold h3 {
    margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--mh-ink, #22303a);
}
.mh-app .bdg-hold p {
    margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--mh-muted, #6B7269);
}
/* The hold carries its own bar, so it must not inherit the card bar's top gap. */
.mh-app .bdg-hold .pass-bar { margin-top: 0; }

/* =============================================================================
   THE CENTRED MH MARK ON THE QR.
   Identical geometry to .passcard .pc-qrlogo in mh-passcard.css - same 22% box,
   same 22% radius, same pine gradient, same white ring - because it IS the same
   mark. It is scoped again here rather than widened there: that rule is bound to
   .passcard, and loosening a shared selector to reach a second surface is how a
   change to one card silently restyles the other.

   NEVER BAKED INTO THE QR. QrService.SvgPine renders at error-correction level H
   specifically so a centre overlay still scans; drawing the mark into the modules
   would destroy data the scanner needs.
   ============================================================================= */
.mh-app .bdg-qrbadge { position: relative; }
.mh-app .bdg-qrbadge .pc-qrlogo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 22%; height: 22%; border-radius: 22%; padding: 4.5%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #2E4A43, #213A33);
    box-shadow: 0 0 0 5px #fff;
}
.mh-app .bdg-qrbadge .pc-qrlogo img { width: 100%; height: 100%; object-fit: contain; display: block; }