/* #/c/{id}: the Before Eye strip pinned, the four Simulations passing under it */
.board { display: grid; gap: var(--space-lg); align-items: start; padding-block: var(--space-md) var(--space-2xl); }
.board__sims { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.consultation__head h1 { font-size: var(--text-lg); text-wrap: balance; }
.consultation__when { color: var(--color-ink-2); }
.consultation__missing { display: grid; gap: var(--space-md); justify-items: start; padding-block: var(--space-lg); }

/* Phone: the head scrolls away; the Before strip sticks to the top edge, edge to edge,
 * so every Simulation is read right under it */
.board__before { position: sticky; top: 0; z-index: var(--z-sticky); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-xs) var(--gutter) var(--space-sm); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (max-width: 40rem) {
  .board .strip__frame { margin-inline: calc(-1 * var(--gutter)); }
}

/* Laptop: the Before strip pinned in the left column, level with the first Simulation, the four down the right */
@media (min-width: 60rem) {
  .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xl); padding-block: var(--space-xl) var(--space-3xl); }
  .consultation__head { grid-column: 1 / -1; }
  .board__before { top: var(--space-lg); margin-inline: 0; padding: 0; border-bottom: 0; }
}

/* States of one place */
.sim .progress { top: 0; bottom: auto; }
.sim .strip__name { --skeleton-height: 1lh; }
.sim[data-state="failed"] .strip__frame { outline-color: var(--color-rule-2); }
.strip__fail p:first-child { font-weight: 500; }

.strip__fail .btn { margin-top: var(--space-xs); }
.strip__fail-why { color: var(--color-error); }