/* ============================================================================
 * screen-stage.css —— 设备控制中心 · 投屏舞台：按 1920×1080 基准固定比例 + 动态自适应
 * ----------------------------------------------------------------------------
 * 只改「外壳尺寸 / 比例」，绝不碰画面元素：
 *   canvas / img / video 的 width / height / object-fit / position / overflow
 *   一律不动（画面仍由应用自己 contain 居中），所以画面永远不会被拉伸变形。
 *   —— 这是 ui-tune.css 头部记录过的教训，本文件严格遵守。
 *
 * 线上实测结构：
 *   .ctrl-screen-area
 *     └ div                                   ← 内容列（flex column / overflow-y auto）
 *         ├ .reader-style-bar                  ← 工具条（背景/字色/画质/缩放）
 *         └ div                                ← 面板行容器（旧：grid 写死 2 列）
 *             ├ div 面板①（无障碍阅读器）        ← inline width:298px; flex-shrink:0
 *             │   ├ .a11y-screen-header
 *             │   ├ div ← 画面舞台              ← inline height:551px（写死，问题就在这）
 *             │   │   └ div(width/height:100%, overflow:hidden)  ← 画面层，一律不动
 *             │   └ .a11y-text-input
 *             └ div 面板②（无障碍投屏）… 同上 + .a11y-nav
 *
 * 改基准比例只需改下面两行：
 *   1920 / 1080 → 16:9 横屏（默认）
 *   1080 / 2400 → 手机竖屏
 * 撤销：删掉 index.html 里的 <link rel="stylesheet" href="/assets/css/screen-stage.css">
 * ==========================================================================*/

:root {
  --fc-screen-w: 1920;
  --fc-screen-h: 1080;
  --fc-stage-gap: 12px;
  --fc-stage-radius: 12px;
}

/* ① 面板行：放得下就并排、放不下自动上下排（动态，不再写死 2 列）
 *    阈值 240px：这样在常见宽度下两个舞台都能并排（画面高度不至于把左列顶爆） */
.ctrl-screen-area > div > :last-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  align-items: start !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: var(--fc-stage-gap) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ② 面板外框：宽度跟随格子，高度由内容决定
 *    覆盖 inline 的 width:298px / flex-shrink:0 与 ui-tune.css 的 height:100% */
.ctrl-screen-area > div > :last-child > * {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

/* ③ 画面舞台：按 1920×1080 固定比例，宽度随容器动态缩放，高度自动跟着算
 *    覆盖 inline 的 height:551px */
.ctrl-screen-area .a11y-screen-header + div {
  aspect-ratio: var(--fc-screen-w) / var(--fc-screen-h) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  border-radius: var(--fc-stage-radius) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* ④ 画面层（舞台里那一层）：只保证它跟着舞台走，不碰内部任何画面元素 */
.ctrl-screen-area .a11y-screen-header + div > div {
  width: 100% !important;
  height: 100% !important;
}

/* ⑤ 窗口变宽时两个面板并排，舞台自然变大；这里给舞台一个上限，避免超高撑爆一屏 */
@media (min-width: 1500px) {
  .ctrl-screen-area .a11y-screen-header + div {
    max-height: calc(100vh - 320px) !important;
    max-width: calc((100vh - 320px) * var(--fc-screen-w) / var(--fc-screen-h)) !important;
  }
}

/* ⑥ 面板内的标题条 / 输入条 / 导航键：保持原有质感，只做宽度对齐 */
.ctrl-screen-area .a11y-screen-header,
.ctrl-screen-area .a11y-text-input,
.ctrl-screen-area .a11y-nav {
  width: 100% !important;
  box-sizing: border-box !important;
}