/* ==========================================================================
   Twitch integration (MLS palette)
   ========================================================================== */

.lab {
  background: var(--mls-navy);
  color: var(--mls-cream);
}

.lab .mono { color: var(--mls-teal); }
.lab .crumbs a { color: var(--mls-teal); }
.lab .crumbs a:hover { color: var(--mls-cream); }
.lab .ulink { color: var(--mls-cream); }

.lab__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}

.lab__lead {
  max-width: 40ch;
  color: var(--mls-cream);
}

.btn--twitch {
  height: 48px;
  background: #9146ff;
  border-color: #9146ff;
  color: #fff;
}

.btn--twitch:hover {
  border-color: #fff;
  box-shadow: 0 0 18px rgba(145, 70, 255, 0.45);
}

/* Sign-in success (shown after Twitch sends the player back here) ---------- */

.tdone {
  width: min(460px, calc(100vw - 32px));
  padding: 40px 36px 32px;
  border: 1px solid #9146ff;
  background: var(--mls-navy);
  color: var(--mls-cream);
  text-align: center;
  box-shadow: 0 0 60px rgba(145, 70, 255, 0.35);
}

.tdone[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tdone::backdrop { background: rgb(4 18 24 / 0.82); }

.tdone__icon { color: #9146ff; }

.tdone .btn:focus-visible { outline: 2px solid var(--mls-cream); outline-offset: 3px; }

.tdone__title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.tdone__accent { color: #a970ff; }

.tdone__p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mls-muted);
}

.tdone__note {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.04em;
}

.tdone .mono { color: var(--mls-muted); }

/* Steps -------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mls-line);
  background: var(--mls-navy-2);
}

.step__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--mls-line);
  background: repeating-linear-gradient(-45deg, #0f2f38 0 10px, #123540 10px 20px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--mls-teal);
}

.step__shot--img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.step__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px 28px;
}

.step__num {
  font-size: 72px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--mls-lilac);
}

.step__title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.step__p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mls-muted);
}

/* What it does ------------------------------------------------------------- */

.whatgrid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

.whatgrid__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.whatgrid__lead {
  font-size: 17px;
  color: var(--mls-muted);
}

.privacy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border: 1px solid var(--mls-line);
}

.privacy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mls-muted);
}

.what {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border: 1px solid var(--mls-line);
  background: var(--mls-line);
}

.what__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  background: var(--mls-navy);
}

.what__title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.what__p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--mls-muted);
}

/* Breakpoints -------------------------------------------------------------- */

@media (max-width: 900px) {
  .lab__intro { align-items: flex-start; }
  .lab__lead { max-width: 52ch; }
  .steps { grid-template-columns: 1fr; }
  .step { flex-direction: row; }
  .step__shot { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--mls-line); }
  .step__num { font-size: 56px; }
  .whatgrid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  .step { flex-direction: column; }
  .step__shot { flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--mls-line); }
  .step__text { padding: 20px; }
  .step__title { font-size: 20px; }
  .step__num { font-size: 44px; }
  .what { grid-template-columns: 1fr; }
  .what__item { padding: 20px; }
  .what__title { font-size: 19px; }
  .btn--twitch { height: auto; min-height: 46px; padding: 10px 16px; line-height: 1.2; text-align: center; white-space: normal; }
}