/* ============ 识字练习纸 ============
 * 叠在 css/sheet.css 之上，只定义字格网格本身。
 * 列宽 / 行高 / 字号都由 js/shizi-render.js 按字数算好后内联给定，这里不写死尺寸。
 */

/*
 * 字格在版心里【横竖都居中】。
 *
 * flex:1 让它吃掉页眉页脚之外的全部高度，align-items:center 再把字格摆在正中。
 * 每周卷 100 字时字格正好 222mm、撑满整块，居不居中看不出区别；
 * 但错字卷可能只有十几个字（格子被 cellMax 封在 30mm），不居中就会全挤在纸的上三分之一、
 * 下面空一大片，像是排版没排完。
 */
.shizi-stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

/*
 * 格线用「容器画上边和左边、格子各画右边和下边」拼出来，而不是给每个格子画一圈 ——
 * 那样相邻格子的线会叠成双线，打印出来一眼看得出粗细不匀。
 * 全局 box-sizing: border-box（css/app.css），所以线宽是往格子里吃的，
 * 不会把 grid 撑宽，内联的 mm 尺寸仍然算数。
 */
.shizi-grid {
  display: grid;
  align-content: start;
  width: max-content;
  border-top: 0.15mm solid var(--shizi-rule);
  border-left: 0.15mm solid var(--shizi-rule);
}

.shizi-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  /* 去掉双击缩放与 300ms 点击延迟：家长会对着纸连点十几个格子，
     格子又挨得近，双击缩放误触是必然的。数独的格子上用的是同一条。 */
  touch-action: manipulation;
  border-right: 0.15mm solid var(--shizi-rule);
  border-bottom: 0.15mm solid var(--shizi-rule);
  break-inside: avoid;
  page-break-inside: avoid;
}

/*
 * 格线颜色。比奥数/数独的线浅得多 —— 这张纸的主角是字，格线只是防止家长
 * 指读到第 37 个字时串行，存在感越低越好。
 */
.sheet-shizi {
  --shizi-rule: #c4c4c4;
}

/*
 * 字体。默认楷体：课本和洪恩识字里都是楷体字形，用黑体考认字，
 * 孩子会在「这个字长得不一样」上卡壳，考的就不是认字了。
 * .sheet 自带一套无衬线字体栈（css/sheet.css），必须在格子上覆盖掉。
 */
.sheet-shizi[data-font='kai'] .shizi-cell {
  font-family: "Kaiti SC", STKaiti, KaiTi, "楷体", "楷体_GB2312", "Songti SC", serif;
}

.sheet-shizi[data-font='hei'] .shizi-cell {
  font-family: "PingFang SC", "Heiti SC", "Microsoft YaHei", sans-serif;
}

/*
 * 页眉标题允许换行。
 *
 * css/sheet.css 给 .sheet-title 设了 white-space: nowrap，而「日期 姓名 用时 得分」
 * 那一栏（.sheet-meta，同样 nowrap）就占掉 99mm，标题实际只剩 73mm。标题一超出，
 * 页眉既不截断也不换行，浏览器改为把【整张纸】等比缩小去适配 —— 缩完页眉那条横线
 * 仍是满宽（width:auto，跟着页框走），从横线上完全看不出问题，露馅的是按 mm 写死的
 * 字格：整页 88% 缩水，10.6mm 的字变成 9.4mm，右边空出一截。
 *
 * 默认标题已经压短了（见 shizi-core 的 titleFor），但用户可以自填 30 字，堵不住。
 * 所以这里放开换行：宁可页眉占两行，也不能让整页悄悄缩水。
 * .sheet-meta 保持 nowrap，它是固定的一栏，不该被挤散。
 */
.sheet-shizi .sheet-title {
  white-space: normal;
}

/*
 * 红底 = 这个字在错字集里。两种模式下含义一致，见 js/shizi-mark.js 的说明。
 *
 * 只改 background、不碰 color：数独在 css/shudu.css 明文定过这条规矩 ——
 * 叠加的状态只改 background，打印段那条还原才兜得住。
 */
.shizi-cell.is-wrong {
  position: relative;
  background: rgba(217, 58, 43, 0.16);
}

/*
 * 右上角的数字 = 还要再认出几次才移出错字集：刚收进来是 2，认出一次变 1，再认出一次就移出。
 * 规则见 js/shizi-core.js 的 markStep。
 *
 * 用伪元素而不是往格子里塞 <span>：字格的 textContent 就是那个字，别的地方
 *（将来的复制之类）不该读到多出来的数字。字号跟着格子的内联字号走（em），
 * 不同版面下角标和字的比例不变。
 */
.shizi-cell.is-wrong::after {
  content: '2';
  position: absolute;
  top: 0.12em;
  right: 0.14em;
  font: 700 0.26em/1 "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--red);
}

.shizi-cell.is-wrong.is-once::after {
  content: '1';
}

@media print {
  /*
   * 错字标记一律不印。每周卷是【认读考核卷】，把不认识的字标在纸上等于给孩子划重点；
   * 错字卷本来整张都是错字，标了也没有信息量。标记只活在屏幕上。
   */
  .shizi-cell.is-wrong {
    background: none;
  }

  /* 角标同理。.is-once 那条特异性更高，但它只改 content，上面这条 display 足以盖住两者 */
  .shizi-cell.is-wrong::after {
    display: none;
  }

  /*
   * 与 css/sheet.css 的 .sheet-grid、css/shudu.css 的 .sudoku-stage、
   * js/render.js 的 AREA_MM.portrait 是同一个 225mm：打印时 .sheet 不再定高，
   * 靠这个最小高度把页脚顶到纸的底部。改这里记得同步那几处。
   */
  .shizi-stage {
    min-height: 225mm;
  }
}

/* ============ 设置面板里的周次导航 ============
 * 只在屏幕上出现（打印时 .panel 整块被 css/sheet.css 隐藏）。
 * 这个板块的主操作不是调参数，而是「这周印哪一批」，所以进度做成面板最上面
 * 最显眼的一块，而不是藏在一个数字输入框里。
 */

.week-now {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.week-sub {
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.week-bar {
  height: 7px;
  border-radius: 999px;
  background: #e9edf3;
  overflow: hidden;
}

.week-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
  transition: width 0.2s;
}

.week-nav {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.week-nav .btn {
  flex: 1;
  padding: 9px 10px;
  font-size: 14px;
}

.week-nav .btn:disabled {
  opacity: 0.4;
  cursor: default;
}