/* ═══════════════════════════════════════════════════════════
   Google Nest Hub — Canonical Component (SVG-based, 2026-04-24)
   ═══════════════════════════════════════════════════════════
   Uses the canonical SVG chrome at:
     /Global_Assets/DeviceFrame/Googe_nest.svg
     (note: filename typo preserved intentionally — "Googe" not "Google")

   SVG viewBox: 2800 × 1200
   Screen area (SVG coordinates): x=1255.5, y=158.5, w=1267, h=763
     → top:    13.208% (158.5 / 1200)
     → left:   44.839% (1255.5 / 2800)
     → width:  45.25%  (1267 / 2800)
     → height: 63.583% (763 / 1200)

   Screen aspect: ~1.66:1 (landscape).

   USAGE (canonical pattern, matches .iphone15pro / .samfh contract):
     <link rel="stylesheet" href="[rel]/assets/css/device-frame-nest.css">

     <div class="nest-hub nest-hub--lg">
       <img class="nest-hub__chrome"
            src="[rel]/Global_Assets/DeviceFrame/Googe_nest.svg"
            alt="" aria-hidden="true">
       <div class="nest-hub__screen">
         <iframe src="[rel]/ui-screens/.../nest-screen.html?noframe=1"
                 loading="lazy"
                 title="..."
                 style="width:100%;height:100%;border:0;display:block;background:transparent;"></iframe>
       </div>
     </div>

   Sizes (override --nest-w):
     .nest-hub--sm → 480px
     .nest-hub--md → 640px   (default)
     .nest-hub--lg → 800px
     .nest-hub--xl → 960px

   RULES:
   - Always use this component for Google Nest Hub mockups.
   - Do NOT reproduce the frame in CSS — point to the SVG asset.
   - When embedding a UI iframe inside .nest-hub__screen, append
     ?noframe=1 so the inner file is content-only.
   - Do NOT wrap in a handrolled frame with gradients/shadows.
   ═══════════════════════════════════════════════════════════ */

.nest-hub {
  position: relative;
  aspect-ratio: 2800 / 1200;   /* ≈ 2.333 */
  flex-shrink: 0;
  width: var(--nest-w, 640px);
  user-select: none;
}

.nest-hub__chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 1;
}

.nest-hub__screen {
  position: absolute;
  top: 13.208%;      /* 158.5 / 1200 */
  left: 44.839%;     /* 1255.5 / 2800 */
  width: 45.25%;     /* 1267 / 2800 */
  height: 63.583%;   /* 763 / 1200 */
  overflow: hidden;
  z-index: 2;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* ── SIZE MODIFIERS ── */
.nest-hub--sm { --nest-w: 480px; }
.nest-hub--md { --nest-w: 640px; }
.nest-hub--lg { --nest-w: 800px; }
.nest-hub--xl { --nest-w: 960px; }

/* ── MODIFIERS ── */
.nest-hub__screen--dark { background: #0a0a0a; color: #ededed; }
.nest-hub--faded { opacity: 0.5; }
.nest-hub--faded .nest-hub__chrome { filter: grayscale(0.4); }