/* 掌握度趋势页：总览列表（四档等级、阶梯进度条、迷你走势）、只画选中分区的曲线、"快被遗忘"提醒。颜色全部走主题变量（分区颜色见 shell.css 的 --zone-color）。 */

#mastery-page .page-heading { margin-bottom: var(--space-4); }
#mastery-status:empty { display: none; }
#mastery-retry { margin-bottom: var(--space-4); }

.mastery-alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--reward-line);
  border-radius: var(--radius);
  background: var(--reward-soft);
  color: var(--ink);
}
.mastery-alert[hidden] { display: none; }
.mastery-alert-title { display: block; color: var(--reward-ink); font-size: var(--text-md); }
.mastery-alert p { margin: var(--space-1) 0 var(--space-3); }
.mastery-alert-actions, .mastery-zone-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.mastery-chart-card { margin-bottom: var(--space-4); padding: var(--space-5); }
.mastery-chart-card[hidden] { display: none; }
.mastery-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mastery-chart-head h3 { margin: 0; font-size: var(--text-lg); }
.mastery-swatch { width: 22px; height: 0; border-top: 3px solid var(--zone-color, var(--ink-2)); }
.mastery-swatch[data-dash="1"], .mastery-swatch[data-dash="5"] { border-top-style: dashed; }
.mastery-swatch[data-dash="2"], .mastery-swatch[data-dash="6"] { border-top-style: dotted; }
.mastery-swatch[data-dash="3"], .mastery-swatch[data-dash="7"] { border-top-style: double; border-top-width: 4px; }

.mastery-chart { position: relative; min-height: 240px; border-radius: var(--radius-sm); }
.mastery-chart:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.mastery-svg { display: block; max-width: 100%; overflow: visible; touch-action: pan-y; }
.mastery-grid { stroke: var(--line); stroke-width: 1; }
.mastery-axis { fill: var(--ink-2); font-size: 12px; }
.mastery-threshold { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mastery-threshold-label { fill: var(--danger); }
.mastery-line { fill: none; stroke: var(--zone-color, var(--ink-2)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mastery-end { fill: var(--zone-color, var(--ink-2)); stroke: var(--surface); stroke-width: 2; }
.mastery-cursor { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.mastery-mark { fill: var(--zone-color, var(--ink-2)); stroke: var(--surface); stroke-width: 2; }
.mastery-tooltip {
  position: absolute;
  z-index: 2;
  min-width: 150px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .15);
  font-size: var(--text-xs);
  pointer-events: none;
}
.mastery-tooltip[hidden] { display: none; }
.mastery-tooltip strong { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); }
.mastery-tooltip-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.mastery-tooltip-row b { margin-left: auto; padding-left: var(--space-3); font-variant-numeric: tabular-nums; }

.mastery-table-wrap { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--text-sm); }
.mastery-table-wrap summary { cursor: pointer; }
#mastery-table { margin-top: var(--space-2); overflow-x: auto; }
#mastery-table:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mastery-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.mastery-table th, .mastery-table td { padding: 4px var(--space-2); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.mastery-table thead th, .mastery-table tbody th { color: var(--ink); font-weight: 600; text-align: left; }

/* ---------- 总览列表：每个分区一行 ---------- */
.mastery-overview-card { margin-bottom: var(--space-4); padding: var(--space-5); }
.mastery-overview-card[hidden] { display: none; }
.mastery-overview-card h3 { margin: 0; font-size: var(--text-lg); }
.mastery-overview-hint { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.mastery-overview { list-style: none; margin: 0; padding: 0; }
.mastery-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.mastery-row:first-child { border-top: 0; }
.mastery-row.is-selected { border-left-color: var(--azurite); background: var(--paper-2); }
.mastery-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto 84px minmax(0, 1.7fr) 30px;
  grid-template-areas: "name tier steps meta swatch";
  align-items: center;
  gap: var(--space-2) var(--space-4);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.mastery-row-main:disabled { color: var(--ink-2); cursor: default; }
.mastery-row-name { grid-area: name; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mastery-row-zone { overflow: hidden; font-size: var(--text-base); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mastery-priority { flex-shrink: 0; padding: 0 var(--space-2); border: 1px solid var(--ink-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: var(--text-xs); font-weight: 650; line-height: 20px; }
.mastery-tier { grid-area: tier; display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 24px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 650; line-height: 22px; white-space: nowrap; }
.mastery-tier.is-new { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.mastery-tier.is-familiar { border-color: var(--reward-line); background: var(--reward-soft); color: var(--reward-ink); }
.mastery-tier.is-proficient { border-color: var(--group-line); background: var(--group-soft); color: var(--group-ink); }
.mastery-tier.is-mastered { border-color: var(--success-line); background: var(--success-soft); color: var(--success-ink); }
.mastery-tier.is-none { border-color: var(--line); background: var(--paper); color: var(--ink-2); }
.mastery-stair-icon { width: 14px; height: 12px; fill: currentColor; }
.mastery-stair-icon rect { opacity: .28; }
.mastery-stair-icon rect.is-on { opacity: 1; }
.mastery-steps { grid-area: steps; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.mastery-step { height: 8px; border-radius: 2px; background: var(--line); }
.mastery-step.is-on { background: var(--ink-2); }
.mastery-row[data-tier="new"] .mastery-step.is-on { background: var(--danger); }
.mastery-row[data-tier="familiar"] .mastery-step.is-on { background: var(--reward-ink); }
.mastery-row[data-tier="proficient"] .mastery-step.is-on { background: var(--group-ink); }
.mastery-row[data-tier="mastered"] .mastery-step.is-on { background: var(--success-ink); }
.mastery-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
.mastery-row-pct { min-width: 3.4em; font-family: var(--serif); font-size: var(--text-xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mastery-spark, .mastery-spark-gap { flex: 0 0 96px; width: 96px; height: 28px; }
.mastery-spark-line { fill: none; stroke: var(--zone-color, var(--ink-2)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mastery-row-due { color: var(--ink-2); font-size: var(--text-xs); white-space: nowrap; }
.mastery-row .mastery-swatch { grid-area: swatch; justify-self: end; visibility: hidden; }
.mastery-row.is-selected .mastery-swatch { visibility: visible; }
.mastery-row .zone-dot { flex-shrink: 0; }
.mastery-row .mastery-zone-actions { flex-wrap: nowrap; padding: 0 var(--space-3); }
.mastery-zone-actions button { min-height: 38px; font-size: var(--text-sm); }
.mastery-link { border-color: transparent; background: transparent; color: var(--azurite); text-decoration: underline; text-underline-offset: 4px; }
.mastery-select-note { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.mastery-select-note:empty { display: none; }
.mastery-explain { margin-top: var(--space-5); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.8; }
.mastery-explain[hidden] { display: none; }
.mastery-explain summary { cursor: pointer; }
.mastery-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#mastery-page :is(button, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#mastery-page .mastery-row-main:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  .mastery-row-main:hover:not(:disabled) { background: var(--paper-2); transform: none; }
}
@media (max-width: 599px) {
  .mastery-chart-card, .mastery-overview-card { padding: var(--space-4) var(--space-3); }
  .mastery-alert { padding: var(--space-4); }
  .mastery-row-main {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name tier" "steps steps" "meta swatch";
    gap: var(--space-2) var(--space-3);
  }
  .mastery-row { grid-template-columns: minmax(0, 1fr); }
  .mastery-row-pct { min-width: 0; font-size: var(--text-lg); }
  .mastery-spark, .mastery-spark-gap { flex-basis: 64px; width: 64px; }
  .mastery-row .mastery-zone-actions { flex-wrap: wrap; padding: 0 var(--space-3) var(--space-2); }
}
@media (pointer: coarse) {
  .mastery-row-main, .mastery-zone-actions button { min-height: 44px; }
  .mastery-alert-actions button { min-height: 44px; }
}