/* 北大资讯，原「校内清单」「订阅活动」（pages/campus.js、campus.js，docs/specs/campus-info.md）。类名都以 cp- 开头。手机布局的分界照 app/web/README.md 是 760px */
/* 2026-10-18 按来源订阅：顶上「全部」「已订阅」两个窗口并列；筛选只两个下拉（来源、类型）；每一条下面「订阅 ×××」 */
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1.cp-h1 { margin: 0; }
/* 「添加订阅」：点开一个分级目录（下拉，挂在按钮下面） */
.cp-dd { position: relative; display: inline-block; max-width: 100%; }
button.cp-add { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 500; }
.cp-dir { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: min(420px, calc(100vw - 32px)); max-height: min(560px, 70vh);
  display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.cp-dir[hidden] { display: none; }
.cp-head .cp-dir { left: auto; right: 0; }
.cp-dir-top { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
input.cp-dir-q { flex: 1 1 auto; }
.cp-dir-tree { overflow-y: auto; padding: 4px 0 8px; }
/* 订阅列表模式（小三角）：顶上写「已订阅」代替搜索框，底部「＋ 添加订阅」进完整目录 */
.cp-dir-title { flex: 1 1 auto; padding-left: 4px; color: var(--ink); font-size: 14px; font-weight: 600; }
.cp-dir-title[hidden], .cp-dir-q[hidden], .cp-dir-foot[hidden] { display: none; }
.cp-dir-foot { padding: 6px; border-top: 1px solid var(--line); }
button.cp-dir-add { width: 100%; height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--tint);
  font-size: 14px; font-weight: 500; text-align: left; }
button.cp-dir-add:hover { background: var(--soft); }
.cp-dir-none { margin: 0; padding: 14px; color: var(--muted); font-size: 13px; }
.cp-dir-item .tag { flex: none; }
.cp-tabw .cp-dir { text-align: left; font-weight: 400; }
.cp-dir-label { padding: 10px 14px 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.cp-dir-head { display: flex; align-items: center; gap: 4px; padding: 0 10px 0 14px; }
.cp-dir-head input, .cp-dir-item input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
button.cp-dir-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 4px 0 6px; border: 0;
  background: none; color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; }
.cp-dir-gname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dir-n { flex: none; color: var(--muted); font-size: 12px; font-weight: 400; }
.cp-dir-chev { flex: none; color: var(--muted); transition: transform .15s; }
.cp-dir-group.open > .cp-dir-head .cp-dir-chev { transform: rotate(90deg); }
.cp-dir-items { padding: 0 0 6px 24px; }
.cp-dir-items .cp-dir-group .cp-dir-head { padding-left: 4px; }
label.cp-dir-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 14px 0 6px; cursor: pointer; font-size: 13.5px; color: var(--text); }
label.cp-dir-item:hover { background: var(--soft); }
.cp-dir-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dir-kind { flex: none; color: var(--faint); font-size: 11.5px; }
.cp-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.cp-tabs > * { flex: 1 1 0; max-width: 200px; height: 42px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.cp-tabs > .on { border-bottom-color: var(--ink); }
.cp-tabs button[role=tab] { height: 100%; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 15px; font-weight: 500; }
.cp-tabs button[role=tab].on { color: var(--ink); font-weight: 600; }
/* 「已订阅」：文字和右边的小三角是两个点击区；三角点开的是「添加订阅」那个目录，「只看已订阅」开着 */
.cp-tabw { position: relative; display: flex; align-items: center; justify-content: center; }
.cp-tabw > button[role=tab] + .cp-caret { margin-left: -10px; }   /* 三角紧挨着「已订阅」 */
button.cp-caret { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--muted); }
button.cp-caret:hover { background: var(--soft); color: var(--ink); }
.cp-caret .ic { width: 16px; height: 16px; transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
.cp-caret[aria-expanded="true"] .ic { transform: rotate(-90deg); }
/* 目录关闭的小叉：灰，悬停变红 */
button.cp-x { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: var(--radius-xs); background: none;
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
button.cp-x:hover { background: var(--red-soft); color: var(--red); }
.cp-x .ic { width: 14px; height: 14px; }
.cp-filters { position: sticky; top: 0; z-index: 2; margin: 12px -4px 0; padding: 10px 4px; background: var(--bg); }
.cp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
input.cp-q { flex: 1 1 240px; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; }
input.cp-q:focus { outline: 2px solid var(--tint); outline-offset: 1px; }
select.cp-sel { max-width: 100%; height: 36px; font-size: 13px; }
select.cp-sel.on { border-color: var(--tint); color: var(--tint); }
.cp-topic:empty { display: none; }
.cp-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 8px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft); font-size: 13px; color: var(--text); }
.cp-banner[hidden] { display: none; }
button.cp-banner-go { height: 32px; padding: 0 14px; font-size: 13px; }
/* 每一条右下角订阅来源的长椭圆按钮：「＋ 订阅 教务部」，订了是绿色「✓ 已订阅 教务部」 */
button.cp-follow { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 12px 0 10px; border: 1px solid var(--line-2);
  border-radius: 999px; background: var(--panel); color: var(--text); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; }
button.cp-follow:hover { border-color: var(--ink); color: var(--ink); }
.cp-follow-i { font-size: 13px; line-height: 1; }
button.cp-follow.on { border-color: color-mix(in srgb, var(--green) 45%, var(--panel)); background: color-mix(in srgb, var(--green) 9%, var(--panel)); color: var(--green); }
button.cp-follow.on:hover { border-color: var(--green); color: var(--green); }
.cp-list { display: grid; margin-top: 6px; }
h2.cp-sec { margin: 22px 0 2px; font-size: 17px; }
.cp-day { margin-top: 16px; padding: 4px 0; color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-row { display: grid; gap: 3px; min-width: 0; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 5px; }   /* 一条上面的小标签（ui.js 的 tag()） */
.cp-tags:empty { display: none; }
button.tag.cp-tag-go { font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; }   /* 能点着筛的分类、来源标记 */
button.tag.cp-tag-go:hover { border-color: var(--tint); color: var(--tint); }
.cp-t { margin-top: 2px; font-size: 15px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.cp-sub, .cp-m { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cp-sum { display: -webkit-box; margin: 2px 0 0; overflow: hidden; font-size: 13px; line-height: 1.6; color: var(--text);
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cp-a { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13px; }
.cp-a { align-items: center; }
.cp-a .cp-follow { margin-left: auto; }
.cp-done { color: var(--green); }
.cp-more { margin: 14px 0 0; }
.cp-box { margin-top: 18px; }
@media (max-width: 760px) {
  .cp-tabw .cp-dir { left: auto; right: 0; }   /* 手机上「已订阅」在右半边：目录往左展开，别出屏幕 */
  .cp-bar .cp-q { flex-basis: 100%; }
  .cp-bar select.cp-sel { flex: 1 1 0; min-width: 0; }
  .cp-tabs > * { max-width: none; }
}