/* Severo case-page "device switch" mockup — desktop browser chrome + iPhone
   frame around an embedded demo iframe.

   This file is the single source of truth for every case-*.html page. Do
   not copy these rules back into a page's own <style> block — edit here so
   every case page stays identical (padding, Dynamic Island size, phone
   frame, font weights). The ONLY thing that's allowed to differ per page is
   color, via the --phone-ink / --phone-bar-bg custom properties set on
   #chrome in that page's own small override block (status-bar text/icons
   are dark on a light demo, light on a dark demo). */

.device-switch { display: flex; width: fit-content; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); margin: 0 auto 16px; }
.device-switch__btn {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600;
  padding: 9px 20px; border-radius: 999px; border: none; background: none; color: var(--text-muted); cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.device-switch__btn.is-active { background: var(--red); color: var(--white); }

/* browser-chrome frame around the embedded demo */
.chrome {
  background: var(--glass-2); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl); overflow: hidden; position: relative;
  box-shadow: 0 30px 70px rgba(20, 22, 28, 0.16), inset 0 1px 0 rgba(255,255,255,0.9);
}
.chrome__bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.chrome__dots { display: flex; gap: 7px; flex: none; }
.chrome__dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
.chrome__dots span:nth-child(1) { background: var(--red); }
.chrome__dots span:nth-child(2) { background: var(--line); }
.chrome__dots span:nth-child(3) { background: var(--line); }
.chrome__url {
  flex: 1; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; color: var(--text-faint);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrome__screen { position: relative; }
.chrome__frame { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; background: var(--ink); }
.chrome__island { display: none; }
.chrome__statusbar { display: none; }
/* no-op wrapper outside phone mode — its two children lay out as if it weren't there */
.chrome__scale { display: contents; }

/* iPhone 17 Pro-style frame — the embedded page always renders at a real
   390×844 CSS-pixel viewport (so the demo's own responsive layout looks
   exactly as it does on an actual phone) and is then visually scaled down
   with a transform to fit the card. This is purely a Severo-side display
   trick — the embedded project itself is untouched and never resized. A
   status-bar strip is reserved above it so the Dynamic Island never sits
   on top of the demo's own header/nav. */
.chrome.is-phone {
  max-width: 380px; margin: 0 auto; overflow: visible;
  /* brushed titanium finish — a cool metallic grey (not white/cream),
     with a faint highlight along the top-left edge where light would
     catch the chamfer. Same on every case page — this is the phone's own
     hardware color, not tied to whatever demo is embedded. */
  background: linear-gradient(155deg, #e3e4e6 0%, #adaeb2 35%, #d0d1d4 55%, #8d8e92 78%, #c5c6c9 100%);
  border: none; border-radius: 47px;
  /* a real iPhone's frame is only ~1.5-1.6mm wide — at this mockup's scale
     that's roughly 4px, not a much thicker "toy phone" bezel */
  padding: 4px;
  box-shadow: 0 34px 80px rgba(20,22,28,0.32), inset 0 1.5px 1px rgba(255,255,255,0.7), inset 0 -1.5px 2px rgba(0,0,0,0.2);
}
.chrome.is-phone .chrome__bar { display: none; }
/* thin black rim between the metal body and the display — every real
   phone keeps this regardless of case color, so a metallic shell still
   needs it or the screen would look like it's floating in the bezel */
.chrome__bezel { display: contents; }
.chrome.is-phone .chrome__bezel {
  /* concentric with the outer 47px/4px-padding frame (47 - 4 = 43) — a
     mismatched radius here leaves a dark sliver poking past the metal
     frame's own corner curve, so keep these two numbers in lockstep */
  display: block; background: #000; border-radius: 43px; padding: 1px;
}
.chrome.is-phone .chrome__screen {
  border-radius: 42px; overflow: hidden; background: var(--ink);
  aspect-ratio: 390 / 844;
}
.chrome.is-phone .chrome__scale {
  display: flex; flex-direction: column; width: 390px; height: 844px; transform-origin: top left;
}
.chrome.is-phone .chrome__statusbar {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  height: 46px; padding: 0 34px 0 46px; background: var(--phone-bar-bg, #faf9f7);
}
.chrome__time { font-family: -apple-system, "Inter", var(--font-body); font-size: 1rem; font-weight: 700; color: var(--phone-ink, #0c0c0d); letter-spacing: 0.01em; }
.chrome__status-icons { display: flex; align-items: center; gap: 5px; }
.chrome__status-icons svg { display: block; fill: var(--phone-ink, #0c0c0d); }
.chrome__battery { display: flex; align-items: center; gap: 3px; }
.chrome__battery-shell {
  position: relative; width: 24px; height: 12px; border: 1.2px solid color-mix(in srgb, var(--phone-ink, #0c0c0d) 80%, transparent); border-radius: 3.5px;
  display: flex; align-items: center; padding: 1.5px;
}
.chrome__battery-shell::after {
  content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 4.5px; background: color-mix(in srgb, var(--phone-ink, #0c0c0d) 80%, transparent); border-radius: 0 1px 1px 0;
}
.chrome__battery-fill { width: 100%; height: 100%; background: var(--phone-ink, #0c0c0d); border-radius: 1.5px; }
.chrome.is-phone .chrome__frame { flex: 1 1 auto; width: 100%; height: 100%; aspect-ratio: auto; }
/* real iPhone 17 Pro Dynamic Island proportions, vertically centered in the
   46px status bar and always solid black — the island stays black
   regardless of light/dark status-bar content, exactly like real hardware */
.chrome.is-phone .chrome__island {
  display: block; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 32px; border-radius: 16px; background: #000; z-index: 3;
}
.chrome.is-phone .chrome__island::after {
  content: ''; position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: #0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.chrome.is-phone::before, .chrome.is-phone::after {
  content: ''; position: absolute;
  background: linear-gradient(90deg, #909195, #d4d5d8 40%, #909195);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.chrome.is-phone::before { left: -3px; top: 130px; width: 3px; height: 70px; border-radius: 3px 0 0 3px; }
.chrome.is-phone::after { right: -3px; top: 150px; width: 3px; height: 100px; border-radius: 0 3px 3px 0; }

@media (max-width: 640px) {
  .chrome__frame { aspect-ratio: 9 / 16; }
  .chrome__url { display: none; }
}