/* app-foR.css — OK PhD：FoR 学科层级目录（增量模块 v1）
 * 全部使用 app.css 已有的设计令牌，零新增色值、零新增字阶（只用 12/14/16/20/28/40）
 * 布局：三栏抽屉内的 stage 顶部面板（不动 rail/ops 既有尺寸）
 */

/* ---------- 面板外壳 ---------- */
.for-panel{
  margin:0 0 18px;
  padding:18px 20px 20px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.for-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
.for-head h2{ margin:0; font-size:var(--fs-4); font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.for-sub{ margin:4px 0 0; font-size:var(--fs-2); color:var(--muted); line-height:1.6; }

/* ---------- 面包屑 ---------- */
.for-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:10px 12px; margin-bottom:14px;
  background:var(--card-2); border:1px solid var(--line); border-radius:10px;
}
.for-crumb-btn{
  border:0; background:transparent; cursor:pointer;
  font-size:var(--fs-2); color:var(--red-deep); font-weight:800;
  padding:2px 4px; border-radius:6px;
}
.for-crumb-btn:hover{ background:var(--lime-soft); }
.for-sep{ color:var(--muted); font-size:var(--fs-2); }

/* ---------- 节点网格 ---------- */
.for-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:10px;
}
.for-node{
  position:relative;
  display:flex; flex-direction:column; gap:3px;
  padding:11px 34px 11px 13px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  cursor:pointer; text-align:left; font:inherit;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  min-width:0;
}
.for-node:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.for-node.on{ border-color:var(--red-deep); background:var(--pine-soft); }
.for-node-zh{ font-size:var(--fs-2); font-weight:800; color:var(--ink); line-height:1.4; }
.for-node-en{ font-size:var(--fs-1); color:var(--muted); line-height:1.4; word-break:break-word; }
.for-node-n{ font-size:var(--fs-1); color:var(--red-deep); font-weight:800; margin-top:2px; }
.for-node-go{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:var(--fs-4); color:var(--muted); line-height:1;
}

/* ---------- 空态 / 错误 ---------- */
.for-empty{
  padding:22px 14px; text-align:center;
  font-size:var(--fs-2); color:var(--muted);
  background:var(--card-2); border:1px dashed var(--line-strong); border-radius:10px;
}
.for-empty.err{ color:var(--brand-red); border-color:var(--brand-red); border-style:solid; }

/* ---------- 选中条 ---------- */
.for-pickbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px;
  background:var(--lime-soft); border:1px solid var(--cream-line); border-radius:10px;
}
.for-pickinfo{ font-size:var(--fs-2); color:var(--ink); min-width:0; }
.for-pickinfo b{ color:var(--red-deep); }
.for-pickn{ margin-left:10px; color:var(--muted); font-size:var(--fs-1); }

/* ---------- 中栏入口按钮（挂在 ops 里，与既有 ops-item 同构） ---------- */
.ops-item.for-entry{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:10px 12px; margin-top:6px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:var(--fs-2); color:var(--ink); cursor:pointer; text-align:left;
}
.ops-item.for-entry:hover{ border-color:var(--red-deep); background:var(--pine-soft); }
.ops-ico{ color:var(--red-deep); font-weight:800; }

/* ---------- 窄屏（断点 600px：覆盖手机竖屏 375–430 与平板/分屏 500–600 档） ----------
   ⚠️ 放在文件末尾：媒体查询必须在基础规则之后，否则同权重下会被基础规则覆盖。
   单列判定：grid 用 auto-fill + minmax(228px,1fr)；可用宽 < 2×228+gap 时必然退化为 1 列。 */
@media (max-width: 600px){
  .for-panel{ padding:14px 13px 16px; border-radius:12px; }
  .for-head{ flex-direction:column; align-items:stretch; gap:8px; }
  .for-head h2{ font-size:var(--fs-3); }
  .for-grid{ grid-template-columns:1fr; gap:8px; }
  .for-node{ padding:10px 30px 10px 12px; }
  .for-pickbar{ flex-direction:column; align-items:stretch; gap:9px; }
  .for-pickbar .btn{ width:100%; justify-content:center; }
}