/* /demos/rust-lifetime-lab — the page's own chrome and the step component.
 *
 * THE COMPONENT IS BUILT FOR THIS DEMO AND IS NOT GENERALISED. Three other
 * pages in the estate could plausibly use a stepped walkthrough, and none of
 * them is built yet; a shared component designed against one caller is a guess
 * about the other three, and the wrong guess is more expensive to unpick than
 * the duplication it saved. When a second demo needs steps, the shape they
 * genuinely share will be visible. It is not visible now.
 *
 * THE PAGE IS COMPLETE WITHOUT THE SCRIPT. Every step is server-rendered and
 * every one is visible by default; the stylesheet only hides the inactive ones
 * once the script has announced itself by setting data-enhanced on the section.
 * Written the other way round — hidden by default, revealed by script — a
 * reader with no JavaScript would get a page with two thirds of its content
 * invisible, and the diagnostics are the entire point of the page.
 */

.rll__lede {
  max-width: 62rem;
}

.rll__captured,
.rll__asymmetry,
.rll__escape,
.rll__prov,
.rll__steps {
  margin: 2.5rem 0;
}

.rll__captured p,
.rll__asymmetry p,
.rll__escape p,
.rll__prov p,
.rll__sequence {
  max-width: 62rem;
}

/* ---- the tab strip ------------------------------------------------------ */

.rll__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  counter-reset: none;
}

.rll__tabs li {
  margin: 0;
  flex: 1 1 14rem;
}

.rll__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 8px;
  background: var(--card-bg, transparent);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.rll__tab:hover,
.rll__tab:focus-visible {
  border-color: var(--link-color, #0969da);
}

/* The active tab is marked with an ATTRIBUTE the script sets, not a class, so
 * the styling and the ARIA state cannot drift apart — aria-selected is what a
 * screen reader announces, and keying the visual state off the same attribute
 * means a tab cannot look active while announcing itself as not. */
.rll__tab[aria-selected="true"] {
  border-color: var(--link-color, #0969da);
  box-shadow: inset 0 0 0 1px var(--link-color, #0969da);
}

.rll__tab-n {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.45;
}

.rll__tab-code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
  opacity: 0.75;
}

.rll__tab-title {
  font-weight: 600;
}

/* ---- a step ------------------------------------------------------------- */

.rll__step {
  border-top: 1px solid var(--border-color, #d0d7de);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

/* Only once the script is present does the strip become a selector. Before
 * that every step is on the page, one after another, and the tabs are ordinary
 * in-page anchors to them. */
.rll__steps[data-enhanced="true"] .rll__step[hidden] {
  display: none;
}

.rll__steps[data-enhanced="true"] .rll__step {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.rll__step-head h3 {
  margin-bottom: 0.35rem;
}

.rll__step-n {
  opacity: 0.5;
  font-weight: 400;
  margin-right: 0.4rem;
}

.rll__step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.rll__stage {
  border: 1px solid var(--border-color, #d0d7de);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.rll__step-lede {
  max-width: 62rem;
}

/* ---- the diagnostic ----------------------------------------------------- */

.rll__diag {
  margin: 1.25rem 0;
}

/* THE SOURCE BLOCK MUST NOT WRAP AND MUST NOT BE PROPORTIONAL. The caret
 * gutter under each line is a string of spaces followed by markers, and it
 * aligns with the source above it only in a monospace face at a fixed line
 * length. A wrapped line puts the carets under the wrong characters, which is
 * worse than showing nothing: the page would be pointing confidently at code
 * that is not what the compiler complained about. So it scrolls sideways
 * instead, inside its own box, and the page body never does. */
.rll__source,
.rll__fix-diff,
.rll__go-line,
.rll__escape-raw {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #d0d7de);
  background: var(--code-bg, rgba(127, 127, 127, 0.08));
  margin: 0.75rem 0;
}

.rll__ln {
  display: inline-block;
  min-width: 2.5ch;
  text-align: right;
  opacity: 0.45;
}

.rll__caret--primary {
  color: var(--danger-color, #cf222e);
  font-weight: 700;
}

.rll__caret--secondary {
  opacity: 0.7;
}

.rll__source--secondary {
  border-style: dashed;
}

.rll__secondary-lede,
.rll__nofix {
  max-width: 62rem;
  font-size: 0.95rem;
}

/* ---- suggested fixes ---------------------------------------------------- */

.rll__fixes {
  margin-top: 1.25rem;
}

.rll__fixes h4,
.rll__go h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.rll__fix {
  margin-bottom: 1.25rem;
}

.rll__fix-msg {
  max-width: 62rem;
  margin-bottom: 0.35rem;
}

.rll__fix-before {
  display: block;
  color: var(--danger-color, #cf222e);
}

.rll__fix-after {
  display: block;
  color: var(--success-color, #1a7f37);
}

.rll__fix-appl {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ---- the Go pairing ----------------------------------------------------- */

.rll__go {
  border-left: 3px solid var(--border-color, #d0d7de);
  padding-left: 1rem;
  margin: 1.5rem 0 0.5rem;
}

.rll__go-note,
.rll__go-caption {
  max-width: 60rem;
}

.rll__go-caption {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

/* ---- provenance --------------------------------------------------------- */

.rll__provlist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.rll__provlist dt {
  font-weight: 600;
  opacity: 0.8;
}

.rll__provlist dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.rll__escape-raw {
  font-size: 0.85rem;
}

@media (max-width: 40rem) {
  .rll__provlist {
    grid-template-columns: 1fr;
    gap: 0.1rem 0;
  }

  .rll__provlist dd {
    margin-bottom: 0.6rem;
  }

  .rll__tabs li {
    flex: 1 1 100%;
  }
}