/* The interpretability article (interpretability.html): the chart and animation cards of interp-charts.js. The design
   tokens come from main.css and motion.css; the series colours the canvases read are set here, once per theme. */

:root {
  --ip-surface: #0f1220;
  --ip-a: #4dabf7;
  --ip-b: #69db7c;
  --ip-c: #ff922b;
  --ip-d: #f06595;
  --ip-e: #9775fa;
  --ip-f: #22d3ee;
  --ip-g: #fcc419;
  --ip-h: #94d82d;
  --ip-i: #e599f7;
  --ip-j: #ff8787;
  --ip-k: #63e6be;
  --ip-median: #ff922b;
  --ip-embedding: #b197fc;
  --ip-crimson: #f06595;
  --ip-anchor-a: #51cf66;
  --ip-anchor-b: #c77dff;
  --ip-heat-lo: #1a1d33;
  --ip-heat-hi: #34d399;
}

:root[data-theme="light"] {
  --ip-surface: #ffffff;
  --ip-a: #1c7ed6;
  --ip-b: #2f9e44;
  --ip-c: #e8590c;
  --ip-d: #d6336c;
  --ip-e: #7048e8;
  --ip-f: #0c8599;
  --ip-g: #e0a800;
  --ip-h: #66a80f;
  --ip-i: #ae3ec9;
  --ip-j: #c92a2a;
  --ip-k: #087f5b;
  --ip-median: #e8590c;
  --ip-embedding: #9775fa;
  --ip-crimson: #c2255c;
  --ip-anchor-a: #2f9e44;
  --ip-anchor-b: #862e9c;
  --ip-heat-lo: #eef1f7;
  --ip-heat-hi: #047857;
}

.ip-card {
  background: var(--ip-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  box-shadow: 0 20px 50px -30px var(--shadow);
}
.ip-canvas { display: block; width: 100%; aspect-ratio: 2 / 1; touch-action: pan-y; }
.ip-canvas.square { aspect-ratio: 1.15 / 1; }
.ip-canvas.sphere { aspect-ratio: 2.4 / 1; }
.ip-canvas.bars { aspect-ratio: 2.6 / 1; }
.ip-canvas.heat { aspect-ratio: 1.45 / 1; }
.ip-canvas.slim { aspect-ratio: 3.6 / 1; }
@media (max-width: 700px) {
  .ip-canvas { aspect-ratio: 1.25 / 1; }
  .ip-canvas.sphere { aspect-ratio: 0.9 / 1; }
  .ip-canvas.bars { aspect-ratio: 1.1 / 1; }
  .ip-canvas.slim { aspect-ratio: 1.6 / 1; }
  .ip-canvas.square, .ip-canvas.heat { aspect-ratio: 1 / 1; }
}

.ip-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.ip-controls.top { margin: 0 0 12px; }
.ip-controls .segmented { width: auto; flex-wrap: wrap; }
.ip-controls .segmented button { white-space: nowrap; flex: 0 0 auto; }
.ip-controls .chip { padding: 6px 12px; font-size: 0.8rem; }
.ip-controls .grow { flex: 1 1 160px; min-width: 140px; }
.ip-controls input[type="range"] { width: 100%; }
.ip-controls .play { flex: 0 0 auto; }
.segmented button[aria-pressed="true"] { background: var(--accent-deep); color: #fff; }
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chips .chip { padding: 4px 10px; font-size: 0.76rem; display: inline-flex; align-items: center; gap: 6px; }
.ip-chips .chip i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ip-chips .chip:not(.active) i { opacity: 0.35; }

.ip-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 14px; align-items: center; }
.ip-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .ip-row, .ip-two { grid-template-columns: 1fr; } }

.ip-readout { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.ip-readout .value { font-size: 2.2rem; font-weight: 850; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.ip-readout .value.small { font-size: 1.5rem; }
.ip-readout .label { color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.ip-readouts { display: flex; flex-direction: column; gap: 10px; }
.ip-readouts.row { flex-direction: row; }
.ip-readouts.row .ip-readout { flex: 1; padding: 10px 12px; }
.ip-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: center; }
@media (max-width: 760px) { .ip-split { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .ip-readouts { flex-direction: row; } .ip-readouts .ip-readout { flex: 1; } }

.ip-stats { margin: 26px 0 8px; gap: 14px; }
.ip-stats .stat { padding: 18px; }
.ip-stats .stat .value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ip-stats .stat .label { font-size: 0.84rem; }
@media (max-width: 520px) { .ip-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a grid of field canvases (the morphs, the extrapolation, the directions) */
.ip-fields { display: grid; gap: 10px; }
.ip-fields.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ip-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .ip-fields.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ip-field { position: relative; }
.ip-field canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; }
.ip-field .tag { position: absolute; left: 8px; top: 8px; font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--tag-bg); color: var(--tag-text); }
.ip-field .tag.right { left: auto; right: 8px; top: auto; bottom: 8px; font-family: var(--mono); }
.ip-field .cap { display: block; text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 5px; }

.ip-dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .ip-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ip-ruler { display: block; width: 100%; height: 54px; margin-top: 8px; }

.ip-big { font-family: var(--mono); font-weight: 700; color: var(--yellow); font-size: 1.25rem; min-width: 7.5em; font-variant-numeric: tabular-nums; }

/* the charts without fields stay compact */
.ip-canvas.compact { aspect-ratio: 2.1 / 1; }
.ip-canvas.tsne { aspect-ratio: 1.55 / 1; }
.ip-canvas.tsne-sq { aspect-ratio: 1.6 / 1; }
@media (max-width: 700px) { .ip-canvas.compact { aspect-ratio: 1.4 / 1; } .ip-canvas.tsne { aspect-ratio: 1 / 1.05; } }
.ip-card-title { margin: 0 0 8px; font-weight: 700; color: var(--text-soft); }
.ip-readout.compact { padding: 10px 12px; margin-top: 10px; }
.ip-readout.compact .value { font-size: 1.6rem; }
.ip-fam { align-items: start; }
.ip-fam .ip-canvas.heat { aspect-ratio: 1.35 / 1; }

/* the latent atoms: the mosaic of the 128 atoms across the card, and under it the two atoms of the dimension pointed at,
   +e_i and -e_i side by side with the dimension between them */
.ip-atoms { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ip-atom-grid canvas { display: block; width: 100%; cursor: pointer; touch-action: pan-y; }
.ip-atom-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "plus name minus";
  gap: 14px; align-items: center; width: 100%; max-width: 480px; margin: 0 auto; }
.ip-atom-pair > .ip-field:nth-child(1) { grid-area: plus; }
.ip-atom-pair > .ip-field:nth-child(2) { grid-area: minus; }
.ip-atom-pair .tag { font-family: var(--serif, inherit); }
.ip-atom-name { grid-area: name; text-align: center; color: var(--muted); font-size: 0.86rem; }
.ip-atom-name b { display: block; color: var(--yellow); font-family: var(--mono); font-size: 1.3rem; }

/* the great circle between two atoms: five atoms to pick from, the field at tau and a strip of the path */
.ip-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.ip-pick-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 6px; width: 84px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ip-pick-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.ip-pick-btn canvas { width: 62px; height: 62px; display: block; }
.ip-pick-btn .lab { font-size: 0.82rem; }
.ip-pick-btn .role { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; font-weight: 800; font-size: 0.76rem; color: #fff; }
.ip-pick-btn.on { border-width: 2px; }
.ip-pick-btn[data-role="A"] { border-color: var(--ip-anchor-a); }
.ip-pick-btn[data-role="B"] { border-color: var(--ip-anchor-b); }
.ip-pick-btn[data-role="A"] .role { display: grid; background: var(--ip-anchor-a); }
.ip-pick-btn[data-role="B"] .role { display: grid; background: var(--ip-anchor-b); }
.ip-circle { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; align-items: center; }
.ip-film { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ip-film canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 50%; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.2s; }
.ip-film canvas.now { outline-color: var(--yellow); }
@media (max-width: 700px) { .ip-circle { grid-template-columns: 1fr; } .ip-circle-main { max-width: 260px; margin: 0 auto; width: 100%; } }

/* the walk and the flips: two fields side by side, not wider than a comfortable size */
.ip-pair { max-width: 520px; margin: 14px auto 0; }
.ip-walk-dims, .ip-flip-sets { margin-top: 2px; }
.ip-flip-dims { text-align: center; margin: 10px 0 0; }
.ip-flip-dims b { font-family: var(--mono); color: var(--text); }

/* the t-SNE maps: the legend, and the floating card of the function under the pointer */
.ip-tsne { position: relative; }
.ip-tsne canvas { cursor: crosshair; }
.ip-tip {
  position: absolute; display: none; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 12px; pointer-events: none;
  background: var(--handle-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: 0 12px 30px -16px var(--shadow);
  font-size: 0.8rem; color: var(--text-soft); z-index: 3; max-width: 240px;
}
.ip-tip canvas { width: 64px; height: 64px; display: block; border-radius: 8px; flex: 0 0 auto; }
.ip-tip b { color: var(--text); }
.ip-legend { margin-bottom: 10px; }
.ip-legend-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 6px; }
.ip-legend-head .note { margin: 0; font-weight: 700; color: var(--text-soft); }
.ip-legend .chip { opacity: 0.55; }
.ip-legend .chip.active { opacity: 1; }
.ip-legend .chip .mk { display: inline-flex; color: var(--text-soft); }
.linkish { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 0.8rem; }
.linkish:hover { text-decoration: underline; }

/* a chart at two thirds of the text width, centred (the distances figure) */
.article figure.ip-narrow { max-width: min(67%, 100%); margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .article figure.ip-narrow { max-width: 100%; } }
/* above a chart: its legend on the left and its readout, one line high, on the right */
.ip-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; margin-bottom: 6px; }
@media (max-width: 700px) { .ip-chart-head { flex-wrap: wrap; } .ip-readout.inline { flex-basis: 100%; max-width: none; } }
.ip-chart-head .legend { margin: 0; gap: 4px 12px; font-size: 0.76rem; flex: 1 1 200px; }
.legend i.box { width: 14px; height: 9px; border-radius: 3px; }
.legend i.dash.plain { background: repeating-linear-gradient(90deg, var(--muted) 0 5px, transparent 5px 9px); }
.ip-readout.inline { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; flex: 0 1 250px; max-width: 250px; }
.ip-readout.inline .value { font-size: 1.5rem; margin: 0; }
.ip-readout.inline .label { font-size: 0.76rem; }

/* the evolution viewer: the dataset and the mode above, the anchor steps in a row under them */
.ip-evolve-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.ip-evolve-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.ip-evolve-steps .label { color: var(--muted); font-size: 0.82rem; margin-right: 4px; }
.ip-evolve-steps .chip.active { border-color: var(--accent); color: var(--text); }
.ip-evolve-sets button:disabled { opacity: 0.35; cursor: not-allowed; }
.ip-evolve-legend { margin: 10px 0 2px; gap: 6px 14px; font-size: 0.78rem; }
.ip-evolve-chart { aspect-ratio: 1.9 / 1; }
.ip-evolve-note { font-size: 0.8rem; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }

/* the slice of the hypersphere spanned by e_1, e_2, e_3: the sphere and, beside it, the field of the chosen point */
.ip-globe3 { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: center; }
.ip-globe3-stage canvas { display: block; width: 100%; aspect-ratio: 1.25 / 1; cursor: grab; touch-action: none; }
.ip-globe3-stage canvas:active { cursor: grabbing; }
.ip-globe3-side { display: grid; gap: 10px; }
.ip-globe3-coords { display: flex; justify-content: space-between; gap: 8px; font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ip-globe3-coords b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.ip-globe3-side .note { margin: 0; font-size: 0.8rem; color: var(--muted); }
.ip-globe3-legend { margin-top: 12px; gap: 6px 16px; font-size: 0.8rem; }
.legend i.dot.ring { background: var(--ip-anchor-b); box-shadow: 0 0 0 1.5px var(--text); }
@media (max-width: 700px) { .ip-globe3 { grid-template-columns: 1fr; } .ip-globe3-side { grid-template-columns: 140px 1fr; align-items: center; } .ip-globe3-side .ip-field { grid-row: span 2; } .ip-globe3-coords { flex-direction: column; } }