/* Charts (owner: agent C, console/js/charts.js + learning.js).
 * Built on the design foundation in console.css. Chart colours are
 * --chart-1/2/3 only (CVD-validated, CLAUDE.md); do not substitute.
 *
 * Every chart colour is set HERE, by class, never as an SVG attribute, so the
 * light/dark switch is the tokens' job and forced-colours can take over.
 * The three kinds of square, and what separates them besides hue:
 *   .lc-k-pass       --chart-1, solid
 *   .lc-k-corrected  --chart-2, diagonal stripes
 *   .lc-k-below      --chart-3, dots
 * Text on a filled square is a fixed near-black: ≥5:1 on all six fills
 * (light and dark), which no themed ink manages on both.
 */

.lc-card .lc-lead { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text); margin: 0 0 var(--space-3); max-width: 75ch; }
.lc-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lc-scroll > svg { display: block; }
.lc-details { margin-top: var(--space-3); }
.lc-details > summary { cursor: pointer; }
.lc-details .table-wrap, .lc-details > table { margin-top: var(--space-2); }
.lc-axis { fill: var(--text-dim); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* --- squares (heatmap cells, stacked segments) ---------------------------- */
.lc-cell .lc-cell-bg { stroke: none; }
.lc-k-pass .lc-cell-bg { fill: var(--chart-1); }
/* Three steps of the pass hue for the first-try score (60-74 / 75-94 / 95+),
   always beside the printed number. Light: a lighter tint is less; dark: a
   dimmer one is less, so "more" is always the stronger mark. */
.lc-k-pass.lc-l1 .lc-cell-bg { fill: color-mix(in srgb, var(--chart-1) 48%, var(--surface-1)); }
.lc-k-pass.lc-l2 .lc-cell-bg { fill: color-mix(in srgb, var(--chart-1) 74%, var(--surface-1)); }
.lc-sw-pass { background: linear-gradient(90deg, color-mix(in srgb, var(--chart-1) 48%, var(--surface-1)) 0 33%,
              color-mix(in srgb, var(--chart-1) 74%, var(--surface-1)) 33% 66%, var(--chart-1) 66%) !important; }
.lc-k-corrected .lc-cell-bg { fill: var(--chart-2); }
.lc-k-below .lc-cell-bg { fill: var(--chart-3); }
.lc-k-started .lc-cell-bg, .lc-k-done .lc-cell-bg { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.lc-k-none .lc-cell-bg { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.lc-tex { fill: var(--surface-1); opacity: .5; }
.lc-cell-tex { pointer-events: none; }
.lc-cell-text { font-size: 12px; font-weight: var(--fw-bold); fill: #0b1620; font-variant-numeric: tabular-nums; pointer-events: none; }
/* In a dark theme the two dimmer steps sit near the surface: light ink there (≥4.5:1). */
:root[data-scheme="dark"] .lc-k-pass.lc-l1 .lc-cell-text, :root[data-scheme="dark"] .lc-k-pass.lc-l2 .lc-cell-text { fill: var(--text); }
.lc-k-corrected .lc-cell-text { paint-order: stroke; stroke: var(--chart-2); stroke-width: 3px; stroke-linejoin: round; }
.lc-k-below .lc-cell-text { paint-order: stroke; stroke: var(--chart-3); stroke-width: 3px; stroke-linejoin: round; }
.lc-k-started .lc-cell-text, .lc-k-done .lc-cell-text { fill: var(--text-dim); font-weight: var(--fw-semibold); }
.lc-heatmap .lc-cell:hover .lc-cell-bg { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: none; }

/* --- heatmap frame -------------------------------------------------------- */
.lc-heatmap { font-family: var(--font-sans); }
.lc-row-hit { fill: transparent; }
.lc-row-text { fill: var(--text); font-size: 13px; font-weight: var(--fw-medium); }
.lc-row-label[role="link"] { cursor: pointer; }
.lc-row-label[role="link"]:hover .lc-row-hit { fill: var(--surface-2); }
.lc-row-label[role="link"]:hover .lc-row-text { fill: var(--brand-ink); text-decoration: underline; }
.lc-row-label:focus { outline: none; }
.lc-row-label:focus-visible .lc-row-hit { fill: var(--brand-soft); stroke: var(--focus); stroke-width: 2; }
.lc-head-num { fill: var(--text); font-size: 11.5px; font-weight: var(--fw-bold); }
.lc-head-sub { fill: var(--text-dim); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* --- grid + lesson key --------------------------------------------------- */
.lc-grid-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-7); }
.lc-grid-layout > .lc-scroll { flex: 0 1 auto; width: auto; max-width: 100%; }
.lc-key { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column;
          gap: var(--space-1); padding-top: var(--space-2); }
.lc-key-h { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-dim);
            letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: var(--space-1); }
.lc-key li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0 var(--space-2); align-items: baseline;
             padding: 5px 0; border-bottom: 1px solid var(--border); }
.lc-key li:last-child { border-bottom: 0; }
.lc-key-n { font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
/* A lesson name wraps, whatever the column: it used to be cut with an ellipsis at 360px in a 1300px card (audit L7, 2026-10-16),
   and a key whose names are cut cannot be read against the grid it explains. The title attribute still carries the whole name. */
.lc-key-t { color: var(--text); font-weight: var(--fw-medium); min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.lc-key-s { grid-column: 2; font-size: var(--fs-caption); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.lc-key-s .lc-key-warn { color: var(--warn); font-weight: var(--fw-semibold); }

/* --- rings ---------------------------------------------------------------- */
.lc-ring-track { stroke: var(--surface-3); }
.lc-ring-fill { stroke: var(--chart-1); }
.lc-ring-num { fill: var(--text); font-size: 15px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.lc-ring-fig { margin: 0; display: inline-flex; align-items: center; gap: var(--space-3); }
.lc-ring-fig figcaption { display: flex; flex-direction: column; font-size: var(--fs-small); }
.lc-ring-label { font-weight: var(--fw-semibold); color: var(--text); }
.lc-ring-sub { color: var(--text-dim); }

/* --- the split bar -------------------------------------------------------- */
.lc-split { margin: 0 0 var(--space-4); }
.lc-stacked { display: block; border-radius: 6px; }
.lc-split-words { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--text-dim); margin-top: var(--space-2); }

/* --- bar lists ------------------------------------------------------------ */
.lc-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.lc-bar-row { display: grid; grid-template-columns: minmax(9rem, 16rem) minmax(80px, 1fr) minmax(7.5rem, max-content);
              align-items: center; gap: var(--space-2) var(--space-4); }
.lc-bar-label { display: flex; flex-direction: column; min-width: 0; }
.lc-bar-name { font-weight: var(--fw-semibold); color: var(--text); }
.lc-bar-sub { font-size: var(--fs-caption); color: var(--text-dim); line-height: 1.35; }
.lc-bar { display: block; width: 100%; height: 10px; }
.lc-bar-track { fill: var(--surface-3); }
.lc-bar-fill.lc-f-pass { fill: var(--chart-1); }
.lc-bar-fill.lc-f-corrected { fill: var(--chart-2); }
.lc-bar-fill.lc-f-below { fill: var(--chart-3); }
.lc-bar-none { font-size: var(--fs-caption); color: var(--text-dim); font-style: italic; }
.lc-bar-value { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text); text-align: right; white-space: nowrap; }
.lc-thin .lc-bar-value { color: var(--text-dim); font-weight: var(--fw-regular); }
.lc-framings { margin: var(--space-3) 0 var(--space-2); }

/* --- sparkline ------------------------------------------------------------ */
.lc-spark-line { stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-spark-ref { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.lc-spark-label { fill: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.lc-spark { display: block; height: auto; margin: var(--space-1) 0 var(--space-2); }
.lc-spark-dot { fill: var(--chart-1); stroke: var(--surface-1); stroke-width: 2; }
.lc-spark-dot.lc-low { fill: var(--surface-1); stroke: var(--chart-3); stroke-width: 2.2; }

/* --- legend --------------------------------------------------------------- */
.lc-legend { list-style: none; margin: var(--space-3) 0 var(--space-2); padding: 0; display: flex; flex-wrap: wrap;
             gap: var(--space-2) var(--space-4); font-size: var(--fs-small); color: var(--text-dim); }
.lc-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.lc-swatch { display: inline-block; width: 16px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.lc-sw-pass { background: var(--chart-1); }
.lc-sw-corrected { background: repeating-linear-gradient(45deg, var(--chart-2) 0 2.5px,
                   color-mix(in srgb, var(--chart-2) 50%, var(--surface-1)) 2.5px 4.2px); }
.lc-sw-below { background: radial-gradient(circle, color-mix(in srgb, var(--chart-3) 50%, var(--surface-1)) 1.2px, transparent 1.6px) 0 0 / 5px 5px,
               var(--chart-3); }
.lc-sw-started { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.lc-sw-none { box-shadow: inset 0 0 0 1px var(--border); background: transparent; outline: 1px dashed var(--border); outline-offset: -1px; }

/* --- how this student learns ---------------------------------------------- */
.lc-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; }
.lc-panel { min-width: 0; }
.lc-panel > h4, .learner-card.lc-card h4 { margin: var(--space-5) 0 var(--space-3); }
.lc-panel > h4 { margin-top: var(--space-2); }
.learner-card.lc-card > .lc-details { margin-bottom: var(--space-2); }
.lc-panel .lc-bar-row { grid-template-columns: minmax(7rem, 11rem) minmax(60px, 1fr) max-content; }
.lc-panel .lc-bar-sub { display: none; }
.lc-spark { max-width: 100%; }
.lc-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.lc-chip { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border: 1px solid var(--border);
           border-radius: var(--radius); padding: var(--space-3) var(--space-4); min-width: 0; }
.lc-chip-label { font-size: var(--fs-caption); color: var(--text-dim); font-weight: var(--fw-semibold);
                 letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.lc-chip-value { font-size: 1.05rem; font-weight: var(--fw-bold); color: var(--text); letter-spacing: -.01em; }
.lc-chip-note { font-size: var(--fs-caption); color: var(--text-dim); line-height: 1.35; }
.lc-chip.lc-muted { background: transparent; border-style: dashed; }
.lc-chip.lc-muted .lc-chip-value { color: var(--text-dim); font-weight: var(--fw-medium); font-size: var(--fs-body); }

.lc-swipe { display: none; }
@media (max-width: 720px) {
  .lc-swipe { display: block; margin: 0 0 var(--space-2); }
  .lc-two { grid-template-columns: 1fr; }
  .lc-bar-row, .lc-panel .lc-bar-row { grid-template-columns: 1fr max-content; }
  .lc-bar-row .lc-bar-label { grid-column: 1 / -1; }
  .lc-chips { grid-template-columns: 1fr 1fr; }
}

@media (forced-colors: active) {
  .lc-k-pass .lc-cell-bg, .lc-k-corrected .lc-cell-bg, .lc-k-below .lc-cell-bg { fill: Canvas; stroke: CanvasText; }
  .lc-tex { fill: CanvasText; opacity: 1; }
  .lc-cell-text { fill: CanvasText; }
  .lc-ring-fill, .lc-spark-line { stroke: Highlight; }
  .lc-bar-fill { fill: Highlight; }
}