/* 侧边栏：充实的一天 / 课程 / 列表 / 社团 */

.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"], .pane[data-pane="day"] { padding: var(--s5); }
.pane[data-pane="course"].is-on, .pane[data-pane="panda"].is-on,
.pane[data-pane="day"].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); }

/* 讲义下载：课程 Tab 里唯一的动作，给一颗安静的线框胶囊，
   与顶栏按钮同族但不抢黑底侧栏的戏。 */
.prose .handout { display: flex; align-items: baseline; gap: var(--s3); }
.prose .handout__link {
  flex: none;
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: border-color var(--d-fast) var(--ease),
              background-color var(--d-fast) var(--ease);
}
.prose .handout__link:hover { border-color: var(--ink-3); background: rgba(255, 255, 255, .06); }
.prose .handout__hint { font-size: var(--t-xs); 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;
  }
}

/* ── 「充实的一天」 ───────────────────────────────────── */
/* 字号、颜色、行高与「课程 / 社团」的 .prose 完全一致：
   同一个侧栏里几个 Tab 的正文不该有几种排版。
   行高 1.6 继承自 body，段距给 24px，比行间距（1.6×14.5≈23px）
   略大一点，段落分得开又不散。 */
.day { font-size: var(--t-base); color: var(--ink-2); }
.day__date {
  margin: var(--s2) 0 var(--s6);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--ink-3);
}
/* 日记体首行缩进二字（用户定的）。缩进本身已在标记段落，
   段距随之收小一档，跟 .prose 的段距一致。 */
.day__p { margin-bottom: var(--s4); text-indent: 2em; text-wrap: pretty; }

/* 场景分隔线。字号与字距跟 .prose h4 一样，只多一条穿过去的线，
   让读者一眼看出「换地方了」。 */
.day__scene {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s4);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--ink-3);
}
.day__scene::before,
.day__scene::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.day__scene span { flex: none; }

/* 可点短语。
   **只画线，不改字色也不加粗。** 一段话里挂着三四个词，再加重就成了
   一片斑点，正文读不下去。线是必要的：不画线没人知道这里能点。
   悬停或聚焦时才铺一层高亮，像笔记上用马克笔划过。
   是 span 不是 button：Chromium 里 button 是原子的，即使 display:inline
   也不在行内断开，长短语会被整块挤到下一行，段落右边缘全是参差的缺口。 */
.day__link {
  cursor: pointer;
  border-radius: 2px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: background-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              text-decoration-color var(--d-fast) var(--ease);
}
.day__link:hover,
.day__link:focus-visible {
  color: var(--ink);
  background: rgba(242, 240, 236, .14);
  box-shadow: 0 0 0 3px rgba(242, 240, 236, .14);   /* 让高亮盖住字的上下留白 */
  text-decoration-color: var(--ink-3);
}
.day__link.is-focus {
  color: var(--ink);
  background: rgba(242, 240, 236, .2);
  box-shadow: 0 0 0 3px rgba(242, 240, 236, .2);
  text-decoration-color: var(--ink-2);
}
.day__link.is-read { text-decoration-color: var(--line); }
.day__err { font-size: var(--t-sm); color: var(--ink-3); }