/**
 * 基础版式：重置 + 手机框 + 滚动区 + 底部 tabBar。
 *
 * 【移动端 / 桌面端同一套 DOM】
 *   移动端：手机框铺满视口，tabBar 就是一条贴底的横条。
 *   桌面端：居中一个 375×812 的手机框（照搬原型 .phone），内容在里面滚。
 * 两种形态共用同一份 HTML，只靠媒体查询切换 —— 不要写两套结构。
 */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
    'Microsoft YaHei', sans-serif;
  background: #e9edf3;
  color: var(--c-text);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* 键盘可达性：只在键盘导航时显示焦点环，鼠标点击不显示 */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ============================================================
   舞台与手机框
   ============================================================ */

.stage {
  display: flex;
  justify-content: center;
  min-height: 100%;
}

.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  max-height: 100dvh;
  background: var(--c-bg);
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-frame);
  margin: auto;
}

/* 桌面端才留出上下呼吸空间；移动端由下面的媒体查询铺满 */
@media (min-width: 600px) {
  .stage {
    padding: 28px 20px 40px;
  }
}

/* 移动端：手机框消失，直接铺满视口 */
@media (max-width: 599px) {
  body {
    background: var(--c-bg);
  }

  .phone {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }
}

/* 滚动区：手机框内部真正滚动的就是这一层 */
/*
 * 刻意【不写 scroll-behavior: smooth】：
 * 那会让 JS 里设置 scrollTop 变成异步动画，量位置、做断言全都会拿到旧值。
 * 需要平滑滚动的地方（地图页跳转高亮）由 scrollIntoView({behavior:'smooth'}) 单独指定。
 */
.screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 隐藏滚动条（保留滚动能力） */
.screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.screen {
  scrollbar-width: none;
}

/* 顶部页面标题（桌面端给个语境，移动端也留着不碍事） */
.page-head {
  text-align: center;
  padding: 12px 0 0;
}

.page-head h1 {
  font-size: 15px;
  font-weight: 800;
  color: #1f2a44;
}

/*
 * 底部留白。
 * 原版 app.wxss 是 192rpx = 96px，比 tabBar 的 64px 高出一截 ——
 * 不是为了美观，是因为中间那个圆钮【往上凸出 22px】，只让出 tabBar 的高度
 * 会让最后一张卡片的最后一行被圆钮盖住。这里必须跟着留 96px，不能省。
 */
.page-wrap {
  padding-bottom: 96px;
  /* 让页面自己的底色铺满手机框：内容不满一屏时（比如「我的」页加载中）
     不至于下面露出一条白。对首页没有影响，它本来就比一屏高。 */
  min-height: 100%;
}

/* ============================================================
   底部 tabBar（三格，中间「地图」凸起圆钮）
   ============================================================ */

.tabbar {
  height: var(--tabbar-h);
  background: var(--c-surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  box-shadow: var(--sh-tab);
  border-top: 1px solid var(--c-line);
  position: relative;
  z-index: var(--z-tabbar);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-text-tab);
}

.tab .ico {
  font-size: 23px;
  line-height: 1;
  transition: transform .15s;
}

.tab .lbl {
  font-size: var(--fs-sm);
  margin-top: 2px;
  line-height: 1.2;
}

.tab.active {
  color: var(--c-primary);
  font-weight: 700;
}

.tab.active .ico {
  transform: translateY(-1px) scale(1.06);
}

/* 中间凸起圆钮 */
.tab-center {
  position: relative;
}

.tab-center .ico-circle {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-hi) 0%, var(--c-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  box-shadow: var(--sh-center);
  border: 3px solid #fff;
  box-sizing: border-box;
}

.tab-center .ico-in {
  line-height: 1;
}

.tab-center .lbl {
  margin-top: 22px;
}

/* ============================================================
   工具类
   ============================================================ */

.hidden {
  display: none !important;
}

/* 无障碍：只给读屏用的文字 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}