/* ═══ PREVIEW VARIANTS · TOUCH · SOFT KEYBOARD (B51-02 / B51-18 / B51-19) ═══
   Shared chrome for every preview surface: the 4-variant switch, the touch
   switch, and the simulated device keyboard. Loaded once; used by the route
   preview dock, the component preview dock/overlay and the icon preview. */

/* ── the ONE viewport control ─────────────────────────────────────────
   Four variants in a single segmented group with the touch switch beside it —
   no second group, no separator, no gap (B51-18). */
.pv-vps{ display:inline-flex;align-items:center;gap:8px;flex:0 0 auto; }
.pv-seg{ display:inline-flex;align-items:center;gap:2px;padding:2px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px; }
.pv-vp{ display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:26px;padding:0;border:0;border-radius:8px;
  background:transparent;color:var(--fg-3);cursor:pointer;
  transition:background var(--mk-t-fast),color var(--mk-t-fast); }
.pv-vp .mi{ font-size:17px; }
.pv-vp:hover{ color:var(--fg-1);background:var(--bg-1); }
.pv-vp.on{ background:var(--bg-1);color:var(--accent-text,var(--accent));box-shadow:var(--shadow-sm); }
/* The touch switch is a STATE, not a 5th variant — a filled pill when on. */
.pv-touch{ display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:1px solid var(--border);border-radius:9px;
  background:var(--bg-1);color:var(--fg-3);cursor:pointer;
  transition:background var(--mk-t-fast),color var(--mk-t-fast),border-color var(--mk-t-fast); }
.pv-touch .mi{ font-size:17px; }
.pv-touch:hover{ color:var(--fg-1);border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); }
.pv-touch.on{ background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-text,var(--accent)); }

/* ── touch simulation, host side ──────────────────────────────────────
   Inside a preview DOCUMENT the hover gate (`html.mk-pv-touch`) switches every
   `:hover` rule off. For a preview rendered INLINE in the app document we can't
   touch the app's own sheets, so the surface carries `.mk-pv-touch-host` and the
   lab gates its hover STATE in JS — the outline still tracks the pointer. */
.mk-pv-touch-host{ cursor:default; }
/* Mirrors the `@media (pointer:coarse)` floors so flipping the switch visibly
   grows the touch targets inside a previewed document too. */
html.mk-pv-touch .nav-profile .avatar{ width:44px;height:44px;font-size:13px; }
html.mk-pv-touch .nav-pill,
html.mk-pv-touch .tb .ti{ min-width:44px;min-height:44px; }
html.mk-pv-touch .panel-close{ width:44px;height:44px; }

/* ── the simulated keyboard ───────────────────────────────────────────
   A child of the device frame, so a CSS scale on the frame scales it and it
   occupies DEVICE pixels the way a real keyboard does. */
.pv-kb{
  position:absolute;inset-inline:0;bottom:0;z-index:60;
  display:none;flex-direction:column;
  background:color-mix(in srgb,var(--bg-2) 96%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(13,37,48,.14);
  font-family:var(--mk-font-ui);
  user-select:none;-webkit-user-select:none;
}
.pv-kb.open{ display:flex; }
.pv-kb-grab{ height:18px;display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:ns-resize;touch-action:none;flex:0 0 auto; }
.pv-kb-bar{ width:44px;height:4px;border-radius:999px;background:var(--fg-3);opacity:.45; }
.pv-kb-hval{ font:600 9.5px var(--mk-font-mono,ui-monospace,monospace);color:var(--fg-3);
  font-variant-numeric:tabular-nums; }
.pv-kb-acc{ display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 10px 4px;flex:0 0 auto; }
.pv-kb-acc-l{ font:600 10px var(--mk-font-ui);color:var(--fg-3); }
.pv-kb-done{ border:0;background:transparent;padding:2px 6px;border-radius:6px;
  font:700 12px var(--mk-font-ui);color:var(--accent-text,var(--accent));cursor:pointer; }
.pv-kb-done:hover{ background:color-mix(in srgb,var(--accent) 12%,transparent); }
.pv-kb-body{ flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:0 4px 7px; }
.pv-kb-row{ flex:1;display:flex;gap:5px;align-items:stretch;justify-content:center; }
.pv-kb-k{ flex:1 1 0;min-width:0;border:0;border-radius:6px;
  background:var(--bg-1);box-shadow:0 1px 0 rgba(13,37,48,.22);
  font:500 17px var(--mk-font-ui);color:var(--fg-1);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center; }
.pv-kb-k:active{ background:var(--bg-2);transform:translateY(1px);box-shadow:none; }
.pv-kb-k .mi{ font-size:19px; }
.pv-kb-shift,.pv-kb-back,.pv-kb-k[data-k="123"],.pv-kb-k[data-k="abc"],.pv-kb-k[data-k="abc2"]{
  background:color-mix(in srgb,var(--fg-3) 22%,var(--bg-2));font-size:13px;font-weight:600; }
.pv-kb-space{ flex:5 1 0; }
.pv-kb-return{ flex:2 1 0;font-size:13px;font-weight:600;
  background:color-mix(in srgb,var(--fg-3) 22%,var(--bg-2)); }
.pv-kb-row-b{ flex:1; }
[data-theme="dark"] .pv-kb-k{ box-shadow:0 1px 0 rgba(0,0,0,.5); }

/* ── THE DEVICE STAGE (Audit A — Pablo: "I'm not a fan to how the preview frame
   looks like and there should be the screen size + touchscreen controls") ──
   One surface for every preview that frames the real prototype: an address bar,
   the four screen sizes + touch, and a device that reads as one — a browser
   window on desktop, a bezel on tablet/phone — on a dotted canvas. Geometry
   (bezel, radii, scale) is set per variant by `MoccaPreviewVp.stage()`. */
.pvs{ display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;height:100%; }
.pvs-bar{ display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;flex:0 0 auto; }
.pvs-addr{ flex:1 1 160px;min-width:0;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border-radius:999px;background:var(--bg-2);border:1px solid var(--border);
  font:500 12px var(--mk-font-mono,ui-monospace,monospace);color:var(--fg-3); }
.pvs-addr > .mi{ font-size:14px;color:var(--mk-ok,#1f9d6b);flex:0 0 auto; }
.pvs-url{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;unicode-bidi:isolate; }
.pvs-host{ color:var(--fg-3); }
.pvs-path{ color:var(--fg-1);font-weight:600; }
.pvs-tools{ display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-inline-start:auto; }
.pvs-tool{ display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;min-width:30px;padding:0 8px;
  border:1px solid var(--border);border-radius:9px;background:var(--bg-1);color:var(--fg-3);cursor:pointer;
  font:600 12px var(--mk-font-ui);transition:background var(--mk-t-fast),color var(--mk-t-fast),border-color var(--mk-t-fast); }
.pvs-tool .mi{ font-size:17px; }
.pvs-tool:hover{ color:var(--fg-1);border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); }
.pvs-tool.on{ background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-text,var(--accent)); }
.pvs-stage{ position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px 16px 10px;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--fg-3) 30%,transparent) 1px, transparent 1.2px) 0 0/18px 18px, var(--bg-2); }
.pvs-dev{ position:relative;flex:0 0 auto;box-sizing:border-box;
  padding:calc(var(--pvs-bz,0px) + var(--pvs-top,0px)) var(--pvs-bz,0px) var(--pvs-bz,0px);
  border-radius:var(--pvs-r,12px);background:#12161b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 1px rgba(8,20,28,.35),0 22px 54px -16px rgba(8,20,28,.5),0 3px 8px rgba(8,20,28,.16);
  transition:width .25s var(--mk-ease,ease); }
.pvs-screen{ position:relative;overflow:hidden;border-radius:var(--pvs-sr,0);background:var(--bg-1);transition:width .25s var(--mk-ease,ease),height .25s var(--mk-ease,ease); }
.pvs-scale{ position:absolute;top:0;left:0;transform-origin:0 0; }
.pvs-ifr{ width:100%;height:100%;border:0;display:block;background:var(--bg-1); }
.pvs-chrome{ display:none; }
/* desktop: a browser window — light chrome in the light theme, dark in dark */
.pvs[data-variant="desktop"] .pvs-dev{ background:var(--bg-1);box-shadow:0 0 0 1px var(--border),0 22px 54px -18px rgba(8,20,28,.42),0 3px 8px rgba(8,20,28,.12); }
.pvs[data-variant="desktop"] .pvs-screen{ border-radius:0 0 11px 11px; }
.pvs[data-variant="desktop"] .pvs-chrome{ display:flex;position:absolute;top:0;inset-inline:0;height:var(--pvs-top,30px);align-items:center;gap:6px;padding:0 12px;
  border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;background:color-mix(in srgb,var(--bg-2) 70%,var(--bg-1)); }
.pvs-chrome i{ width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--fg-3) 45%,transparent);flex:0 0 auto; }
.pvs-chrome i:nth-child(1){ background:#ec6a5e; } .pvs-chrome i:nth-child(2){ background:#f4bf4f; } .pvs-chrome i:nth-child(3){ background:#61c554; }
.pvs-chrome-url{ flex:1 1 auto;min-width:0;margin:0 44px 0 30px;height:18px;border-radius:6px;background:var(--bg-1);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;direction:ltr;
  font:500 10px var(--mk-font-mono,ui-monospace,monospace);color:var(--fg-3); }
.pvs-chrome-url .pvs-path{ font-weight:600; }
/* phones + tablets: a notch-less bezel with a camera dot on the long edge */
.pvs[data-variant="mobile-portrait"] .pvs-dev::after,.pvs[data-variant="tablet"] .pvs-dev::after{ content:'';position:absolute;top:calc(var(--pvs-bz) / 2 - 2px);left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2a3038; }
.pvs[data-variant="mobile-landscape"] .pvs-dev::after{ content:'';position:absolute;left:calc(var(--pvs-bz) / 2 - 2px);top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#2a3038; }
.pvs-size{ flex:0 0 auto;direction:ltr;unicode-bidi:isolate;font:600 10.5px var(--mk-font-mono,ui-monospace,monospace);color:var(--fg-3);font-variant-numeric:tabular-nums;letter-spacing:.02em; }
.pvs:not(.pvs-on) .pvs-dev,.pvs:not(.pvs-on) .pvs-size{ display:none; }
.pvs-empty{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;max-width:320px;padding:28px 18px;text-align:center;
  font:500 12.5px/1.5 var(--mk-font-ui);color:var(--fg-3); }
.pvs-empty .mi{ font-size:28px;color:var(--accent-text,var(--accent)); }
.pvs.pvs-on .pvs-empty{ display:none; }
.pvs:not(.pvs-on) .pvs-addr{ opacity:.55; }
@media (pointer:coarse){
  .pvs-tools .pv-vp{ width:38px;height:36px; }
  .pvs-tools .pv-touch,.pvs-tool{ height:40px;min-width:40px; }
}
@media (prefers-reduced-motion:reduce){ .pvs-dev,.pvs-screen{ transition:none; } }

/* B66 W4 (066-010 · 021) — the bare stage: no address bar, no browser chrome — just the device on the canvas */
.pvs-bare .pvs-bar{ display:none; }
.pvs-bare[data-variant="desktop"] .pvs-chrome{ display:none; }
.pvs-bare[data-variant="desktop"] .pvs-screen{ border-radius:11px; }
.pvs-bare[data-variant="desktop"] .pvs-dev{ border-radius:12px; }
.pvs-bare .pvs-stage{ border:0;border-radius:0; }