/* ==========================================================================
   components/sidebar.css — 文档页左侧目录
   结构/比例 = 线上：面板 radius 20px · padding 16px · 条目 radius 12px
   视觉 = 糖果粗野：ink 硬描边 + 实心硬影 + 纯色激活块
   ========================================================================== */

.desktop-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  max-height: calc(100vh - var(--topbar-h) - 48px);
  overflow-y: auto;
  background: var(--panel);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: var(--hard);
}

/* 侧栏头部 */
.sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: var(--stroke-thin) solid var(--ink);
}

/* ⚠️ 本文件只作用于各"单子"页（内容页）的左侧目录栏，主页不渲染该侧栏，
   与 layout/poster/companion 一起把字号上调一档。 */

.sidebar-title {
  font-size: 24px;
  font-weight: var(--fw-blackest);
  letter-spacing: 0.03em;
}

.sidebar-badge {
  font-size: 15px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 搜索框 */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  font-size: 17px;
  opacity: 0.55;
  pointer-events: none;
}

.search-input {
  padding-left: 36px !important;
  font-size: 17px !important;
}

/* 分组 */
.sidebar-group {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 8px;
  font-size: 17px;
  font-weight: var(--fw-black);
  letter-spacing: 0.03em;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease);
}

.group-toggle:hover {
  background: var(--candy-pink-soft);
}

.group-count {
  margin-left: auto;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.group-caret {
  font-size: 13px;
  color: var(--muted);
  transition: transform var(--t-base) var(--ease);
}

.group-toggle:not(.open) .group-caret {
  transform: rotate(-90deg);
}

/* 列表 */
.sidebar-list {
  display: grid;
  gap: 4px;
  padding: 6px 0 0;
  overflow: hidden;
}

.sidebar-list:not(.open) {
  display: none;
}

/* 目录项（线上：padding 10px 10px 10px 16px，radius 12px） */
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 10px 10px 16px;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: var(--stroke-thin) solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease-pop),
    box-shadow var(--t-fast) var(--ease-pop);
}

/* 激活色条（线上：left 4px, width 3px） */
.sidebar-link::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--r-pill);
  background: transparent;
  transition: background-color var(--t-fast) var(--ease);
}

.sidebar-link:hover {
  color: var(--ink);
  background: var(--panel-solid);
  border-color: var(--ink-3);
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 0 var(--ink-3);
}

.sidebar-link.active {
  color: var(--ink);
  font-weight: var(--fw-black);
  background: var(--candy-pink-soft);
  border: var(--stroke-thin) solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}

.sidebar-link.active::before {
  background: var(--ink);
}

.sidebar-link.is-required {
  font-weight: var(--fw-black);
}

/* 必看标记 */
.link-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  background: var(--candy-pink);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}

.link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-spacer {
  height: 8px;
}

/* ==========================================================================
   窄屏（≤1024px）：侧栏从「文档流里的目录块」变成「左侧抽屉」
   桌面上的 .desktop-sidebar 是粘顶侧栏；窄屏若继续留在文档流里，
   必看 / 玩法 会整段堆在正文上方（上百条时能把正文挤到几千像素以下）。
   这里把它改成与模块导航抽屉同一套观感的左侧抽屉，由汉堡按钮开合。
   宽屏不受影响。
   ========================================================================== */

@media (max-width: 1024px) {
  .desktop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: min(86vw, 330px);
    height: 100vh;
    max-height: 100vh;
    padding: 18px;
    overflow-y: auto;
    background: var(--panel-solid);
    border: 0;
    border-right: var(--stroke-thick) solid var(--ink);
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    box-shadow: var(--hard-lg);
    transform: translateX(-110%);
    transition: transform var(--t-base) var(--ease-pop);
  }

  .desktop-sidebar.open {
    transform: translateX(0);
  }

  /* 抽屉里搜索框与分组之间留一点气口 */
  .sidebar-head {
    padding-bottom: 12px;
  }
}