/* ══════════════════════════════════════════════════════════════
   发现区：听歌模式（场景/心情）+ 搜索联想下拉
   2026-10-05 新增。配色沿用 tokens.css 的靛蓝墨 / 朱砂 / 鎏金，
   不引入新色值 —— 只调透明度与描边，保证和现有界面同一套材料。
   ══════════════════════════════════════════════════════════════ */

/* ── 听歌模式：一条带状网格（不是 8 张同款卡片）──

   第一版做成了 8 个各自带边框和圆角的卡片，那是"内容切成同款卡片"的通用套路：
   8 次重复同一个形状，既没有层次也说不出这个产品的性格。改成一条带：
   整体只用一个圆角、内部用发丝分隔线分格，左上是主场（熟悉/新鲜），
   其余六个平铺 —— 结构本身携带信息（哪些常用、哪些是场景），不用靠装饰区分。 */
.moods { margin: 30px 0 10px; }

.moods__band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 78%, transparent);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in oklab, var(--panel, #11141b) 70%, transparent);
}

.mood {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 15px 16px;
  border: 0;
  border-right: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 62%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 62%, transparent);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.mood:nth-child(4n) { border-right: 0; }
.mood:nth-child(n + 5) { border-bottom: 0; }
.mood:hover { background: color-mix(in oklab, var(--gold, #c8a668) 8%, transparent); }
.mood:focus-visible { outline: 2px solid var(--gold, #c8a668); outline-offset: -2px; }

/* 图标只做定位，不做装饰：单一金色，不做四套配色 */
.mood__ico { display: inline-grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px; opacity: .74; }
.mood__ico .ico { width: 15px; height: 15px; }

.mood__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mood__label { font-size: 14px; letter-spacing: .01em; }
.mood__sub { font-size: 12px; opacity: .5; }

.mood--familiar .mood__label,
.mood--fresh .mood__label { color: var(--gold, #c8a668); }

@media (max-width: 720px) {
  /* 窄屏：一行两个，保留分隔线逻辑 */
  .moods__band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mood:nth-child(4n) { border-right: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 62%, transparent); }
  .mood:nth-child(2n) { border-right: 0; }
  .mood:nth-child(n + 5) { border-bottom: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 62%, transparent); }
  .mood:nth-child(n + 7) { border-bottom: 0; }
}

/* ── 搜索结果分类 tab ── */
.stabs {
  display: flex;
  gap: 22px;
  margin: 6px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 62%, transparent);
}
.stabs__item {
  position: relative;
  padding: 8px 0 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  opacity: .62;
  cursor: pointer;
  transition: opacity .15s ease;
}
.stabs__item:hover { opacity: .86; }
.stabs__item.is-on { opacity: 1; font-weight: 600; }
.stabs__item.is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold, #c8a668);
}
.stabs__item:focus-visible { outline: 2px solid var(--gold, #c8a668); outline-offset: 2px; }

/* ── 搜索联想下拉 ── */
.suggest {
  position: fixed;
  z-index: 60;
  min-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid color-mix(in oklab, var(--line, #2a2f3a) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel, #11141b) 96%, transparent);
  box-shadow: 0 18px 44px rgb(0 0 0 / .46);
  backdrop-filter: blur(14px);
}
.suggest[hidden] { display: none; }

.suggest__head {
  padding: 8px 10px 5px;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .5;
}

.suggest__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.suggest__item:hover,
.suggest__item.is-active { background: color-mix(in oklab, var(--gold, #c8a668) 13%, transparent); }
.suggest__item .ico { width: 15px; height: 15px; opacity: .5; flex: 0 0 15px; }
.suggest__item b { color: var(--gold, #c8a668); font-weight: 600; }
/* 2026-10-10：11px 硬写 → 令牌（13），跟随全站整档抬起 */
.suggest__kind { margin-left: auto; font-size: var(--fs-micro); opacity: .42; }

/* ── 搜索结果：「只看能播的」开关 + 折叠行 ──
   默认把付费/会员曲目折起来，先摆能播的；开关就在结果上方，就近可切。
   折叠而不是删除：这些曲目在音源里确实存在，只是这边播不了，藏起来不诚实。 */
.online__filter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
}
.online__filter .panel__hint { padding: 0; }

.folded { margin: 4px 0 12px; }

.folded__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px dashed color-mix(in oklab, var(--line, #2a2f3a) 92%, transparent);
  border-radius: 10px;
  background: none;
  color: var(--paper-faint, #8b93a3);
  font: inherit;
  font-size: var(--fs-tiny, 12px);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.folded__btn:hover {
  color: var(--paper, #f2f5f8);
  border-color: color-mix(in oklab, var(--gold, #c8a668) 42%, transparent);
}
.folded__btn .ico { width: 13px; height: 13px; transition: transform .18s ease; }
.folded.is-open .folded__btn .ico { transform: rotate(180deg); }
.folded.is-open .folded__btn { border-style: solid; }

/* 展开出来的那批：压暗一档，一眼能看出"这些是受限的" */
.folded__body { margin-top: 8px; opacity: .7; }
.folded__body .song { pointer-events: auto; }