.demo-steps,
.demo-checklist {
  display: grid;
  gap: 0.85rem;
  max-inline-size: 74ch;
}

.demo-steps li::marker {
  color: var(--demo-accent);
  font-weight: 900;
}

.demo-panel h3,
.demo-panel p {
  margin-block: 0;
}

.demo-panel p {
  margin-block-start: 0.35rem;
  color: var(--demo-muted);
}

.audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.75rem;
  padding: 1rem;
  border: 0.0625rem solid var(--demo-border);
  border-radius: var(--demo-radius);
  background: var(--demo-surface);
}

.audit-toolbar p {
  margin: 0;
}

.audit-toolbar__label {
  color: var(--demo-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.audit-toolbar__value {
  font-weight: 800;
}

.audit-queue {
  margin-block-start: 1rem;
  border: 0.0625rem solid var(--demo-border);
  border-radius: var(--demo-radius);
  background: var(--demo-surface);
}

.audit-queue [data-a11y-scroll-cue-scrollport] {
  border-radius: inherit;
}

.audit-table {
  min-inline-size: 78rem;
  border-collapse: collapse;
}

.audit-table caption {
  padding: 1rem;
  color: var(--demo-muted);
  font-weight: 750;
  text-align: start;
}

.audit-table th,
.audit-table td {
  padding: 0.9rem 1rem;
  border-block-start: 0.0625rem solid var(--demo-border);
  text-align: start;
  vertical-align: top;
}

.audit-table thead th {
  color: var(--demo-muted);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.audit-table tbody th {
  color: var(--demo-accent);
}

.audit-tag,
.audit-status {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.8rem;
  padding-inline: 0.6rem;
  border: 0.0625rem solid currentColor;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.audit-tag--high {
  border-width: 0.15rem;
}

.audit-status::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-end: 0.4rem;
  border: 0.0625rem solid currentColor;
  border-radius: 50%;
  background: currentColor;
}

.demo-code-blocks {
  margin-block-start: 1.5rem;
}

.demo-code-blocks h3 {
  margin-block-end: 0.5rem;
}

@media (max-width: 36rem) {
  .audit-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-toolbar button {
    inline-size: 100%;
  }
}

@media (forced-colors: active) {
  .audit-queue,
  .audit-toolbar {
    border-color: CanvasText;
  }
}