/* 侧边栏：作品列表 / 课程 / PANDA */

.sidebar {
  /* 侧栏是独立的黑色主题；这些变量只向侧栏内部继承，不影响浅色画布和白色 L2。 */
  --bg-raised:   #0C0C0E;
  --bg-sunken:   #08080A;
  --line:        #232327;
  --line-strong: #4A4A50;
  --ink:         #F2F0EC;
  --ink-2:       #B3B3B8;
  --ink-3:       #909096;
  color-scheme: dark;
  position: fixed;
  z-index: var(--z-sidebar);
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  color: var(--ink);
  border-right: 1px solid var(--line);
}

.sidebar__head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
}
.sidebar__identity { flex: 1; min-width: 0; }
.sidebar__title {
  font-size: var(--t-lg);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.sidebar__sub {
  margin-top: 2px;
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.sidebar__actions,
.canvas-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.sidebar__actions { flex: none; margin-top: -5px; }
.canvas-hud {
  position: fixed;
  z-index: calc(var(--z-sidebar) + 1);
  top: max(var(--s4), env(safe-area-inset-top));
  left: max(var(--s4), env(safe-area-inset-left));
  right: max(var(--s4), env(safe-area-inset-right));
  pointer-events: none;
}
.canvas-actions { position: static; width: fit-content; pointer-events: auto; }
.sidebar__control {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--ink-2);
  transition: color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              opacity var(--d-fast) var(--ease),
              transform var(--d-base) var(--ease),
              visibility 0s linear var(--d-base);
}
.sidebar__control:hover { color: var(--ink); border-color: var(--line-strong); }
.sidebar__control svg { transition: transform var(--d-base) var(--ease); }
.sidebar__control:hover svg { transform: scale(1.08); }
.canvas-actions .sidebar__control {
  border-color: #34343A;
  background: #0C0C0E;
  color: #B3B3B8;
  box-shadow: 0 5px 18px rgba(17, 17, 17, .18);
}
.canvas-actions .sidebar__control:hover { color: #F2F0EC; border-color: #5A5A61; }
.canvas-actions .sidebar__random { animation: control-in var(--d-base) var(--ease) 140ms both; }
.canvas-actions .sidebar__random { position: relative; }
.canvas-actions .sidebar__random:not(.is-hint-dismissed)::before {
  content: "";
  position: absolute;
  top: calc(100% + 5px);
  left: 15px;
  border: 6px solid transparent;
  border-bottom-color: #0C0C0E;
}
.canvas-actions .sidebar__random:not(.is-hint-dismissed)::after {
  content: attr(data-hint);
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: max-content;
  padding: 6px 9px;
  border-radius: var(--r-sm);
  background: #0C0C0E;
  color: #F2F0EC;
  box-shadow: 0 5px 18px rgba(17, 17, 17, .2);
  font-size: var(--t-xs);
  line-height: 1;
  pointer-events: none;
}
.sidebar__reopen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.82);
}

/* ── 三块之间的切换 ───────────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--s5);
  padding: 0 var(--s5);
  border-bottom: 1px solid var(--line);
}
.tab {
  position: relative;
  padding: 0 0 var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-3);
  transition: color var(--d-fast) var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform var(--d-base) var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab.is-on { color: var(--ink); }
.tab.is-on::after { transform: scaleX(1); }

.pane { display: none; flex: 1; min-height: 0; }
.pane.is-on { display: flex; flex-direction: column; }
.pane[data-pane="course"], .pane[data-pane="panda"] { padding: var(--s5); }
.pane[data-pane="course"].is-on, .pane[data-pane="panda"].is-on { display: block; }

/* ── 筛选器 ───────────────────────────────────────────── */
.filter {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.filter__row { display: flex; gap: var(--s3); align-items: baseline; }
.filter__row--selects { gap: var(--s2); }
.filter__label {
  flex: none;
  width: 2.6em;
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: .06em;
}
.filter__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: var(--t-xs);
  color: var(--ink-2);
  transition: color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg-raised); }
.chip__count { margin-left: 5px; opacity: .58; }
.chip.is-on .chip__count { opacity: .72; }

.select {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  color: var(--ink-2);
  font-size: var(--t-xs);
}

/* ── 作品列表 ─────────────────────────────────────────── */
/* 这里曾经有一对 ::before/::after 垫片，由 list.js 写 --list-center-before/after
   撑开，好让第一个和最后一个作品也能滚到视口正中央高亮。代价是列表能滚出
   一大片空白——用户看到的是「滚过头了」，不会理解成「为了居中」。
   现在改成：能居中就居中，到头就贴边（滚动量夹在 0 和最大值之间）。
   首尾两个作品高亮时不在正中而在边上，这是有意的取舍。 */
.list { flex: 1; min-height: 0; padding: var(--s3) var(--s4) var(--s5); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  border-radius: var(--r-md);
  text-align: left;
  transition: background-color var(--d-fast) var(--ease), opacity var(--d-base) var(--ease);
}
.row:hover { background: rgba(255, 255, 255, .045); }
.row.is-focus { background: var(--ink); color: var(--bg-raised); }
.row.is-focus .row__blurb,
.row.is-focus .row__count { color: #5F5F64; }

.row__swatch {
  flex: none;
  width: 10px;
  height: 34px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
/* 色块只表达阅读状态，不被当前高亮覆盖。 */
.row.is-read .row__swatch {
  background: transparent !important;
  border-color: var(--line-strong);
}
.row__text { flex: 1; min-width: 0; }

/* 标题行：作品名占满，心和票数靠右。
   baseline 对齐——用 center 的话，小一号的票数会显得往上飘。 */
.row__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.row__name {
  flex: 1;
  min-width: 0;      /* 少了这条 ellipsis 不生效：flex 项默认不肯缩到内容宽度以下 */
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__blurb {
  display: block;
  margin-top: 1px;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row__marks { flex: none; display: flex; align-items: center; gap: 5px; }
.row__heart { color: var(--heart); display: grid; place-items: center; }
.row__count { font-size: var(--t-xs); color: var(--ink-3); }

.list__empty {
  padding: var(--s6) var(--s3);
  font-size: var(--t-sm);
  color: var(--ink-3);
  text-align: center;
}

/* ── 正文（课程 / PANDA） ─────────────────────────────── */
.prose { font-size: var(--t-base); color: var(--ink-2); }
.prose .lede { color: var(--ink); }
.prose p { margin-bottom: var(--s4); text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h4 {
  margin: var(--s6) 0 var(--s2);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--ink-3);
}
.prose .qs { margin: 0 0 var(--s4); padding-left: 1.3em; }
.prose .qs li { margin-bottom: 4px; color: var(--ink); }
.prose .kit { margin: 0 0 var(--s4); padding-left: 1.1em; }
.prose .kit li { margin-bottom: 3px; }
.prose .sessions { margin: 0 0 var(--s4); }
.prose .sessions dt {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s3);
}
.prose .sessions dd { margin: 2px 0 0; line-height: 1.55; }
.prose .note { font-size: var(--t-sm); color: var(--ink-3); }

/* ── 页脚 ─────────────────────────────────────────────── */
.sidebar__foot {
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 1px solid var(--line);
}
.credit { font-size: var(--t-sm); color: var(--ink-2); }
.fine { margin-top: 3px; font-size: var(--t-xs); color: var(--ink-3); }

@media (min-width: 901px) {
  .sidebar {
    transition: transform var(--d-base) var(--ease);
    will-change: transform;
  }
  body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  body.sidebar-collapsed .stage { left: 0; }
  body.sidebar-collapsed .sidebar__reopen {
    animation: control-in var(--d-base) var(--ease) 100ms forwards;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}

@keyframes control-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .sidebar {
    width: 100%;
    transform: translateX(-100%);
    transition: transform var(--d-base) var(--ease);
  }
  body.sidebar-open .sidebar { transform: none; }
  body:not(.sidebar-open) .sidebar__reopen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}