/* Land Cover dataset figures ({{< lc-figure map >}}, {{< lc-figure classes >}}).
   The SVGs are generated by make_lc_figures.py, which owns the geometry, the
   text and the binning; this file owns colour, type and size. Lengths in px
   are SVG user units: both figures are 1000 wide. */

.reveal .lc-figure {
  /* Palette: ink, paper, fonts and the accent (--accent: teal, or the CNG
     theme's yellow) come from the theme. The accent is the chips on the map,
     as on the grid-alignment and extraction figures; the bars wear the
     dataset's own class colours. */
  --lc-ink: var(--r-main-color, #F2F4F6);
  --lc-paper: var(--r-background-color, #1D232B);
  --lc-chip: var(--accent, #2DD4BF);
}

/* Sized to stack two of them in one column of .two-col */
.reveal .lc-figure svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.reveal .lc-figure + .lc-figure {
  margin-top: 1.2rem;
}

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

.reveal .lc-figure text {
  fill: var(--lc-ink);
  font-family: var(--r-main-font, system-ui, sans-serif);
  font-size: 26px;
}

.reveal .lc-figure .mono {
  font-family: var(--r-code-font, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.reveal .lc-figure .heading {
  font-size: 22px;
  letter-spacing: 0.08em;
  fill-opacity: 0.6;
}

.reveal .lc-figure .caption {
  font-size: 22px;
  fill-opacity: 0.6;
}

.reveal .lc-figure .caption .mono { fill-opacity: 1; }

.reveal .lc-figure .note { fill-opacity: 0.7; }

/* ---- Map -------------------------------------------------------------- */

.reveal .lc-figure .land {
  fill: var(--lc-ink);
  fill-opacity: 0.18;
  stroke: none;
}

/* A hairline of paper around each dot keeps neighbours apart */
.reveal .lc-figure .chips circle {
  fill: var(--lc-chip);
  fill-opacity: 0.92;
  stroke: var(--lc-paper);
  stroke-width: 1.2;
}

/* ---- Bar chart -------------------------------------------------------- */

.reveal .lc-figure .baseline {
  stroke: var(--lc-ink);
  stroke-opacity: 0.35;
  stroke-width: 1;
}

/* Each bar's fill is its class's colour in the dataset, set on the bar by
   the generator; nothing here overrides it */
.reveal .lc-figure .bar {
  stroke: none;
}

.reveal .lc-figure .name {
  text-anchor: end;
  dominant-baseline: central;
}

.reveal .lc-figure .value {
  dominant-baseline: central;
  font-weight: 700;
}