/* 手機外框 — 所有 prototype 共用的裝置外殼。
 *
 * 為什麼有這個檔：「prototype 要畫成手機的樣子」原本只是一條散文慣例，沒有可引用的
 * 實體，所以被各自重畫了三次，尺寸還互相打架（390×844 / 393×844 / 393×852）。
 * 這個檔是那條慣例的唯一實體。
 *
 * 刻意「自足」：不 import tokens.css、不依賴任何外部變數。因為要用它的地方（不同的
 * prototype、不同的 kit）各有各的 token 體系，有依賴就沒人能用。所有值都在下面的
 * --device-* 命名空間裡，要改就改這裡。
 *
 * 用法：
 *   <link rel="stylesheet" href="device-frame.css">
 *
 *   <div class="device" data-phone-frame>
 *     <div class="device-screen">
 *       <div class="device-statusbar">
 *         <span class="device-time">9:41</span>
 *         <span class="device-island" aria-hidden="true"></span>
 *         <span class="device-icons" aria-hidden="true"><!-- 見 preview-device.html --></span>
 *       </div>
 *       <div class="device-viewport">
 *         你的 prototype 放這裡。這一層是唯一的縱向 scroller。
 *       </div>
 *     </div>
 *   </div>
 *
 * 規則：
 * - 狀態列固定保留，不得移除、不得拿來放產品資訊。它是裝置外殼的一部分。
 * - 內容一律放進 .device-viewport，不要自己在 .device 上再包一層 scroller。
 * - 深色 prototype 在 .device 上加 data-device-theme="dark"。
 */

.device,
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
}

.device {
  /* 裝置尺寸：iPhone 15／14 Pro 邏輯像素 */
  --device-width: 393px;
  --device-height: 852px;
  --device-radius: 48px;
  --device-bezel: 8px;

  /* 狀態列 */
  --device-statusbar-height: 44px;
  --device-island-width: 118px;
  --device-island-height: 28px;
  --device-island-top: 10px;

  /* 外殼配色（與螢幕內容無關，不要拿去當內容色） */
  --device-shell: #101828;
  --device-outline: rgba(16, 24, 40, 0.18);
  --device-shadow: 0 30px 90px rgba(16, 24, 40, 0.25), 0 4px 12px rgba(16, 24, 40, 0.2);

  /* 螢幕預設底色與狀態列前景，可被 prototype 覆寫 */
  --device-screen-bg: #ffffff;
  --device-statusbar-ink: #101828;

  position: relative;
  inline-size: min(100%, var(--device-width));
  block-size: min(var(--device-height), 100dvh);
  padding: var(--device-bezel);
  border: 1px solid var(--device-outline);
  border-radius: var(--device-radius);
  background: var(--device-shell);
  box-shadow: var(--device-shadow);
  isolation: isolate;
}

.device[data-device-theme="dark"] {
  --device-screen-bg: #0b0f19;
  --device-statusbar-ink: #f2f4f7;
  --device-outline: rgba(242, 244, 247, 0.16);
}

.device-screen {
  position: relative;
  block-size: 100%;
  display: grid;
  grid-template-rows: var(--device-statusbar-height) 1fr;
  overflow: hidden;
  border-radius: calc(var(--device-radius) - var(--device-bezel));
  background: var(--device-screen-bg);
}

/* --- 狀態列（固定保留） --- */

.device-statusbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 26px;
  color: var(--device-statusbar-ink);
  font: 600 13px/1 -apple-system, "SF Pro Text", "PingFang TC", "Noto Sans TC", sans-serif;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.device-island {
  position: absolute;
  inset-block-start: var(--device-island-top);
  inset-inline-start: 50%;
  inline-size: var(--device-island-width);
  block-size: var(--device-island-height);
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--device-shell);
}

.device-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.device-icons svg {
  display: block;
  block-size: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.device-icons svg.device-icon-battery {
  fill: currentColor;
  stroke: none;
}

/* --- 內容區：唯一的縱向 scroller --- */

.device-viewport {
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- 窄視窗：外框讓位給內容，但仍看得出是手機 --- */

@media (max-width: 440px) {
  .device {
    --device-radius: 28px;
    --device-bezel: 4px;
    block-size: 100dvh;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-viewport {
    scroll-behavior: auto;
  }
}