/* The lattice figures of harmonic-triangle.md, drawn by harmonic-triangle.js. */

/* One colour per lattice direction: the first three slots of a categorical palette checked for colour-blind
   readers, stepped for each theme. Numbers stay in the text colour. */
.lattice, .lat-pair {
  --lat-x: #2a78d6;
  --lat-y: #eb6834;
  --lat-z: #1baf7a;
  margin: 1.5em 0;
}
body.quarto-dark :is(.lattice, .lat-pair) {
  --lat-x: #3987e5;
  --lat-y: #d95926;
  --lat-z: #199e70;
}

.lat-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 1.2em;
  font-size: 0.85em;
  margin-bottom: 0.3em;
}
.lat-layers { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; }
.lat-layers input { width: 8em; }
.lat-layers output { min-width: 1.5em; font-variant-numeric: tabular-nums; }
.lat-controls button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 4px;
  padding: 0.1em 0.6em;
}
.lat-toggle button + button { margin-left: -1px; }
.lat-toggle-label { margin-right: 0.5em; }
.lat-toggle button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 15%, transparent); }
.lat-legend { display: inline-flex; gap: 0.8em; margin-left: auto; }
.lat-key { display: inline-flex; align-items: center; gap: 0.3em; font-style: italic; }
.lat-swatch { display: inline-block; width: 1.4em; height: 3px; border-radius: 2px; }

.lat-stage {
  position: relative;
  height: 520px;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 6px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.lattice[data-dim="2"] .lat-stage { height: 340px; }
.lat-stage canvas { display: block; }
.lat-labels { position: absolute; inset: 0; pointer-events: none; }

.lat-label {
  pointer-events: auto;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  padding: 0 0.25em;
  border-radius: 3px;
  border: 1.5px solid transparent;
  background: var(--bs-body-bg);
  opacity: var(--lat-depth, 1);
  user-select: none;
}
.lattice.has-sel .lat-label.is-other { opacity: calc(0.45 * var(--lat-depth, 1)); }
.lat-label.is-nb { border-color: var(--lat-dir, transparent); opacity: 1; }
.lat-label.is-sel { border-color: currentColor; font-weight: 700; opacity: 1; }

.lat-eq { min-height: 3.2em; padding-top: 0.4em; font-size: 0.95em; }
.lat-at, .lat-hint { color: var(--bs-secondary-color); font-size: 0.9em; }
.lat-math { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lat-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.15; }
.lat-frac > span + span { border-top: 1px solid currentColor; padding: 0 0.15em; }
/* A term of the relation is marked by its direction's colour under it, as on the lattice. */
.lat-x, .lat-y, .lat-z { display: inline-flex; padding-bottom: 2px; border-bottom: 3px solid; }
.lat-x { border-bottom-color: var(--lat-x); }
.lat-y { border-bottom-color: var(--lat-y); }
.lat-z { border-bottom-color: var(--lat-z); }

@media (max-width: 700px) { .lattice[data-dim="3"] .lat-stage { height: 380px; } }

/* Two viewers side by side under one slider, stacked on a narrow screen. Outside the part lit up for comparing,
   the numbers are dimmed but stay in place. */
.lat-pair { margin: 1.5em 0; }
.lat-pair-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.lat-pair .lattice { margin: 0; }
.lat-pair .lat-stage { height: 380px; }
@media (max-width: 700px) { .lat-pair-body { grid-template-columns: 1fr; } .lat-pair .lat-stage { height: 340px; } }
.lat-title { font-size: 0.85em; font-weight: 600; margin-bottom: 0.3em; }
.lat-note { color: var(--bs-secondary-color); font-size: 0.95em; }
.lat-label.is-dim { opacity: 0.15; pointer-events: none; }