/* songpool.css — 学歌池。
   页面骨架在 theme.css，按钮、胶囊、分段切换、输入框、列表行、徽标、空态在
   ui.css；这里只有提交卡与列表行的版式。 */

.sp-body { max-width: var(--w-narrow); margin: 0 auto; position: relative; z-index: 1; }

/* 提交卡 */
#spSubmitCard { margin: 0 0 var(--gap-section); }
.sp-quota {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text2); line-height: 1.6;
}
.sp-quota:empty { display: none; }
.sp-quota .badge-soft { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-form { margin-top: var(--s-2); }
.sp-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#spTitle { flex: 2 1 180px; min-width: 0; --field-fs: 13px; padding: 8px 12px; }
#spArtist { flex: 1 1 130px; min-width: 0; --field-fs: 13px; padding: 8px 12px; }
.sp-hints { margin-top: 6px; }
.sp-hints:empty { display: none; }
.sp-hint-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 5px 0; font-size: 12px; color: var(--text2);
}
.sp-hint-text { flex: 1; min-width: 0; }
.sp-form-msg { margin-top: 6px; font-size: 12px; color: var(--text3); }
.sp-form-msg:empty { display: none; }
.sp-form-msg[data-tone="error"] { color: var(--danger-text, var(--danger)); }

/* 筛选与排序 */
.sp-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 14px; flex-wrap: wrap; margin: 0 0 14px;
}
.sp-controls .pill-row { margin: 0; }

/* 列表 */
.sp-list-card { --surface-pad: var(--s-3) var(--s-4); }
.sp-row { --list-pad: 10px 0; }
.sp-rank {
  flex: none; width: 1.6em; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--text3); font-size: var(--fs-sm);
}
.sp-rank:empty { display: none; }
.sp-title { font-weight: 600; }
.sp-artist { color: var(--text3); font-size: var(--fs-sm); }
.sp-month { flex: none; color: var(--text3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.sp-vote { flex: none; min-width: 5.2em; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .sp-row > .list-grow { white-space: normal; }
  .sp-form-row > .btn-solid { width: 100%; }
}