/* teacher.css —— 教师端会话浏览页 app/teacher.html 专用样式。

   与 about.css / teacher-guide.html 同一套版式：外壳、顶栏、页脚、卡片、表格全部沿用 about.css，
   本文件只补这一页特有的两栏布局（左列会话列表、右列这一个会话的十三步）。

   规矩照旧：
     1. 颜色、字号、间距、圆角只引用 tokens.css 的变量，本文件不新定义任何颜色值；
     2. 页面本身不滚动（tokens.css 已把 body 设成 overflow:hidden），滚动只发生在两列内部，
        与 tools/page_check.py 的判定一致（横向与纵向滚动量都要为 0）；
     3. 颜色即角色：金 = 学生自己的产物，亮蓝 = AI 助教，薄荷青 = 已完成，灰蓝 = 次要信息。
        后端连不上是常见情况，不是故障，用灰字陈述，不用高亮色报警。
*/

/* ================= 两栏主体 ================= */

.teacher-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--sp-4) var(--stage-pad) var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  gap: var(--gap);
}

.col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.col-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--panel-pad);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel-2);
}
.col-head h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-tight);
}
.col-head .hint { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.6; }

.col-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ================= 左列：会话列表 ================= */

.list-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.list-tools input[type="search"],
.list-tools select {
  min-width: 0;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
}
.list-tools input[type="search"] { flex: 1 1 130px; }
.list-tools select { flex: 0 1 auto; }
.list-tools input[type="search"]:focus,
.list-tools select:focus { outline: 1px solid var(--c-blue); border-color: var(--c-blue); }

.btn {
  flex: 0 0 auto;
  background: var(--c-panel-3);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}
.btn:hover { border-color: var(--c-blue); color: var(--c-blue); }
.btn.primary {
  background: var(--c-blue-dim);
  border-color: var(--c-blue);
  color: var(--c-blue);
}
.btn.primary:hover { background: var(--c-blue); color: var(--c-text-on-accent); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn[disabled]:hover { border-color: var(--c-line-strong); color: var(--c-text); }

.sess-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-left: 3px solid transparent;
  padding: var(--sp-3) var(--panel-pad);
  cursor: pointer;
  color: inherit;
}
.sess-item:hover { background: var(--c-panel-2); }
.sess-item[aria-current="true"] {
  background: var(--c-panel-3);
  border-left-color: var(--c-blue);
}
.sess-item .id {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.sess-item .when { font-size: var(--fs-xs); color: var(--c-text-3); }
.sess-item .facts { font-size: var(--fs-xs); color: var(--c-text-2); }

.bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line-strong);
  margin: var(--sp-1) 0;
  overflow: hidden;
}
.bar i { display: block; height: 100%; background: var(--c-mint); }

/* ================= 右列：一个会话的十三步 ================= */

.detail-head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--panel-pad);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel-2);
}
.detail-head .who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.detail-head .who b {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}
.detail-head .who span { font-size: var(--fs-xs); color: var(--c-text-3); }

.detail-body { padding: var(--sp-4) var(--panel-pad) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }

/* 十三个小格：一眼看出走到哪、完成哪 */
.step-strip { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip {
  font-size: var(--fs-xs);
  line-height: 1.7;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.chip.visited { color: var(--c-blue); border-color: var(--c-blue); background: var(--c-blue-dim); }
.chip.done { color: var(--c-mint); border-color: var(--c-mint); background: var(--c-mint-dim); }

.step-card {
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.step-card.is-done { border-left-color: var(--c-mint); }
.step-card.is-visited { border-left-color: var(--c-blue); }
.step-card.is-idle { opacity: 0.72; }

.step-card .top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}
.step-card .top b { font-size: var(--fs-md); }
.step-card .top .when { font-size: var(--fs-xs); color: var(--c-text-3); }

.kv { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); }
.kv dt { font-size: var(--fs-xs); color: var(--c-text-3); }
.kv dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-gold);            /* 学生自己写下的内容用金色 */
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.talk { display: flex; flex-direction: column; gap: var(--sp-1); }
.line {
  font-size: var(--fs-sm);
  line-height: 1.6;
  padding: var(--sp-1) var(--sp-3);
  border-left: 2px solid var(--c-line-strong);
  overflow-wrap: anywhere;
}
.line b { font-size: var(--fs-xs); font-weight: 700; margin-right: var(--sp-2); }
.line strong { font-weight: 700; color: var(--c-text); }   /* 助教回复里的 **小标题** */
.line .at { font-size: var(--fs-xs); color: var(--c-text-3); margin-right: var(--sp-2); }
.line.me { border-left-color: var(--c-gold); color: var(--c-text); }
.line.me b { color: var(--c-gold); }
.line.ai { border-left-color: var(--c-blue); color: var(--c-text-2); }
.line.ai b { color: var(--c-blue); }
.line.sys { border-left-color: var(--c-slate); color: var(--c-text-3); }

.muted { font-size: var(--fs-xs); color: var(--c-text-3); }

/* ================= 空状态与后端不可达 ================= */

.state {
  margin: var(--sp-5) var(--panel-pad);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-slate);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.state b { color: var(--c-text); font-size: var(--fs-md); }
.state code { white-space: nowrap; }

/* ================= 窄屏与矮屏 ================= */

@media (max-width: 900px) {
  .teacher-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(140px, 32%) minmax(0, 1fr);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    gap: var(--sp-4);
  }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dd { margin-bottom: var(--sp-1); }
}

@media (max-height: 620px) {
  .col-head { padding: var(--sp-2) var(--sp-4); }
  .detail-head { padding: var(--sp-2) var(--sp-4); }
}

/* ================= 右列的两个页签与全班汇总（T30 追加） =================

   右列现在装两样东西：「这一个会话」（上面那一套，一行未改）与「全班汇总」。
   两个页签共用同一块地方，靠 hidden 切换；左列会话列表不受影响。

   汇总那一页是三块叠起来的网格，行高用 minmax(0, …fr) 分，卡片自身 overflow:hidden，
   所以无论窗口多矮都不会把页面撑出滚动条（tokens.css 已把 body 设成 overflow:hidden，
   tools/page_check.py 判的是横纵滚动量都为 0）。图全部是原生 SVG 且带 viewBox，
   按容器等比缩放，画之前不用量尺寸，也就不怕在隐藏状态下先画好再显示。 */

.tabbar {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--panel-pad) 0;
  background: var(--c-panel-2);
  border-bottom: 1px solid var(--c-line);
}

.tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  line-height: 1.9;
  padding: 0 var(--sp-4);
  margin-bottom: -1px;
  cursor: pointer;
}
.tab:hover { color: var(--c-blue); }
.tab[aria-selected="true"] {
  background: var(--c-panel);
  border-color: var(--c-line);
  color: var(--c-text);
  font-weight: 700;
}

.pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pane[hidden] { display: none; }

.agg-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--panel-pad);
}

.agg-card {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  overflow: hidden;
}

.agg-card-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.agg-card-head b { font-size: var(--fs-sm); white-space: nowrap; }
.agg-card-head .agg-sub {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 口径角标：每块右上角一个，点开盖住这一块说明数是怎么数的，再点收起 */
.agg-cite {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
  padding: 0 var(--sp-2);
  cursor: pointer;
}
.agg-cite:hover,
.agg-cite[aria-expanded="true"] { color: var(--c-blue); border-color: var(--c-blue); }

.agg-plot { flex: 1 1 auto; min-height: 0; }
.agg-plot svg { display: block; width: 100%; height: 100%; }
.agg-plot svg text { font-variant-numeric: tabular-nums; }

.agg-basis {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-panel);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
  line-height: 1.7;
  overflow-y: auto;
  cursor: pointer;
}
.agg-basis[hidden] { display: none; }
.agg-basis b { color: var(--c-text); font-size: var(--fs-sm); }
.agg-basis .agg-close { margin-top: auto; color: var(--c-blue); }

@media (max-height: 620px) {
  .agg-body { gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); }
  .agg-card { padding: var(--sp-1) var(--sp-2); }
}