/* Computer · Vetrina desktop (strumento di lavoro): anteprima dell'app dentro una cornice iPhone 14 Pro.
   Su iPhone (base) questi elementi sono nascosti e l'app occupa lo schermo.
   La cornice compare da 700px di larghezza con puntatore fine (mouse). */

.stage__brand, .stage__edition, .stage__coordinate, .stage__note,
.device__orbit, .device__key, .device__caption, .device__home, .status-bar { display: none; }

/* Di norma si vede solo il telefono: marchio, didascalie e orbite compaiono con ?vetrina nell'indirizzo
   (js/app.js imposta data-mostra-vetrina su <html>). */
:root:not([data-mostra-vetrina]) :is(.stage__brand, .stage__edition, .stage__coordinate, .stage__note, .device__orbit, .device__caption) { display: none; }

@media (min-width: 700px) and (pointer: fine), (min-width: 700px) and (pointer: none) {
  html, body { height: auto; min-height: 100%; overflow: auto; }

  .stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100svh;
    padding: 52px 32px 46px;
    background: var(--stage-glow), var(--color-screen);
  }
  .stage::before {
    content: "";
    position: absolute;
    z-index: var(--z-backdrop);
    inset: 0;
    background-image: radial-gradient(var(--stage-dots) .7px, transparent .8px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(ellipse at center, var(--color-black), transparent 72%);
    mask-image: radial-gradient(ellipse at center, var(--color-black), transparent 72%);
    opacity: .28;
    pointer-events: none;
  }

  /* ---------- Marchio e didascalie ai lati ---------- */
  .stage__brand { position: absolute; top: 33px; left: 40px; display: flex; align-items: center; gap: var(--space-3-5); color: var(--color-amber); }
  .stage__mark { width: 23px; height: 34px; opacity: .84; }
  .stage__name { font: 600 calc(1.5rem * var(--display-scale))/1 var(--font-display); letter-spacing: .1em; }
  .stage__tagline { display: block; margin-top: var(--space-2); color: var(--color-faint); font: var(--text-xs) var(--font-mono); letter-spacing: .14em; }
  .stage__edition { position: absolute; top: 40px; right: 40px; display: flex; align-items: center; gap: 9px; color: var(--color-stage-text); font: var(--text-sm) var(--font-mono); letter-spacing: .07em; }
  .stage__edition-dot { width: 5px; height: 5px; border-radius: var(--radius-round); background: var(--color-lilac); }
  .stage__edition-count { margin-left: 13px; color: var(--color-faint); font-weight: 400; }
  .stage__coordinate, .stage__note { position: absolute; bottom: 28px; display: block; color: var(--color-faint); font: var(--text-sm)/1.6 var(--font-mono); letter-spacing: .035em; }
  .stage__coordinate { left: 40px; }
  .stage__note { right: 40px; font-family: var(--font-sans); font-size: var(--text-md); letter-spacing: 0; text-align: right; }
  .stage__aside { display: block; color: var(--color-faint); }

  /* ---------- Dispositivo ---------- */
  .device { width: auto; height: auto; }
  .device__orbit {
    position: absolute;
    z-index: var(--z-behind);
    top: 50%;
    left: 50%;
    display: block;
    width: 720px;
    height: 720px;
    border: 1px solid var(--stage-orbit);
    border-radius: var(--radius-round);
    transform: translate(-50%, -50%) rotate(-24deg) scaleX(.7);
    pointer-events: none;
  }
  .device__orbit--two { width: 880px; height: 880px; border-color: var(--stage-orbit-warm); transform: translate(-50%, -50%) rotate(30deg) scaleX(.77); }
  .device__body {
    width: 410px;
    height: min(866px, calc(100svh - 120px));
    min-height: 736px;
    padding: 9px;
    border-radius: 61px;
    background: var(--frame-metal);
    box-shadow: var(--frame-shadow);
  }
  .device__body::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--color-black);
    border-radius: 57px;
    box-shadow: inset 0 0 2px var(--frame-inner-edge);
    pointer-events: none;
  }
  .device__key { position: absolute; display: block; width: 3px; border-radius: 2px; background: var(--frame-key); }
  .device__key--left { top: 166px; left: -4px; height: 42px; box-shadow: 0 53px var(--frame-key-shade); }
  .device__key--right { top: 225px; right: -4px; height: 70px; }
  .device__screen { border-radius: 52px; box-shadow: 0 0 0 2px var(--color-black), var(--shadow-vignette); }
  .device__home { display: block; flex-shrink: 0; width: 112px; height: 4px; margin: var(--space-2) auto 9px; border-radius: 5px; background: var(--color-home-bar); opacity: .65; }
  .device__caption {
    position: absolute;
    right: 0;
    bottom: -31px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-faint);
    font: var(--text-xs) var(--font-mono);
    letter-spacing: var(--tracking-label);
    white-space: nowrap;
  }
  .device__caption-name { color: var(--color-amber); }

  /* ---------- Barra di stato simulata ---------- */
  .status-bar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    height: 49px;
    padding: 17px 25px var(--space-1-5) 31px;
    color: var(--color-status-ink);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }
  .status-bar__island { position: absolute; top: 10px; left: 50%; width: 111px; height: 29px; border-radius: 22px; background: var(--color-black); transform: translateX(-50%); }
  .status-bar__island::after { content: ""; position: absolute; top: 10px; right: 11px; width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--frame-camera); }
  .status-bar__icons { display: flex; align-items: center; gap: var(--space-1-5); }
  .status-bar__signal { display: flex; align-items: flex-end; gap: var(--space-0-5); height: 11px; }
  .status-bar__bar { display: block; width: 2px; height: 4px; border-radius: 1px; background: currentColor; }
  .status-bar__bar:nth-child(2) { height: 6px; }
  .status-bar__bar:nth-child(3) { height: 8px; }
  .status-bar__bar:nth-child(4) { height: 10px; }
  .status-bar__wifi { font-size: var(--text-md); }
  .status-bar__battery { position: relative; display: block; width: 22px; height: 10px; padding: 1px; border: 1px solid var(--color-status-battery); border-radius: var(--radius-xs); }
  .status-bar__battery::after { content: ""; position: absolute; top: 2px; right: -3px; width: 2px; height: 4px; border-radius: 1px; background: var(--color-status-battery); }
  .status-bar__level { display: block; width: 80%; height: 100%; border-radius: 1px; background: var(--color-status-ink); }

  /* ---------- Misure dell'app dentro la cornice ---------- */
  .app { padding: 9px 17px 0 13px; }
  .app-header { grid-template-rows: var(--mast-height) 81px; }
  .app-header__heading { padding: 13px 0 5px var(--space-3-5); }
  .dock { margin-top: 13px; }
  .dock__ribbon { margin-top: 5px; }
  .talk-button, .keyboard-button { min-height: var(--control-dock); }
}

/* Cornice su schermi bassi: si compatta per restare intera. */
@media (min-width: 700px) and (pointer: fine) and (max-height: 860px), (min-width: 700px) and (pointer: none) and (max-height: 860px) {
  .stage { padding-top: 30px; padding-bottom: 48px; }
  .stage__brand { top: 24px; left: 28px; }
  .stage__edition { top: 28px; right: 28px; }
  .device__body { height: calc(100svh - 82px); min-height: 710px; }
  .device__caption { bottom: -28px; }
  .stage__note, .stage__coordinate { bottom: 18px; }
  .app-header { grid-template-rows: var(--mast-height) 73px; }
}