/* ============================================================================
   drawer.css — 抽屉（D2 /
   ============================================================================
   依据：APG Dialog 模式（Drawer 是从侧边滑入的 Dialog）

   ⭐ 与 dialog 的差别只有"从哪进来"，**三条硬要求完全一样**：
     ① **焦点陷阱**：Tab 不能跑到抽屉外
     ② **Esc 关闭**
     ③ ⭐ **关闭后焦点归位**（回到触发它的按钮）
        —— 这条最容易漏，且**影响最大**：
           键盘用户被"扔"回页面顶部，得重新 Tab 一遍。

   ⚠️ 抽屉是**模态**（modal）：背景必须 `inert` 或 `aria-hidden`，
      否则读屏会同时读到抽屉与背景（"双重朗读"）。
   ============================================================================ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  /*🔴 改：原来是写死的 rgba(0,0,0,.42)——
     暗色模式下遮罩明显偏黑（暗色下 --scrim 是 0.62 的黑，
     而写死的 .42 在深底上几乎看不出来）。
     overlay.css 与 nav.css 都用 var(--scrim)，只有这里漏了 ⇒
     同一套库里三个遮罩表现不一致。
     统一走令牌后，暗色跟随自动生效。 */
  background: var(--scrim);
  display: flex;
  /* 默认停在内联终点侧（LTR 右 / RTL 左）。
     🔴 0.25.2 修：原来只有这一条，于是 `--left` / `--bottom` **只改了边框和动画、
     位置一点没动**。1280×800 实测：left 的 left=860（应 0）、bottom 的 top=0（应贴底）。
     两个方向是错的，却控制台干净、契约全绿。⇒ 落位交给各方向的 auto margin / align-self。 */
  justify-content: flex-end;
}

.drawer-backdrop[hidden] { display: none; }

.drawer {
  width: min(420px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--border-decor);
  box-shadow: var(--shadow-2);
  /* 焦点在抽屉里时，浏览器不会自动滚进视野 ⇒ 手动处理 */
  overflow: hidden;
}

/* ---------- 四个方向 ----------
   ⚠️ 名字沿用 0.x 的物理叫法（left / right），**实现是逻辑轴**：
     `--left` = 内联起点（LTR 左 / RTL 右），`--right` = 内联终点。
   抽屉是"布局家具"，整页镜像时必须跟着镜像；只有"指向某侧的箭头"
   （tooltip 的小三角）才该保持物理方向。本文件本来写的就全是逻辑属性
   （border-inline-start/end），语义一直是逻辑的，这里只是让它落地。

   落位靠抽屉自己的 auto margin / align-self（容器是 flex row）：
     主轴 auto margin 吃掉剩余空间（优先于 justify-content）；
     交叉轴 align-self 把固定高度的抽屉推到上/下边。
   `--right` 不需要额外规则：容器默认的 `justify-content: flex-end`
   就落在内联终点侧 —— 这也解释了为什么它一直是唯一没坏的方向。 */
.drawer--left   { margin-inline-end: auto;   /* 推到内联起点 */
                  border-inline-start: 0; border-inline-end: 1px solid var(--border-decor); }
.drawer--top    { align-self: flex-start; width: 100%; height: min(60vh, 420px);
                  border-inline-start: 0; border-bottom: 1px solid var(--border-decor); }
.drawer--bottom { align-self: flex-end;   width: 100%; height: min(60vh, 420px);
                  border-inline-start: 0; border-top: 1px solid var(--border-decor); }

/* ---------- 头 ---------- */
.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-decor);
  flex: 0 0 auto;
}

.drawer__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.drawer__close {
  flex: 0 0 auto;
  width: 44px;                 /* 🔴 命中区（关闭按钮是独立目标，用 44）*/
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.drawer__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) and (pointer: fine) {
  .drawer__close:hover { background: var(--surface-sunken); }
}

/* ---------- 体 / 脚 ---------- */
.drawer__body {
  flex: 1 1 auto;
  padding: var(--sp-4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer__foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
  padding: var(--sp-4);
  border-top: 1px solid var(--border-decor);
}

/* ---------- 进出场动画 ----------
   ⚠️ 用 transform 而不是 left/right（合成层动画，不触发重排）。
   ⚠️ 动画只做"位移 + 少量透明度"，**不做大幅缩放** —— 那看起来廉价。 */
@media (prefers-reduced-motion: no-preference) {
  /* --ease-drawer：滑入面板专用曲线（不是通用的 --ease-out） */
  .drawer--right  { animation: drawer-in-right  220ms var(--ease-drawer, ease); }
  .drawer--left   { animation: drawer-in-left   220ms var(--ease-drawer, ease); }
  .drawer--top    { animation: drawer-in-top    220ms var(--ease-drawer, ease); }
  .drawer--bottom { animation: drawer-in-bottom 220ms var(--ease-drawer, ease); }

  @keyframes drawer-in-right  { from { transform: translateX(16px); opacity: .6; } }
  @keyframes drawer-in-left   { from { transform: translateX(-16px); opacity: .6; } }
  @keyframes drawer-in-top    { from { transform: translateY(-16px); opacity: .6; } }
  @keyframes drawer-in-bottom { from { transform: translateY(16px); opacity: .6; } }
}

/* 退场（JS 设这个属性，等动画结束再移除节点）*/
.drawer[data-state="leaving"] { opacity: 0; transition: opacity 160ms var(--ease-out, ease); }