/* Lab page — extends page.css grammar; accent = --page-lab throughout. */

.labp { padding-top: 96px; background: #000; }
.labp .section { padding-top: calc(var(--section-gap) * 0.6); }

.labp-hero { padding-top: var(--section-gap); }
.labp-title {
  font-family: var(--page-title);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.12;
  margin-bottom: 20px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-lab-link {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
}

.header-lab-link:hover {
  color: var(--ink);
}

.header-lab-link--accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 16px;
  color: var(--page-lab);
  background: transparent;
  border: 1px solid var(--page-lab);
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.2;
}

.header-lab-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.header-lab-link.header-lab-link--accent:hover {
  opacity: 0.7;
  color: var(--page-lab);
  border-color: var(--page-lab);
  background: transparent;
}

.header-lab-link--outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.2;
}

.header-lab-link.header-lab-link--outline:hover {
  opacity: 0.7;
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}

/* Sealed experiment card — receipt grammar, lab accent */
.seal-card {
  max-width: 480px;
  margin: 8px 0 28px;
  padding: 16px 20px 12px;
  background: #000;
  border: 1px solid color-mix(in srgb, var(--page-lab) 30%, var(--hairline));
  font-family: "IBM Plex Mono", monospace;
}
.seal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.seal-dot { width: 7px; height: 7px; background: var(--page-lab); }
.seal-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dim);
  padding: 4px 0;
}
.seal-row i { flex: 1; border-bottom: 1px dotted var(--border); transform: translateY(-3px); }
.seal-row span:last-child { color: var(--ink); white-space: nowrap; }
.seal-hidden { color: var(--page-lab) !important; }
.seal-foot {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--faint);
  font-style: italic;
}

/* Verdict chips */
.verdict-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.verdict-chip {
  padding: 9px 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  border: 1px solid var(--border);
  background: #000;
  color: var(--dim);
}
.verdict-chip--pick { border-color: color-mix(in srgb, var(--page-lab) 45%, var(--border)); color: var(--ink); }
.verdict-chip--neither { border-style: dashed; }
.verdict-chip--unsure { border-style: dotted; color: var(--faint); }

/* Plain (non-italic) knows lists on this page */
.knows-list--plain li { font-style: normal; justify-content: flex-start; }
.knows-verdict--lab { color: var(--page-lab); }

/* Tier table */
.tier-table {
  max-width: 640px;
  border: 1px solid var(--hairline);
  font-family: "IBM Plex Mono", monospace;
  margin-bottom: 28px;
}
.tier-row {
  display: grid;
  grid-template-columns: 90px 120px 1fr;
  gap: 16px;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--dim);
  border-bottom: 1px solid var(--hairline);
  background: #000;
}
.tier-row:last-child { border-bottom: 0; }
.tier-row--head {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  background: #000;
}
.tier-row span:first-child { color: var(--ink); }
.tier-chance { color: var(--faint); }
.tier-lean { color: var(--yellow); }
.tier-hard { color: var(--green); }

/* Refuse receipt variant */
.receipt--refuse { margin-left: 0; }
.receipt--refuse .receipt-row span:last-child { color: var(--danger); }

.labp-close { padding-bottom: var(--section-gap); }
.labp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

@media (max-width: 700px) {
  .tier-row { grid-template-columns: 70px 90px 1fr; gap: 10px; }
}

/* ---- Motion (gated on .labm; first-reveal only; reduced-motion never gets here) ---- */
.labm .labp .section {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms cubic-bezier(0.23, 1, 0.32, 1), transform 480ms cubic-bezier(0.23, 1, 0.32, 1);
}
.labm .labp .section.is-in { opacity: 1; transform: none; }

/* Verdict chips: staggered pop — the vocabulary arrives one word at a time. */
.labm .verdict-chip {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1), transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.labm .section.is-in .verdict-chip { opacity: 1; transform: none; }
.labm .section.is-in .verdict-chip:nth-child(1) { transition-delay: 120ms; }
.labm .section.is-in .verdict-chip:nth-child(2) { transition-delay: 200ms; }
.labm .section.is-in .verdict-chip:nth-child(3) { transition-delay: 280ms; }
.labm .section.is-in .verdict-chip:nth-child(4) { transition-delay: 360ms; }
.labm .section.is-in .verdict-chip:nth-child(5) { transition-delay: 460ms; }

/* Tier rows cascade. */
.labm .tier-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}
.labm .section.is-in .tier-row { opacity: 1; transform: none; }
.labm .section.is-in .tier-row:nth-child(1) { transition-delay: 80ms; }
.labm .section.is-in .tier-row:nth-child(2) { transition-delay: 160ms; }
.labm .section.is-in .tier-row:nth-child(3) { transition-delay: 240ms; }
.labm .section.is-in .tier-row:nth-child(4) { transition-delay: 320ms; }
.labm .section.is-in .tier-row:nth-child(5) { transition-delay: 400ms; }

/* Refuse-list: each "never" stamps in. */
.labm .receipt--refuse .receipt-row span:last-child {
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.labm .section.is-in .receipt--refuse .receipt-row span:last-child { opacity: 1; transform: none; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(2) span:last-child { transition-delay: 150ms; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(3) span:last-child { transition-delay: 260ms; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(4) span:last-child { transition-delay: 370ms; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(5) span:last-child { transition-delay: 480ms; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(6) span:last-child { transition-delay: 590ms; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(7) span:last-child { transition-delay: 700ms; }
.labm .section.is-in .receipt--refuse .receipt-row:nth-of-type(8) span:last-child { transition-delay: 810ms; }

/* The seal performs sealing: a magenta redaction bar wipes across the hidden
   values once, then settles behind the text. */
.seal-hidden { position: relative; }
.labm .seal-hidden::after {
  content: "";
  position: absolute;
  inset: -1px -4px;
  background: var(--page-lab);
  transform: scaleX(0);
  transform-origin: left center;
}
.labm .section.is-in .seal-hidden::after {
  animation: seal-wipe 620ms cubic-bezier(0.77, 0, 0.175, 1) 400ms both;
}
@keyframes seal-wipe {
  0% { transform: scaleX(0); transform-origin: left center; }
  48% { transform: scaleX(1); transform-origin: left center; }
  52% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}