/* docc-render (Xcode toolchain build) renders tutorial assessment choices
   with a background token chain that resolves to black under a light color
   scheme, hiding the choice text. Scope the fix to the choices and follow
   the same three-way theme model as the rest of the site chrome. */
.choice {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}
body[data-color-scheme="dark"] .choice {
  background: #1d1d1f !important;
  color: #f4f4f4 !important;
}
@media (prefers-color-scheme: dark) {
  body[data-color-scheme="auto"] .choice,
  body:not([data-color-scheme]) .choice {
    background: #1d1d1f !important;
    color: #f4f4f4 !important;
  }
}

/* Tutorial step previews render collapsed to ~100px — far too small to
   read a terminal frame. Open the panel wider by default and let the
   asset use the room. */
.runtime-preview:not(.collapsed) {
  width: min(44vw, 480px) !important;
}
.runtime-preview-asset img {
  width: 100%;
  height: auto;
}

/* The code column stretches well past its content; bound it to the
   viewport and let long listings scroll internally instead of inflating
   the whole section. */
.code-listing {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* The tutorial hero renders the @Intro image as a faint full-bleed
   background behind the text. Reshape that element into a media panel to
   the right of the text column: fully opaque, contained, vertically
   centered. The text column already occupies the left half. */
.hero .bg {
  left: auto !important;
  right: 4% !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 40% !important;
  height: 76% !important;
  opacity: 1 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 8px;
}
@media (max-width: 900px) {
  .hero .bg { display: none; }
}

/* Chapter cards on the tutorials overview render small enough to muddy the
   terminal screenshots; give the asset column more of the row. */
.tutorials-overview .content-section .asset,
.tutorials-overview .content-section .image {
  max-width: 460px !important;
}
.tutorials-overview .content-section .asset img,
.tutorials-overview .content-section .image img {
  width: 100%; height: auto;
}