html, body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 0;
}

body {
    background-color: var(--background);
    color: var(--foreground);
}

h1:focus {
    outline: none;
}

/* Blazor circuit error banner (hidden until the framework reveals it). */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    background: #b32121;
    color: #fff;
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.9rem;
    top: 0.6rem;
    cursor: pointer;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Tailwind utilities used by our pages that are tree-shaken OUT of the
   prebuilt Blazor Blueprint CSS bundle (it only ships classes the library
   itself uses). Backfilled here with their standard Tailwind values so our
   layouts work without depending on the bundle's utility coverage. */
.max-w-6xl { max-width: 72rem; }
.h-14      { height: 3.5rem; }
.mb-6      { margin-bottom: 1.5rem; }
.mb-8      { margin-bottom: 2rem; }

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Header nav links (use Blueprint theme tokens). */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--muted-foreground);
    transition: color 0.15s ease;
}
.nav-link:hover { color: var(--foreground); }
.nav-link-active { color: var(--primary); font-weight: 500; }

/* Subtle accent border on hover for interactive cards. */
.hoverable { transition: border-color 0.15s ease; }
.hoverable:hover { border-color: var(--primary); }