/* 弹窗统一规范（外壳公共样式 · 2026-10-20 P0）
 * 归属：外壳资产，模块只许用，不许改；新增弹窗一律走 static/js/ui-modal.js 的 UI.modal()
 * 依赖：variables.css（必须在本文件之前加载——本文件只用 --modal-* / --spacing-* / --font-* 令牌）
 * 结构：.ui-mask.ui-modal-mask > .ui-card.ui-modal > (.ui-modal-head / .ui-modal-body / .ui-modal-foot)
 * 尺寸：s 480 / 默认 m 640 / l 880 / xl 1120，宽度恒 min(档位, 100vw - 48px)
 */

/* ===== 弹窗统一规范 P0（2026-10-20 · 外壳 · 纯增量，老弹窗零影响）=====
   结构：.ui-mask.ui-modal-mask > .ui-card.ui-modal > (.ui-modal-head / .ui-modal-body / .ui-modal-foot)
   尺寸：s 480 / 默认 m 640 / l 880 / xl 1120 —— 宽度恒 min(档位, 100vw - 48px)
   交互（Esc 关闭 / 焦点进弹窗 / Tab 循环 / 遮罩滚轮拦截）由 static/js/ui.js 的 UI.modal() 提供
   选择器带 .ui-mask .ui-card 前缀：压过 base 里 @media(≤900px) 的 .ui-mask .ui-card{overflow-y:auto} 老规则 */
.ui-modal-mask { position: fixed; inset: 0; background: var(--modal-mask); z-index: 400; display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); }
/* 嵌套第 2 层起：遮罩透明（仍铺满全屏、照样拦点击）——只有最底层那 0.6 的遮罩负责压暗页面；
   若每层都画 0.6，4 层叠加 = 97% 纯黑，下层卡片会糊成黑块 */
.ui-modal-mask--stack { background: transparent; }
/* 被新弹窗盖住的下层卡片：轻微缩放 + 压暗，形成纵深（保留可见轮廓，便于 4 层嵌套时定位） */
.ui-mask .ui-card.ui-modal--behind { transform: scale(0.975); filter: brightness(0.94); transition: transform 0.18s ease, filter 0.18s ease; }
.ui-mask .ui-card.ui-modal { width: min(640px, calc(100vw - 48px)); max-width: none; max-height: min(88vh, 960px); display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 10px; background: var(--bg-card); box-shadow: var(--modal-shadow); }
.ui-mask .ui-card.ui-modal--s { width: min(480px, calc(100vw - 48px)); }
.ui-mask .ui-card.ui-modal--l { width: min(880px, calc(100vw - 48px)); }
.ui-mask .ui-card.ui-modal--xl { width: min(1120px, calc(100vw - 48px)); }
.ui-modal-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--spacing-sm); min-height: 56px; padding: 0 var(--spacing-md) 0 var(--spacing-lg); background: var(--modal-head-bg); border-bottom: 1px solid var(--modal-divider); }
.ui-modal-title { font-size: var(--font-h3); font-weight: 700; color: var(--modal-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-modal-sub { flex-shrink: 0; font-size: var(--font-small); font-weight: 600; color: var(--modal-sub-fg); background: var(--modal-sub-bg); border: none; border-radius: 20px; padding: 2px 9px; }
.ui-modal-x { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-md); background: transparent; color: var(--modal-close); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.ui-modal-x:hover { background: var(--modal-close-hover-bg); color: var(--modal-close-hover-fg); }
.ui-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--spacing-lg); color: var(--text-main); font-size: var(--font-body); line-height: 1.6; }
.ui-modal-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm); padding: 12px var(--spacing-lg); border-top: 1px solid var(--modal-divider); background: var(--modal-foot-bg); }
.ui-modal-foot:empty { display: none; }
.ui-btn { height: 36px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--modal-btn-primary); color: #fff; font-size: var(--font-body); cursor: pointer; }
.ui-btn:hover { background: var(--modal-btn-primary-hover); }
.ui-btn--ghost { background: var(--bg-card); color: var(--text-main); border-color: var(--border); }
.ui-btn--ghost:hover { background: var(--primary-light); color: var(--primary); }
.ui-btn--danger { background: var(--modal-danger); }
.ui-btn--danger:hover { filter: brightness(0.94); }
.ui-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.ui-mask .ui-card.ui-modal:focus { outline: none; }
.ui-modal-x:focus-visible, .ui-modal-foot .ui-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 900px) {
  .ui-modal-mask { padding: 12px; }
  .ui-mask .ui-card.ui-modal { max-height: 92vh; }
  .ui-modal-head { padding: 0 12px 0 16px; }
  .ui-modal-body { padding: 16px; }
  .ui-modal-foot { padding: 10px 16px; }
  .ui-modal-foot .ui-btn { flex: 1 1 0; padding: 0 12px; }
}

/* ===== 弹窗表单标准件（P0-2026-10-20 · 外壳页面迁移用）=====
   一行一字段：标签定宽右对齐 + 控件撑满剩余；控件 34px 高（比按钮 36 略矮）
   用法：<div class="ui-form"><label class="ui-form-row"><span>标签</span><input class="ui-input"></label>…</div>
   错误行：<div class="ui-err">…</div>（固定 min-height，避免出现时跳动） */
.ui-form { display: grid; gap: 12px; }
.ui-form-row { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; font-size:var(--fs-t3); color: var(--text-secondary); }
.ui-form-row > span { text-align: right; white-space: nowrap; }
.ui-input { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-main); font-size:var(--fs-t3); box-sizing: border-box; }
.ui-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.12); }
html[data-theme="dark"] .ui-input:focus { box-shadow: 0 0 0 2px rgba(91, 138, 201, 0.28); }
.ui-input[disabled] { background: var(--bg-body); color: var(--text-placeholder); }
.ui-err { min-height: 18px; margin-top: 10px; color: var(--danger); font-size:var(--fs-t4); text-align: center; }
.ui-role { position: relative; }
.ui-role-trigger { cursor: pointer; line-height: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-role-drop { position: absolute; top: 38px; left: 0; right: 0; z-index: 5; max-height: 200px; overflow-y: auto; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-hover); }
.ui-role-drop label { display: block; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size:var(--fs-t3); color: var(--text-main); }
.ui-role-drop label:hover { background: var(--primary-light); }

/* 两列表单变体：宽弹窗里放成对短字段（建筑面积/占地面积 这种） */
.ui-form--2col { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ui-form--2col .ui-form-row--full { grid-column: 1 / -1; }
/* 上标签变体：标签在上、控件在下（窄列里读起来更顺） */
.ui-form-row--stack { display: block; }
.ui-form-row--stack > span { display: block; text-align: left; margin-bottom: 4px; }