/* Card background */
.card-blue { background-color: rgba(187, 213, 238, 0.3); }

/* Auto-fill grid */
.auto-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Test item status colors */
[data-status="attention"] { background-color: rgba(250, 128, 114, 0.35); }
[data-status="success"]   { background-color: rgba(144, 238, 144, 0.35); }
[data-status="default"]   { background-color: rgba(187, 213, 238, 0.35); }

/* Monaco editor */
#editor-container {
  height: 50vh;
}

@media (min-width: 1024px) {
  #editor-container {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Native dialog backdrop */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

#modal-loading::backdrop {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Highlight.js code blocks */
.hljs {
  border-radius: 0.5rem;
  font-size: 0.85rem;
  padding: 1.25rem;
}

/* Markdown code inline */
.prose code {
  background-color: #e5e7eb;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.875em;
}

/* Test list paragraphs */
.test-error p {
  margin: 0;
}

dialog li a {
  text-decoration: underline;
}