/* The SHARED step component: a captured rustc diagnostic, rendered as a
 * walkthrough of numbered steps.
 *
 * IT WAS BUILT FOR ONE DEMO AND GENERALISED IN PF-S262, WHEN THE SECOND ARRIVED.
 * The file this was lifted out of carried a paragraph arguing against exactly
 * this move — that a component designed against one caller is a guess about the
 * others, and the wrong guess costs more to unpick than the duplication it
 * saved. That argument was right when there was one caller. There are now two,
 * /demos/rust-lifetime-lab and /demos/rust-move-lab, and the shape they share
 * turned out to be everything below: a tab strip, a step panel, a monospace
 * block with a caret gutter under it, a suggested-fix diff, and a provenance
 * list. What differs between them is the GO half of each comparison, and none of
 * that is here.
 *
 * THE PREFIX IS rds__ — rust diagnostic steps — and it is deliberately not
 * either page's prefix. A page keeps its own prefix for the parts only it has.
 *
 * THE PAGE IS COMPLETE WITHOUT THE SCRIPT. Every step is server-rendered and
 * every one is visible by default; this 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 most of its content invisible, and
 * the diagnostics are the entire point of every page that uses this.
 *
 * IT IS LOADED BEFORE THE PAGE'S OWN STYLESHEET, so a page can override a rule
 * here and never the other way round.
 */

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

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

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

.rds__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;
}

.rds__tab:hover,
.rds__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. */
.rds__tab[aria-selected="true"] {
  border-color: var(--link-color, #0969da);
  box-shadow: inset 0 0 0 1px var(--link-color, #0969da);
}

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

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

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

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

.rds__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. */
[data-rustdiag-steps][data-enhanced="true"] .rds__step[hidden] {
  display: none;
}

[data-rustdiag-steps][data-enhanced="true"] .rds__step {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

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

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

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

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

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

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

.rds__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.
 *
 * .rds__pre is the same box WITHOUT a caret in it, offered so a consuming page's
 * verbatim blocks match the diagnostics beside them instead of approximating
 * them. */
.rds__source,
.rds__fix-diff,
.rds__pre {
  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;
}

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

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

.rds__caret--secondary {
  opacity: 0.7;
}

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

/* The short explanatory lines that sit beside a diagnostic: why an error points
 * at more than one place, and why a step has no suggested fix. */
.rds__note {
  max-width: 62rem;
  font-size: 0.95rem;
}

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

.rds__fixes {
  margin-top: 1.25rem;
}

.rds__fixes h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.rds__fix {
  margin-bottom: 1.25rem;
}

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

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

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

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

/* A fix rustc is NOT confident about. rustc grades its own suggestions, and the
 * grades are not decoration: MachineApplicable means `cargo fix` would apply it
 * unattended, MaybeIncorrect means it compiles and may not be what you meant. A
 * page that printed both the same way would be flattening the compiler's own
 * hedging into a recommendation it did not make. */
.rds__fix--unsure {
  border-left: 3px solid var(--warning-color, #9a6700);
  padding-left: 0.9rem;
}

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

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

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

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

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

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

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