/* ═══════════════════════════════════════════════════
   研途 · 参考资料页
   mrs- = 本页专用（筛选条 / 分类卡 / 详情弹窗）
   只新增本页类名，不改 main.css 既有组件
   「我的计划」样式已整体搬到 mod-plan.css（mp-my-）
   ═══════════════════════════════════════════════════ */

/* ─── 进场 ───────────────────────────────────────── */
.mrs-rise{
  animation:mrsUp var(--t-4) var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
@keyframes mrsUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.mrs-page .title em{font-style:normal;color:var(--blue)}

/* ─── 筛选条 ─────────────────────────────────────── */
.mrs-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 20px;
}
.mrs-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.mrs-chips .tag{
  height:32px;padding:0 13px;font-size:12.5px;cursor:pointer;
  transition:transform var(--t-1) var(--spring),background var(--t-2),
    border-color var(--t-2),color var(--t-2),box-shadow var(--t-2);
}
.mrs-chips .tag:hover{border-color:var(--ink-4);color:var(--ink);transform:translateY(-1px) scale(1.02)}
.mrs-chips .tag:active{transform:scale(.97)}
.mrs-chips .tag.on{
  background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 6px 18px -9px rgba(59,130,246,.95);
}
.mrs-chips .tag.on:hover{background:#2F74E8;transform:translateY(-1px) scale(1.02)}

.mrs-cnt{
  margin-left:auto;
  font-size:12.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.mrs-cnt b{color:var(--ink-2);font-weight:650}

/* ─── 分类卡 ─────────────────────────────────────── */
.mrs-grid{margin-top:2px}
.mrs-card{
  animation:mrsCardIn var(--t-4) var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * 60ms);
}
@keyframes mrsCardIn{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:none}
}
.mrs-card > h3{margin-bottom:6px}

/* ─── 条目行：整行可点 右侧「详情」──── */
.mrs-row{
  gap:9px;
  color:var(--ink-2);
  transition:color var(--t-2),padding-left var(--t-2) var(--ease-out),background var(--t-2);
}
.mrs-row .res-when{font-variant-numeric:tabular-nums}
.mrs-row:hover{color:var(--ink)}
.mrs-row:hover .res-dot{background:var(--blue);color:#fff;transform:scale(1.08)}
.mrs-row:focus-visible{outline:0;background:rgba(59,130,246,.12);box-shadow:inset 0 0 0 1px var(--blue-line)}

.mrs-more{
  display:inline-flex;align-items:center;gap:1px;flex:none;
  height:23px;padding:0 7px 0 9px;border-radius:var(--r-full);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--blue-ink);
  background:var(--blue-soft);
  border:1px solid transparent;
  opacity:.66;
  transition:opacity var(--t-2),background var(--t-2),border-color var(--t-2),
    transform var(--t-1) var(--spring);
}
.mrs-more .ic{font-size:11px;transition:transform var(--t-2) var(--ease-out)}
.mrs-row:hover .mrs-more{
  opacity:1;border-color:var(--blue-line);background:rgba(59,130,246,.2);
}
.mrs-row:hover .mrs-more .ic{transform:translateX(2px)}
.mrs-row:active .mrs-more{transform:scale(.97)}

/* ─── 空状态 ─────────────────────────────────────── */
.mrs-empty{
  grid-column:1 / -1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:56px 22px;
  border:1px dashed var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.02);
  text-align:center;
  animation:mrsUp var(--t-3) var(--ease-out) both;
}
.mrs-empty-ic{font-size:30px;color:var(--ink-4);line-height:1}
.mrs-empty p{font-size:13.5px;color:var(--ink-3)}

.mrs-foot{
  display:flex;align-items:center;gap:7px;
  margin-top:30px;font-size:12.5px;color:var(--ink-4);
}
.mrs-foot .ic{flex:none;color:var(--ink-4);font-size:13px}

/* ─── 详情弹窗 ───────────────────────────────────── */
.mrs-modal .mrs-md-box{width:min(680px,94vw)}

.mrs-md-h{min-width:0}
.mrs-md-h .mrs-md-tags{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;
}
.mrs-md-tags .pill{height:23px;padding:0 9px;font-size:11.5px}
.mrs-md-tags .pill .ic{font-size:12px}

.mrs-md-body{overscroll-behavior:contain}
.mrs-md-box .mclose:focus,
.mrs-md-box .mclose:focus-visible{
  outline:0;background:rgba(255,255,255,.07);color:var(--ink);
  box-shadow:0 0 0 3px var(--blue-soft);
}

.mrs-md-lede{
  font-size:14px;line-height:1.68;color:var(--ink-2);
  padding:0 0 16px;
  animation:mrsUp var(--t-3) var(--ease-out) 40ms backwards;
}

.mrs-md-meta{margin-bottom:20px}
.mrs-md-meta b{font-variant-numeric:tabular-nums}

.mrs-md-sec{
  animation:mrsUp var(--t-3) var(--ease-out) backwards;
}
.mrs-md-sec:nth-of-type(1){animation-delay:90ms}
.mrs-md-sec:nth-of-type(2){animation-delay:150ms}
.mrs-md-sec:nth-of-type(3){animation-delay:210ms}
.mrs-md-sec + .mrs-md-sec{margin-top:20px}

.mrs-md-sec h4{
  display:flex;align-items:center;gap:7px;
  margin-bottom:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);
}
.mrs-md-sec h4 .ic{color:var(--blue);font-size:13px}

.mrs-md-use{
  font-size:13.4px;line-height:1.78;color:var(--ink-2);
  padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.033);
}

.mrs-md-tip{
  display:flex;align-items:flex-start;gap:8px;
  padding:12px 14px;
  border:1px solid var(--red-line);border-radius:var(--r);
  background:var(--red-soft);
  font-size:13px;line-height:1.66;color:var(--ink-2);
}
.mrs-md-tip .ic{flex:none;margin-top:.22em;color:var(--red);font-size:13px}

/* ─── 配套材料：外链 / 站内 / 待办 ───────────────── */
.mrs-kit-hint{
  margin:-3px 0 10px;
  font-size:12px;line-height:1.55;color:var(--ink-4);
}
.mrs-kit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.mrs-kit-row{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);overflow:hidden;
  animation:mrsKitIn var(--t-4) var(--ease-out) backwards;
  animation-delay:calc(250ms + var(--i,0) * 55ms);
  transition:border-color var(--t-2),background var(--t-2),
    box-shadow var(--t-3) var(--ease-out);
}
@keyframes mrsKitIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.mrs-kit-row:hover{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.045)}
.is-link:hover,
.is-in:hover{
  border-color:var(--blue-line);
  box-shadow:0 12px 26px -22px rgba(59,130,246,.95);
}
.mrs-kit-row:focus-within{border-color:var(--blue-line)}
.is-todo.open{border-color:var(--line);background:rgba(255,255,255,.05)}

.mrs-kit-a{
  display:flex;align-items:flex-start;gap:11px;width:100%;
  padding:12px 13px;
  font:inherit;color:inherit;text-align:left;text-decoration:none;
  background:transparent;border:0;cursor:pointer;
  transition:background var(--t-2);
}
.mrs-kit-a:hover{background:rgba(255,255,255,.022)}
.mrs-kit-a:active{background:rgba(255,255,255,.05)}
.mrs-kit-a:focus-visible{
  outline:0;background:var(--blue-soft);
  box-shadow:inset 0 0 0 1px var(--blue-line);
}

.mrs-kit-badge{
  flex:none;display:grid;place-items:center;font-style:normal;
  width:27px;height:27px;margin-top:1px;border-radius:8px;
  font-size:13px;
  transition:background var(--t-2),color var(--t-2),
    transform var(--t-2) var(--spring);
}
.is-link .mrs-kit-badge{background:var(--blue);color:#fff}
.is-in .mrs-kit-badge{
  background:var(--blue-soft);color:var(--blue-ink);
  box-shadow:inset 0 0 0 1px var(--blue-line);
}
.is-todo .mrs-kit-badge{
  background:rgba(255,255,255,.06);color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line);
}
.mrs-kit-a:hover .mrs-kit-badge{transform:scale(1.07)}

.mrs-kit-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mrs-kit-tx b{
  font-size:13.3px;font-weight:620;line-height:1.45;
  letter-spacing:-.005em;color:var(--ink);
}
.mrs-kit-tx small{font-size:11.8px;line-height:1.5;color:var(--ink-4)}

.mrs-kit-act{
  flex:none;display:inline-flex;align-items:center;gap:3px;
  margin-top:3px;white-space:nowrap;
  font-size:11.5px;font-weight:600;
  transition:gap var(--t-2) var(--ease-out),opacity var(--t-2),color var(--t-2);
}
.mrs-kit-act .ic{font-size:11px}
.is-link .mrs-kit-act{color:var(--blue-ink);opacity:.85}
.is-in .mrs-kit-act{color:var(--blue-ink);opacity:.85}
.is-todo .mrs-kit-act{color:var(--ink-4)}
.mrs-kit-a:hover .mrs-kit-act{gap:6px;opacity:1}
.is-todo.open .mrs-kit-act{color:var(--ink-2)}
.is-todo .mrs-kit-act .ic{transition:transform var(--t-3) var(--ease-out)}
.is-todo.open .mrs-kit-act .ic{transform:rotate(180deg)}

/* 展开：高度过渡 + 内容淡入上移 */
.mrs-kit-more{height:0;overflow:hidden;transition:height var(--t-4) var(--ease-out)}
.mrs-kit-more-in{
  padding:0 14px 0 51px;
  opacity:0;transform:translateY(-7px);
  transition:opacity var(--t-3) ease,transform var(--t-3) var(--ease-out),
    padding-bottom var(--t-3) var(--ease-out);
}
.is-todo.open .mrs-kit-more-in{
  opacity:1;transform:none;padding-bottom:14px;
  transition-delay:70ms;
}

.mrs-kit-do{
  padding-top:11px;border-top:1px solid var(--line-2);
  font-size:12.6px;line-height:1.75;color:var(--ink-2);
}
.mrs-kit-do b{
  display:block;margin-bottom:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-4);
}
.mrs-kit-chk{
  display:flex;align-items:flex-start;gap:7px;
  margin-top:9px;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  font-size:12.4px;line-height:1.65;color:var(--ink-2);
}
.mrs-kit-chk .ic{flex:none;margin-top:.3em;font-size:12px;color:var(--blue-ink)}
.mrs-kit-chk b{
  margin-right:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--blue-ink);
}

/* 减少动态：材料行直接可见 展开不做过渡 */
@media (prefers-reduced-motion:reduce){
  .mrs-kit-row{animation:none}
  .mrs-kit-more,.mrs-kit-more-in,
  .mrs-kit-act,.mrs-kit-act .ic,.mrs-kit-badge{transition:none}
  .mrs-kit-more-in{opacity:1;transform:none}
}

/* ─── 响应式 ─────────────────────────────────────── */
@media (max-width:980px){
  .mrs-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mrs-bar{gap:8px}
  .mrs-cnt{margin-left:0;order:5}
  .mrs-row .res-when{display:none}
  .mrs-more{opacity:.9}
  .mrs-md-body{padding:16px 16px 20px}
  .mrs-md-use{padding:12px 13px;font-size:13px}
}

/* ═══════════════════════════════════════════════
   分类图标行 + 展开面板
   ═══════════════════════════════════════════════ */
.mrs-icons{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;
}
.mrs-icon{
  flex:1 1 auto;min-width:104px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:16px 12px 13px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper);
  color:var(--ink-3);font:inherit;cursor:pointer;
  transition:transform var(--t-2) var(--ease-out),border-color var(--t-2),
             background var(--t-2),color var(--t-2),box-shadow var(--t-3) var(--ease-out);
}
.mrs-icon:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);color:var(--ink-2)}
.mrs-icon:active{transform:scale(.97)}
.mrs-icon-box{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue-ink);font-size:19px;
  transition:background var(--t-2),color var(--t-2),transform var(--t-2) var(--spring);
}
.mrs-icon-name{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.mrs-icon-n{
  font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-4);
  background:rgba(255,255,255,.06);border-radius:var(--r-full);padding:0 7px;line-height:17px;
  transition:background var(--t-2),color var(--t-2);
}

.mrs-icon.on{
  border-color:var(--blue-line);background:var(--blue-soft);color:var(--ink);
  box-shadow:0 0 0 1px var(--blue-line),0 12px 26px -16px rgba(59,130,246,.8);
}
.mrs-icon.on .mrs-icon-box{background:var(--blue);color:#fff;transform:scale(1.06)}
.mrs-icon.on .mrs-icon-n{background:rgba(255,255,255,.14);color:var(--blue-ink)}

/* 展开面板 */
.mrs-panel{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:20px 22px 14px;overflow:hidden;
}
.mrs-panel.mrs-in{animation:mrsPanelIn .34s var(--ease-out) both}
@keyframes mrsPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.mrs-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line-2);margin-bottom:6px;
}
.mrs-panel-head h3{margin:0;font-size:16.5px;font-weight:680;letter-spacing:-.012em;color:var(--ink)}
.mrs-panel-head p{margin:5px 0 0;font-size:13px;color:var(--ink-4);line-height:1.55}

.mrs-items{display:flex;flex-direction:column}
.mrs-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 8px;text-align:left;font:inherit;color:var(--ink-2);cursor:pointer;
  border-radius:var(--r-sm);border-bottom:1px solid var(--line-2);
  transition:background var(--t-2),color var(--t-2),padding-left var(--t-2) var(--ease-out);
}
.mrs-item:last-child{border-bottom:0}
.mrs-item:hover{background:rgba(255,255,255,.04);color:var(--ink);padding-left:14px}
.mrs-item:active{transform:scale(.995)}

.mrs-item-dot{
  width:19px;height:19px;flex:none;border-radius:6px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue-ink);font-size:11px;
  transition:background var(--t-2),color var(--t-2);
}
.mrs-item:hover .mrs-item-dot{background:var(--blue);color:#fff}
.mrs-item-n{flex:1;font-size:14px;font-weight:600}
.mrs-item-when{font-size:12px;color:var(--ink-4);flex:none}
.mrs-item-more{
  display:inline-flex;align-items:center;gap:3px;flex:none;
  font-size:12px;color:var(--blue-ink);opacity:.55;
  transition:opacity var(--t-2),gap var(--t-2) var(--ease-out);
}
.mrs-item:hover .mrs-item-more{opacity:1;gap:6px}

@media (max-width:860px){
  .mrs-icons{gap:8px}
  .mrs-icon{min-width:92px;padding:13px 8px 11px}
  .mrs-icon-box{width:36px;height:36px;font-size:17px;border-radius:10px}
  .mrs-icon-name{font-size:12px}
}
@media (max-width:640px){
  .mrs-icons{display:grid;grid-template-columns:repeat(3,1fr)}
  .mrs-icon{min-width:0}
  .mrs-panel{padding:16px 14px 10px}
  .mrs-item{padding:11px 6px}
  .mrs-item-when{display:none}
}

/* 选中态加强：底部蓝条 */
.mrs-icon{position:relative}
.mrs-icon.on::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26px;height:2px;background:var(--blue);border-radius:2px;
  animation:mrsBarIn .3s var(--ease-out) both;
}
@keyframes mrsBarIn{from{width:0;opacity:0}to{width:26px;opacity:1}}

/* 配套材料：窄屏收紧右侧动作与缩进 */
@media (max-width:640px){
  .mrs-kit-a{padding:11px 11px;gap:9px}
  .mrs-kit-act{font-size:11px;gap:2px}
  .mrs-kit-act .ic{font-size:10px}
  .mrs-kit-more-in{padding-left:13px;padding-right:11px}
  .mrs-kit-do{font-size:12.4px}
  .mrs-kit-chk{font-size:12.2px}
}