/* ==========================================================================
   COMPONENTS · FIGURE — the engraved statistical plate. Any data figure (the
   map, a chart) is framed like a plate in an old atlas: a hairline frame with a
   faint inner keyline, a mono "Fig. n" number, and a grotesque caption. The
   figure is a printed object, not a UI widget.
   ========================================================================== */

.op-figure {
  margin: 0;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}

/* The plate: the framed field, with a faint inner keyline (double rule) */
.op-figure__plate {
  position: relative;
  padding: var(--space-md);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.op-figure__plate::after {
  content: "";
  position: absolute;
  inset: var(--space-2xs);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* The caption shelf, divided by a hairline */
.op-figure__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--rule);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.op-figure__number {
  font-family: var(--font-data);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  flex: none;
}
.op-figure__title {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.op-figure__title em { font-style: italic; color: var(--text); }

/* A legend slot sitting in the caption shelf */
.op-figure__legend { margin-left: auto; }

@media (max-width: 40rem) {
  .op-figure__legend { margin-left: 0; flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   INSET — the compact plate for a narrow sidebar (the hub's hero column).
   Narrower than the full-bleed plate, with a tighter caption and a legend that
   wraps under the title rather than floating to the right. Leaves the hero
   figure above untouched.
   -------------------------------------------------------------------------- */
.op-figure--inset {
  max-inline-size: 22rem;
}
.op-figure--inset .op-figure__plate {
  padding: var(--space-sm);
}
.op-figure--inset .op-figure__caption {
  padding: var(--space-2xs) var(--space-sm);
  gap: var(--space-2xs);
}
.op-figure--inset .op-figure__title {
  font-size: var(--text-2xs);
}
/* In the narrow column the key drops below the title instead of floating right. */
.op-figure--inset .op-figure__legend {
  margin-left: 0;
  flex-basis: 100%;
}
.op-figure--inset .op-ink-key {
  gap: var(--space-2xs) var(--space-sm);
}