html, body {
    font-family: 'Helvetica Neue', Arial, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1:focus {
    outline: none;
}

/* Wine-tinted shadow on primary CTAs, matching the visual direction. */
.mud-button-filled-primary {
    box-shadow: 0 2px 5px rgba(129, 17, 72, 0.32);
}

.text-monospace {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.85em;
}

/* Rendered Markdown (release notes). Compact, inherits MudBlazor theme colors. */
.markdown-body {
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

    .markdown-body > :first-child {
        margin-top: 0;
    }

    .markdown-body > :last-child {
        margin-bottom: 0;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4 {
        margin: 1em 0 0.4em;
        line-height: 1.25;
    }

    .markdown-body h1 { font-size: 1.4em; }
    .markdown-body h2 { font-size: 1.25em; }
    .markdown-body h3 { font-size: 1.1em; }

    .markdown-body p,
    .markdown-body ul,
    .markdown-body ol,
    .markdown-body blockquote,
    .markdown-body table {
        margin: 0.5em 0;
    }

    .markdown-body ul,
    .markdown-body ol {
        padding-left: 1.5em;
    }

    .markdown-body code {
        font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
        font-size: 0.85em;
        background: rgba(127, 127, 127, 0.15);
        padding: 0.1em 0.35em;
        border-radius: 4px;
    }

    .markdown-body pre {
        background: rgba(127, 127, 127, 0.12);
        padding: 0.75em 1em;
        border-radius: 6px;
        overflow-x: auto;
    }

        .markdown-body pre code {
            background: none;
            padding: 0;
        }

    .markdown-body blockquote {
        border-left: 3px solid rgba(127, 127, 127, 0.4);
        padding-left: 1em;
        color: var(--mud-palette-text-secondary);
    }

    .markdown-body table {
        border-collapse: collapse;
    }

    .markdown-body th,
    .markdown-body td {
        border: 1px solid rgba(127, 127, 127, 0.3);
        padding: 0.3em 0.6em;
    }

    .markdown-body a {
        color: var(--mud-palette-primary);
    }

    .markdown-body img {
        max-width: 100%;
    }

/* Catalog card description: a compact teaser. Renders Markdown but clamps the height so cards in
   the grid stay uniform; longer descriptions are read in full on the product page. */
.card-description {
    max-height: 4.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Fills the area below the app bar so the version footer can be pushed to the bottom. When the
   content is shorter than the viewport the footer rests at the bottom of the screen; when it is
   taller, the footer flows to the real bottom of the page. */
.page-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--mud-appbar-height, 64px));
}

.app-version {
    align-self: flex-end;
    padding: 0.25rem 1rem 0.5rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    user-select: none;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FEF3C7;
    color: #78350F;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: #B91C1C;
    color: white;
    padding: 1rem;
    border-radius: 4px;
}

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