/* ============================================================
   view-lesson.css · 教案撰写
   教案与报告同范式：正文是一整片连续文档（.doc-page + .lsn-paper），
   由章节标题 + 段落 + 表格构成，而不是一叠各自带边框的表单卡片。
   字重仅用 400 / 600 / 700；界面中文不小于 12px
   ============================================================ */

/* ---------------- 无 item 时的极简引导页 ----------------
   教案在对话里生成，这里只解释去哪做，不放模板与列表 */
.lsn-guide { padding-top: 68px; }
.lsn-guide .empty__art { background: #f5f0ff; color: #7c3aed; }

/* ---------------- 编辑器骨架 ---------------- */
.lsn-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lsn-editor__body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.lsn-editor__body > * { min-height: 0; }
.lsn-side {
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow: auto;
  min-height: 0;
}
.lsn-side__pad { padding: 14px; }
.lsn-side .kv { grid-template-columns: 40px minmax(0, 1fr); gap: 7px 8px; font-size: 12px; }
.lsn-side .kv dd { word-break: break-word; line-height: 1.5; }
.lsn-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: background .14s var(--ease);
}
.lsn-nav-item:hover { background: var(--surface-3); }
.lsn-nav-item.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.lsn-nav-item__n {
  width: 18px; height: 18px; flex: none; border-radius: var(--r-xs);
  background: var(--surface-3); color: var(--text-3);
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.lsn-nav-item.is-active .lsn-nav-item__n { background: var(--brand-600); color: #fff; }

/* ---------------- 滚动区与纸张 ----------------
   .doc-page 的视觉语言（白底 / 细边框 / 圆角 / 轻阴影 / 宽内边距 /
   15px 正文 + 1.95 行高）直接复用报告编辑器那一套，不在这里重写；
   纸张铺满可用宽度，不做 max-width 居中收窄。 */
.lsn-scroll { overflow: auto; min-height: 0; background: var(--bg-alt); padding: 20px 24px 48px; }
.lsn-doc { display: flex; flex-direction: column; gap: 14px; }
.lsn-block { scroll-margin-top: 14px; }

/* 卷首：学期 + 课程 + 课题，下接一条细线，像正式教案的封面栏 */
.lsn-paper__head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lsn-paper__head h1 { margin-bottom: 8px; }
.lsn-paper__sub {
  margin: 0; text-align: center;
  font-size: 14px; color: var(--text-2); line-height: 1.8;
}
.lsn-paper__sub .tag { margin-left: 8px; vertical-align: 1px; }

/* 章节标题：编号 + 标题 + 原卡片头部的说明文字 */
.lsn-paper .lsn-h2 {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px;
  scroll-margin-top: 14px;
}
.lsn-paper .lsn-h2__sub { font-size: 12px; font-weight: 400; color: var(--text-3); }

/* 章节尾部的工具条：原卡片头右侧的按钮与标签，保持在右侧 */
.lsn-paper .lsn-acts {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px;
  margin: 0 0 22px;
}

/* ---------------- 文档内的表格 ---------------- */
.lsn-paper .lsn-tbl { table-layout: fixed; }
.lsn-paper .lsn-tbl th[scope="row"] { text-align: left; vertical-align: top; }
.lsn-paper .lsn-tbl td { vertical-align: top; }
.lsn-paper .lsn-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

/* 文档内的可编辑字段：看着像正文，聚焦时才露出下划线与浅底 */
.lsn-paper .lsn-field {
  width: 100%; min-height: 24px;
  padding: 1px 1px 2px;
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background-color: transparent;
  font-family: inherit; font-size: 14px; line-height: 1.7; color: var(--text);
}
.lsn-paper .lsn-field::placeholder { color: var(--text-4); }
.lsn-paper .lsn-field:hover { border-bottom-color: var(--line-dark); }
.lsn-paper .lsn-field:focus { outline: none; border-bottom-color: var(--brand-500); background-color: #fffdf3; }
.lsn-paper .lsn-field--select {
  appearance: none; cursor: pointer; padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238b93a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/* 只读的元信息值与行内小字 */
.lsn-paper .lsn-meta__val { display: inline-block; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.lsn-paper .lsn-tiny { display: inline-block; margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-4); }
.lsn-paper .lsn-count { font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.lsn-paper .lsn-countline { margin: 8px 0 0; font-size: 12px; color: var(--text-4); }
.lsn-paper .lsn-countline b { color: var(--text); font-weight: 600; }
.lsn-paper .lsn-linkline { margin: 2px 0 14px; }
.lsn-paper .lsn-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------- 文档内的条目行（目标 / 重难点） ---------------- */
.lsn-paper .lsn-list { display: flex; flex-direction: column; gap: 2px; }
.lsn-paper .lsn-line { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; }
.lsn-line__dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--brand-400); margin-top: 11px;
}
.lsn-line__text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.85; color: var(--text-2); }
.lsn-line--hard .lsn-line__dot { background: var(--warn); }
.lsn-line .icon-btn { opacity: 0; transition: opacity .15s var(--ease); }
.lsn-line:hover .icon-btn, .lsn-line:focus-within .icon-btn { opacity: 1; }
.lsn-paper .lsn-listacts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 9px;
}

/* 统一的可编辑区域聚焦态：浅底 + 无边框（与报告编辑器一致） */
.lsn-paper [contenteditable]:focus {
  outline: none;
  background: #fffdf3;
  box-shadow: 0 0 0 5px #fffdf3;
  border-radius: 2px;
}

/* ---------------- 一、基本信息 ---------------- */
.lsn-paper .lsn-meta th[scope="row"] {
  font-weight: 600; color: var(--text-3); background: var(--surface-2);
  padding-top: 5px; padding-bottom: 5px;
}
.lsn-paper .lsn-meta td { padding-top: 5px; padding-bottom: 5px; }

/* ---------------- 二、教学目标 ---------------- */
.lsn-dim { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.lsn-obj__badge {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: 1px solid transparent;
}
.lsn-obj__badge--1 { background: #eff4ff; color: #2563eb; border-color: #dbe7ff; }
.lsn-obj__badge--2 { background: #eaf8f0; color: #0f9d58; border-color: #d1eedd; }
.lsn-obj__badge--3 { background: #f5f0ff; color: #7c3aed; border-color: #e7dcff; }

/* ---------------- 三、教学重点与难点：两栏正文，中间一条细线 ---------------- */
.lsn-kh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.lsn-kh__col { min-width: 0; }
.lsn-kh__col + .lsn-kh__col { border-left: 1px solid var(--line); padding-left: 30px; }
.lsn-kh__label {
  display: flex; align-items: center; gap: 7px;
  margin: 2px 0 8px; font-size: 14px; font-weight: 600; color: var(--text);
}
.lsn-kh__hint { font-size: 12px; font-weight: 400; color: var(--text-4); }
.lsn-kh__col.is-hard .lsn-kh__label { color: #92400e; }
.lsn-kh__add { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.lsn-paper .lsn-kh__add .lsn-field { font-size: 13px; }
.lsn-kh__add .icon-btn { width: 28px; height: 28px; flex: none; }

/* ---------------- 四、学情分析 ---------------- */
.lsn-paper .lsn-evi .progress { min-width: 72px; }

/* ---------------- 五、教学方法 ---------------- */
.lsn-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip.is-on { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); font-weight: 600; }

/* ---------------- 六、教学过程 ---------------- */
/* 窄屏 / 面板打开时整表在容器内横向滚动，操作列不被裁掉 */
.lsn-proc-wrap { overflow-x: auto; overflow-y: hidden; }
.lsn-paper .lsn-proc { margin: 6px 0 8px; min-width: 760px; }
.lsn-paper .lsn-proc th { position: static; }
.lsn-proc td { vertical-align: top; line-height: 1.7; }
.lsn-proc__time {
  font-family: var(--mono); font-size: 12px; color: var(--brand-700);
  white-space: nowrap; font-weight: 600;
}
.lsn-paper .lsn-proc td.strong { font-weight: 600; color: var(--text); }
.lsn-proc tr.is-moved td { animation: lsnFlash .9s var(--ease-out); }
@keyframes lsnFlash { from { background: var(--warn-bg); } to { background: transparent; } }
.lsn-rowact { display: flex; gap: 1px; opacity: 0; transition: opacity .15s var(--ease); }
.lsn-proc tr:hover .lsn-rowact, .lsn-proc tr:focus-within .lsn-rowact { opacity: 1; }
.lsn-rowact .icon-btn { width: 28px; height: 28px; }

/* 时长校验：接在表格下方的一行小结 */
.lsn-proc__total {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12px; color: var(--text-2);
}
.lsn-proc__total .lsn-tiny { margin: 0; }
.lsn-proc__sum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

/* ---------------- 七、板书设计：一块板面，内部细线分区 ---------------- */
.lsn-board {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0 10px;
  background: var(--surface-inverse); color: #fff;
  border: 1px solid #0c1220; border-radius: var(--r-md);
  overflow: hidden;
}
.lsn-board__zone {
  padding: 14px 18px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.lsn-board__zone + .lsn-board__zone { border-left: 1px solid rgba(255, 255, 255, .14); }
.lsn-board__label {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: rgba(255, 255, 255, .58);
}
.lsn-board__text { font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, .92); }
.lsn-board__art { margin-top: auto; color: rgba(255, 255, 255, .72); }
.lsn-paper .lsn-board [contenteditable]:focus {
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .12);
}

/* ---------------- 八、分层作业 ---------------- */
.lsn-paper .lsn-hw__lv { border-left: 3px solid var(--brand-500); }
.lsn-paper .lsn-hw__lv--2 { border-left-color: var(--violet); }
.lsn-paper .lsn-hw__lv--3 { border-left-color: var(--warn); }
.lsn-hw__t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.lsn-hw__text { font-size: 14px; line-height: 1.85; color: var(--text-2); }

/* ---------------- 九、课后反思 ---------------- */
.lsn-paper .lsn-reflect {
  display: block; width: 100%; min-height: 120px; resize: vertical;
  margin-top: 2px; padding: 2px 1px;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background-color: transparent;
  font-family: inherit; font-size: 14px; line-height: 1.95; color: var(--text-2);
}
.lsn-paper .lsn-reflect::placeholder { color: var(--text-4); }
.lsn-paper .lsn-reflect:hover { border-bottom-color: var(--line-dark); }
.lsn-paper .lsn-reflect:focus { outline: none; border-bottom-color: var(--brand-500); background-color: #fffdf3; }

/* ---------------- 引用来源：文档式条目，无卡片边框 ---------------- */
.lsn-cites { display: flex; flex-direction: column; gap: 2px; }
.lsn-ref {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 9px; margin-left: -9px;
  border-radius: var(--r-sm); cursor: pointer;
  transition: background .15s var(--ease);
}
.lsn-ref:hover { background: var(--brand-50); }
.lsn-ref.is-hl { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-300); }
.lsn-ref__n {
  flex: none; padding-top: 1px;
  font-size: 13px; font-weight: 600; color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.lsn-ref__title { font-size: 14px; font-weight: 600; line-height: 1.7; }
.lsn-ref__meta { font-size: 12px; color: var(--text-4); margin-top: 3px; }

/* ---------------- 右侧面板（自定义） ---------------- */
.pnl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pnl__scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.pnl__foot { flex: none; border-top: 1px solid var(--line); background: var(--surface); padding: 12px; }
.pnl .meter-row { margin-bottom: 10px; }
.pnl .meter-row__label { width: 116px; }
.pnl-sec { margin-bottom: 20px; }
.pnl-sec:last-child { margin-bottom: 0; }

/* 学情数据小卡 */
.lsn-data {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}

/* ---------------- 响应式 ---------------- */
/* 窄屏 / 右侧面板打开时：vbar 允许换行，次要操作不再被裁掉 */
.lsn-editor .vbar { flex-wrap: wrap; overflow-x: visible; height: auto; row-gap: 7px; }

@media (max-width: 1360px) {
  .lsn-editor__body { grid-template-columns: 200px minmax(0, 1fr); }
  /* 纸张内边距收窄，正文的可读宽度优先 */
  .lsn-paper { padding-left: 36px; padding-right: 36px; }
}
@media (max-width: 1080px) {
  .lsn-kh { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  .lsn-kh__col + .lsn-kh__col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .lsn-board { grid-template-columns: minmax(0, 1fr); }
  .lsn-board__zone + .lsn-board__zone { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
}