h1:focus {
    outline: none;
}

/* Hidden on screen but still read by screen readers (and seen by search engines). */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.validation-message {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Plain inputs for the static (non-interactive) unlock form, styled to sit alongside MudBlazor. */
.admin-label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    color: var(--mud-palette-text-secondary);
}

.admin-input, .text-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}

.admin-input:focus, .text-input:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -1px;
}

/* Home is 1.5x wider than the other pages (MainLayout's container is MaxWidth.Medium, 960px). */
.mud-container:has(> .home-page) {
    max-width: 1440px;
}

/* Two cards per row only once the window is wide enough for Home's container to reach its full 1440px, so cards
   are never squeezed below their full width; narrower windows get one card per row. */
@media (min-width: 1440px) {
    .home-page .home-card {
        flex-basis: 50%;
        max-width: 50%;
    }
}

/* Background pattern, chosen in the footer (MainLayout adds pattern-{name}; each palette has a default). It's drawn on a
   layer behind everything (covering the whole page, so it scrolls with it), in the theme's text colour at low opacity, so it suits every palette in light and dark
   mode; cards keep solid backgrounds. pattern-none simply has no rule.
   isolation keeps the negative z-index layer above the page background rather than behind it. */
.site-layout {
    --pattern: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
    position: relative;
    isolation: isolate;
}

.site-layout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Soft waves: an SVG used as a mask, so the colour still comes from the theme. */
.pattern-waves::before {
    background: var(--pattern);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 14 C20 6 40 6 60 14 S100 22 120 14' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") repeat 0 0 / 240px 28px;
}

/* Staggered flecks. */
.pattern-flecks::before {
    background-image: radial-gradient(var(--pattern) 1.2px, transparent 1.6px),
    radial-gradient(var(--pattern) 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
}

/* Fine diagonal lines. */
.pattern-lines::before {
    background-image: repeating-linear-gradient(135deg, var(--pattern) 0 1px, transparent 1px 14px);
}

/* Graph-paper grid. */
.pattern-grid::before {
    background-image: linear-gradient(var(--pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern) 1px, transparent 1px);
    background-size: 12px 12px;
}

/* Footer pinned to the bottom of short pages: the main content area is a full-height flex column. */
.site-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main > .mud-container:first-child {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.site-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.site-footer-meta a {
    color: inherit;
}

.site-footer-meta a:hover {
    color: var(--mud-palette-primary);
}

.site-footer-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* The random line under the copyright notice (FooterLineProvider); inline Markdown, so it may contain links and code. */
.site-footer-line {
    font-size: 0.8125rem;
    font-style: italic;
    opacity: 0.85;
    overflow-wrap: anywhere;
}

.site-footer-line a {
    color: var(--mud-palette-primary);
}

.site-footer-line code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
    font-style: normal;
}

.footer-line-raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.theme-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.theme-swatches {
    display: flex;
    gap: 0.5rem;
}

.theme-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    /* Keep the gradient inside the border so it can't fringe the anti-aliased edge. The inline style must therefore set
       background-image only: the background shorthand would reset this. */
    background-clip: padding-box;
    transform: rotate(-90deg);
}

.theme-swatch.active {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.theme-modes {
    display: flex;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    overflow: hidden;
}

.theme-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A fixed height (not content-driven) so the text pill and the icon pill always match. */
    box-sizing: border-box;
    height: 1.875rem;
    padding: 0 0.75rem;
    color: inherit;
    text-decoration: none;
}

/* Icons centred on the box (not the text baseline) and sized to the text, so icon and text pills match in height. */
.theme-mode .mud-icon-root {
    font-size: 1.15em;
}

.theme-mode + .theme-mode {
    border-left: 1px solid var(--mud-palette-lines-inputs);
}

.theme-mode:hover {
    color: var(--mud-palette-primary);
}

.theme-mode.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Top bar menu (Components/Layout/TopNav.razor). */
.top-nav-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.5rem;
    background: currentColor;
    opacity: 0.4;
}

.mobile-menu {
    position: relative;
}

.mobile-menu > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 50%;
}

.mobile-menu > summary::-webkit-details-marker {
    display: none;
}

.mobile-menu > summary:hover, .mobile-menu[open] > summary {
    background: color-mix(in srgb, var(--mud-palette-appbar-text) 15%, transparent);
}

.mobile-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 13rem;
    padding: 0.5rem 0;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: var(--mud-default-borderradius);
    z-index: calc(var(--mud-zindex-appbar) + 1);
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: inherit;
    text-decoration: none;
}

.mobile-menu-link:hover {
    background: var(--mud-palette-action-default-hover);
}

.mobile-menu-social {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Categories page: the category link covers the whole card; recent-post links sit above it. */
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.category-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-4);
}

.category-card:has(.stretched-link:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.stretched-link {
    color: inherit;
    text-decoration: none;
}

.stretched-link:focus-visible {
    outline: none;
}

.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.category-recent {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-recent li + li {
    margin-top: 0.875rem;
}

.category-recent-title {
    position: relative;
    z-index: 1;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.category-recent-title:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* Compact post list (Components/Shared/PostList.razor). */
.post-row {
    display: flex;
    gap: 1rem;
    padding: 1rem;
}

.post-row-thumb {
    flex: 0 0 9rem;
}

.post-row-thumb img {
    display: block;
    width: 9rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--mud-default-borderradius);
}

.post-row-body {
    flex: 1;
    min-width: 0;
}

@media (max-width: 599.98px) {
    .post-row {
        flex-direction: column;
    }

    .post-row-thumb {
        flex-basis: auto;
    }

    .post-row-thumb img {
        width: 100%;
    }
}

/* Tags page. */
.tag-search {
    max-width: 28rem;
}

.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.tag-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.tag-pill[hidden] {
    display: none;
}

.tag-pill:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.tag-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
}

/* Media library (Admin/Media.razor). The checkerboard shows through transparent images. */
.media-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.media-card .media-actions {
    margin-top: auto;
}

.media-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: #fff;
    background-image: conic-gradient(rgba(0, 0, 0, 0.06) 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0);
    background-size: 16px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-use {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Post stats page (Admin/PostStats.razor): summary cards and a dependency-free bar chart. */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.stat-card {
    padding: 1rem 1.25rem;
}

.stat-card-values {
    display: flex;
    flex-direction: column;
    margin-top: 0.25rem;
}

.stat-card-values strong {
    font-size: 1.5rem;
    font-weight: 500;
}

.trend-legend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.trend-key {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    margin-left: 0.5rem;
}

.trend-key-views, .trend-bar-views {
    background: var(--mud-palette-primary);
}

.trend-key-visitors, .trend-bar-visitors {
    background: var(--mud-palette-secondary);
}

.trend-chart {
    display: grid;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 0.25rem;
    height: 12rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.trend-day {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    height: 100%;
}

.trend-bar {
    flex: 1;
    max-width: 0.625rem;
    border-radius: 2px 2px 0 0;
}

.trend-label {
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    font-size: 0.6875rem;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.cover-preview {
    display: block;
    max-width: 100%;
    max-height: 16rem;
    border-radius: var(--mud-default-borderradius);
}

/* Post editor's Preview tab: the real .post-body styles, framed like the text box it replaces. */
.editor-preview {
    min-height: 28rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    overflow: auto;
    resize: vertical;
}

/* Drag the bottom-right corner to resize the Write box; the Write tab is kept alive, so its size survives tab switches. */
.body-field textarea.mud-input-slot {
    resize: vertical;
}

.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    margin-left: auto;
    padding: 0 0.5rem;
}

.image-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 18rem;
}

.image-menu-item img {
    flex: 0 0 3.5rem;
    width: 3.5rem;
    height: 2.25rem;
    object-fit: cover;
    border-radius: 4px;
}

.image-menu-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.markdown-toolbar-divider {
    width: 1px;
    height: 1.25rem;
    margin: 0 0.25rem;
    background: var(--mud-palette-lines-default);
}

.body-field textarea, .slug-field input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.post-cover {
    display: block;
    width: 100%;
    max-height: 26rem;
    object-fit: cover;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 1.5rem;
}

/* Post page (PostView.razor). At 1440px and up a left sidebar holds the cover, table of contents and recommendations;
   below that the sidebar is hidden and the article shows its own cover and bottom recommendations instead. */
.post-sidebar {
    display: none;
}

.post-sidebar-cover {
    display: block;
    width: 100%;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 1.5rem;
}

.post-sidebar-sticky {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1440px) {
    .mud-container:has(> .post-page) {
        max-width: 1440px;
    }

    .post-page {
        display: grid;
        grid-template-columns: 20rem minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }

    .post-sidebar {
        display: block;
        align-self: stretch;
    }

    .post-cover-inline, .post-bottom-recommendations {
        display: none;
    }
}

#post-top {
    scroll-margin-top: 80px;
}

.toc-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.toc-top {
    font-size: 0.875rem;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.toc-list a {
    display: block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.toc-list a:hover {
    color: var(--mud-palette-primary);
}

.toc-list .toc-level-1 a {
    padding-left: 1.5rem;
}

.toc-list .toc-level-2 a {
    padding-left: 2.25rem;
}

.series-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.series-link {
    display: flex;
    flex-direction: column;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.series-link:hover {
    border-color: var(--mud-palette-primary);
}

.series-link-next {
    text-align: right;
}

.series-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-primary);
}

.series-title {
    font-weight: 500;
}

.recommended-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommended-list li + li {
    margin-top: 0.75rem;
}

.recommended-list a {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.recommended-list a:hover .recommended-title {
    color: var(--mud-palette-primary);
}

.recommended-thumb {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 4px;
}

.recommended-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recommended-title {
    font-weight: 500;
    line-height: 1.3;
}

.recommended-date {
    font-size: 0.75rem;
}

/* Highlighted code blocks (Posts/CodeBlockExtension.cs). Token colours come from the current theme. */
.code-block pre {
    margin: 0;
}

/* Footer: "View Code Fullscreen" and the optional title on the left, the language on the right. */
.code-block-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
}

.code-block-footer .code-block-expand {
    margin-left: -0.5rem;
}

.code-block-title {
    color: var(--mud-palette-text-primary);
}

.code-block-lang {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.code-popover-title {
    font-weight: 500;
}

.code-block-expand, .code-popover-close {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: none;
    border-radius: var(--mud-default-borderradius);
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    cursor: pointer;
}

.code-block-expand:hover, .code-popover-close:hover {
    background: var(--mud-palette-action-default-hover);
}

.code-block-expand::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The fullscreen view: only the open state sets display, so closed popovers stay hidden. */
.code-popover {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.code-popover:popover-open {
    display: flex;
    flex-direction: column;
}

.code-popover::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.code-popover pre {
    flex: 1;
    margin: 0;
    padding: 1.5rem;
    overflow: auto;
    font-size: 1rem;
    line-height: 1.6;
    background: var(--mud-palette-surface);
}

.code-popover-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.code-popover-close {
    font-size: 0.9375rem;
    font-weight: 500;
}

.tok-keyword, .tok-tag, .tok-preproc {
    color: var(--mud-palette-primary);
}

.tok-type, .tok-function, .tok-attr {
    color: var(--mud-palette-secondary);
}

.tok-string, .tok-number {
    color: var(--mud-palette-tertiary);
}

.tok-comment {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.tok-var {
    color: var(--mud-palette-text-primary);
}

/* Errata box on the post page (between the details and the body), in the theme's warning colour. */
.errata {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--mud-palette-warning);
    border-radius: var(--mud-default-borderradius);
    background: color-mix(in srgb, var(--mud-palette-warning) 10%, transparent);
}

.errata ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.errata li + li {
    margin-top: 0.75rem;
}

.errata-date {
    display: block;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.errata-text > * + * {
    margin-top: 0.5rem;
}

.errata-text a {
    color: var(--mud-palette-primary);
}

.errata-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* Post editor errata rows. */
.erratum-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.erratum-date {
    flex: 0 0 11rem;
}

@media (max-width: 599.98px) {
    .erratum-row {
        flex-wrap: wrap;
    }

    .erratum-date {
        flex-basis: 100%;
    }
}

/* Post editor: the Published switch with its publish date beside it. */
.publish-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.publish-date {
    flex: 0 0 16rem;
}

/* Rendered Markdown. MudBlazor resets element margins, so the post body restores readable typography. */
.post-body {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.post-body > * + * {
    margin-top: 1rem;
}

.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
    scroll-margin-top: 80px;
    line-height: 1.3;
    font-weight: 500;
    margin-top: 2rem;
}

.post-body h1 {
    font-size: 2rem;
}

.post-body h2 {
    font-size: 1.6rem;
}

.post-body h3 {
    font-size: 1.3rem;
}

.post-body h4 {
    font-size: 1.1rem;
}

.post-body ul, .post-body ol {
    padding-left: 1.5rem;
}

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

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

/* Admonitions: :::note ... ::: (Markdig custom containers render <div class="note">). */
.post-body .note {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding: 1rem 1.5rem;
    border: 1px dashed var(--mud-palette-text-secondary);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    font-style: italic;
}

.post-body .note > * + * {
    margin-top: 0.75rem;
}

.post-body .note code {
    font-style: normal;
}

@media (max-width: 599.98px) {
    .post-body .note {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Captioned images: post-figure from ![alt](src "Caption"), figure from Markdig's ^^^ syntax. */
.post-body figure {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
}

.post-body figure img {
    display: block;
    margin: 0 auto;
    border-radius: var(--mud-default-borderradius);
}

.post-body figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.post-body blockquote {
    border-left: 4px solid var(--mud-palette-lines-default);
    padding-left: 1rem;
    color: var(--mud-palette-text-secondary);
}

.post-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--mud-palette-background-gray);
    padding: 0.1em 0.3em;
    border-radius: 4px;
}

/* Code blocks sit on the card colour (not background-gray) so the theme's token colours keep their 4.5:1 contrast. */
.post-body pre {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    padding: 1rem;
    border-radius: var(--mud-default-borderradius);
    overflow-x: auto;
}

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

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

.post-body th, .post-body td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4rem 0.75rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    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: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

@font-face {
    font-family: "TitleFont";
    src: url("fonts/title_font.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* Post titles: post page (h3), About page (h4), home cards (h5), category/tag lists (h6). Set via the variables MudText reads. */
.post-title {
    --mud-typography-h3-family: Georgia, "Times New Roman", serif;
    --mud-typography-h4-family: Georgia, "Times New Roman", serif;
    --mud-typography-h5-family: Georgia, "Times New Roman", serif;
    --mud-typography-h6-family: Georgia, "Times New Roman", serif;
}

.site-title {
    --mud-typography-h6-family: "TitleFont", Georgia, serif;
    --mud-typography-h6-weight: 700;
    font-size: 1.7em;
}

/* About page (Pages/About.razor): photo beside the intro on wide screens, stacked and capped on narrow ones. */
.about-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10%;
}

@media (max-width: 959.98px) {
    .about-photo {
        max-width: 16rem;
        margin: 0 auto;
    }
}

.about-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.about-social .mud-icon-root {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}