/* "Mobile Version" (mobile-view.js): the button in a Premium Design's menu bar, and the phone it
   opens. Shared by AURUM and HOLON; the button takes its colour and type from the menu bar it sits
   in (currentColor, inherited font), a quieter ghost beside the page's own button. */

/* ---------- the button: just before the page's main button; computers and tablets only ---------- */
.mv-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 42px; margin: 0 -12px 0 0; padding: 0 17px 0 14px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; cursor: pointer; opacity: .8; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); transition: opacity .3s, box-shadow .3s; }
.mv-open:hover { opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 60%, transparent); }
.mv-open:focus-visible { opacity: 1; }
.mv-open svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* (the page's links stay centred between its name and the two buttons) */
.top:has(> .mv-open) .links { margin-inline: auto; }
/* a narrow computer: just its phone icon (its name still read out), so the bar never crowds */
@media (min-width: 861px) and (max-width: 1000px) {
  .mv-open { width: 42px; padding: 0; gap: 0; }
  .mv-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* a tablet: no links and no main button, so it sits by the menu icon */
@media (max-width: 860px) {
  .mv-open { margin: 0 0 0 auto; }
}
/* the page at phone width: not needed */
@media (max-width: 640px) {
  .mv-open { display: none; }
}

/* ---------- the overlay: a calm dark room, the phone in it ---------- */
dialog.mv { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: transparent; color: #e9ecf3; }
dialog.mv::backdrop { background: rgba(4, 6, 10, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mv-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px; }
.mv-fit { position: relative; flex: none; width: calc(408px * var(--k, 1)); height: calc(862px * var(--k, 1)); }
/* a thin, even edge all round; no notch */
.mv-phone { position: absolute; left: 0; top: 0; width: 408px; height: 862px; padding: 9px; border-radius: 58px; background: linear-gradient(155deg, #33363d 0%, #121317 34%, #0b0c0f 66%, #26282e 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 2px rgba(0, 0, 0, .55), 0 50px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .6); transform: scale(var(--k, 1)); transform-origin: 0 0; }
.mv-screen { width: 390px; height: 844px; overflow: hidden; border-radius: 49px; background: #07090d; }
.mv-screen iframe { display: block; width: 390px; height: 844px; border: 0; background: #07090d; }
.mv-cap { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .03em; line-height: 1.4; color: rgba(233, 236, 243, .66); text-align: center; }
.mv-close { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: inherit; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); cursor: pointer; transition: background .3s; }
.mv-close:hover { background: rgba(255, 255, 255, .12); }
.mv-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
dialog.mv[open] .mv-stage { animation: mv-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes mv-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  dialog.mv[open] .mv-stage { animation: none; }
}