/* The small discovery uses the same navy, gold and soft contours as the lab. */
.learning-check {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 30px clamp(28px, 4vw, 64px);
  margin-top: 38px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid #99bcb642;
  border-radius: 24px;
  color: #f3f0e7;
  background: radial-gradient(ellipse at 0 0, #31566255, transparent 64%), #0c2530;
  box-shadow: inset 0 1px 0 #f0deb012, 0 16px 36px #18343d0d;
}
.learning-check > * { min-width: 0; }
.learning-check .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--gold);
  font: 500 .75rem/1.6 var(--sans);
  letter-spacing: .12em;
}
.check-emblem {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid #e2c18366;
  border-radius: 50%;
  background: #e2c18308;
}
.check-emblem svg { width: 20px; height: 20px; }
.learning-check h3 {
  margin: 0;
  max-width: 20ch;
  color: #f3f0e7;
  font: 400 clamp(28px, 3.1vw, 42px)/1.18 var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}
.learning-check h3 em { display: block; margin-top: 10px; color: var(--gold); }
.learning-check .check-intro > .check-invitation {
  max-width: 32ch;
  margin: 20px 0 0;
  color: #b7cdd0;
  font: 400 .9375rem/1.75 var(--sans);
}
.learning-check .check-action { align-self: center; margin: 0; }
.learning-check .check-options { display: grid; gap: 12px; }
.check-option {
  margin: 0;
  border: 1px solid #99bcb645;
  border-radius: 16px;
  color: #e6eeeb;
  background: #c0d6cc08;
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
.check-option > summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 16px 18px;
  color: inherit;
  font: 500 1rem/1.5 var(--sans);
  text-align: left;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.check-option > summary::-webkit-details-marker { display: none; }
.check-option > summary::marker { content: ''; }
.check-symbol { display: block; width: 30px; height: 30px; color: #d9bf83; }
.check-symbol svg { display: block; width: 100%; height: 100%; }
.check-toggle {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid #b7cdd04a;
  border-radius: 50%;
  color: #e2c183;
}
.check-toggle::before, .check-toggle::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 12px;
  width: 10px;
  height: 1px;
  background: currentColor;
}
.check-toggle::after { transform: rotate(90deg); transition: transform .2s ease; }
.check-option[open] { border-color: #e2c18385; background: #27465180; }
.check-option[open] > summary { color: #f5db9b; }
.check-option[open] .check-toggle { border-color: #e2c18385; background: #e2c18312; }
.check-option[open] .check-toggle::after { transform: rotate(0); }
.learning-check .check-option > .check-answer {
  margin: 0 18px;
  padding: 16px 0 20px;
  border-top: 1px solid #b7cdd029;
  color: #d1e0dd;
  font: 400 .9375rem/1.8 var(--sans);
  overflow-wrap: anywhere;
}
.check-option > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -5px;
  border-radius: 15px;
}
.check-insight {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #99bcb630;
}
.check-insight > svg { display: block; width: 34px; height: 34px; color: var(--gold); }
.learning-check .check-insight > #check-feedback {
  min-height: 0;
  margin: 0;
  max-width: 65ch;
  color: #bed1d0;
  font: 400 .9375rem/1.75 var(--sans);
}
.experience > .experience-footnote {
  margin: 24px 0 0;
  max-width: 76ch;
  color: #435a64;
  font-size: .9375rem;
  line-height: 1.8;
}
.experience > .experience-footnote > span {
  margin-top: 8px;
  color: #5d716e;
  font-size: .75rem;
  line-height: 1.7;
}
@media (hover: hover) {
  .check-option:hover { border-color: #e2c18380; background: #b9d0c811; }
  .check-option[open]:hover { background: #27465180; }
}
@media (max-width: 850px) {
  .learning-check { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .learning-check h3 { max-width: 28ch; }
  .learning-check .check-intro > .check-invitation { max-width: none; }
}
@media (max-width: 700px) {
  .learning-check { margin-top: 28px; padding: 24px 20px; border-radius: 22px; gap: 24px; }
  .learning-check .eyebrow { margin-bottom: 18px; font-size: .6875rem; }
  .learning-check h3 { font-size: clamp(27px, 7vw, 36px); }
  .learning-check h3 em { margin-top: 8px; }
  .learning-check .check-intro > .check-invitation { margin-top: 16px; font-size: .875rem; }
  .learning-check .check-options { gap: 10px; }
  .check-option > summary { min-height: 68px; padding: 15px 14px; gap: 10px; font-size: .9375rem; }
  .learning-check .check-option > .check-answer { margin-inline: 14px; padding-block: 14px 18px; font-size: .9375rem; }
  .check-insight { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-top: 20px; align-items: start; }
  .check-insight > svg { width: 28px; height: 28px; margin-top: 4px; }
  .learning-check .check-insight > #check-feedback { font-size: .875rem; }
  .experience > .experience-footnote { margin-top: 22px; font-size: .875rem; }
}
@media (max-width: 370px) {
  .learning-check { padding-inline: 16px; }
  .check-option > summary { grid-template-columns: 25px minmax(0, 1fr) 26px; padding-inline: 12px; gap: 8px; }
  .check-symbol { width: 25px; height: 25px; }
  .check-toggle { width: 26px; height: 26px; }
  .check-toggle::before, .check-toggle::after { left: 7px; top: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .check-option, .check-toggle::after { transition: none; }
}
.motion-off .check-option, .motion-off .check-toggle::after { transition: none; }
@media print {
  .learning-check { break-inside: avoid; background: #f3f0e7; box-shadow: none; color: #163743; }
  .learning-check h3, .learning-check .check-intro > .check-invitation, .check-option,
  .learning-check .check-option > .check-answer, .learning-check .check-insight > #check-feedback { color: #163743; }
  .learning-check .eyebrow, .learning-check h3 em, .check-symbol, .check-insight > svg { color: #805e25; }
  .check-option, .check-option[open] { background: transparent; border-color: #9b947d; }
  .check-option[open] > summary { color: #805e25; }
  .check-toggle { display: none; }
}