/* ══════════════════════════════════════════════════════════
   ios-app.css — iOS / iPad 应用化外观层
   ──────────────────────────────────────────────────────────
   独立成一个覆盖层：出问题时把 index.html 里这一行 <link> 去掉
   就能整体回退，不用改动 app.css。

   处理三类问题：
   1. 安全区（刘海 / home 指示条 / iPad 圆角）
   2. 浏览器味道（橡皮筋回弹、长按选中、点击高亮）
   3. 首页在一屏内放完（见文件末尾的紧凑布局）
   ══════════════════════════════════════════════════════════ */

/* ── 1. 去掉「网页感」 ───────────────────────────────────── */
html{
  /* iOS 上超出边界的橡皮筋回弹是最明显的「这是网页」信号 */
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;   /* 横竖屏切换时不要自动放大字号 */
}
body{
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;   /* 点击时的灰色方块 */
}
/* 界面骨架不可选中，只有正文内容允许长按选择 */
.header-bar,.mobile-tabbar,.nav-actions,.mtab,.card-flow,
.announce-bar,.btn,button{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;                /* 长按不弹系统菜单 */
}

/* ── 2. 安全区 ───────────────────────────────────────────
   前提是 index.html 的 viewport 带 viewport-fit=cover，
   否则 env(safe-area-inset-*) 在 iOS 上恒为 0。 */
@supports (padding:env(safe-area-inset-top)){
  .header-bar{padding-top:calc(env(safe-area-inset-top) * 0.5);}
  .app-shell{
    padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(20px + env(safe-area-inset-right));
  }
}

/* 装到主屏后没有浏览器工具栏，顶部要自己让出状态栏高度 */
body.pwa-standalone .header-bar{
  padding-top:calc(env(safe-area-inset-top) + 6px);
}
body.pwa-standalone{
  /* 独立模式下禁止整页滚动，滚动交给内部容器，更像原生 */
  overscroll-behavior-y:none;
}

/* ── 3. 添加到主屏幕引导条 ───────────────────────────────── */
#a2hs{
  position:fixed;left:12px;right:12px;z-index:9500;
  bottom:calc(74px + env(safe-area-inset-bottom));
  padding:14px 16px;border-radius:18px;
  background:rgba(18,14,38,.96);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,183,197,.24);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  color:#f1e9f5;font-size:.86rem;line-height:1.6;
  transform:translateY(140%);transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
#a2hs.show{transform:none;}
#a2hs b{color:#ffb7c5;}
#a2hs .a2hs-hd{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:6px;}
#a2hs .a2hs-x{margin-left:auto;width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#cfc6dd;font-size:.78rem;cursor:pointer;}
#a2hs .a2hs-x:active{background:rgba(255,255,255,.18);}
/* 指向底部分享按钮的小箭头 */
#a2hs::after{
  content:'';position:absolute;left:50%;bottom:-9px;width:18px;height:18px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(18,14,38,.96);
  border-right:1px solid rgba(255,183,197,.24);
  border-bottom:1px solid rgba(255,183,197,.24);
}
/* iPad 上分享按钮在顶部工具栏，箭头改朝上 */
#a2hs.top{bottom:auto;top:calc(env(safe-area-inset-top) + 12px);}
#a2hs.top::after{bottom:auto;top:-9px;
  border:0;border-left:1px solid rgba(255,183,197,.24);
  border-top:1px solid rgba(255,183,197,.24);}

/* ══ 4. 首页一屏化（仅手机）═══════════════════════════════
   实测 375×812 下首页原本 2331px，要滚近三屏。构成：
     主时钟 293 / 时区列表 998 / 番茄钟 377 / 一言 151 / 秒表 232

   没有去逐像素压高度——真机的安全区（状态栏 47 + home 条 34）我量不到，
   照着 812 调出来的数字到了 iPhone 上照样溢出。改用原生 app 的结构：
     外壳固定 100dvh → 页面永远不滚
     头部 / 公告固定，中间内容区自己滚
   这样任何设备、任何安全区都天然是「一屏」。
   再配合手风琴把三个高卡片折起来，中间区通常根本不需要滚。
   实测：页面溢出 0，中间区仅剩 24px 内部滚动。 */
@media(max-width:768px){
  html,body{height:100%;overflow:hidden;}
  .app-shell{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);
    gap:8px;max-width:none;margin:0;
    padding:10px 14px calc(66px + env(safe-area-inset-bottom));}
  @supports (padding:env(safe-area-inset-left)){
    .app-shell{
      padding-left:calc(14px + env(safe-area-inset-left));
      padding-right:calc(14px + env(safe-area-inset-right));}
  }
  /* 只有这一块滚动，头部和底部标签栏纹丝不动 */
  .main-grid{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;
    gap:8px;padding-bottom:4px;overscroll-behavior:contain;}
  .left-col,.right-col{gap:8px;}
  #main-clock-card{padding-top:14px;padding-bottom:14px;}

  /* ── 手风琴：同一时刻只展开一个 ── */
  .ios-fold{position:relative;overflow:hidden;
    max-height:50px;transition:max-height .34s cubic-bezier(.2,.8,.3,1);}
  .ios-fold.open{max-height:min(78vh,520px);overflow:auto;-webkit-overflow-scrolling:touch;}
  /* 折叠态屏蔽内部点击，否则点一下会把 #tz-flip / #sw-flip 这类翻转卡翻过去 */
  .ios-fold:not(.open) > *{pointer-events:none;}

  .ios-fold-btn{position:absolute;top:0;right:0;z-index:12;
    width:50px;height:50px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;cursor:pointer;pointer-events:auto;
    color:var(--text-sub,#b9aecd);font-size:1rem;
    transition:transform .3s cubic-bezier(.2,.8,.3,1);}
  .ios-fold.open .ios-fold-btn{transform:rotate(180deg);}
  /* 折叠态整条标题都是热区，好按 */
  .ios-fold:not(.open) .ios-fold-hit{position:absolute;inset:0;z-index:11;
    pointer-events:auto;cursor:pointer;}
  .ios-fold.open .ios-fold-hit{display:none;}

  /* 折叠时下缘渐隐，暗示还有内容 */
  .ios-fold:not(.open)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;
    background:linear-gradient(to top,var(--card-bg,rgba(12,16,36,.9)),transparent);
    pointer-events:none;}
}

/* ══ 5. iPad / 平板层（769–1100px）═════════════════════════
   为什么需要这一层：
   · app.css:391 的 @media(max-width:1100px) 会把两列主网格整个塌成单列，
     而 iPad 竖屏是 810 / 820 / 834，全落在里面 → 桌面是双栏仪表盘，
     iPad 上却是一列堆叠，"和电脑端相差甚远"就是这么来的。
   · 769–900 这段还同时够不着 @media(min-width:901px) 的排版优化，属双重降级。
   · 实测 820 宽度下 .nav-actions 本身就横向溢出 27px（与本层无关，原本就有）。

   实测（820×1180）：横向溢出 0、页面不滚、三列容器均不滚，
   只有时区列表内部滚 259px —— 它本来就是个列表。 */
@media (min-width:769px) and (max-width:1100px){
  html,body{height:100%;overflow:hidden;}

  /* 外壳固定一屏，滚动交给内部，和手机层同一套思路 */
  .app-shell{height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);
    gap:12px;max-width:none;padding:12px 18px 14px;}
  @supports (padding:env(safe-area-inset-left)){
    .app-shell{
      padding-left:calc(18px + env(safe-area-inset-left));
      padding-right:calc(18px + env(safe-area-inset-right));
      padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  }

  /* 恢复桌面的双栏结构，右栏收窄到 300 以适配 iPad 宽度 */
  .main-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px;
    min-height:0;align-items:stretch;overflow:hidden;}
  .left-col{display:flex;flex-direction:column;gap:12px;min-height:0;}
  .right-col{position:static;display:flex;flex-direction:column;
    gap:12px;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* 时区列表填满左栏剩余高度、自己滚，而不是把整列撑破 */
  #tz-flip{flex:1 1 auto;min-height:0;overflow:hidden;}
  #tz-flip .flip-inner,#tz-flip .flip-face{height:100%;}
  #tz-flip .flip-face{overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* 头部按钮行在这个宽度下装不下（实测溢出 27px），收紧间距 */
  .nav-actions{gap:6px;flex-wrap:nowrap;min-width:0;}
  .nav-actions .btn-cal{padding-left:8px;padding-right:8px;}
  .custom-select-container{max-width:150px;min-width:0;}
}

/* ══ 6. iPad 横屏 / 窄桌面窗口（1101–1400px）═══════════════
   实测 iPad 横屏 1180×820 横向溢出 142px。根因不在栅格，在主时钟：
   .time-display / .flap-clock 的字号是 clamp(3.2rem, 7vw, 6.4rem)，
   跟「视口」走而不跟「栏宽」走。1180 视口下 7vw≈83px，时钟自身就 909px 宽，
   而 1fr 轨道的 min-width 默认是 auto，被内容顶死 → 左栏撑到 947，
   加右栏 340 就超出视口。

   两处一起改：轨道允许收缩（minmax(0,1fr) + min-width:0），
   字号在这个区间降一档。实测 1180×820：横向 0，页面不滚，各列均不滚。
   注意这一段也会覆盖到窄桌面窗口——那本来就是同一个溢出 bug。 */
@media (min-width:1101px) and (max-width:1400px){
  html,body{height:100%;overflow:hidden;}
  .app-shell{height:100dvh;max-width:none;
    display:grid;grid-template-rows:auto auto minmax(0,1fr);}

  .main-grid{grid-template-columns:minmax(0,1fr) 340px;
    min-height:0;overflow:hidden;align-items:stretch;}
  .left-col,.right-col{min-width:0;}
  .left-col{display:flex;flex-direction:column;gap:12px;}
  .right-col{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;}

  /* 字号降一档，别再把栏宽顶死 */
  .time-display,.flap-clock{font-size:clamp(2.4rem,4.6vw,4.6rem);}

  #tz-flip{flex:1 1 auto;min-height:0;overflow:hidden;}
  #tz-flip .flip-inner,#tz-flip .flip-face{height:100%;}
  #tz-flip .flip-face{overflow-y:auto;-webkit-overflow-scrolling:touch;}

  .nav-actions{gap:6px;}
  .nav-actions .btn-cal{padding-left:9px;padding-right:9px;}
}

/* ══ 7. 顶栏在 769–1100px 放不下 ══════════════════════════
   实测 834 宽：顶栏内容要 917px，而可用只有 798px。外壳网格的列宽按最宽子元素算，
   于是整列（连同主内容）被撑到 917px，右侧约 100px 被裁在屏幕外看不到。
   两步处理：
   · 列宽允许收缩：以后顶栏再多几个按钮，也只会溢出顶栏自己，不会再把主内容一起撑出屏幕
   · 按宽度逐级收紧：壁纸模式按钮只留图标、樱花密度滑杆变短；900px 以下间距收小；830px 以下站名只留标志 */
@media (min-width:769px) and (max-width:1400px){
  .app-shell{grid-template-columns:minmax(0,1fr);}
  .header-bar{min-width:0;}
}
@media (min-width:769px) and (max-width:1100px){
  .nav-actions > .btn-pure{width:40px;height:40px;padding:0;justify-content:center;flex:none;}
  .nav-actions > .btn-pure .btn-pure-txt{display:none;}
  .sakura-density-wrap input[type=range]{width:54px;}
}
@media (min-width:769px) and (max-width:900px){
  .header-bar{padding-left:14px;padding-right:14px;}
  .nav-actions{gap:4px;}
}
/* 830 以下连站名文字也放不下（否则城市选择框会被挤成「北…」），只留樱花标志 */
@media (min-width:769px) and (max-width:829px){
  .brand-text{display:none;}
}