/* Giant Entity: /facts (look-v3 section 12, Part C). A statement head; the labelled body, the
   one drawing that writes all thirteen names, each on a leader line to its piece; then the facts
   as quiet lists beside their titles. No band: the page stays on porcelain into the footer. */

.doc--statement .doc__intro { padding-bottom: var(--sp-l); }
@media (min-width: 1100px) {
  .doc--statement .doc__intro { grid-column: 1 / span 8; }
}

/* ---------- The labelled body ----------
   The names stand in two columns as tall as the drawing, one equal row per name, and each leader
   line in the drawing ends at its row's middle on the drawing's edge (src/templates/facts.mjs). */

.fig { display: grid; gap: var(--sp-m) var(--gutter); margin: 0 auto; padding-block: var(--sp-m) var(--sp-xl); }
.fig__art .dw { display: block; width: 100%; height: auto; }
.fig__leader { fill: none; stroke: var(--fg); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fig__dot { fill: var(--fg); stroke: var(--porcelain); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fig__names { list-style: none; padding: 0; margin: 0; display: grid; }
.fig__name { display: grid; align-content: center; gap: 0.15em; min-width: 0; font-variant-numeric: tabular-nums; }
.fig__name a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.2;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-link) var(--ease-out);
}
.fig__name a:hover { text-decoration-color: currentColor; }
.fig__name .legend__sq { transform: none; align-self: center; }
.fig__pillar { padding-left: calc(0.75rem + 0.55em * 1.2); font-size: var(--fs-small); color: var(--fg-muted); }

/* the name under the hand lights its leader */
@media (hover: hover) {
  .fig:has(.fig__name:hover) .fig__leader { stroke-opacity: 0.25; }
  .fig:has(.fig__name[data-piece="a"]:hover) .fig__leader[data-piece="a"],
  .fig:has(.fig__name[data-piece="b"]:hover) .fig__leader[data-piece="b"],
  .fig:has(.fig__name[data-piece="c"]:hover) .fig__leader[data-piece="c"],
  .fig:has(.fig__name[data-piece="d"]:hover) .fig__leader[data-piece="d"],
  .fig:has(.fig__name[data-piece="e"]:hover) .fig__leader[data-piece="e"],
  .fig:has(.fig__name[data-piece="f"]:hover) .fig__leader[data-piece="f"],
  .fig:has(.fig__name[data-piece="g"]:hover) .fig__leader[data-piece="g"],
  .fig:has(.fig__name[data-piece="h"]:hover) .fig__leader[data-piece="h"],
  .fig:has(.fig__name[data-piece="i"]:hover) .fig__leader[data-piece="i"],
  .fig:has(.fig__name[data-piece="j"]:hover) .fig__leader[data-piece="j"],
  .fig:has(.fig__name[data-piece="k"]:hover) .fig__leader[data-piece="k"],
  .fig:has(.fig__name[data-piece="l"]:hover) .fig__leader[data-piece="l"],
  .fig:has(.fig__name[data-piece="m"]:hover) .fig__leader[data-piece="m"] { stroke-opacity: 1; stroke-width: 2px; }
}

@media (min-width: 1100px) {
  .fig { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); align-items: stretch; }
  .fig__names { grid-row: 1; height: 100%; }
  .fig__names[data-rows="6"] { grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .fig__names[data-rows="7"] { grid-template-rows: repeat(7, minmax(0, 1fr)); }
  .fig__names--left { grid-column: 1; text-align: right; }
  .fig__names--left .fig__name { justify-items: end; }
  .fig__names--left .fig__name a { flex-direction: row-reverse; }
  .fig__names--left .fig__pillar { padding-left: 0; padding-right: calc(0.75rem + 0.55em * 1.2); }
  .fig__art { grid-column: 2; grid-row: 1; align-self: center; }
  .fig__names--right { grid-column: 3; }
}
/* Stacked: the drawing first, its leaders put away, the names as one list below it */
@media (max-width: 1099px) {
  .fig__leaders { display: none; }
  .fig__art { order: -1; }
  .fig__names { gap: var(--sp-2xs); }
  .fig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig__art { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .fig { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The facts: quiet lists ---------- */

.facts-body { padding-bottom: var(--sp-xl); }
.fact-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.fact-list > li { padding-block: var(--sp-xs); border-bottom: 1px solid var(--line); max-width: var(--measure); }
.sec--facts .sec__body > .fact-list { max-width: none; border-top: 0; }
@media (min-width: 1100px) {
  .sec--facts.sec--full:not(.sec--wide) { background: none; }

  .sec--facts .fact-list > li:first-child { padding-top: 0; }
}

@media (forced-colors: active) {
  .fig__leader { stroke: CanvasText; }
  .fig__dot { fill: CanvasText; }
}