/* MANZAR scan shell. DOM over the camera canvas; never in the film. No cyan on any control:
   cyan is reserved for lights inside the scene. The record core and the arc are red. */
.mz-shell { position: fixed; inset: 0; z-index: 40; pointer-events: none; font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; }
.mz-shell > *, .mz-shell-bottom > * { pointer-events: auto; }
.mz-shell :where(button) { appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; }
.mz-shell-mark { position: fixed; top: calc(12px + env(safe-area-inset-top)); inset-inline-start: 14px; width: 44px; height: 44px; border-radius: 12px; background: rgba(10,22,40,.55); display: flex; align-items: center; justify-content: center; }
.mz-shell-mark svg { width: 22px; height: 26px; }
.mz-shell-account[hidden] { display: none; }
.mz-shell-account { position: fixed; top: calc(18px + env(safe-area-inset-top)); inset-inline-end: 18px; width: 32px; height: 32px; border-radius: 999px; background: rgba(10,22,40,.55); }
.mz-shell-account::after { content: ""; position: absolute; inset: 9px; border-radius: 999px; background: #fff; opacity: .9; }
.mz-shell-account[data-state="out"]::after { animation: mz-shell-pulse 2.2s ease-in-out infinite; }
.mz-shell-account[data-state="in"] { background: #fff; }
.mz-shell-account[data-state="in"]::after { background: #0a1628; }
.mz-shell-bottom { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 22px; pointer-events: none; }
.mz-shell-timer { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: rgba(226,34,34,.92); font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-shell-rec { position: relative; width: 74px; height: 74px; border-radius: 999px; border: 4px solid #fff; box-sizing: border-box; background: transparent; }
.mz-shell-rec::before { content: ""; position: absolute; inset: 8px; border-radius: 999px; background: #e22222; transition: inset .2s, border-radius .2s; }
.mz-shell-rec.on::before { inset: 22px; border-radius: 6px; }
.mz-shell-rec .arc { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); }
.mz-shell-rec .arc circle { fill: none; stroke: #e22222; stroke-width: 8; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.mz-shell-rec.on .arc circle { opacity: 1; transition: stroke-dashoffset .25s linear; }
.mz-shell-flip { width: 48px; height: 48px; border-radius: 999px; background: rgba(10,22,40,.55); color: #fff; display: flex; align-items: center; justify-content: center; position: absolute; inset-inline-start: calc(50% + 60px); }
.mz-shell-flip svg { width: 24px; height: 24px; }
.mz-shell-flip:disabled { opacity: .5; }
/* "Make your own" (referrals 0048): the flip button's mirror on the other side of record. Never filmed (DOM), and
   hidden during a take anyway. White, not cyan (cyan is the scene's). */
.mz-shell-make[hidden] { display: none; }
.mz-shell-make { position: absolute; inset-inline-end: calc(50% + 56px); max-width: calc(50% - 70px); display: flex; animation: mz-shell-make-in .45s cubic-bezier(.2,.8,.2,1) both, mz-shell-make-nudge 1.6s 1.2s ease-in-out 2; }
.mz-shell-make a { display: block; padding: 9px 14px; border-radius: 999px; background: #fff; color: #0a1628; font-weight: 700; font-size: 13px; line-height: 1.15; text-align: center; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.mz-shell-make .x { position: absolute; top: -10px; inset-inline-end: -8px; width: 26px; height: 26px; border-radius: 999px; background: rgba(10,22,40,.85); font-size: 16px; line-height: 26px; text-align: center; }
.mz-shell-bottom:has(.mz-shell-rec.on) .mz-shell-make { visibility: hidden; }
@keyframes mz-shell-make-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes mz-shell-make-nudge { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .mz-shell-make { animation: none; } }
/* wearables strip (front camera only): above the record row and the timer; scrolls sideways */
.mz-shell-faces { position: fixed; left: 0; right: 0; bottom: calc(140px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 8px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mz-shell-faces[hidden] { display: none; }
.mz-shell-faces::-webkit-scrollbar { display: none; }
.mz-shell-chip { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(10,22,40,.55); color: #fff; font-weight: 600; white-space: nowrap; }
.mz-shell-chip.on { background: #fff; color: #0a1628; }
/* A wearable with a thumbnail: a 56px tile showing the thing itself, its name under
   it. The current one is ringed rather than filled — the picture is the content, so
   inverting the tile would hide what was picked. */
.mz-shell-chip.sq { width: 56px; height: auto; padding: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mz-shell-tile { width: 56px; height: 56px; border-radius: 12px; background: rgba(10,22,40,.55); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mz-shell-chip.sq.on .mz-shell-tile { box-shadow: inset 0 0 0 2px #fff; }
.mz-shell-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mz-shell-tile svg { width: 26px; height: 26px; }
.mz-shell-cap { max-width: 56px; font-size: 10px; line-height: 1.2; font-weight: 600; color: #fff; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-shell-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,16,31,.55); }
.mz-shell-sheet .card { position: relative; width: 100%; max-width: 520px; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #0a1628; color: #fff; display: flex; flex-direction: column; gap: 10px; }
.mz-shell-sheet .btns { display: flex; flex-direction: column; gap: 10px; flex: none; }
/* One filled action leads, the other two sit under it at a lower weight. Three pills of the
   same width and the same fill is a row where nothing is the next step. */
.mz-shell-sheet .btns .row { display: flex; gap: 10px; }
.mz-shell-sheet .btns [data-a] { flex: 1; min-height: 52px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.12);
  color: #fff; text-decoration: none; font: 700 15px system-ui, sans-serif; border: 0; cursor: pointer; white-space: nowrap; }
.mz-shell-sheet .btns .primary { background: #fff; color: #0a1628; }
.mz-shell-sheet .btns .row [data-a] { min-height: 48px; font-size: 14px; background: rgba(255,255,255,.09); }
.mz-shell-sheet [data-row] { display: block; width: 100%; text-align: start; padding: 14px 6px; border-bottom: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; font: inherit; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.mz-shell-sheet .x { position: absolute; top: 10px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 34px; border: 0; cursor: pointer; }
.mz-shell-toast { position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; padding: 9px 14px; border-radius: 999px; background: rgba(10,22,40,.92); color: #fff; font: 600 13px system-ui, sans-serif; white-space: nowrap; }
@keyframes mz-shell-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .mz-shell-account[data-state="out"]::after { animation: none; } .mz-shell-rec::before, .mz-shell-rec .arc circle { transition: none; }
  .mz-shell-sheet.full .card { animation: none; } .mz-shell-sheet .btns [data-a], .mz-shell-sheet .chip { transition: none; } }

/* ---- the top-left cluster: hamburger, then the mark as a watermark ---- */
.mz-shell-wm { position: fixed; top: calc(12px + env(safe-area-inset-top)); inset-inline-start: 66px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mz-shell-wm img { width: 34px; height: 34px; object-fit: contain; display: block; }

/* ---- the avatar ---- */
/* The bare dot IS the control when signed out. Once there is a picture or an initial to
   show, the dot has to get out of its way or it paints a disc over the face. */
.mz-shell-account:has(.mz-shell-av)::after { display: none; }
.mz-shell-av { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #fff; color: #0a1628; font: 700 15px/1 system-ui, sans-serif; }

/* ---- the action rail: ours, never the business's ---- */
/* Right-hand column, clear of the wearables strip and the record row. Anything an
   experience draws under here is covered by our controls, so this column is a reserved
   zone when authoring content. */
.mz-shell-rail { position: fixed; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 340px); }
.mz-shell-rail[hidden] { display: none; }
.mz-shell-act { width: 44px; height: 44px; border-radius: 999px; background: rgba(10,22,40,.55); color: #fff; display: flex; align-items: center; justify-content: center; }
.mz-shell-act svg { width: 22px; height: 22px; }
.mz-shell-act.on { background: #fff; color: #0a1628; }

/* ---- the drawer comes from the side, the way every phone drawer does ---- */
.mz-shell-sheet.side { align-items: stretch; justify-content: flex-start; }
.mz-shell-sheet.side .card { width: min(320px, 86vw); max-width: none; height: 100%; border-radius: 0 22px 22px 0; padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); gap: 0; overflow-y: auto; }
.mz-shell-sheet.side:dir(rtl) .card { border-radius: 22px 0 0 22px; }
.mz-shell-logo { padding: 6px 2px 18px; }
.mz-shell-logo img { width: 100%; max-width: 208px; height: auto; display: block; }
.mz-shell-logo.bare::after { content: "MANZAR"; font: 800 22px/1 system-ui, sans-serif; letter-spacing: .14em; }

/* ---- the result: the film gets the screen, not a drawer ---- */
/* A take is the thing the scanner came for. Every camera app on the phone gives one the
   whole screen - Snapchat, Instagram, the iOS camera roll - and this was a bottom drawer
   holding the film in a box above a row of pills, which read as a notification about the
   film rather than the film. Full bleed now: close and the take's length on top, the film
   fitted whole in the middle, the actions at the foot. */
.mz-shell-sheet.full { align-items: stretch; background: #0a1628; }
.mz-shell-sheet.full .card { max-width: none; border-radius: 0; gap: 14px;
  padding: calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  animation: mz-shell-rise .26s cubic-bezier(.16,1,.3,1) both; }
.mz-shell-sheet.full .top { display: flex; align-items: center; justify-content: space-between; flex: none; }
/* The length, stated once. It was the missing half of "what did I just make". */
.mz-shell-sheet .len { padding: 0 12px; height: 32px; display: inline-flex; align-items: center; border-radius: 999px;
  background: rgba(255,255,255,.12); font: 700 13px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.mz-shell-sheet .len[hidden] { display: none; }
/* contain, never cover: a take cropped to fill the box is not the take that was made. The
   letterbox falls on the sheet's own ground, so there are no black bars to read as a fault. */
.mz-shell-sheet .film { position: relative; flex: 1 1 auto; min-height: 0; }
.mz-shell-sheet video { width: 100%; height: 100%; object-fit: contain; display: block; background: none; }
/* border: 0 is load-bearing. A sheet is appended to <body>, not inside .mz-shell, so the
   shell's button reset never reaches it and the UA's grey outset ring comes back. */
.mz-shell-sheet .chip { width: 40px; height: 40px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.12);
  color: #fff; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; }
/* this one sits over the film, so it takes the shell's on-camera navy rather than the sheet's white wash */
.mz-shell-sheet .chip.on-film { position: absolute; inset-inline-end: 12px; bottom: 12px; background: rgba(10,22,40,.55); }
.mz-shell-sheet .chip svg { width: 21px; height: 21px; }
.mz-shell-sheet .btns [data-a] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mz-shell-sheet .btns svg { width: 19px; height: 19px; flex: none; }
/* a control you press should move under the finger */
.mz-shell-sheet .btns [data-a], .mz-shell-sheet .chip { transition: transform .12s ease; }
.mz-shell-sheet .btns [data-a]:active, .mz-shell-sheet .chip:active { transform: scale(.97); }
@keyframes mz-shell-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---- the quote on a preview link (sheet.js quote) ---- */
.mz-shell-sheet.mz-try-quote .card { animation: mz-shell-rise .26s cubic-bezier(.16,1,.3,1) both; }
.mz-quote-shop { display: flex; align-items: center; gap: 10px; padding-inline-end: 44px; font: 700 15px/1.3 system-ui, sans-serif; }
.mz-quote-shop img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; flex: none; }
.mz-quote-price { margin: 0; font: 800 34px/1.1 system-ui, sans-serif; letter-spacing: -.01em; text-align: start; font-variant-numeric: tabular-nums; }
.mz-quote-left { margin: 0; font: 600 13px/1.3 system-ui, sans-serif; color: #ffd27a; font-variant-numeric: tabular-nums; }
.mz-quote-promo { margin: -4px 0 0; font: 600 14px/1.4 system-ui, sans-serif; color: #37e0f0; }
.mz-quote-note { display: grid; gap: 6px; font: 600 13px/1.3 system-ui, sans-serif; color: #9fb3c8; }
.mz-quote-note textarea { width: 100%; box-sizing: border-box; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: #fff; font: 400 16px/1.4 system-ui, sans-serif; }
.mz-quote-note textarea:focus { outline: 2px solid #37e0f0; outline-offset: 1px; }
.mz-quote-ask { margin: 2px 0 0; text-align: center; font: 400 13px/1.4 system-ui, sans-serif; color: #9fb3c8; text-decoration: none; }
a.mz-quote-ask { text-decoration: underline; text-underline-offset: 3px; }
.mz-shell-sheet .btns [data-a]:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .mz-shell-sheet.mz-try-quote .card { animation: none; } }

/* ---- the rail's overflow list ---- */
.mz-shell-title { margin: 2px 0 4px; font: 700 15px system-ui, sans-serif; }
.mz-shell-sheet [data-row] .ic { display: inline-flex; width: 22px; height: 22px; margin-inline-end: 12px; vertical-align: -5px; }
.mz-shell-sheet [data-row] .ic svg { width: 22px; height: 22px; }

/* ---- the account button reads as an account ---- */
/* It was a bare dot: nothing said what it was or that it could be tapped. A person glyph
   when signed out, the picture or the initial when signed in, and a ring so it reads as a
   control rather than an indicator. */
.mz-shell-account { width: 36px; height: 36px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.mz-shell-av.out { background: none; color: #fff; }
.mz-shell-av.out svg { width: 22px; height: 22px; display: block; }
.mz-shell-account[data-state="in"] { box-shadow: none; }

/* ---- the drawer: identity block, then grouped rows ---- */
/* Identity is a block, not row one - Spotify, Snapchat and TikTok all put a picture and a
   name at the top and never a text row. The guest sub-line states the free-forever promise
   BEFORE the button, so the button reads as an offer rather than a toll. */
.mz-shell-id { display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: center; padding: 2px 2px 16px; }
.mz-shell-id .mz-shell-av { position: static; width: 40px; height: 40px; }
.mz-shell-id-txt { min-width: 0; }
.mz-shell-id-txt b { display: block; font: 700 15px/1.25 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-shell-id-txt i { display: block; margin-top: 2px; font: 400 12.5px/1.35 system-ui, sans-serif; font-style: normal; color: #9fb3c8; }
.mz-shell-id-cta { grid-column: 1 / -1; display: block; text-align: center; padding: 12px 10px; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font: 700 14px system-ui, sans-serif; border: 0; cursor: pointer; }
/* the only filled control in the drawer, so there is one obvious next step and not five */
.mz-shell-id-cta.primary { background: #fff; color: #0a1628; }
.mz-shell-sec { margin: 14px 0 2px; padding: 0 2px; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #7e93ab; text-align: start; }
.mz-shell-sheet [data-row] { display: flex; align-items: center; }
.mz-shell-steps { margin: 6px 0 2px; padding-inline-start: 22px; font: 400 14px/1.6 system-ui, sans-serif; color: #dce7f2; }
.mz-shell-steps li { margin-bottom: 8px; }

/* ---- the account ask ---- */
/* A bar above the record row, never a modal: the camera keeps running and the experience
   keeps playing behind it. It is a child of .mz-shell, which is what keeps it out of the
   film - a bar burned into somebody's keepsake would be an advert in their memory. */
.mz-shell-ask { position: fixed; left: 12px; right: 12px; bottom: calc(112px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px;
  background: rgba(10,22,40,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); }
.mz-shell-ask[hidden] { display: none; }
.mz-shell-ask p { flex: 1; margin: 0; font: 600 13px/1.35 system-ui, sans-serif; color: #fff; }
.mz-shell-ask .go { flex: none; padding: 9px 14px; border-radius: 999px; background: #fff; color: #0a1628; font: 700 13px system-ui, sans-serif; }
.mz-shell-ask .no { flex: none; width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-size: 17px; line-height: 30px; }
/* the wearables strip owns this band on the front camera */
.mz-shell-faces:not([hidden]) ~ .mz-shell-ask { display: none; }
.mz-shell-build { margin: 18px 2px 0; font: 600 10px/1 ui-monospace, monospace; letter-spacing: .06em; color: #5f7590; }

/* ---- teaser drawer (shell.js MZ_TEASER): mark + wordmark at one cap height, one baseline ---- */
.mz-shell-lockup { display: flex; align-items: flex-end; gap: 12px; padding: 8px 2px 20px; align-self: flex-start; }
.mz-shell-lockup img { display: block; height: 24px; flex: none; }
.mz-shell-lockup img:first-child { width: 25.84px; }  /* 24 x 3.2131 / 2.9845 (viewBox) */
.mz-shell-lockup img:last-child { width: 156.15px; }  /* 24 x 390.37 / 60 */
.mz-shell-teaser { padding: 0 2px 18px; }
.mz-shell-teaser p { margin: 0 0 6px; font: 600 16px/1.4 system-ui, sans-serif; color: #fff; }
.mz-shell-teaser p:last-child { color: #9fb3c8; font-weight: 500; }
.mz-shell-teaser-rows { margin-top: 14px; }
.mz-shell-teaser-rows [data-row] { font: 500 15px system-ui, sans-serif; }
.mz-shell-sheet [data-row][disabled] { opacity: .45; cursor: default; }
.mz-shell-sheet [data-row] .v { margin-inline-start: auto; color: #9fb3c8; }

/* ---- the status note: camera switching, "coming soon" ---- */
/* Centred, a third of the way down: narrower than the gap between the side columns, so it
   never sits on the rail, the top cluster or the record row, and above the face page's own
   mid-screen "Look at the camera" hint, which comes up as the new camera does. */
.mz-shell-note { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -50%); max-width: calc(100% - 150px); padding: 9px 16px; border-radius: 999px;
  background: rgba(10,22,40,.82); color: #fff; font: 600 13px/1.3 system-ui, sans-serif; text-align: center; pointer-events: none; }
.mz-shell-note[hidden] { display: none; }
/* the flip heard the tap: a ring turns round the button until the new camera is live */
.mz-shell-flip.busy:disabled { opacity: 1; }
.mz-shell-flip.busy::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid rgba(255,255,255,.2); border-top-color: #fff; animation: mz-shell-spin .8s linear infinite; }
@keyframes mz-shell-spin { to { transform: rotate(360deg); } }

/* ---- wearables not ready yet, and the "create your own" tile ---- */
.mz-shell-tile { position: relative; }
.mz-shell-chip.soon { cursor: default; }
.mz-shell-chip.soon img { opacity: .45; }
.mz-shell-chip.soon:not(.sq) { color: rgba(255,255,255,.6); }
.mz-shell-badge { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 1px 5px; border-radius: 999px; background: #fff; color: #0a1628;
  font: 700 8.5px/1.3 system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.mz-shell-chip:not(.sq) .mz-shell-badge { position: static; transform: none; margin-inline-start: 6px; vertical-align: 1px; }
.mz-shell-chip.make .mz-shell-tile { background: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
/* A locked wearable (signed out): the same dimmed, inert look as "soon", but the badge
   is a small padlock icon rather than a text pill - one glance tells the two apart. */
.mz-shell-chip.locked { cursor: default; }
.mz-shell-chip.locked img { opacity: .55; }
.mz-shell-chip.locked:not(.sq) { color: rgba(255,255,255,.6); }
.mz-shell-badge.lock { width: 16px; height: 16px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,22,40,.85); }
.mz-shell-badge.lock svg { width: 10px; height: 10px; }
.mz-shell-body { margin: 0 0 6px; font: 400 14px/1.5 system-ui, sans-serif; color: #dce7f2; }
@media (prefers-reduced-motion: reduce) { .mz-shell-flip.busy::after { animation: none; } }

/* ---- the badge unlock sheet (badges.js). Opacity and transform only. ---- */
.mz-badge .card { align-items: center; text-align: center; gap: 8px; animation: mz-badge-in .3s cubic-bezier(.23,1,.32,1) both; }
.mz-badge-kicker { margin: 0; font: 700 12px system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9fb3c8; }
.mz-badge-medal { width: 96px; height: 96px; margin: 6px 0 2px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ring), 0 0 0 6px rgba(255,255,255,.06); background: #13233a; overflow: hidden;
  animation: mz-badge-pop .3s cubic-bezier(.23,1,.32,1) .06s both; }
.mz-badge-medal img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.mz-badge-name { margin: 4px 0 0; font: 800 22px/1.2 system-ui, sans-serif; }
.mz-badge-desc { margin: 0; max-width: 32ch; font: 400 14px/1.4 system-ui, sans-serif; color: #c4d0de; }
.mz-badge-more { margin: 2px 0 0; font: 600 13px system-ui, sans-serif; color: #ffd27a; }
.mz-badge .btns { align-self: stretch; margin-top: 8px; }
.mz-badge-link { margin-top: 2px; padding: 8px; font: 500 13px system-ui, sans-serif; color: #9fb3c8; text-decoration: underline; text-underline-offset: 3px; }
@keyframes mz-badge-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes mz-badge-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes mz-badge-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mz-badge .card { animation: mz-badge-fade .2s linear both; } .mz-badge-medal { animation: none; } }

/* ---- the business's brand (wave 1, params.brand; engine.js mountHUD) ----
   Only the business's own surfaces, marked .mz-branded with the colours inline so the recorder's
   stamp (which clones the element alone) films what the screen shows. Class-only selectors on
   purpose: an #hud prefix would not match inside the stamp clone. Our chrome never takes them. */
.mz-branded .mz-cta-btn.primary, .mz-branded .mz-reward-btn { background: var(--mz-brand-primary); color: var(--mz-brand-on-primary); box-shadow: none; }
.mz-branded .mz-chip { border-color: var(--mz-brand-accent); }
.mz-branded .mz-chip svg { color: var(--mz-brand-accent); }
.mz-branded .mz-reward-btn.claimed { background: rgba(255,255,255,.12); color: #fff; }
.mz-reward-btn.ended, .mz-branded .mz-reward-btn.ended { background: rgba(255,255,255,.12); color: rgba(255,255,255,.72); box-shadow: none; animation: none; cursor: default; }
.mz-top.has-logo .mz-biz { display: none; }
.mz-logo { flex: none; display: block; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; }
.mz-logo img { display: block; width: 100%; height: 100%; }

/* ---- a business's reward (sheet.js reward, wave 1) ---- */
.mz-shell-sheet.mz-rw-sheet .card { animation: mz-shell-rise .26s cubic-bezier(.16,1,.3,1) both; }
.mz-shell-sheet.mz-rw-sheet.mz-branded .card { background: var(--mz-brand-bg); color: var(--mz-brand-text); }
.mz-shell-sheet.mz-rw-sheet.mz-branded .x { color: var(--mz-brand-text); background: rgba(127,127,127,.18); }
.mz-rw-meta { margin: 0; font: 600 14px/1.4 system-ui, sans-serif; opacity: .8; }
.mz-rw-code { margin: 6px 0 0; padding: 14px; border-radius: 14px; text-align: center; font: 800 30px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .12em; background: var(--mz-brand-primary, #fff); color: var(--mz-brand-on-primary, #0a1628); }
.mz-rw-note { margin: 0; text-align: center; font: 400 13px/1.4 system-ui, sans-serif; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .mz-shell-sheet.mz-rw-sheet .card { animation: none; } }

/* ---- the stamp card (wave 2; shell/stampcard.js, slot from engine.js mountHUD) ----
   Ours, never filmed: .mz-st and .mz-st-sheet are in the recorder's excludeSel. The slot is also a
   .mz-reward, so it gets the reward row's place and reveal, and engine.js sets the business's colours
   on it inline (wave 1). The slot is empty until GET /campaigns/:id/stamp-card answers. */
.mz-st:empty { display: none; }
.mz-reward.mz-st { flex-direction: column; align-items: center; gap: 8px; }
.mz-st-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; max-width: 100%; padding: 8px 14px; border-radius: 18px;
  background: rgba(10,22,40,.72); color: #fff; font: 700 13px/1.2 system-ui, sans-serif; }
.mz-st-dots { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mz-st-dot { width: 10px; height: 10px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--mz-brand-primary, #f0c040); }
.mz-st-dot.on { background: var(--mz-brand-primary, #f0c040); }
.mz-st-dot.pop { animation: mz-st-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.mz-st-goal { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; opacity: .82; }
.mz-st-until { font-weight: 600; opacity: .72; white-space: nowrap; }
.mz-st-btn { padding: 12px 22px; border: 0; border-radius: 999px; font: 800 14px system-ui, sans-serif; cursor: pointer;
  background: var(--mz-brand-primary, #f0c040); color: var(--mz-brand-on-primary, #0a1628); }
.mz-st-btn:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.72); cursor: default; }
.mz-st-signin, .mz-st-code { padding: 4px; border: 0; background: none; color: #fff; font: 600 12px system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; opacity: .85; cursor: pointer; }
.mz-st-sheet .card { align-items: center; text-align: center; animation: mz-shell-rise .26s cubic-bezier(.16,1,.3,1) both; }
.mz-st-sheet.mz-branded .card { background: var(--mz-brand-bg); color: var(--mz-brand-text); }
.mz-st-sheet.mz-branded .x { color: var(--mz-brand-text); background: rgba(127,127,127,.18); }
.mz-st-sheet .mz-st-dot { width: 18px; height: 18px; border-width: 2px; }
.mz-st-hint, .mz-st-msg { margin: 0; min-height: 1.4em; font: 400 13px/1.4 system-ui, sans-serif; opacity: .78; }
.mz-st-msg { font-weight: 700; opacity: 1; }
.mz-st-pin { display: flex; gap: 10px; height: 14px; margin: 4px 0 0; }
.mz-st-pin i { width: 12px; height: 12px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid currentColor; opacity: .5; }
.mz-st-pin i.on { background: currentColor; opacity: 1; }
.mz-st-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 320px; }
.mz-st-pad button { min-height: 56px; border: 0; border-radius: 16px; background: rgba(127,127,127,.16); color: inherit; font: 700 22px system-ui, sans-serif; cursor: pointer; }
.mz-st-pad button.ok { font-size: 15px; background: var(--mz-brand-primary, #fff); color: var(--mz-brand-on-primary, #0a1628); }
.mz-st-pad button:disabled { opacity: .45; cursor: default; }
.mz-st-pad button:active:not(:disabled) { transform: scale(.96); }
.mz-st-sheet .card.shake { animation: mz-st-shake .4s ease both; }
@keyframes mz-st-pop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes mz-st-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .mz-st-dot.pop, .mz-st-sheet .card, .mz-st-sheet .card.shake { animation: none; } }

/* ---- the living menu (wave 3; the menu kind experiences/menu since engine-host step 2: its HUD piece fills the slot) ----
   Ours, never filmed: .mz-mn and .mz-mn-sheet are in the recorder's excludeSel. The slot is also a
   .mz-cta, so it takes the CTA row's place, reveal and the business's colours (engine.js sets them
   inline); the button is a .mz-cta-btn.primary. The sheet is a .mz-shell-sheet: its card, .x, title and
   .btns .primary come from the shell. Motion is transform and opacity only. */
.mz-mn:empty { display: none; }
/* AR menu v2: the cart pill (a .mz-cta-btn.primary, brand colours from the slot) and "Full menu". Ours, never filmed. */
.mz-mn { align-items: center; }
.mz-mn-cart span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-mn-full { border: 0; background: none; padding: 10px 4px; color: #fff; font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.65); cursor: pointer; }
html.mz-embed #hud .mz-mn-btn { pointer-events: auto !important; cursor: pointer; }   /* browsing is the preview's job */
.mz-mn-sheet .card { max-height: 88vh; max-height: 88dvh; animation: mz-shell-rise .26s cubic-bezier(.16,1,.3,1) both; }
.mz-mn-sheet.mz-branded .card { background: var(--mz-brand-bg); color: var(--mz-brand-text); }
.mz-mn-sheet.mz-branded .x { color: var(--mz-brand-text); background: rgba(127,127,127,.18); }
.mz-mn-sheet.mz-branded .btns .primary { background: var(--mz-brand-primary); color: var(--mz-brand-on-primary); }
.mz-mn-sheet .mz-shell-title { margin: 0; padding-inline-end: 44px; overflow-wrap: anywhere; }
.mz-mn-sheet .btns [data-a]:disabled { opacity: .55; cursor: default; }
.mz-mn-offer { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(127,127,127,.16); font: 400 13px/1.4 system-ui, sans-serif; overflow-wrap: anywhere; }
.mz-mn-offer b { display: block; font-weight: 800; }
.mz-mn-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mz-mn-list h3 { margin: 14px 0 4px; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.mz-mn-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(127,127,127,.18); }
.mz-mn-item.out { opacity: .5; }
.mz-mn-ph { display: block; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: rgba(127,127,127,.2); }
.mz-mn-txt { min-width: 0; font: 400 12px/1.35 system-ui, sans-serif; }
.mz-mn-txt b { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.mz-mn-txt small { display: block; font-size: 12px; opacity: .72; overflow-wrap: anywhere; }
.mz-mn-txt .p { display: block; margin-top: 2px; font-size: 14px; font-weight: 800; }
.mz-mn-qty { display: flex; align-items: center; gap: 6px; }
.mz-mn-qty button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(127,127,127,.2); color: inherit; font: 700 20px/1 system-ui, sans-serif; cursor: pointer; }
.mz-mn-qty button:disabled { opacity: .35; cursor: default; }
.mz-mn-qty button:active:not(:disabled) { transform: scale(.94); }
.mz-mn-qty .n { min-width: 1.4em; text-align: center; font: 800 15px system-ui, sans-serif; }
.mz-mn-so { font: 700 12px system-ui, sans-serif; white-space: nowrap; }
.mz-mn-note { margin: 0; text-align: center; font: 400 12px/1.4 system-ui, sans-serif; opacity: .72; }
@media (prefers-reduced-motion: reduce) { .mz-mn-sheet .card { animation: none; } .mz-mn-qty button:active:not(:disabled) { transform: none; } }

/* Track S trust sheets (shell/trust.js). The sheets reuse .mz-shell-sheet; 16px in the textarea stops iOS zooming. */
.mz-trust-reasons { display: grid; gap: 8px; }
.mz-trust-reasons label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.08); cursor: pointer; font: 500 14px system-ui, sans-serif; }
.mz-trust-reasons input { width: 18px; height: 18px; accent-color: #37e0f0; flex: none; }
.mz-trust-text { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: #06101f; color: #fff; font: 400 16px/1.4 system-ui, sans-serif; resize: vertical; }
.mz-trust-dest { margin: 0 0 6px; font: 700 15px system-ui, sans-serif; word-break: break-all; }
.mz-trust.full { align-items: center; padding: 16px; background: #06101f; }
.mz-trust.full .card { border-radius: 22px; }
.mz-trust.full .btns a[data-a] { display: flex; align-items: center; justify-content: center; text-decoration: none; }