/* 试卷报告的图：题目条、分项横条、先做这几件、薄弱点小卡、跟以前比、逐题格子。
   三类丢分各一个颜色（铜＝会但没拿到、红＝真不会、灰斜纹＝原因待定），得到的分是浅灰；强调色只标“这一次”和选中。 */
[data-g="slip"] { --g: #c27a3a; }
[data-g="gap"] { --g: var(--danger); }
[data-g="unknown"] { --g: #9a9da5; --g-tex: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 7px); }
[data-g="earned"] { --g: var(--line-strong); }

.report-body > * { max-width: 1040px; }
.exam-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 24px; padding: 8px 0 18px; border-bottom: 1px solid var(--line); }
.exam-summary > .exam-score { grid-row: 1 / span 2; }
.exam-summary > .exam-conclusion { margin: 0; }
.exam-summary > small, .exam-summary > .exam-warning { grid-column: 2; }
.exam-conclusion { font: var(--t-body); color: var(--ink); margin: 6px 0 2px; max-width: 720px; }

/* ---------- 题目条 ---------- */
.where .lp-cap h2 { font: var(--t-title); }
.qs { display: flex; flex-direction: column; gap: 10px; }
.qs-track { display: flex; gap: 6px; align-items: flex-end; padding-top: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.qs-track[data-more="true"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.qs-group { flex: 1 1 0; min-width: min-content; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.qs-cells { display: flex; gap: 2px; height: 96px; }
.qs-no { font: 400 12px/1 var(--font); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qs-cell {
  flex: 1 1 0; min-width: 14px; min-height: 0; height: 100%; padding: 0; border-radius: 6px; position: relative; overflow: hidden;
  background: var(--control); display: flex; align-items: flex-start; transition: opacity var(--d-state) var(--ease-out), box-shadow var(--d-state) var(--ease-out);
}
.qs-fill { display: block; width: 100%; background: var(--g, transparent); background-image: var(--g-tex, none); border-radius: 6px 6px 2px 2px; }
.qs-cell[data-s="pending"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.qs-cell[data-s="pending"] .qs-fill { background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 7px); }
.qs-cell[data-unknown-max="true"] { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.qs-cell[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.qs-cell:active { transform: scaleY(.975); }
.qs-track[data-focus="true"] .qs-cell[data-dim="true"] { opacity: .28; }
.qs-detail { display: flex; align-items: center; gap: 8px; min-height: 40px; font: var(--t-control); color: var(--ink-2); }
.qs-detail .text-button { margin-left: auto; }
.qs-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: -10px; }
.qs-key { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 10px; border-radius: var(--r-pill); font: var(--t-control); color: var(--ink-2); background: transparent; }
span.qs-key { padding-left: 10px; }
.qs-key b { font: 600 17px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 2px; }
.qs-unit { font: var(--t-caption); color: var(--muted); }
.qs-key[aria-pressed="true"] { background: var(--control); color: var(--ink); }
.qs-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--g); background-image: var(--g-tex, none); flex: none; }

/* ---------- 分项横条 ---------- */
.qb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 8px 32px; margin-top: 18px; }
.qb-title { font: var(--t-control); color: var(--muted); margin: 0 0 4px; font-weight: 400; }
.qb-rows { display: flex; flex-direction: column; margin-left: -8px; }
.qb-row {
  display: grid; grid-template-columns: minmax(64px, 7em) minmax(40px, 1fr) auto; grid-template-areas: "label bar value" ". extra extra"; align-items: center; column-gap: 10px;
  min-height: 40px; padding: 4px 8px; border-radius: 10px; background: transparent; color: var(--ink-2); font: var(--t-control); text-align: left; white-space: normal;
}
.qb-row:has(.qb-extra) { grid-template-areas: "label bar value"; grid-template-columns: minmax(64px, 7em) minmax(40px, 1fr) auto auto; }
.qb-label { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.qb-value { grid-area: value; font-variant-numeric: tabular-nums; color: var(--ink); }
.qb-extra { font: var(--t-caption); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.qb-bar { grid-area: bar; display: flex; gap: 2px; height: 10px; }
.qb-seg { height: 100%; min-width: 4px; border-radius: 3px; background: var(--g); background-image: var(--g-tex, none); }
.qb-row[aria-pressed="true"] { background: var(--control); }
.qb-note { font: var(--t-caption); color: var(--muted); margin: 4px 0 0; }
@media (hover: hover) and (pointer: fine) { .qb-row:hover, .qs-key:not(span):hover { background: var(--control); } }

/* ---------- 先做这几件 ---------- */
.plan-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.plan-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px 10px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.plan-no { position: absolute; top: 14px; right: 16px; font: 600 13px/1 var(--font); color: var(--faint); }
.plan-gain { margin: 0; color: var(--ink-2); font: var(--t-control); }
.plan-gain b { font: var(--t-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-title { margin: 2px 0 0; font: 600 16px/1.45 var(--font); }
.plan-card > .quiet { margin: 6px 0 0 -12px; }
.plan-card .step-out { align-self: stretch; }
.plan-card .step-out:empty { display: none; }

/* ---------- 薄弱点小卡 ---------- */
.weak-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.weak-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; min-height: 0; border-radius: 16px; text-align: left; white-space: normal;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink);
}
.weak-tile[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); }
.weak-tile-head { display: flex; align-items: baseline; gap: 8px; }
.weak-tile-head b { flex: 1; min-width: 0; font: 600 16px/1.4 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weak-tile-lost { font: var(--t-control); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.weak-tile-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--t-caption); color: var(--muted); }
.weak-state[data-state="weak"] { color: var(--danger); box-shadow: inset 0 0 0 1px currentColor; }
.weak-detail .weak { border: 0; padding: 4px 0 0; }
.weak-detail:not(:empty) { margin-top: 14px; padding: 4px 0 8px 16px; border-left: 2px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .weak-tile:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-touch); } }

/* ---------- 跟以前比 ---------- */
.qt { margin: 0; max-width: 720px; }
.qt svg { width: 100%; height: auto; display: block; overflow: visible; }
.qt-grid { stroke: var(--line); stroke-width: 1; }
.qt-axis, .qt-name { fill: var(--muted); font: 400 12px/1 var(--font); }
.qt-line { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.qt-dot { fill: var(--ink-2); stroke: var(--paper); stroke-width: 2; }
.qt-dot.is-now { fill: var(--accent); }
.qt-val { fill: var(--ink-2); font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums; }
.qt-val.is-now, .qt-name.is-now { fill: var(--ink); }
.repeat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.repeat-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font: var(--t-control); color: var(--ink-2); }
.repeat-chip b { font-weight: 600; color: var(--ink); }
.qt + .qb-title { margin-top: 16px; }

/* ---------- 逐题格子 ---------- */
.qg { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.qg-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 56px; padding: 6px 4px; border-radius: 12px;
  background: var(--control); color: var(--ink-2); white-space: normal;
}
.qg-no { font: 600 15px/1.25 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-mark { font: 400 12px/1.4 var(--font); font-variant-numeric: tabular-nums; }
.qg-cell[data-g] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--g); }
.qg-cell[data-g] .qg-mark { color: var(--ink); }
.qg-cell[data-s="pending"] { background: repeating-linear-gradient(135deg, var(--control) 0 4px, var(--paper) 4px 8px); }
.qg-cell[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.qg-open:not(:empty) { margin-top: 12px; }

@media (max-width: 600px) {
  .exam-summary { grid-template-columns: minmax(0, 1fr); }
  .exam-summary > .exam-score { grid-row: auto; }
  .exam-summary > small, .exam-summary > .exam-warning { grid-column: 1; }
  .qs-cells { height: 76px; }
  .qs-track { gap: 3px; }
}