/*! responsive.css —— 第 4 层：断点（900 / 640 / 620 / 1600）与 reduced-motion。
 * 放在最后加载：各层都写完后，这里只回答「屏幕变小 / 变大时谁让位」。
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 窄屏 / 投屏 ---------- */
@media (max-width: 900px) {
  .bar { height: auto; padding: 9px 12px; gap: 8px; flex-wrap: wrap; }
  .brand { max-width: 100%; font-size: 13.5px; }
  .seg button { padding: 6px 10px; font-size: 12.5px; }
  .bar-right { margin-left: 0; width: 100%; gap: 6px; }
  .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .subbar { gap: 10px; padding: 7px 12px; font-size: 11px; }
  .legend { gap: 10px; }
  .zoomhint { display: none; }
  .tree-focus { height: 28px; font-size: 11px; }
  .tree-nav { height: 30px; }
  .tree-nav button { min-width: 30px; }
  .stat { width: 100%; margin-left: 0; padding-left: 0; }
  .row2 { grid-template-columns: 1fr; }
  .wrap-table { padding: 14px 12px 48px; }
  table.tbl { font-size: 13px; }
  table.tbl th, table.tbl td { padding: 10px 12px; }
  table.tbl td.role { font-size: 14px; }
  .tblhead .t1 { font-size: 15px; }
  .panel { width: 100%; }
}

/* 手机上八列放不下 —— 书面称谓、辈分差、性别、备注都撤掉。
 * 辈分已经由导卡分档说明；生卒与年龄留下，那是查族谱最常看的两列。
 * 剩下四列必须给死宽度：auto 布局下「农历1955年八月十五」会把表格撑到 400px 出头，
 * 而手机内容区不到 370px，多出来的部分会被 .tblwrap 的 overflow:hidden 直接切掉。 */
@media (max-width: 640px) {
  table.tbl { table-layout: fixed; }
  table.tbl col { width: auto !important; }
  table.tbl th:nth-child(2), table.tbl td:nth-child(2),
  table.tbl th:nth-child(4), table.tbl td:nth-child(4),
  table.tbl th:nth-child(5), table.tbl td:nth-child(5),
  table.tbl th:nth-child(7), table.tbl td:nth-child(7) { display: none; }
  /* 只留三列：称谓 / 姓名 / 生卒。
     早先还留着年龄（22%），代价是姓名只剩 73px、全被截成「马永昌…」——
     年龄本来就能由生卒推，详情面板里还有周岁/虚岁，不值得占掉姓名的宽度。
     三列比例合计 100%：少算一项，表格右边就会空出一截（hidden 的列仍吃掉表宽）。 */
  table.tbl th:nth-child(1), table.tbl td:nth-child(1) { width: 26%; }
  table.tbl th:nth-child(3), table.tbl td:nth-child(3) { width: 30%; }
  table.tbl th:nth-child(6), table.tbl td:nth-child(6) { width: 44%; }
  /* 生卒一格两段日期，390px 下横排放不下 —— 原来 nowrap + ellipsis 直接把去世年份切掉
     （「1912年03月08日 — 1985年」），信息是断的。这里允许在「—」两侧的空白折行，
     折成「生 / 卒」两行反而更好读。 */
  table.tbl td:nth-child(6) { white-space: normal; }
  table.tbl td:nth-child(6) .life { line-height: 1.5; }
  table.tbl th, table.tbl td { padding: 11px 9px; }
  table.tbl td.role { font-size: 15px; }
  table.tbl td.num .life-lunar { font-size: 10px; }
  /* 搜索框独占一行，切换按钮落到第二行 —— 否则会把页面撑出横向滚动 */
  .wrap-table .toolbar { flex-wrap: wrap; }
  .wrap-table .toolbar input { flex: 1 1 100%; max-width: none; }
  .wrap-table .toolbar .btn.ghost { margin-left: 0 !important; }
}

/* 投屏：一屋子人看的距离，整体放大 */
@media (min-width: 1600px) {
  :root { --bar-h: 60px; }
  body { font-size: 15px; }
}

/* ================= 2026-10-23 四屏骨架 ================= */

/* PC：详情是**常驻抽屉**，不是浮层 —— 画布让位，遮罩退场。
 * 这条是 web 与小程序最大的形态差异：PC 上一屏能同时看到"结构和这个人"，
 * 反复开关抽屉是查族谱时最烦的动作。 */
@media (min-width: 1280px) {
  body.drawer-open .stack { margin-right: var(--drawer-w); }
  .panel {
    width: var(--drawer-w);
    box-shadow: none;
    border-left: 1px solid var(--rail);
  }
  #scrim { display: none; }
}

/* 移动：弹窗自下而上，和抽屉同一套「从边上进来」的语言 */
@media (max-width: 1023px) {
  .modal, .confirm { align-items: flex-end; }
  .modal-box, .confirm-box {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .page-col { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 20px 18px 18px; }
  .hero-num { font-size: 38px; }
  .quick { gap: 8px; }
  .qa { padding: 13px 4px 11px; }
  .pg-title { font-size: 20px; }
  .tl-row { grid-template-columns: 54px 16px 1fr; }
  .ml-wrap { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 640px) {
  .stat-n { font-size: 19px; }
  .qa span { font-size: 11px; }
}

/* ---------- 移动端顶栏：从「折成四行」压回两行 ----------
 * 原来的 flex-wrap 在 390px 上会摊成 4 行（品牌 / 两个分段 / 视角+按钮），
 * 吃掉 1/4 屏 —— 画布是这一屏的主角，顶栏必须让位。
 * 排序：品牌 + 右侧动作 一行；三个展示形式 + 双口径 一行。 */
@media (max-width: 767px) {
  .bar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand right"
      "form  dial";
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 9px 10px;
  }
  .bar > .brand { grid-area: brand; min-width: 0; }
  #formSwitch { grid-area: form; justify-self: start; }
  #dialectSwitch { grid-area: dial; justify-self: end; }
  .bar > .bar-right { grid-area: right; margin-left: 0; width: auto; gap: 6px; }
  .bar .btn { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .bar .seg button { padding: 5px 9px; font-size: 12px; }
  .brand { font-size: 13px; }
  /* 视角按钮的文字在窄屏会顶到「数据」——收到 5em 里，超出省略 */
  #btnViewpoint #egoLabel { max-width: 5.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 窄屏顶栏的二次收紧：一行放不下「品牌 + 视角 + 数据 + 添加」。
 * 「数据」在移动端有两条等价通路（概览的快捷入口 / 我的 → 族谱数据），
 * 所以这里收掉它，把位置让给「添加」—— 那是这一屏唯一不可替代的动作。 */
@media (max-width: 767px) {
  .bar { grid-template-columns: minmax(0, 1fr) auto; }
  .bar #btnData { display: none; }
  #formSwitch, #dialectSwitch { min-width: 0; flex-wrap: nowrap; }
  .bar .seg button { padding: 5px 8px; font-size: 11.5px; letter-spacing: 0; }
  #btnViewpoint { padding: 0 8px; }
  #btnViewpoint #egoLabel { max-width: 4.6em; }
  .bar .bar-right .btn.primary { padding: 0 12px; }
}

/* 副栏在窄屏也要收成一列：图例 / 搜索+缩放 / 聚焦+计数，三行 */
@media (max-width: 767px) {
  .subbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 8px;
    padding: 8px 10px;
    height: auto;
  }
  .subbar .legend { grid-column: 1 / -1; }
  .subbar #quickSearch { grid-column: 1; max-width: none; }
  .subbar #treeNav { grid-column: 2; }
  .subbar .tree-focus { grid-column: 1; justify-self: start; }
  .subbar .stat { grid-column: 2; width: auto; margin: 0; padding: 0; text-align: right; }
}