/* /fablebench/: the raw files behind the "same label, two accounts" video (2026-11-06). Built on the site's own
   parts (page hero, record rows, labels, buttons); this sheet adds the video frame, the prompt block and the file
   cards. No motion beyond the site's own button press. */

.fb-hero__actions,
.fb-all__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
}

/* The title breaks after "Same label." at every width. */
.fb-hero .page-hero__title span {
  display: block;
}

.arrow--down {
  margin-inline-start: 10px;
}

.button .arrow {
  width: 18px;
  height: 18px;
  margin-inline-start: 10px;
}

/* The video: 4:5, Account 1 above Account 2. On desktop the words take the left and the frame the right, the
   whole frame inside one screen. */
.fb-video__grid {
  display: grid;
  gap: var(--space-lg);
}

.fb-video__text {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.fb-video__frame {
  margin: 0;
}

.fb-video__frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  background-color: #000;
}

.fb-video__cap {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--stone);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .fb-video__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }

  .fb-video__text {
    grid-column: 1 / span 5;
  }

  .fb-video__frame {
    grid-column: 7 / span 6;
    justify-self: end;
    width: min(100%, calc((100svh - var(--header-h) - 96px) * 0.8));
  }
}

/* Before you open them: three short facts in a row. */
.fb-before__grid {
  display: grid;
  gap: var(--space-lg);
}

.fb-before__head {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.fb-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
}

.fb-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--kok);
}

.fb-before__list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-before__list li {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ink);
}

.fb-before__list p {
  max-width: 30em;
  line-height: 1.55;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

@media (min-width: 768px) {
  .fb-before__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

/* One section per prompt. */
.fb-scene__head {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.fb-scene__num {
  color: var(--kok);
}

.fb-scene__note {
  color: var(--lichen);
}

/* The prompt, in full, as a quoted block with a Kök rule. */
.fb-prompt {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) - 3px);
  border-left: 3px solid var(--kok);
  background-color: var(--white);
}

.surface-paper .fb-prompt {
  background-color: var(--limestone);
}

.fb-prompt blockquote {
  margin: var(--space-sm) 0 0;
}

.fb-prompt p {
  max-width: 46em;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* File cards: one per output, Account 1, Account 2, then the reference. */
.fb-files {
  display: grid;
  gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fb-file {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: var(--space-md);
  border: 1px solid var(--ink);
  background-color: var(--limestone);
}

.surface-paper .fb-file {
  background-color: var(--paper);
}

.fb-file--ref {
  border-color: var(--stone);
}

.fb-file__title {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fb-file__sub {
  margin-top: 6px;
  color: var(--lichen);
}

.fb-file__record {
  margin-top: var(--space-md);
}

.fb-file__hash code {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
  /* One click selects the whole digest for copying. */
  user-select: all;
  -webkit-user-select: all;
}

.fb-file__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
}

.fb-file__download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--kok);
}

@media (min-width: 768px) {
  .fb-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fb-files {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fb-files--two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fb-scene__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }

  .fb-scene__num {
    grid-column: 1 / -1;
  }

  .fb-scene__head .h2 {
    grid-column: 1 / span 6;
  }

  .fb-scene__note {
    grid-column: 7 / span 6;
  }

  .fb-before__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .fb-before__head {
    grid-column: 1 / span 4;
  }

  .fb-before__list {
    grid-column: 5 / span 8;
  }
}

/* The zip, its digest and the two commands that check it. */
.fb-all__grid {
  display: grid;
  gap: var(--space-lg);
}

.fb-all__grid > div:first-child {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.fb-all__label {
  margin-top: var(--space-md);
}

.fb-all__cmd {
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  background-color: var(--ink);
  color: var(--limestone);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.fb-all__cmd code {
  font-size: inherit;
}

@media (min-width: 1024px) {
  .fb-all__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .fb-all__grid > div:first-child {
    grid-column: 1 / span 6;
  }

  .fb-all__check {
    grid-column: 8 / span 5;
  }
}