/* Styles used only by the threshold page. */

/* the three panels of the assessment gap: side by side where there is
   room, stacked on a phone */
.page-threshold .gapgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.4rem 2rem;
  align-items: start;
}
.page-threshold .gappanel { min-width: 0; transition: opacity .35s ease; }
.page-threshold .gappanel .figure svg { max-width: 30rem; }
.page-threshold .ptitle {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .45rem;
}
.page-threshold .fine {
  font-size: .74rem;
  color: var(--muted);
  margin: .6rem 0 0;
  max-width: 34rem;
}
.page-threshold .sidecard .grad { font-size: .8rem; margin: .7rem 0 0; }

/* the side tables: headers may wrap, the storm on the figure is set in ink */
.page-threshold .dtable thead th { white-space: normal; vertical-align: bottom; }
.page-threshold .dtable .sel { color: var(--ink); font-weight: 600; }
.page-threshold .dtable td { transition: opacity .35s ease; }
.page-threshold .legend .item { cursor: default; }
.page-threshold .legend svg { flex: 0 0 auto; }