/* /mapdesk: boring UX is good actually. The reading layout, the chrome, the
   notes, the figures and the section dots come from /lib/article/article.css.
   What is this page's own: a wider margin for a note-heavy piece and room
   under the text for the last note, the photographs' size on a phone, the
   table's no-script picture, the drawings' words held at the meta size and
   the few line styles the lib's svg classes don't have, the isotype rows,
   and the before/after panels. Colours, type scale and spacing tokens come
   from /style.css; nothing here sets a font-size outside that scale and
   nothing adds a colour. */

/* ---------- the margin ---------- */
/* Seven of the eighteen notes cite one section; at the lib's margin width
   they run far below their numbers. On a wide screen this page gives the
   margin what the measure has spare beside the column (64ch of the body
   size, about 41.75rem) less the language toggle's corner, up to 21rem; at
   the narrow end of wide it stays the lib's width. */

@media (min-width: 1100px) {
  :root {
    --note-w: clamp(16.5rem, calc(min(100vw, var(--measure)) - 2 * var(--edge) - 41.75rem - var(--note-gap) - 2.5rem), 21rem);
  }

  /* The last note hangs below the last line. The lib then lengthens the
     article with a min-height, measures it again with that min-height in,
     finds nothing hangs any more, takes it away, and starts over: the page
     changes length every frame. Room under the text for the hanging note,
     so the lib never has to add any. */
  .essay { padding-bottom: 9rem; }

  /* A margin figure that follows a note is placed under where that note
     stands, read back from the page. The lib rounds a note's place to a
     whole pixel; when it rounds down, the figure reads as starting above its
     note, sorts in first and pushes the note down, and on the next pass the
     other way round. Drawn a pixel lower, a placed note always reads as
     starting above the figure that follows it. */
  .essay.is-placed .note { transform: translateY(1px); }
}

/* ---------- the photographs ---------- */
/* In the margin on a wide screen; in the column on a phone, where they keep
   about the margin's size instead of filling the width */

@media (max-width: 1099px) {
  .fig--margin > img { max-width: min(100%, 20rem); }
}

/* the table's no-script picture: a drawing, not a photograph, so no frame */
#fig-table img {
  border: 0;
  background: none;
}

/* ---------- the drawings ---------- */

/* An svg scales with its viewBox, and so would its words. The renderer
   measures the scale (--svg-scale: viewBox width over rendered width) and
   this cancels it, so the words stand at the meta size on the page at every
   width, like the caption under them. */
.fig .fig__svg text { font-size: calc(var(--t-meta) * var(--svg-scale, 1)); }

/* the ink as a fill: the people who made it, the pixels a line covers */
.fig .fig__svg .solid { fill: var(--ink); }

/* a hairline, and the pixel grid: thinner and lighter than the ink */
.fig .fig__svg .thin,
.fig .fig__svg .grid {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.75;
  stroke-linecap: round;
}

.fig .fig__svg .grid { stroke: var(--ink-muted); }

/* the lines of a text where it is filled in with ink */
.fig .fig__svg .paperline {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* a title line, a rule in large type; a ring that has warmed up */
.fig .fig__svg .bold { stroke-width: 3; }
.fig .fig__svg .thick { stroke-width: 4; }

/* ---------- the isotype rows ---------- */
/* One row per share: the label, then the marks at a fixed size (a person is
   the same size in every chart, so two rows compare). On a phone the label
   goes above its row. */

.iso {
  display: grid;
  gap: 0.9rem;
}

.iso__row {
  display: grid;
  grid-template-columns: 12rem auto;
  column-gap: 1.25rem;
  align-items: center;
  justify-content: start;
}

.iso__label {
  font-size: var(--t-meta);
  line-height: 1.35;
  color: var(--ink-muted);
}

.fig .iso__marks {
  width: calc(var(--w) * var(--iso-u, 1px));
  height: calc(var(--h) * var(--iso-u, 1px));
}

/* at this size the lib's dash would leave a head two dashes */
.iso .ghost { stroke-dasharray: 3 2.5; }

/* a little larger where the column is wide */
@media (min-width: 721px) {
  .iso { --iso-u: 1.2px; }
}

@media (max-width: 720px) {
  .iso { gap: 1.1rem; }

  .iso__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.35rem;
  }
}

/* ---------- before and after ---------- */
/* the lib's pair, with the word above each panel; in the margin always
   one above the other */

.fig--margin .fig__pair { grid-template-columns: minmax(0, 1fr); }
.fig__pair--ui { row-gap: 1.25rem; }