/* =============================================================================
   Data Physicalization: what page.css and engage.css do not already do.
   ========================================================================== */


/* the colour key for the map, as the swatches the board actually used */
.dp .dp-swatches { list-style: none; padding-left: 0; }
.dp .dp-swatches li { display: flex; align-items: baseline; gap: .6em; margin: .35em 0; }
.dp .dp-sw {
  flex: none; width: .9em; height: .9em; border-radius: 3px;
  transform: translateY(.1em); border: 1px solid rgba(0, 0, 0, .15);
}
.dp .dp-sw--green { background: #2f6b2f; }
.dp .dp-sw--mid   { background: linear-gradient(90deg, #b9d46a, #e7d98a); }
.dp .dp-sw--brown { background: #7a4f2a; }
.engage.dp .card .dp-swatches { margin: 0 0 .85rem; }

/* on a phone the data-to-element table stacks, one data type per block,
   so the Representation column is not hidden behind a sideways scroll */
@media (max-width: 34rem) {
  table.dp-map thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.dp-map tr { display: block; padding: var(--sp-3) var(--sp-4); }
  table.dp-map tbody tr + tr { border-top: 1px solid var(--gray-200); }
  table.dp-map td { display: block; padding: 0; }
  table.dp-map td:nth-child(2) { margin: .15rem 0 .35rem; font-size: var(--text-xs); color: var(--gray-500); }
}

/* -- labels that are headings here (the page keeps its h3/h4 outline) -- */
.engage.dp .lede-c h3.eyebrow { margin: 0 0 .65rem; font-family: inherit; font-size: .875rem; line-height: 1.3; color: var(--leaf); }
.engage.dp h4.chap__eyebrow { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.3; color: var(--pl); }
.engage.dp .chap__end h4.chap__eyebrow { margin: 0; }
.engage.dp .end h3.end__label { margin: 0 0 .75rem; font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--pl); }
.engage.dp .blk h3.blk__h, .engage.dp .ev h3.ev__title { font-family: inherit; }
.engage.dp .blk h3.blk__h .sec__no, .engage.dp .ev__title .sec__no,
.engage.dp .lede-c .sec__no, .engage.dp .end__label .sec__no { color: var(--ink-3); font-weight: 500; }

/* -- the students' figure captions stay on the page, set small and soft -- */
.engage.dp .fig figcaption { margin: .6rem .25rem 0; padding: 0; border: 0; font-size: .8125rem; line-height: 1.5; color: var(--ink-3); }
.engage.dp .fig figcaption b { color: var(--ink-2); }
.engage.dp .ev > .fig, .engage.dp .dp-split > .fig { margin: 0; }
.engage.dp .ev > .fig img, .engage.dp .dp-split > .fig img { border: 0; border-radius: 18px; }
@media (min-width: 62rem) {
  .engage.dp .ev > .fig, .engage.dp .dp-split > .fig { position: sticky; top: calc(var(--nav-h) + 5.5rem); }
}

/* -- inside a card: the account on the left, its picture on the right -- */
.dp-split { display: grid; gap: 1.25rem 2.25rem; align-items: start; margin: var(--sp-4) 0 0; }
@media (min-width: 62rem) { .dp-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.engage.dp .dp-split .tablewrap { margin: 1rem 0; }
.engage.dp .card__name + .card__cols { margin-top: var(--sp-4); }

/* -- the survey: text beside the knowledge chart; the wide charts on top -- */
.dp-kap__grid { display: grid; gap: 1.25rem 2rem; align-items: center; }
@media (min-width: 62rem) { .dp-kap__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.engage.dp .dp-kap__grid .chartbox { margin: 0; }
.engage.dp .dp-kap > .chartbox { margin: 0 0 1.25rem; }
.engage.dp .dp-kap .card__cols { margin-top: 0; }
.engage.dp .dp-kap .card__cols p { font-size: .96875rem; line-height: 1.65; color: var(--ink-2); }
.engage.dp .dp-kap .chartbox .charts--1 { max-width: 46rem; }
.engage.dp .dp-kap .findings { margin: .5rem 0 1rem; }
@media (min-width: 52rem) { .engage.dp .dp-kap .findings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* -- the researchers' four steps, white cards in the grey card -- */
.engage.dp .card .voices { margin-top: 1.25rem; }
@media (min-width: 52rem) and (max-width: 75rem) { .engage.dp .voices--4 { grid-template-columns: 1fr 1fr; } }

/* -- the chapter close carries its feedback table -- */
.engage.dp .chap__end .tablewrap { margin: 1.5rem 0 0; }

/* -- the closing line under the conclusion cards -- */
.engage.dp #conclusion > p { margin: var(--sp-5) 0 0; color: var(--ink-2); }

/* -- card names at the IHP card size (the generic .card h4 rule is smaller) -- */
.dp .dp-swatches li b { flex: none; }
.engage.dp .card__name + p { margin-top: .9rem; }
.engage.dp .concl__card:first-child p { max-width: 74ch; }
@media (max-width: 40rem) {
  .engage.dp .chap__end table.data th, .engage.dp .chap__end table.data td { padding-left: .75rem; padding-right: .75rem; white-space: normal; }
}