/* 手機外框 — 所有 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;
}

/* --- 等比縮放：唯一官方縮法 --- */

/* 事件紀錄（2026-08-08）：曾有頁面直接覆寫 --device-height 把外框壓扁——散文規則
 * 擋不住即興，所以縮法本身也要是資產。要縮小外框，唯一的做法是包進 .device-stage、
 * 調 --device-scale；不得單獨覆寫 --device-width／--device-height，那兩個值是機型
 * 規格，不是版面參數。
 *
 * 原理：stage 佔用「縮放後」的版面空間，內部的 .device 維持真實尺寸、從左上角
 * transform 等比縮。尺寸若用 % 算會被縮兩次（寬兩次、高一次），長寬比就毀了。
 *
 * 用法：
 *   <div class="device-stage" style="--device-scale: 0.65">
 *     <div class="device" data-phone-frame>…</div>
 *   </div>
 *
 * 已知邊界（刻意不在本輪解）：
 * - 以電腦呈現為優先。真手機瀏覽器直接開 prototype 時走下面的 ≤440px 讓位規則，
 *   不要在手機上套 .device-stage。
 * - 手機與電腦可能觸發不同的 HTML／呈現邏輯，那是 prototype 端的責任範圍。
 * - iframe 嵌入的縮放（catalog 的做法）縮的是 iframe 元素，屬於嵌入端，不在本資產。 */

.device-stage {
  --device-scale: 1;
  --device-width: 393px;
  --device-height: 852px;
  inline-size: calc(var(--device-width) * var(--device-scale));
  block-size: calc(var(--device-height) * var(--device-scale));
}

.device-stage > .device {
  inline-size: var(--device-width);
  block-size: var(--device-height);
  transform: scale(var(--device-scale));
  transform-origin: top left;
}

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

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

  /* 讓位規則只給「直接全螢幕呈現」用；stage 內的樣本必須維持真實規格 */
  .device-stage > .device {
    --device-radius: 48px;
    --device-bezel: 8px;
    block-size: var(--device-height);
    box-shadow: var(--device-shadow);
  }
}

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