/* Diagrams are drawn by visuals.js with fixed ink colours (data palettes, axes, clock
   faces). Rather than recolour every SVG, each diagram sits on a white "paper" surface
   (--chip, white in both themes, as the main site does for its logo) so it reads the
   same in light and dark mode. Text inside that paper uses --paper-ink. */
:root { --paper-ink: #213745; --paper-muted: #55636B; }
.clock-svg, .math-pie-svg, .math-diagram-svg, .coordinate-svg, .bar-model-svg {
  background: var(--chip); border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border);
}

/* ---------- Task 1 图表（内联 SVG，零外部依赖） ---------- */
.chart { margin: 16px 0 20px; }
.chart-svg { width: 100%; height: auto; display: block;
             border: 1px solid var(--ec-border, var(--border)); border-radius: var(--radius-sm); background: var(--chip); }
.chart-cap { font-size: .9em; color: var(--text); margin-bottom: 8px; font-weight: 600; }
.chart-svg text { font-family: Arial, sans-serif; }

/* ---------- Structured mathematics visuals ---------- */
.math-visual { margin: 14px 0 20px; max-width: 100%; min-width: 0; }
.math-visual-cap { font-size: 1em; font-weight: 600; margin-bottom: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.math-visual-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; }
.math-visual-scroll:focus-visible { outline: 2px solid var(--e-focus, var(--focus)); outline-offset: 2px; }
.pictogram { padding: 12px; border: 1px solid var(--e-banner-line, var(--border)); border-radius: var(--radius-sm); background: var(--chip); color: var(--paper-ink); }
.pictogram-svg { display: block; width: auto; max-width: 100%; height: auto; }
.pictogram-svg.is-wide { max-width: none; }
.pictogram .math-scroll-hint { color: var(--paper-muted); }
.math-scroll-hint { margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.pictogram-svg text { font-family: Arial, sans-serif; fill: var(--paper-ink); }
.pictogram-key { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 1em; line-height: 1.5; }
.pictogram-key svg { flex: 0 0 28px; }
.pictogram-key span { min-width: 0; overflow-wrap: anywhere; }
.clock-svg { display: block; width: 256px; max-width: 100%; height: auto; margin: 0 auto; font-family: Arial, sans-serif; }
.math-chart .chart { margin: 0; min-width: 0; }
.math-chart .chart-svg { width: 100%; max-width: 520px; box-sizing: border-box; }
.math-chart .chart-svg text { font-size: 18px; }
.math-chart .chart-svg .math-value-label { font-size: 20px; font-weight: 700; fill: var(--paper-ink); paint-order: stroke; stroke: var(--chip); stroke-width: 3px; stroke-linejoin: round; }
.math-chart .chart-cap { font-size: 1em; line-height: 1.5; overflow-wrap: anywhere; }
.math-table .data-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: 0; }
.math-table .data-table th, .math-table .data-table td { min-width: 70px; }
.math-table .data-table caption { font-size: 1em; text-align: left; }
.math-pie-layout { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.math-pie-svg { display: block; width: 260px; max-width: 100%; height: auto; flex: 0 1 260px; }
.math-pie-legend { padding: 0; margin: 0; list-style: none; font-size: 1em; line-height: 1.6; }
.math-pie-legend li { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.math-pie-legend li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.math-pie-key { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--border-strong); }
.math-diagram-svg { display: block; width: auto; max-width: 100%; height: auto; font-family: Arial, sans-serif; }
.math-scale-note { margin-top: 6px; font-size: 14px; color: var(--text-muted); }
.coordinate-svg { display: block; max-width: none; font: 14px Arial, sans-serif; color: var(--paper-ink); }
.coordinate-axis-labels { fill: var(--paper-ink); }
.coordinate-point-label { fill: #245a94; paint-order: stroke; stroke: var(--chip); stroke-width: 3px; stroke-linejoin: round; }


.w-wrap .data-table { border-collapse: collapse; font-size: 1em; }
.w-wrap .data-table th, .w-wrap .data-table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.w-wrap .data-table th { background: var(--surface); }

/* ---------- Bar model (course units) ---------- */
.bar-model-svg { display: block; max-width: 100%; height: auto; }