@charset "UTF-8";
/* ==========================================================================
   图像格式PictureFormat · assets/css/drawer.css
   阶段：P3 侧边抽屉（对应 任务书 §5.4 与 C1~C6；必须加载在 base.css 之后）

   纪律（违反即返工）：
     · 只消费 base.css 的令牌；本文件不新增任何十六进制色。
     · 层级一律用 base 的令牌（--z-drawer / --z-overlay），不自己拍数字。
       说明：原生 <dialog> showModal() 打开时位于浏览器 top layer，
       ::backdrop 不参与 z-index 排序，故本文件不为遮罩写 z-index；
       需要 z-index 的只有「钉住」后的常驻固定栏，用 --z-drawer。
     · 金属职责：抽屉是功能面，不铺黄铜；图标 / 线条用灰阶（--text-muted / --rule）。
     · 渐进增强：默认隐藏（等 JS showModal）；无 JS 时由 header.php 的 <noscript>
       把它降级为文末普通区块（见该处注释）。
     · 断点：≥768px 右侧 400px 抽屉（可钉住）；<768px 全屏滑出。
   ========================================================================== */

/* ==========================================================================
   01 抽屉本体（<dialog id="np-drawer">）
   ========================================================================== */

/* 打开（showModal）时的定位：贴右侧、占满视口高度 */
.np-drawer[open] {
  position: fixed;
  inset: 0 0 0 auto;              /* 右对齐 */
  width: 400px;
  max-width: min(400px, 92vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: var(--hairline) solid var(--border);
  background: var(--surface);
  color: var(--text);
  z-index: var(--z-drawer);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* 遮罩：藏蓝墨色的半透明（由令牌推导，不写新色） */
.np-drawer::backdrop {
  background: color-mix(in srgb, var(--ink-strong) 42%, transparent);
}

/* 内层：竖直布局，栏头固定、主体滚动 */
.np-drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ==========================================================================
   02 抽屉栏头（标题 + 钉住 + 关闭）
   ========================================================================== */

.np-drawer__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border-bottom: var(--hairline) solid var(--border);
}

.np-drawer__title {
  margin: 0;
  font-size: var(--fs-h5);
  line-height: var(--lh-head);
  color: var(--text-strong);
}

.np-drawer__bar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.np-drawer__pin,
.np-drawer__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  color: var(--text-strong);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  line-height: 1;
}
.np-drawer__close { padding: var(--space-1); }
.np-drawer__pin:hover,
.np-drawer__close:hover { background: var(--blue-pale); }

/* 钉住态：功能小件，用主色填充（不涉金属） */
.np-drawer__pin[aria-pressed="true"] {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: var(--paper);
}

.np-drawer__icon { display: block; flex: none; }

/* ==========================================================================
   03 抽屉主体（可滚动）+ 九个模块（<details> 骨架）
   ========================================================================== */

.np-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-4) var(--space-6);
}

.np-drawer__module {
  border-bottom: var(--hairline) solid var(--border-soft);
}
.np-drawer__module:last-child { border-bottom: 0; }

.np-drawer__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  color: var(--text-strong);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.np-drawer__summary::-webkit-details-marker { display: none; }
.np-drawer__summary .np-drawer__icon { color: var(--text-muted); }
.np-drawer__summary-text { flex: 1 1 auto; }

/* 展开指示（纯 CSS 菱形箭头，不引图标资源） */
.np-drawer__summary::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid var(--rule);
  border-bottom: 1.5px solid var(--rule);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.np-drawer__module[open] .np-drawer__summary::after { transform: rotate(-135deg); }

.np-drawer__mod-body { padding: 0 var(--space-1) var(--space-4); }

/* --- 链接列表 --- */
.np-drawer__list {
  margin: 0;
  padding-left: 1.3em;
  /* 避免长标题 / 网址把抽屉撑出横向滚动 */
  overflow-wrap: anywhere;
}
.np-drawer__list li + li { margin-top: var(--space-2); }

.np-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-drawer__list a,
.np-drawer__links a,
.np-drawer__more-link {
  color: var(--link);
  text-decoration: none;
}
.np-drawer__list a:hover,
.np-drawer__links a:hover,
.np-drawer__more-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* --- 标签：小药丸 --- */
.np-drawer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-drawer__tags a {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  color: var(--text);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
}
.np-drawer__tags a:hover {
  background: var(--blue-pale);
  color: var(--ink-strong);
}

/* --- 占位 / 提示 / 更多 --- */
.np-drawer__placeholder,
.np-drawer__hint {
  margin: 0;
  max-width: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.np-drawer__hint { color: var(--text); }
.np-drawer__more { margin: var(--space-3) 0 0; }
.np-drawer__placeholder + .np-drawer__more { margin-top: var(--space-2); }

/* --- 搜索表单（无 JS 也能提交） --- */
.np-drawer__search { display: flex; align-items: center; gap: var(--space-2); }
.np-drawer__search input[type="search"] { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   04 桌面「钉住」→ 常驻右侧固定栏（C4）
   —— 状态类加在 <html> 上：np-drawer-pinned；仅 ≥768px 生效。
      钉住时抽屉不再走模态：JS 会先 close() 再切到这个静态固定栏。
   ========================================================================== */
@media (min-width: 768px) {
  html.np-drawer-pinned .np-drawer {
    display: block;                 /* 覆盖 UA：dialog:not([open]){display:none} */
    position: fixed;
    inset: 0 0 0 auto;
    width: 400px;
    max-width: 400px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-left: var(--hairline) solid var(--border);
    background: var(--surface);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
  }
  /* 常驻栏不遮挡正文：右侧让出抽屉宽度 */
  html.np-drawer-pinned body { padding-right: 400px; }
}

/* ==========================================================================
   05 移动端（<768px）全屏滑出（C5）：顶部固定关闭、点遮罩 / Esc 关闭
   ========================================================================== */
@media (max-width: 767px) {
  .np-drawer[open] {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-left: 0;
  }
  /* 钉住是桌面专属，移动端不出现该按钮 */
  .np-drawer__pin { display: none !important; }
}

/* ==========================================================================
   06 打印：抽屉是交互件，纸上无意义
   ========================================================================== */
@media print {
  .np-drawer,
  .np-drawer::backdrop { display: none !important; }
}