/* ==========================================================================
   Figures
   The drawing grammar for the essay's inline SVG figures.

   Colour   every colour is a theme token, so the theme switch re-skins
            each figure. Never write a hex value into a figure.
   Type     sizes are SVG user units. A wide figure's viewBox is 880 across,
            a text-width one 640, a phone one 360.
   Voice    Source Sans 3 names things, JetBrains Mono gives the technical detail,
            Newsreader italic is the editorial aside.
   Depth    3D blocks are drawn in a 2:1 isometric projection; each block
            has a top, a left and a right face, shaded from its hue.
   ========================================================================== */

/* ---------- Canvas ---------- */

/* A figure never shrinks its type to fit. It is drawn twice instead: once across,
   for a wide column, and once top to bottom, for a phone. The canvas measures
   itself and shows the drawing that fits. */
.figure__canvas {
  container-type: inline-size;
  width: 100%;
}

.dg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dg--tall {
  display: none;
  max-width: 26rem;
  margin-inline: auto;
}

/* a wide figure turns at 45rem; a text-width one holds on until 34rem */
@container (width < 45rem) {
  .figure--wide .dg--wide {
    display: none;
  }

  .figure--wide .dg--tall {
    display: block;
  }
}

@container (width < 34rem) {
  .dg--wide {
    display: none;
  }

  .dg--tall {
    display: block;
  }
}

/* ---------- Type ---------- */

.dg text {
  fill: var(--ink);
  font-family: var(--sans);
  font-variant-ligatures: none;
}

.dg .dg-name {
  font: 600 13px var(--sans);
  letter-spacing: -0.005em;
}

.dg .dg-sub {
  fill: var(--muted);
  font: 400 9.5px var(--mono);
}

.dg .dg-tag {
  fill: var(--muted);
  font: 500 7.5px var(--mono);
  letter-spacing: 0.1em;
}

.dg .dg-callout {
  fill: var(--ink-soft);
  font: italic 400 15.5px var(--display);
}

/* a number that is the point of its panel */
.dg .dg-bignum {
  fill: var(--accent);
  font: 400 26px var(--display);
  letter-spacing: -0.01em;
}

.dg .dg-callout--big {
  font: italic 400 21px var(--display);
}

.dg .dg-zone-title {
  fill: var(--muted);
  font: 600 9px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dg .dg-note {
  fill: var(--muted);
  font: 400 9.5px var(--mono);
}

/* what the machine emits: a label, a code, a token */
.dg .dg-lcd-label {
  fill: var(--fig-read-ink);
  font: 500 7.5px var(--mono);
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.dg .dg-lcd-value {
  fill: var(--fig-read-ink);
  font: 600 16.5px var(--mono);
  letter-spacing: 0.02em;
}

.dg .dg-tok {
  fill: var(--fig-read-ink);
  font: 500 11.5px var(--mono);
}

.dg .dg-lcd-say {
  fill: var(--ink);
  font: 400 13.5px var(--say);
}

.dg .dg-status {
  font: 500 9.5px var(--mono);
}

.dg .dg-status--fault {
  fill: var(--warm);
}

.dg .dg-status--fine {
  fill: var(--accent);
}

/* charts */
.dg .dg-cat {
  font: 400 12px var(--sans);
}

.dg .dg-cat--focal {
  font-weight: 650;
}

.dg .dg-val {
  font: 500 10.5px var(--mono);
  font-variant-numeric: tabular-nums;
}

.dg .dg-val--soft {
  fill: var(--muted);
}

.dg .dg-val--onbar {
  fill: var(--on-accent);
}

.dg .dg-tick {
  fill: var(--muted);
  font: 400 9.5px var(--mono);
  font-variant-numeric: tabular-nums;
}

.dg .dg-axis-title {
  fill: var(--muted);
  font: 600 9px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dg .dg-year {
  fill: var(--muted);
  font: 400 9.5px var(--mono);
}

/* a language name on a map or at the end of a thread */
.dg .dg-lang {
  font: 400 11px var(--sans);
}

.dg .dg-lang--focal {
  font-weight: 650;
}

/* what a person said, in whichever script */
.dg .dg-say {
  font: 400 15px var(--say);
}

/* a heading in the recipe list */
.dg .dg-recipe-key {
  fill: var(--accent);
  font: 600 9px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dg .dg-chip-key {
  fill: var(--accent);
  font: 500 9.5px var(--mono);
}

.dg .dg-badge-text {
  fill: var(--on-accent);
  font: 700 8.5px var(--sans);
}

/* ---------- Lines ---------- */

.dg .dg-edge {
  fill: none;
  stroke: var(--fig-edge);
  stroke-width: 1.1;
  marker-end: url(#dg-arrow);
}

.dg .dg-edge--plain {
  marker-end: none;
}

.dg .dg-edge--dashed {
  stroke-dasharray: 4 3;
}

.dg .dg-edge--focal {
  stroke: var(--accent-strong);
  stroke-width: 1.5;
  marker-end: url(#dg-arrow-focal);
}

.dg .dg-edge--faint {
  stroke: var(--line-strong);
  marker-end: url(#dg-arrow-faint);
}

/* hairlines: lanes, axes, gridlines */
.dg .dg-hair {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
}

.dg .dg-axis {
  stroke: var(--muted);
  stroke-width: 1;
}

.dg .dg-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

/* a span of years on a timeline */
.dg .dg-range {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}

/* a thin tap from one block into a bus */
.dg .dg-tap {
  fill: none;
  stroke: var(--fig-edge);
  stroke-width: 0.7;
  opacity: 0.8;
}

/* a bus that every tap joins */
.dg .dg-bus {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* the residual stream of a transformer block, and where sub-layers add back into it */
.dg .dg-stream {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.dg .dg-edge--thin {
  stroke-width: 1;
}

.dg .dg-join {
  fill: var(--paper-raised);
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}

.dg .dg-join-plus {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* the lines that open one block out of the stack */
.dg .dg-zoom {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 0.9;
  stroke-dasharray: 3 3;
  opacity: 0.8;
}

/* a panel about the figure's focal thing */
.dg .dg-zone--focal {
  fill: var(--fig-focal);
  fill-opacity: 0.55;
  stroke: var(--fig-focal-edge);
  stroke-width: 1;
  stroke-opacity: 0.45;
}

.dg .dg-zone-title--focal {
  fill: var(--accent);
}

/* a bracket around the layers the point is about */
.dg .dg-bracket-focal {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.4;
}

/* a quoted value, and the one the figure is about */
.dg .dg-v-num {
  fill: var(--ink);
  font-weight: 600;
}

.dg .dg-v-focal {
  fill: var(--accent);
  font-weight: 700;
}

/* the ring around the point that matters */
.dg .dg-ring {
  fill: none;
  stroke: var(--warm-strong);
  stroke-width: 1.6;
}

.dg .dg-leader {
  fill: none;
  stroke: var(--muted);
  stroke-width: 0.9;
  stroke-dasharray: 3 3;
}

.dg .dg-dot {
  fill: var(--ink);
}

/* arrowheads live in one shared sprite at the top of the page */
.dg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.dg-arrowhead {
  fill: var(--fig-edge);
}

.dg-arrowhead--fault {
  fill: var(--warm-strong);
}

.dg-arrowhead--focal {
  fill: var(--accent-strong);
}

.dg-arrowhead--faint {
  fill: var(--line-strong);
}

.dg .dg-mark {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg .dg-mark--fault {
  stroke: var(--warm-strong);
}

.dg .dg-mark--fine {
  stroke: var(--accent-strong);
}

/* ---------- Boxes ---------- */

.dg .dg-node {
  fill: var(--fig-node);
  stroke: var(--fig-node-edge);
  stroke-width: 1.1;
}

.dg .dg-node--input {
  fill: var(--fig-input);
  stroke: var(--fig-input-edge);
}

/* the focal box: one or two per figure, never more */
.dg .dg-node--focal {
  fill: var(--fig-focal);
  stroke: var(--fig-focal-edge);
  stroke-width: 1.4;
}

/* what the machine emits: a code on a teal wash */
.dg .dg-node--lcd {
  fill: var(--fig-read);
  stroke: var(--fig-read-edge);
  stroke-width: 1.1;
}

/* a box that is only implied: something hidden, or something faded */
.dg .dg-node--faint {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 4 3;
}

.dg .dg-tagbox {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.8;
}

/* a soft panel behind a group */
.dg .dg-zone {
  fill: var(--fig-zone);
  stroke: none;
}

/* one block of an encoder */
.dg .dg-cell {
  fill: var(--fig-node);
  stroke: var(--fig-node-edge);
  stroke-width: 0.8;
}

.dg .dg-cell--focal {
  fill: var(--fig-focal);
  stroke: var(--fig-focal-edge);
  stroke-width: 1.2;
}

/* a recipe chip */
.dg .dg-chip {
  fill: var(--paper-raised);
  stroke: var(--line-strong);
  stroke-width: 1;
}

/* the grid without its gate */
.dg .dg-faded {
  opacity: 0.62;
}

/* ---------- 3D blocks ---------- */

.dg .iso path {
  stroke-width: 0.6;
  stroke-linejoin: round;
  stroke-opacity: 0.55;
}

.dg .iso--teal .iso-top { fill: var(--iso-teal-top); }
.dg .iso--teal .iso-left { fill: var(--iso-teal-left); }
.dg .iso--teal .iso-right { fill: var(--iso-teal-right); }
.dg .iso--teal path { stroke: var(--iso-teal-edge); }

.dg .iso--warm .iso-top { fill: var(--iso-warm-top); }
.dg .iso--warm .iso-left { fill: var(--iso-warm-left); }
.dg .iso--warm .iso-right { fill: var(--iso-warm-right); }
.dg .iso--warm path { stroke: var(--iso-warm-edge); }

.dg .iso--gold .iso-top { fill: var(--iso-gold-top); }
.dg .iso--gold .iso-left { fill: var(--iso-gold-left); }
.dg .iso--gold .iso-right { fill: var(--iso-gold-right); }
.dg .iso--gold path { stroke: var(--iso-gold-edge); }

.dg .iso--blue .iso-top { fill: var(--iso-blue-top); }
.dg .iso--blue .iso-left { fill: var(--iso-blue-left); }
.dg .iso--blue .iso-right { fill: var(--iso-blue-right); }
.dg .iso--blue path { stroke: var(--iso-blue-edge); }

.dg .iso--ours .iso-top { fill: var(--iso-ours-top); }
.dg .iso--ours .iso-left { fill: var(--iso-ours-left); }
.dg .iso--ours .iso-right { fill: var(--iso-ours-right); }
.dg .iso--ours path { stroke: var(--iso-ours-edge); }

.dg .iso--stone .iso-top { fill: var(--iso-stone-top); }
.dg .iso--stone .iso-left { fill: var(--iso-stone-left); }
.dg .iso--stone .iso-right { fill: var(--iso-stone-right); }
.dg .iso--stone path { stroke: var(--iso-stone-edge); }

.dg .iso--ghost .iso-top { fill: var(--iso-ghost-top); }
.dg .iso--ghost .iso-left { fill: var(--iso-ghost-left); }
.dg .iso--ghost .iso-right { fill: var(--iso-ghost-right); }
.dg .iso--ghost path { stroke: var(--iso-ghost-edge); stroke-opacity: 1; }

/* the grid scored into a block's faces */
.dg .iso-grid {
  fill: none;
  stroke: var(--iso-stone-edge);
  stroke-width: 0.45;
  stroke-opacity: 0.6;
}

.dg .iso-grid--teal {
  stroke: var(--iso-teal-edge);
}

.dg .iso-grid--stone {
  stroke: var(--iso-stone-edge);
  stroke-opacity: 0.5;
}

.dg .iso-grid--gold {
  stroke: var(--iso-gold-edge);
  stroke-opacity: 0.35;
}

.dg .iso-grid--ours {
  stroke: var(--iso-ours-edge);
  stroke-opacity: 0.45;
}

/* a guide dropped from a lifted block to its slot */
.dg .iso-drop {
  fill: none;
  stroke: var(--iso-teal-edge);
  stroke-width: 0.8;
  stroke-dasharray: 2 2.5;
}

/* the slot a lifted block came out of */
.dg .iso-slot {
  fill: var(--paper);
  stroke: var(--iso-teal-edge);
  stroke-width: 0.7;
  stroke-dasharray: 2 2;
}

/* the floor a scene stands on */
.dg .iso-floor {
  fill: var(--fig-zone);
  stroke: var(--line);
  stroke-width: 0.8;
}

.dg .iso-floor-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 0.6;
}

@media (hover: hover) {
  .dg .iso-hover:hover path {
    stroke-opacity: 1;
    stroke-width: 1;
  }
}

/* ---------- Charts ---------- */

/* bars: teal for this work, ochre for the commercial systems, hollow for open
   models; rounded only at the data end */
.dg .dg-bar {
  fill: var(--gold-strong);
}

.dg .dg-bar--focal {
  fill: var(--accent-strong);
}

.dg .dg-bar--hollow {
  fill: var(--paper-raised);
  stroke: var(--stone);
  stroke-width: 1;
}

.dg .dg-bar--track {
  fill: var(--stone-tint);
}

.dg .dg-bar--fault {
  fill: var(--warm-strong);
}

.dg .dg-swatch {
  stroke-width: 1;
}

@media (hover: hover) {
  .dg .dg-row:hover .dg-bar,
  .dg .dg-row:hover [class*="dg-bar--"] {
    filter: brightness(1.08) saturate(1.1);
  }
}

/* ---------- Language families ---------- */

.dg .dg-thread {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.dg .dg-thread--ia, .dg .dg-stroke--ia { stroke: var(--fam-ia); }
.dg .dg-thread--dr, .dg .dg-stroke--dr { stroke: var(--fam-dr); }
.dg .dg-thread--tb, .dg .dg-stroke--tb { stroke: var(--fam-tb); }
.dg .dg-thread--aa, .dg .dg-stroke--aa { stroke: var(--fam-aa); }
.dg .dg-thread--en, .dg .dg-stroke--en { stroke: var(--fam-en); }

.dg .dg-fill--ia { fill: var(--fam-ia); }
.dg .dg-fill--dr { fill: var(--fam-dr); }
.dg .dg-fill--tb { fill: var(--fam-tb); }
.dg .dg-fill--aa { fill: var(--fam-aa); }
.dg .dg-fill--en { fill: var(--fam-en); }

.dg .dg-stop--ink { stop-color: var(--ink); }
.dg .dg-stop--ours { stop-color: var(--bench-ours); }
.dg .dg-stop--ia { stop-color: var(--fam-ia); }
.dg .dg-stop--dr { stop-color: var(--fam-dr); }
.dg .dg-stop--tb { stop-color: var(--fam-tb); }
.dg .dg-stop--aa { stop-color: var(--fam-aa); }
.dg .dg-stop--en { stop-color: var(--fam-en); }

/* ---------- Sound ---------- */

.dg .dg-wave {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg .dg-wavebar {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.dg .dg-wavebar--faint {
  stroke: var(--line-strong);
}

/* a code-mixed voice: each stretch of the wave in its family's colour */
.dg .dg-wavebar.dg-stroke--ia { stroke: var(--fam-ia); }
.dg .dg-wavebar.dg-stroke--dr { stroke: var(--fam-dr); }
.dg .dg-wavebar.dg-stroke--tb { stroke: var(--fam-tb); }
.dg .dg-wavebar.dg-stroke--aa { stroke: var(--fam-aa); }
.dg .dg-wavebar.dg-stroke--en { stroke: var(--fam-en); }

/* ---------- Maps ---------- */

/* the globe's outline */
.dg .dg-sphere {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

/* land only: coastlines, no borders */
.dg .dg-land {
  fill: var(--fig-land);
  stroke: var(--line-strong);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

.dg .dg-place {
  fill: var(--paper-raised);
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.dg .dg-place--focal {
  fill: var(--accent-strong);
  stroke: var(--paper);
  stroke-width: 1.2;
}

/* a confusion, drawn from the true language toward the label it received;
   its width is the error rate */
.dg .dg-flow {
  fill: none;
  stroke: var(--warm-strong);
  stroke-linecap: round;
  marker-end: url(#dg-arrow-flow);
}

.dg .dg-cluster {
  fill: var(--accent-wash);
  stroke: var(--accent-strong);
  stroke-width: 1.2;
}

.dg .dg-cluster--focal {
  fill: var(--warm-tint);
  stroke: var(--warm-strong);
  stroke-width: 2.2;
}

.dg .dg-badge {
  fill: var(--accent);
  stroke: var(--paper);
  stroke-width: 1.5;
}

/* the line that joins the two ends of a dumbbell */
.dg .dg-dumbbell {
  stroke: var(--ink);
  stroke-width: 1.2;
  opacity: 0.5;
}

/* ---------- The numbers behind a chart ---------- */

.figure__data {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.figure__data summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted);
  font: 600 0.6875rem var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.figure__data summary:hover {
  color: var(--ink);
}

.figure__data .table-wrap {
  margin: 0.75rem 0 0;
}

.figure__data .table {
  font-size: 0.8125rem;
}

.figure__data .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Switches under a figure: segmented buttons ---------- */

.figure__switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  border: 0;
}

.figure__switch-title {
  margin-right: 0.25rem;
  color: var(--muted);
  font: 600 0.6875rem var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.switch-key {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.switch-key input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-key span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: 500 0.8125rem var(--sans);
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.switch-key:hover span {
  border-color: var(--accent-soft);
  color: var(--ink);
}

.switch-key input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.switch-key input[value="wrong"]:checked + span {
  border-color: var(--warm);
  background: var(--warm);
  color: var(--on-accent);
}

.switch-key input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* the switch needs :has() to reach the drawing; without it the figure stays on its default frame */
@supports not selector(:has(*)) {
  .figure__switch {
    display: none;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .dg .dg-node,
  .dg .dg-edge,
  .dg .dg-sub {
    transition: fill 0.3s ease, stroke 0.3s ease;
  }
}

/* ==========================================================================
   Figure 1: the gate
   The default frame is the wrong label, because that is the figure's point
   and it is what print, no-script and old browsers will show.
   ========================================================================== */

#fig-f1 .when-right {
  display: none;
}

#fig-f1 .f1-branch .dg-node {
  fill: var(--fig-fault);
  stroke: var(--fig-fault-edge);
}

#fig-f1 .f1-branch .dg-sub {
  fill: var(--warm);
}

#fig-f1 .f1-fan .dg-edge {
  stroke: var(--warm-strong);
  marker-end: url(#dg-arrow-fault);
}

#fig-f1:has(input[value="right"]:checked) .when-wrong {
  display: none;
}

#fig-f1:has(input[value="right"]:checked) .when-right {
  display: inline;
}

#fig-f1:has(input[value="right"]:checked) .f1-branch .dg-node {
  fill: var(--fig-focal);
  stroke: var(--fig-focal-edge);
}

#fig-f1:has(input[value="right"]:checked) .f1-branch .dg-sub {
  fill: var(--accent);
}

#fig-f1:has(input[value="right"]:checked) .f1-fan .dg-edge {
  stroke: var(--accent-strong);
  marker-end: url(#dg-arrow-focal);
}

/* ==========================================================================
   Figure 7b: what the wrong token does, word by word
   Three cases under one switch; the Hindi case is the default frame.
   The transcripts are HTML inside <foreignObject>, so they wrap and run
   right-to-left where the script does.
   ========================================================================== */

.dg .dg-fo {
  overflow: visible;
}

/* a transcript fills its own box: the essay's reading width does not apply here */
.dg-words {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.6 var(--say);
  text-wrap: pretty;
}

.dg-words[dir="rtl"] {
  text-align: right;
}

.dg-words .w--bad {
  color: var(--word-bad);
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dg-words .w--err {
  color: var(--word-err);
}

.dg-words .w--fine {
  color: var(--word-fine);
}

/* the claim a figure makes, set at its top */
.dg .dg-callout--thesis {
  fill: var(--ink);
  font: italic 400 16.5px var(--display);
}

.dg .dg-knot {
  fill: var(--warm-strong);
}

/* a word said in the status line, in its own script */
.dg .dg-status-say {
  font-family: var(--say);
  font-size: 11px;
}

/* a big number */
.dg .dg-val--big {
  font-size: 13px;
  font-weight: 700;
}

/* a word error rate on a shared scale */
.dg .dg-scale-track {
  fill: var(--stone-tint);
}

.dg .dg-scale-bar {
  fill: var(--accent-strong);
}

.dg .dg-scale-bar--fault {
  fill: var(--word-bad);
}

.dg .dg-scale-zero {
  fill: var(--accent-strong);
}

.dg .dg-scale-mark {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
}

.dg .dg-key--bad {
  fill: var(--word-bad);
}

.dg .dg-key--err {
  fill: var(--word-err);
}

.dg .dg-key--fine {
  fill: var(--word-fine);
}

/* a score inside a line of notes */
.dg .dg-sub-val {
  font-weight: 700;
}

.dg .dg-sub-val--fault {
  fill: var(--word-bad);
}

.dg .dg-sub-val--fine {
  fill: var(--word-fine);
}

/* a word error rate in its three parts, in the colours of the words in Figure 7b */
.dg .dg-seg--ins {
  fill: var(--word-bad);
}

.dg .dg-seg--sub {
  fill: var(--word-err);
}

.dg .dg-seg--del {
  fill: var(--stone);
}

.dg .dg-line-100 {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}

.dg .dg-note--ink {
  fill: var(--ink);
}

/* paper behind a number, so a line can pass behind it */
.dg .dg-label-bg {
  fill: var(--paper);
}

/* a scatter of languages (Figure 9): marks ringed in paper, names on a patch
   of paper so gridlines and diagonals pass behind them */
.dg .dg-pt {
  stroke: var(--paper);
  stroke-width: 1.5;
}

.dg .dg-pt--hollow {
  fill: var(--paper);
  stroke: var(--fam-en);
  stroke-width: 1.8;
}

.dg .dg-pt-label {
  fill: var(--ink-soft);
  font: 400 12px var(--sans);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.dg--tall .dg-pt-label {
  font-size: 11px;
}

.dg .dg-pt-label--en {
  fill: var(--muted);
}

.dg .dg-diag {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.dg .dg-tick--diag {
  fill: var(--faint);
}

/* where a language has too little audio */
.dg .dg-band {
  fill: var(--warm-tint);
}

.dg .dg-band-label {
  fill: var(--warm);
  font: 500 9.5px var(--mono);
}

#fig-f7b .f7b-case {
  display: none;
}

#fig-f7b .f7b-case--hi {
  display: inline;
}

#fig-f7b:has(input[value="ur"]:checked) .f7b-case--hi,
#fig-f7b:has(input[value="mai"]:checked) .f7b-case--hi {
  display: none;
}

#fig-f7b:has(input[value="ur"]:checked) .f7b-case--ur,
#fig-f7b:has(input[value="mai"]:checked) .f7b-case--mai {
  display: inline;
}

/* ---------- Per-figure accents ---------- */

/* the token tax: the Indian languages pay it, in orange */
#fig-f12 .dg-bar--focal {
  fill: var(--warm-strong);
}

/* how many times more audio than transcripts */
#fig-f9 .dg-status--fine {
  fill: var(--warm);
  font-weight: 600;
}

/* ---------- Print ---------- */

@media print {
  .figure__switch {
    display: none;
  }
}

/* every `font` shorthand above turns ligatures back on; in a figure, code shows its characters */
.dg text[class],
.dg tspan[class] {
  font-variant-ligatures: none;
}