/*
 * 手机端适配地基样式（ADR-068）—— 结构层，只定义令牌与可选工具类，不含任何色值。
 *
 * 为什么单独成文并经 templates/_theme_head.html 统一注入：本项目多数 Jinja 页是自包含的，
 * 加载不到 app-common.css（同 ADR-067 横幅的教训）。_theme_head.html 是 ADR-026 建立的
 * 全站唯一 head 共享注入点（全部 Jinja 页 + React 壳都 include 它），一处引入即全站可得。
 *
 * 本文件只做「地基」：声明安全区变量、命中区最小尺寸令牌与工具类，均不改变桌面外观、
 * 不全局套用布局——真正的接线在各阶段（底部标签栏 / 表单 / 遮罩等）按需引用。
 * 断点约定见下方注释（CSS 自定义属性无法用于 @media，故断点以字面量在各媒体查询书写）。
 */

:root {
    /* 安全区（刘海 / 底部横条）：须配合 <meta viewport> 的 viewport-fit=cover 才会取到非 0 值 */
    --xy-safe-top: env(safe-area-inset-top, 0px);
    --xy-safe-right: env(safe-area-inset-right, 0px);
    --xy-safe-bottom: env(safe-area-inset-bottom, 0px);
    --xy-safe-left: env(safe-area-inset-left, 0px);

    /* 触屏命中区最小尺寸基线（约 44×44px，Apple HIG / WCAG 2.5.5） */
    --xy-touch-min: 44px;

    /*
     * 断点约定（ADR-068 设备基线）——供全站 @media 统一引用，值以字面量书写：
     *   ≤390px  主基线（iPhone 15 等主流机型逻辑宽度）
     *   ≤360px  兼容线（安卓低端窄屏）
     *   ≥768px  平板线（只保证「不断裂」，不做专属排版）
     */
}

/* 命中区工具类：交互元素（按钮/图标/标签页项）加此类即保证最小可点面积，opt-in 使用 */
.xy-touch-target {
    min-width: var(--xy-touch-min);
    min-height: var(--xy-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}