/* ═══════════════════════════════════════════════════════════════════════════
   COREVERSE V71 — MOBILE VIEW TOGGLE

   Lets anyone on a desktop flip the site into its phone layout without opening
   DevTools (which the V70 guard blocks for non-admins anyway).

   The preview renders the real page inside a 390px-wide iframe rather than
   faking it with CSS transforms. That matters: the stylesheets rely on
   `@media (max-width:700px)` and `(max-width:820px)`, and media queries key
   off the VIEWPORT. A scaled-down desktop viewport still reports ~1440px, so a
   transform-based fake would show desktop CSS at phone size — the exact thing
   someone checking the mobile layout needs to trust. A real iframe at 390px
   evaluates every breakpoint the way an actual phone does.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The toggle hides itself on real phones — the layout is already mobile. */
.mobileview-toggle{
  display:none;
  width:38px;height:38px;
  align-items:center;justify-content:center;
  border:1px solid rgba(20,20,25,.12);border-radius:50%;
  background:rgba(255,255,255,.7);
  color:var(--ink,#0a0a0b);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
@media (min-width:821px){ .mobileview-toggle{display:inline-flex} }
.mobileview-toggle:hover{background:#fff;border-color:rgba(20,20,25,.28)}
.mobileview-toggle:active{transform:scale(.94)}
.mobileview-toggle[aria-pressed="true"]{background:#141419;border-color:#141419;color:#fff}

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.mobileview{
  position:fixed;inset:0;z-index:9000;
  display:none;
  place-items:center;
  background:rgba(14,14,17,.78);
  padding:24px;
}
.mobileview[open],
.mobileview.is-open{display:grid}
body.mobileview-locked{overflow:hidden}

.mobileview__shell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-height:100%;
}

/* Phone frame. 390x844 is the iPhone 14/15 logical viewport and a fair
   midpoint for Android too. */
.mobileview__device{
  position:relative;
  width:390px;height:844px;
  max-height:calc(100vh - 130px);
  border:11px solid #17171c;
  border-radius:44px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
}
.mobileview__device::before{
  /* notch */
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:120px;height:24px;border-radius:0 0 14px 14px;
  background:#17171c;z-index:2;pointer-events:none;
}
.mobileview__frame{
  width:390px;height:100%;border:0;display:block;background:#fff;
}

.mobileview__bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
}
.mobileview__bar p{
  margin:0;color:rgba(255,255,255,.82);
  font:600 12.5px/1.4 "Ekkamai Vibe","Ekkamai New","Inter",system-ui,sans-serif;
  letter-spacing:.04em;
}
.mobileview__size{
  border:1px solid rgba(255,255,255,.26);border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;
  padding:7px 14px;min-height:34px;
  font:600 12px/1 "Ekkamai Vibe","Ekkamai New","Inter",system-ui,sans-serif;
  letter-spacing:.04em;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.mobileview__size:hover{background:rgba(255,255,255,.18)}
.mobileview__size.is-active{background:#fff;border-color:#fff;color:#141419}

.mobileview__close{
  position:absolute;top:-6px;right:-56px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;
  font-size:20px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
}
.mobileview__close:hover{background:rgba(255,255,255,.22)}

@media (max-width:1100px){
  .mobileview__close{top:auto;bottom:-52px;right:auto;left:50%;translate:-50% 0}
}

/* Inside the preview frame the toggle is pointless — hide it so the phone
   view is a faithful copy of what a visitor actually sees. */
html.is-mobileview-frame .mobileview-toggle,
html.is-mobileview-frame .mobileview{display:none !important}