/**
 * 响应式（开发清单 2.8、设计需求文档 9.1）。
 *
 * 断点只有四个，刻意少：
 *   ≤375 高 ≤700  → H5 小屏降档（iPhone SE）
 *   ≥428          → H5 大屏与平板统一按 480 居中
 *   ≤1280         → PC 侧栏自动折叠
 *   ≥1920         → 内容限宽 1600（已在 .content 的 max-width 里，无需断点）
 *
 * 本期不做平板专门适配、不做深色模式（清单 2 节末尾）。
 */

/* ============ PC 1280：侧栏自动折叠 ============ */

/**
 * 1280 下侧栏折叠为 64。
 *
 * **表格 8 列全保留、不横向滚动**（清单 2.8，与旧版文档相反）：
 * 折叠侧栏省下的 160px 正好补上表格在 1280 上缺的宽度。
 * 因此 1440 与 1280 是同一份列配置，不要写两套列定义。
 *
 * 用 :not(.is-expanded) 而不是直接套 .is-collapsed 的样式：
 * 断点只提供默认值，用户手动展开后应当能覆盖它 —— 有人就是想在 1280 上
 * 看着完整菜单操作，强制折叠会让那个折叠按钮变成假的。
 */
@media (max-width: 1280px) {
  .app-shell:not(.is-expanded) .sidebar {
    width: var(--sidebar-width-collapsed);
  }

  .app-shell:not(.is-expanded) .sidebar-name,
  .app-shell:not(.is-expanded) .nav-item span,
  .app-shell:not(.is-expanded) .nav-group-label,
  .app-shell:not(.is-expanded) .sidebar-foot span,
  .app-shell:not(.is-expanded) .sidebar-version {
    display: none;
  }

  .app-shell:not(.is-expanded) .sidebar-logo,
  .app-shell:not(.is-expanded) .nav-item,
  .app-shell:not(.is-expanded) .sidebar-foot {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .app-shell:not(.is-expanded) .nav-item svg { width: 17px; height: 17px; }
  .app-shell:not(.is-expanded) .nav-subitem { display: none; }
  .app-shell:not(.is-expanded) .nav-group { padding: var(--space-2); }
  .app-shell:not(.is-expanded) .nav-group::before { margin: 0; }

  /* 1280 自动折叠与手动折叠行为一致：都不弹 hover 浮层（用户否掉了黑条）。
     认图标改由点击展开整栏解决，见 shell.js 的 click-to-expand。 */
  .app-shell:not(.is-expanded) .nav-item { position: relative; }

  /* 分配工作台左右栏收窄 300→260 / 280→240（设计文档 9.1 行 872） */
  .workbench-left  { width: 240px; }
  .workbench-right { width: 260px; }

  /* 顶栏内距收一档，给活动切换器和搜索框让位 */
  .topbar { padding: 0 var(--space-4); gap: var(--space-3); }
  .content { padding: var(--space-5); }
}

/* 更窄时（笔记本外接小屏等）搜索框先让位 —— 它是辅助入口，
   活动切换器不能让，那是当前上下文的唯一指示 */
@media (max-width: 1100px) {
  .topbar-search { display: none; }
}

/* ============ H5 ============ */

/**
 * H5 基准 375。≥428 与平板 768 统一按 480 居中（清单 2.8）。
 *
 * 只做居中限宽，不为平板另写一套：平板本期明确不适配（Q25 已确认），
 * 在大屏上把 H5 拉满会让 72px 的桌号巨字显得荒唐。
 */
.h5-page {
  max-width: 480px;
  margin: 0 auto;
  /* 不再 min-height:100vh/100dvh:
     iOS/微信 WebView 里键盘弹起时 vh/dvh 值离散跳变(不是平滑动画),
     页面高度那次瞬变本身就是「抖一下」。
     取消 min-height 后页面按内容自然高度,键盘弹起页面不需要重算,不抖。
     副作用:桌面预览时短页面下方会露 body 底色——body 本就 bg-page,视觉一致 */
  background: var(--color-bg-page);
  /* 顶部与底部安全区。用 env() 取真实值，取不到时回退到令牌里的常量 ——
     env() 在非 iOS 浏览器里为空，不给回退值会算出 0 然后被 Home 条压住 */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 底部固定操作条：H5 结果页的「查看座位图 / 到座引导」 */
.h5-actionbar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, var(--safe-bottom)));
  background: var(--color-neutral-0);
  border-top: 1px solid var(--color-border);
}

.h5-actionbar .btn {
  flex: 1;
  height: var(--h5-btn-h);
  font-size: var(--text-body-1);
}

/* 桌号巨字与座位号：只引用令牌，降档时不用改这里 */
.h5-table-no {
  font-family: var(--font-num);
  font-size: var(--h5-table-no);
  /* 600 不用 700，见 base.css 里的说明 */
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-500);
}

.h5-seat-no {
  font-family: var(--font-num);
  font-size: var(--h5-seat-no);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.h5-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: var(--h5-card-pad);
  box-shadow: var(--shadow-1);
}

/**
 * 活动信息行（活动名 / 时间 / 地点 / 票种…）。
 *
 * **必须包一层 .h5-info-list**，信息行不能直接挂在卡片下。
 * 小屏降档要隐藏"第三行及以后"，用的是 :nth-child —— 而 :nth-child 数的是
 * 全部同级元素，不是只数带这个 class 的。信息行要是和标题、分隔线混作兄弟，
 * 序号就被那些元素顶偏，降档时藏掉的会是错的行。
 * 包一层之后信息行就是这一层里唯一的子元素，序号即行号。
 */
.h5-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.h5-info-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-body-2);
  line-height: var(--text-body-2-lh);
}

.h5-info-row dt,
.h5-info-row .h5-info-label {
  flex-shrink: 0;
  width: 56px;
  color: var(--color-text-tertiary);
}

.h5-info-row dd,
.h5-info-row .h5-info-value {
  margin: 0;
  color: var(--color-text-primary);
}

/**
 * 375×667 小屏降档（iPhone SE，稿件 `QjpLL`）。
 *
 * **断点必须用 max-height 而不是 max-width。**
 * 375×667(SE) 与 375×812(iPhone X) 宽度完全一样 —— 按宽度写的话
 * iPhone X 会跟着一起降档，白降 16px 字号；而按 667 判定 iPhone X
 * 又不该降。真正紧张的是竖向空间，所以判据本来就是高度。
 *
 * 降档不是"小屏就该小一点"这种审美判断：72px 时首屏只装得下 1 位同行人，
 * 而下单人打开这一页多半正是为了把 3 个人的座位一起转出去。
 * 降到 56 后 3 行同行人全在首屏，截一张图就够（判断理由见说明板 `vtI51`）。
 * **同行人 3 行必须全在首屏**是这一档的验收条件。
 */
@media (max-height: 700px) {
  .h5-page {
    --h5-table-no: 56px;          /* 72 → 56 */
    --h5-seat-no: 40px;           /* 48 → 40 */
    --h5-card-pad: var(--space-4); /* 20 → 16 */
    --h5-btn-h: 44px;             /* 46 → 44 */
  }

  /* 信息行 3 → 2：第三行（多为"票种"之类）在小屏让位给同行人列表。
     选择器带上 .h5-info-list 前缀，序号才是行号 —— 理由见上面基础样式处 */
  .h5-info-list > .h5-info-row:nth-child(n + 3) { display: none; }
}

/* ============ 打印（清单 9.2）============ */

/* 打印物料另有独立样式表，这里只兜底：屏幕上的导航与按钮一律不上纸 */
@media print {
  .sidebar,
  .topbar,
  .h5-actionbar,
  .degraded-banner,
  .pagination,
  .btn {
    display: none !important;
  }

  .content { padding: 0; max-width: none; }

  /* 阴影打出来是一片灰，去掉 */
  .card, .table-wrap { box-shadow: none; }
}