/* cosmos-lab-demo.css — the page chrome for /demos/cosmos-lab.
 *
 * Everything here is scoped under .cl-demo so nothing leaks into the shell.
 * Colours come from the site's own tokens rather than literals, so the page
 * follows the theme toggle without a second set of dark rules.
 */

.cl-demo__lede {
  max-width: 68ch;
}

.cl-demo__note {
  max-width: 68ch;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* --- the provenance and proof fact lists ---------------------------------- */

.cl-demo__provenance,
.cl-demo__power,
.cl-demo__proofs,
.cl-demo__run {
  margin: 2rem 0;
}

.cl-demo__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1rem 0;
}

.cl-demo__facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cl-demo__facts dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  font-weight: 600;
}

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

/* --- the validator power table -------------------------------------------- */

/* The table can be wider than a phone. It scrolls INSIDE this wrapper rather
 * than making the page scroll sideways. */
.cl-demo__power {
  overflow-x: auto;
}

.cl-demo__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.cl-demo__table caption {
  text-align: left;
  padding-bottom: 0.5rem;
  opacity: 0.8;
}

.cl-demo__table th,
.cl-demo__table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.28);
  text-align: left;
  white-space: nowrap;
}

.cl-demo__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The validators that carry the commit between them. A left rule rather than a
 * background: a background behind a code element in either theme is a contrast
 * problem waiting to happen. */
.cl-demo__row--decisive td:first-child {
  border-left: 3px solid #7c6bf0;
  padding-left: 0.45rem;
}

.cl-demo__row--decisive td {
  font-weight: 600;
}

/* --- the scenario controls ------------------------------------------------ */

.cl-demo__group {
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 1.25rem 0;
}

.cl-demo__group legend {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 0.4rem;
  width: auto;
  margin-bottom: 0;
}

.cl-demo__scenario {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.cl-demo__scenario:hover:not(:disabled) {
  border-color: #7c6bf0;
}

/* css.css styles no :disabled, so without this a running control is
 * pixel-identical to an idle one — the exact defect PF-S200c fixed on the
 * orbit-lab sieve button. */
.cl-demo__scenario:disabled {
  opacity: 0.55;
  cursor: progress;
}

.cl-demo__scenario-label {
  font-weight: 600;
}

.cl-demo__scenario-what {
  font-size: 0.88rem;
  opacity: 0.85;
}

.cl-demo__scenario-expects {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* --- the verdict panel ---------------------------------------------------- */

/* The slot is empty until a run finishes and must take up no room while it is.
 * A reserved empty box reads as a panel that failed to fill. */
.cl-demo__slot:empty {
  display: none;
}

.cl-demo__result {
  border: 1px solid rgba(128, 128, 128, 0.35);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.cl-demo__result--accepted {
  border-left-color: #2e9e5b;
}

.cl-demo__result--rejected {
  border-left-color: #c9553d;
}

.cl-demo__verdict {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.cl-demo__declared,
.cl-demo__tally {
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.cl-demo__reason {
  margin: 0.5rem 0 0;
  overflow-wrap: anywhere;
}

.cl-demo__reason code {
  font-size: 0.85rem;
}