/* ============================================================================
 * M21 · 复盘库（T3）样式 —— 作用域 .rl（#page-retro）与 #retroEntry
 * 走 CLIB UI 基线：单一主色 #4F6BED · 中性灰 · 圆角 14–16 · 描边 1px #E8E8ED
 * 字重只用 400/500/600 · 间距取 4/8/12/16/24/32 · 不用 emoji 当图标
 * ========================================================================== */
#page-retro .rl, #retroEntry .rl-entry { max-width: 1024px; margin: 0 auto; }
#page-retro .rl-head { margin-bottom: 16px; }
#page-retro .rl-title { font-size: 22px; font-weight: 600; color: var(--ink, #1D1D1F); margin: 0 0 8px; }
#page-retro .rl-sub { font-size: 13px; line-height: 1.7; color: var(--gray-500, #6E6E73); margin: 0; }

/* 注意：全局 clib-v3-tokens.css 对 input[type=search] / select 下了 width:100% !important。
   这里不去改共享文件、也不加 !important，而是用 flex-basis 决定主轴尺寸（flex-basis 优先于 width）。 */
#page-retro .rl-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
#page-retro .rl-q {
  flex: 1 1 240px; min-width: 200px; height: 38px; padding: 0 16px; border-radius: 14px;
  border: 1px solid #E8E8ED; background: #fff; font-size: 13px; color: var(--ink, #1D1D1F);
}
#page-retro .rl-sel {
  flex: 0 0 168px; height: 38px; padding: 0 8px; border-radius: 14px; border: 1px solid #E8E8ED;
  background: #fff; font-size: 13px; color: var(--ink, #1D1D1F);
}
#page-retro .rl-filter .rl-btn { flex: 0 0 auto; }
#page-retro .rl-q:focus-visible, #page-retro .rl-sel:focus-visible, #page-retro .rl-btn:focus-visible, #page-retro .rl-card:focus-visible {
  outline: 2px solid #4F6BED; outline-offset: 2px;
}
.rl-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
  border-radius: 14px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.rl-btn--primary { background: #4F6BED; color: #fff; }
.rl-btn--primary:hover { background: #3D55D4; }
.rl-btn--ghost { background: #fff; color: var(--ink, #1D1D1F); border-color: #E8E8ED; }
.rl-btn--ghost:hover { border-color: #4F6BED; color: #4F6BED; }

#page-retro .rl-count { font-size: 13px; color: var(--gray-500, #6E6E73); margin-bottom: 12px; }
#page-retro .rl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
#page-retro .rl-card {
  display: block; background: #fff; border: 1px solid #E8E8ED; border-radius: 14px; padding: 16px 16px 16px;
  cursor: pointer; transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
#page-retro .rl-card:hover { border-color: #C9D3FF; }
#page-retro .rl-card__hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
#page-retro .rl-card__t { font-size: 17px; font-weight: 600; color: var(--ink, #1D1D1F); }
#page-retro .rl-card__d { margin-left: auto; font-size: 12px; color: var(--gray-500, #6E6E73); }
#page-retro .rl-card__facts { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--gray-500, #6E6E73); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
#page-retro .rl-card__na { margin: 0 0 8px; padding-left: 16px; font-size: 13px; line-height: 1.7; color: var(--ink, #1D1D1F); }
#page-retro .rl-card__na li + li { margin-top: 4px; }
#page-retro .rl-card__na em, #page-retro .rl-detail__na em { font-style: normal; color: var(--gray-500, #6E6E73); }
#page-retro .rl-card__meta { display: flex; flex-wrap: wrap; }
.rl-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin: 0 8px 8px 0;
  border-radius: 999px; background: #F5F6FA; color: #52525C; font-size: 12px; white-space: nowrap;
}
#page-retro .rl-none, .rl-none { font-size: 13px; color: var(--gray-500, #6E6E73); line-height: 1.7; }
#page-retro .rl-honest {
  border: 1px solid #E8E8ED; border-radius: 14px; background: #fff; padding: 32px 24px; text-align: center;
}
#page-retro .rl-honest__t { font-size: 17px; font-weight: 600; color: var(--ink, #1D1D1F); margin-bottom: 8px; }
#page-retro .rl-honest__d { font-size: 13px; line-height: 1.7; color: var(--gray-500, #6E6E73); max-width: 620px; margin: 0 auto 16px; }
#page-retro .rl-honest .rl-btn { margin: 0 4px; }
#page-retro .rl-card--sk { cursor: default; }
#page-retro .rl-sk { height: 12px; border-radius: 14px; background: #F1F2F6; margin-bottom: 8px; }

#page-retro .rl-detail { border: 1px solid #C9D3FF; border-radius: 14px; background: #fff; padding: 20px; margin-bottom: 16px; }
#page-retro .rl-detail__hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
#page-retro .rl-detail__t { font-size: 17px; font-weight: 600; color: var(--ink, #1D1D1F); }
#page-retro .rl-detail__d { font-size: 12px; color: var(--gray-500, #6E6E73); }
#page-retro .rl-detail__hd .rl-btn { margin-left: auto; height: 32px; padding: 0 16px; }
#page-retro .rl-detail__na { margin: 0; padding-left: 16px; }
#page-retro .rl-detail__na li + li { margin-top: 4px; }
#page-retro .rl-detail__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid #E8E8ED; font-size: 12px; color: var(--gray-500, #6E6E73); line-height: 1.7; }
#page-retro .rl-kv { display: flex; gap: 16px; padding: 8px 0; }
#page-retro .rl-kv + .rl-kv { border-top: 1px solid #F1F2F6; }
#page-retro .rl-kv__k { flex: 0 0 110px; font-size: 13px; color: var(--gray-500, #6E6E73); }
#page-retro .rl-kv__v { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.7; color: var(--ink, #1D1D1F); }

#page-retro .rl-mine, #retroEntry .rl-entry {
  margin-top: 24px; border: 1px solid #E8E8ED; border-radius: 14px; background: #FAFAFA; padding: 20px;
}
#page-retro .rl-mine__t, #retroEntry .rl-entry__t { font-size: 17px; font-weight: 600; color: var(--ink, #1D1D1F); margin-bottom: 8px; }
#page-retro .rl-mine__d, #retroEntry .rl-entry__d { font-size: 13px; line-height: 1.7; color: var(--gray-500, #6E6E73); margin-bottom: 16px; }
#retroEntry { margin-bottom: 16px; }
#retroEntry .rl-entry { margin-top: 0; }
#retroEntry .rl-entry__acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 768px) {
  #page-retro .rl-list { grid-template-columns: 1fr; }
  #page-retro .rl-kv { flex-direction: column; gap: 4px; }
  #page-retro .rl-kv__k { flex: none; }
}