/* ============ 识字练习纸 ============
 * 叠在 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-core.js 的 markStep，两种模式下含义一致，见 js/shizi-mark.js 的说明。
 * （2026-10 以前用右上角的数字 2 / 1 表示，按 Claude Design 定稿改成半红，用户同意先试用。）
 *
 * 只改 background、不碰 color：数独在 css/shudu.css 明文定过这条规矩 ——
 * 叠加的状态只改 background，打印段那条还原才兜得住。
 */
.shizi-cell.is-wrong {
  position: relative;
  background: var(--mark, #f4bdb8);
}

.shizi-cell.is-wrong.is-once {
  background: linear-gradient(135deg, var(--mark, #f4bdb8) 0 50%, #fff 50% 100%);
}

/*
 * 左上角的「×3」= 这个字累计进过几次错字集，移出了也照样标 —— 本周卷上一个白底字
 * 标着 ×3，意思是「以前反复错过，这次多留意」。只有 2 次以上才有 data-n（见 shizi-mark 的 paintCell）。
 * 颜色用次要文字色：底色是「现在的状态」，左上角只是背景信息。
 * position: relative 写在这里而不是只写在 .is-wrong 上，因为白底格子也可能带这个标。
 */
.shizi-cell[data-n] {
  position: relative;
}

.shizi-cell[data-n]::before {
  content: '×' attr(data-n);
  position: absolute;
  top: 0.12em;
  left: 0.14em;
  font: 600 max(12px, 0.26em)/1 "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink-soft);
}

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

  /* 半红那条特异性更高（两个类），必须单独压一次，否则斜线会印上纸 */
  .shizi-cell.is-wrong.is-once {
    background: none;
  }

  /* 左上角的次数同理 */
  .shizi-cell[data-n]::before {
    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: -6px 0 0;
  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;
  flex-wrap: wrap;
  gap: 8px;
}

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

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

/* ---------- 纸张上方的图例：点字标记各是什么意思（只在屏幕上，打印隐藏，见 sheet.css） ---------- */

.mark-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink-2, #4a505b);
  background: #fff;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
}

.mark-legend b {
  color: var(--ink);
}

.mark-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mark-legend .sw {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid #b4bac4;
  background: var(--mark, #f4bdb8);
}

.mark-legend .sw.half {
  background: linear-gradient(135deg, var(--mark, #f4bdb8) 0 50%, #fff 50% 100%);
}

.mark-legend .n {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}

/* 设置区「反复错的字」：一字一块，粗边 = 现在还在错字集里 */
.zchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zchip {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 2px 8px;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
  background: var(--field);
  border-radius: 6px;
}

.zchip.on {
  color: var(--ink);
  background: var(--red-tint, #fcedec);
}

.zchip b {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  color: var(--red);
}

/* ---------- 复习结算（设置区「错字集」一栏里） ---------- */

.settle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--field);
  border-radius: 8px;
}

.settle-btn {
  align-self: flex-start;
}

.settle-done b {
  color: var(--ink);
}

.hist-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ---------- 「历史」页签：纸张区里的统计页（只在屏幕上，不印） ---------- */

.hist {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 28px 32px;
  background: #fff;
  border: 1px solid var(--card-edge);
  border-radius: 10px;
}

.hist-empty {
  margin: 8px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.hist-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hist-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--field);
  border-radius: 8px;
}

.hist-card b {
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hist-card span {
  font-size: 13px;
  color: var(--ink);
}

.hist-card small {
  font-size: 11px;
  color: var(--ink-soft);
}

.hist-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 26px 0 10px;
  font-size: 15px;
  color: var(--ink);
}

.hist-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}

.hist-key .hc {
  width: 14px;
  height: 14px;
  min-width: 0;
  margin-left: 8px;
  padding: 0;
}

.hist-row {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--card-edge);
}

.hist-n {
  flex: none;
  width: 56px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.hist-n small {
  display: block;
  font-weight: 400;
  color: var(--ink-soft);
}

.hist-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 一字一块，颜色和卷面上的标记一致：红底 = 在错字集里，半红 = 差一次，白底 = 已学会 */
.hc {
  display: inline-block;
  min-width: 36px;
  padding: 2px 4px;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体", serif;
  font-size: 24px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink);
  border: 1px solid #b4bac4;
  border-radius: 4px;
  cursor: default;
}

.hc.wrong {
  background: var(--mark, #f4bdb8);
}

.hc.once {
  background: linear-gradient(135deg, var(--mark, #f4bdb8) 0 50%, #fff 50% 100%);
}

.hc.out {
  color: var(--ink-soft);
  background: #fff;
}

.hist-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.hist-log th,
.hist-log td {
  padding: 6px 8px;
  text-align: right;
  border-top: 1px solid var(--card-edge);
}

.hist-log th {
  font-weight: 500;
  color: var(--ink-soft);
}

.hist-log th:first-child,
.hist-log td:first-child {
  text-align: left;
}