/* The question-type reference at /specimens.
 *
 * Every rule is scoped under .specimens so this file cannot reach a page a
 * learner sees. The sheets themselves are styled by practice.css: nothing here
 * restyles a sheet, because the point of the page is to show them as they are.
 */

.specimens {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

.specimens-head { margin-bottom: 1.75rem; }
.specimens-head h1 { grid-column: 2; }
.specimens-head h1 { margin: 0.15rem 0 0.5rem; }
.specimens-head .lede { max-width: var(--measure); color: var(--graphite-2); }

.specimens-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0.85rem 1rem;
  margin-bottom: 2.5rem;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 0.25rem;
  font-family: var(--f-type);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.specimen {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--hair-hard);
}

/* One column below the width where a sheet and a label stop fitting side by
   side. The sheet keeps its own width either way. */
@media (max-width: 60rem) {
  .specimen { grid-template-columns: minmax(0, 1fr); }
}

.specimen-label { position: sticky; top: 1.5rem; }
.specimen-label h2 {
  margin: 0 0 1rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.65rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}
.specimen-label dl { margin: 0; }
/* Typed, in the printing's ink, like every other label in the system. They
 * were set in an --accent that no longer exists and fell back to a red none
 * of the rest of the page uses. */
.specimen-label dt {
  margin-top: 0.9rem;
  font-family: var(--f-type);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.specimen-label dd { margin: 0.2rem 0 0; line-height: 1.45; }
.specimen-meta { display: block; margin-top: 0.15rem; font-family: var(--f-type); font-size: 0.72rem; color: var(--graphite-3); }

/* A specimen sheet is not being answered, so the Check button on it is inert.
   Say so rather than letting it look broken. */
.specimen .answer .check { cursor: default; }

/* A shape the bank cannot fill. Loud, because a quietly missing question type
   is the thing this page exists to make visible: a dashed box where a sheet
   should be (dashed means provisional, the same vocabulary as the dev
   sign-in block). Not crimson, which is reserved for a wrong answer. */
.specimen-gap {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--navy-wash);
  border: 2px dashed color-mix(in srgb, var(--navy) 45%, transparent);
  border-radius: 0.25rem;
  line-height: 1.55;
}
.specimen-gap code { font-size: 0.9em; }