/* 番茄钟 · 三端适配（手机 / 平板 / 电脑）
   在 assets/common.css 之后加载：只调尺寸、间距、栅格列数，不改配色，
   这样以后换主题也不会和这份文件打架。

   断点（和工具站 V21、聊天面板保持一致）：
     大屏电脑  ≥1440px      普通电脑 1025–1439px
     平板      641–1024px   手机     ≤640px
     超窄      ≤400px       横屏矮屏 max-height:460px
   env(safe-area-inset-*) 用来躲开刘海屏和圆角屏。 */

/* ---------- 大屏电脑 ---------- */
@media (min-width:1440px){
  body{padding-left:24px;padding-right:24px}
  .wrap{max-width:980px}
  body.compact .wrap{max-width:1200px}
  .metric .v{font-size:22px}
}

/* ---------- 普通电脑 ---------- */
@media (min-width:1025px) and (max-width:1439px){
  .wrap{max-width:880px}
}

/* ---------- 平板 ---------- */
@media (min-width:641px) and (max-width:1024px){
  body{padding:16px 14px}
  .wrap{max-width:100%}
  body.compact .wrap{max-width:100%}
  .grid4{grid-template-columns:repeat(3,1fr)}
  .card{padding:13px}
  .topbar{gap:9px}
  .metric .v{font-size:19px}
}

/* ---------- 手机 ---------- */
@media (max-width:640px){
  body{
    padding:12px 12px calc(80px + env(safe-area-inset-bottom,0px));
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
    padding-top:max(12px,env(safe-area-inset-top,0px));
  }
  .wrap{max-width:100%}
  body.compact .wrap{max-width:100%}

  .topbar{gap:8px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:12px}
  .avatar{width:30px;height:30px}
  .brand{font-size:14px}

  .card{padding:12px;margin-bottom:10px}
  .card .card-title{font-size:12.5px}

  /* 手机上四列/三列挤不下，统统降到两列 */
  .grid4{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .metric{padding:8px}
  .metric .v{font-size:18px}

  /* 输入框保持 16px：小于 16px 时 iOS Safari 聚焦会整页放大 */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,textarea{font-size:16px}

  /* 点按目标别太小 */
  .btn{min-height:34px}
  .pill{min-height:30px;display:inline-flex;align-items:center}
  .nav-item{padding:13px 12px}

  /* 宽表格改成横向滚动，不撑破页面 */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  .foot{font-size:10.5px;margin-top:14px}
}

/* ---------- 超窄小屏 ---------- */
@media (max-width:400px){
  .grid4,.grid3{grid-template-columns:1fr 1fr}
  .metric .v{font-size:17px}
  .card{padding:10px}
  .btn{padding:6px 10px}
}

/* ---------- 手机横屏 / 矮屏 ---------- */
@media (max-height:460px) and (orientation:landscape){
  body{
    padding-top:10px;
    padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
  }
  .topbar{padding-bottom:8px;margin-bottom:10px}
  .card{margin-bottom:8px;padding:10px}
}

/* ---------- 触屏设备：点按给个即时反馈 ---------- */
@media (hover:none){
  .nav-item:active,.pill:active,.back:active{opacity:.72}
}