/* paths.css —— 附页「全班的路」(app/paths.html) 的样式。
   规矩与 about.css 一致：
     1. 颜色、字号、间距全部取 tokens.css 的变量，本文件不新定义颜色值；
     2. 页面本身不滚动（tokens.css 已把 body 设成 overflow:hidden），要滚只在右栏的列表里滚，
        与 tools/page_check.py 的判定一致（横向与纵向滚动量都要为 0）；
     3. 一屏三块：左字幕、中图、右原话；1366×768 与 1280×720 两档都放得下。
   本文件只服务 paths.html，不被十三步主线引用。 */

/* ================= 外壳 ================= */

.pa-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}

.pa-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-6);
  background: var(--c-bg-top);
  border-bottom: 1px solid var(--c-line);
}
.pa-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.pa-brand b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .5px; }
.pa-brand span { font-size: var(--fs-xs); color: var(--c-text-3); }
.pa-links { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); white-space: nowrap; }
.pa-links a { color: var(--c-text-2); text-decoration: none; border-bottom: 1px solid transparent; }
.pa-links a:hover { color: var(--c-blue); border-bottom-color: var(--c-blue); }

/* ================= 一屏三块 ================= */

.pa-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 320px);
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
}
.pa-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
/* 中栏不做 flex：组件卡片按自然高度摆，由它自己的 fitter 量着长到这一栏的高度，
   这样图区才会把中栏填满，而不是卡片被拉高、图还留着一截空白。 */
.pa-center { display: block; }

.pa-h {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
  color: var(--c-text);
}
.pa-sub { font-size: var(--fs-xs); color: var(--c-text-3); margin: 0; line-height: 1.6; }

/* ---- 左：四帧字幕 ---- */

.pa-frames { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pa-frame {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-sm, 6px);
  background: var(--c-panel-2);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color .2s, background .2s;
}
.pa-frame.on { border-left-color: var(--c-gold); background: var(--c-gold-dim); }
.pa-frame .k {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-xs); color: var(--c-text-3); margin-bottom: 2px;
}
.pa-frame .t { font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-2); }
.pa-frame.on .t { color: var(--c-text); }

.pa-ctrl { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pa-btn {
  height: 30px; padding: 0 14px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--c-slate);
  font-family: inherit; font-size: var(--fs-xs);
  cursor: pointer;
}
.pa-btn:hover { border-color: var(--c-blue); color: var(--c-blue); }
.pa-btn.play { background: var(--c-gold-dim); border-color: var(--c-gold); color: var(--c-gold); font-weight: 600; }
.pa-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- 右：三个数 + 原话卡 + 路的清单 ---- */

.pa-nums { display: flex; gap: var(--sp-2); }
.pa-num {
  flex: 1 1 0; min-width: 0;
  background: var(--c-panel-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm, 6px);
  padding: var(--sp-2);
  text-align: center;
}
.pa-num b { display: block; font-size: var(--fs-xl); line-height: 1.1; color: var(--c-gold); }
.pa-num.slate b { color: var(--c-slate); }
.pa-num.red b { color: var(--c-red); }
.pa-num span { display: block; font-size: 10.5px; color: var(--c-text-3); line-height: 1.35; margin-top: 2px; }

.pa-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md, 8px);
  padding: var(--sp-3);
  flex: 0 0 auto;
}
.pa-card .pair { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.pa-card .meta { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: 3px; line-height: 1.5; }
.pa-quote {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-mint);
  background: var(--c-mint-dim);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text);
}
.pa-quote.none {
  border-left-color: var(--c-line-strong);
  background: var(--c-panel-2);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}
.pa-tag {
  display: inline-block; margin-top: var(--sp-2); padding: 1px 8px;
  border: 1px solid var(--c-mint); border-radius: var(--r-pill, 999px);
  font-size: 10.5px; color: var(--c-mint);
}

.pa-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md, 8px);
  background: var(--c-panel-2);
}
.pa-row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  width: 100%; text-align: left;
  padding: 5px var(--sp-3);
  background: none; border: 0; border-bottom: 1px solid var(--c-line);
  color: var(--c-text-2); font-family: inherit; font-size: var(--fs-xs);
  cursor: pointer;
}
.pa-row:last-child { border-bottom: 0; }
.pa-row:hover { background: var(--c-panel-3); color: var(--c-text); }
.pa-row.on { background: var(--c-gold-dim); color: var(--c-text); }
.pa-row .n { flex: 0 0 auto; color: var(--c-gold); font-weight: 600; min-width: 34px; }
.pa-row .p { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-row .h { flex: 0 0 auto; color: var(--c-mint); font-size: 10px; }

/* ================= 页脚 ================= */

.pa-foot {
  flex: 0 0 auto;
  padding: 5px var(--sp-6) 7px;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-top);
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-3);
}

/* ================= 矮屏（1280×720 一档）收紧 ================= */

@media (max-height: 740px) {
  .pa-grid { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .pa-frame { padding: 4px var(--sp-2); }
  .pa-frame .t { font-size: var(--fs-xs); line-height: 1.5; }
  .pa-num b { font-size: var(--fs-lg); }
  .pa-card { padding: var(--sp-2); }
  .pa-quote { margin-top: 6px; }
}
@media (max-width: 1300px) {
  .pa-grid { grid-template-columns: minmax(0, 268px) minmax(0, 1fr) minmax(0, 290px); }
}