/* App-specific styles on top of the Broadsheet system (styles.css). */
body { margin: 0; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
input[type="date"] { font-family: var(--font-body); }

/* ── iPhone 基础适配 ────────────────────────────────────────────────── */
html {
  /* iOS 横屏会自动放大正文字号，关掉 */
  -webkit-text-size-adjust: 100%;
}
body {
  /* 默认的灰色点击闪块在纸面底色上很脏，换成主色淡影 */
  -webkit-tap-highlight-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
button, .seg-opt, .tab, .stock-row, .picker-row, .radio {
  /* 去掉 iOS 等待双击缩放造成的 ~300ms 点击延迟 */
  touch-action: manipulation;
}
/* iOS 会给 input/button 加圆角和内阴影，与 Broadsheet 的 2px 直角冲突 */
input, button, textarea, select { -webkit-appearance: none; appearance: none; border-radius: 0; }
.input, .btn { border-radius: var(--radius-md); }

@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.app-shell { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
/* 安全区：刘海/灵动岛与底部横条不能盖住内容（index.html 用了 viewport-fit=cover） */
.app-page {
  max-width: 860px; margin: 0 auto;
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
           calc(120px + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}

.masthead {
  border-top: 3px solid var(--color-text); border-bottom: 1px solid var(--color-text);
  padding: var(--space-2) 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.masthead h1 { margin: 0; font-size: 24px; }
.masthead .subtitle {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.masthead .meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.masthead .date { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.masthead .who { font-size: 12px; }
/* 语言切换：小而明确，不跟「退出」抢注意力 */
.lang-btn {
  font-size: 11px; padding: 2px 7px; letter-spacing: 0.06em;
  border: 1px solid var(--color-divider); color: var(--color-text);
  min-width: 34px;
}
.lang-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* 页签常驻顶部：手机上滚到列表深处也能直接切到盘点 */
.tabs {
  display: flex; gap: var(--space-4); padding: var(--space-2) 0 var(--space-4);
  position: sticky; top: 0; z-index: 20; background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-divider);
}
.tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-text);
  padding: 8px 2px; border-bottom: 3px solid transparent; opacity: 0.55;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab.active { border-bottom-color: var(--color-accent); opacity: 1; }
.tab .en { font-size: 11px; letter-spacing: 0.06em; opacity: 0.7; }

.dim { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.dim65 { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.dim55 { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.empty-note { padding: var(--space-6) 0; font-style: italic; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.row-2 { display: flex; gap: var(--space-2); }

.stock-row {
  cursor: pointer; padding: var(--space-3) var(--space-1);
  display: flex; flex-direction: column; gap: 6px; border-radius: var(--radius-md);
}
.stock-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.stock-row .no { font-family: var(--font-heading); font-weight: 600; font-size: 19px; letter-spacing: 0.02em; }
.stock-row .age { margin-left: auto; font-size: 13px; white-space: nowrap; }
.stock-row .sub { font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.stock-row .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.warn { color: var(--color-accent-2); }

.bar-track { height: 8px; background: var(--color-accent-100); border-radius: var(--radius-sm); }
.bar-fill { height: 8px; background: var(--color-accent); border-radius: var(--radius-sm); }
.bar-track.neutral { background: var(--color-neutral-200); }
.bar-fill.neutral { background: var(--color-neutral-600); }

.stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.stat-value { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1.1; }

.overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--color-bg); overflow: auto;
  /* 滚到边界时不把底层页面一起拖动（iOS 橡皮筋） */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.overlay-inner {
  max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4);
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
           calc(var(--space-8) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}
.overlay-head {
  display: flex; align-items: baseline; gap: var(--space-2);
  border-top: 3px solid var(--color-text); border-bottom: 1px solid var(--color-text); padding: var(--space-2) 0;
}
.overlay-head h2 { margin: 0; font-size: 22px; }

.login-inner {
  max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4);
  padding: max(15vh, calc(var(--space-8) + env(safe-area-inset-top))) max(var(--space-4), env(safe-area-inset-right))
           calc(var(--space-8) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}
.login-mast { border-top: 3px solid var(--color-text); border-bottom: 1px solid var(--color-text); padding: var(--space-2) 0; }
.login-mast h1 { margin: 0; font-size: 28px; }

.big-btn { font-size: 16px; padding: 14px; }

.toast {
  /* 避开底部横条，否则提示会被 Home 指示条压住 */
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translate(-50%, 0); z-index: 80;
  background: var(--color-text); color: var(--color-bg); padding: 10px 18px;
  border-radius: var(--radius-md); font-size: 14px; box-shadow: var(--shadow-lg);
  animation: toastIn 0.2s ease; max-width: 85vw;
}

/* 多批选择弹窗的行：整行可点，勾选框够大好按（手套操作） */
.picker-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: 9px var(--space-1); min-height: 44px; cursor: pointer;
  border-radius: var(--radius-md);
}
.picker-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.picker-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.picker-box {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--color-divider); border-radius: var(--radius-md);
  background: var(--color-bg);
}
.picker-row input:checked + .picker-box {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg);
}
.picker-row input:focus-visible + .picker-box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.offline-pill {
  /* 避开刘海/灵动岛 */
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--color-accent-2-100); color: var(--color-accent-2-800);
  padding: 4px 14px; border-radius: var(--radius-md); font-size: 12px; box-shadow: var(--shadow-sm);
  max-width: 92vw; text-align: center;
}

/* 弹窗也要避开安全区，否则在手机上按钮会贴到底部横条 */
.dialog-backdrop {
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right))
           max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  overscroll-behavior: contain;
}
.dialog { max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 统计数字：网格排布，避免窄屏参差换行（4 个一行 + 1 个孤零零掉下来） */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-4) var(--space-6); }

/* 表格在窄屏横向滚动，而不是把「亚马逊」压成竖排三行 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* ── 手机版（≤640px）────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* 关键：iOS Safari 在字号 <16px 的输入框获得焦点时会自动放大整个页面。
     16px 是不触发缩放的下限。 */
  .input { font-size: 16px; min-height: 44px; }

  /* 点按目标按 Apple HIG 至少 44pt */
  /* 仓库里可能戴手套操作，所有可点元素一律给足 44px */
  .btn { min-height: 44px; }
  .btn-ghost { min-height: 44px; }
  .lang-btn { min-height: 44px; min-width: 46px; font-size: 12px; padding: 6px 10px; }
  .seg-opt { min-height: 44px; padding: 10px 14px; font-size: 14px; }
  .tab { min-height: 48px; padding: 10px 2px; font-size: 17px; }
  .tabs { gap: var(--space-3); }

  /* 报头在窄屏收紧：标题一行，其余信息一行 */
  .masthead h1 { font-size: 21px; }
  .masthead .subtitle { display: none; }   /* 窄屏省掉英文副标题，给操作留空间 */
  .masthead .meta { width: 100%; margin-left: 0; justify-content: flex-end; }

  /* 列表行：柜号更大更好扫，整行留足触摸高度 */
  .stock-row { padding: var(--space-3) var(--space-1); }
  .stock-row .no { font-size: 20px; }
  .stock-row .sub { font-size: 13px; }

  /* 表格单元格不换行，交给容器横向滚动 */
  .table th, .table td { white-space: nowrap; }
  .table { font-size: 13px; }

  .stat-value { font-size: 34px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }

  .overlay-head h2 { font-size: 20px; }
  .dialog { width: 100%; }
}

/* 按下反馈：手机没有 hover，必须有 :active 才知道点到了 */
.stock-row:active, .picker-row:active {
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
}
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }