html, body {
    margin: 0;
}

#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;
}

.record-body {
    color: var(--mud-palette-text-primary);
    line-height: 1.7;
}

.record-body h1,
.record-body h2,
.record-body h3,
.record-body h4 {
    color: var(--mud-palette-text-primary);
    margin-top: 1.75em;
    margin-bottom: 0.6em;
    line-height: 1.25;
}

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

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

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

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

.record-body p {
    margin: 0 0 1em 0;
}

.record-body ul,
.record-body ol {
    margin: 0 0 1em 0;
    padding-left: 1.75em;
}

.record-body li {
    margin-bottom: 0.35em;
}

.record-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5em 0;
}

.record-body pre {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1em;
    margin: 0 0 1em 0;
    overflow-x: auto;
}

.record-body code {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.9em;
}

.record-body :not(pre) > code {
    background-color: var(--mud-palette-background-gray);
    border-radius: 3px;
    padding: 0.15em 0.4em;
}

.record-body pre code {
    background-color: transparent;
    padding: 0;
}

.record-body table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 1em 0;
    max-width: 100%;
}

.record-body th,
.record-body td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.5em 0.75em;
    text-align: left;
}

.record-body th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

.record-body blockquote {
    margin: 0 0 1em 0;
    padding: 0.25em 1em;
    border-left: 4px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}
/* ---------------------------------------------------------------------------
   Float utilities.

   NOTE: this project has NO Tailwind. MudBlazor supplies the spacing utilities
   (ma-/mb-/mr-/mx-/my- on a 4px scale — note `ma-`, not Tailwind's `m-`), but
   it ships no float utilities at all, so these are defined here.

   Float is used deliberately rather than a grid: it is the only layout method
   where text sits beside the image and then reclaims the full width once it
   clears the bottom. A grid would keep the text in a narrow column all the way
   down.
   --------------------------------------------------------------------------- */

/* Only float once there is room. Below this width a ~420px image would squeeze
   the body copy into an unreadably narrow gutter, so it stacks instead. */
@media (min-width: 900px) {
    .float-left {
        float: left;
        margin-right: 24px;
    }
}

/* Start a block below any float rather than wrapping into the gap beside it. */
.clear-float {
    clear: both;
}

/* ---------------------------------------------------------------------------
   Focus ring on the page heading after navigation
   ---------------------------------------------------------------------------
   Routes.razor uses <FocusOnNavigate Selector="h1" />, which moves focus to the
   page heading on every route change so screen readers announce the new page.
   That is worth keeping. The side effect is that the browser paints a focus
   outline around the h1 for mouse users too, which reads as a stray box hugging
   the heading text and disappears on the next click.

   :focus-visible is the browser's own judgement about whether focus arrived by
   keyboard. Suppressing the ring only when it did NOT keeps keyboard users'
   outlines fully intact.
   --------------------------------------------------------------------------- */
:focus:not(:focus-visible) {
    outline: none;
}

/* FocusOnNavigate sets tabindex="-1" on its target to make it focusable at all.
   Belt and braces: those elements are never keyboard-reachable on purpose, so they
   should never paint a ring. */
[tabindex="-1"]:focus {
    outline: none;
}

/* ---------------------------------------------------------------------------
   The hero columns: photo beside the JSON object
   ---------------------------------------------------------------------------
   Grid rather than float, so the photo and the object stay locked on one row down
   to the phone breakpoint (600px, MudBlazor's sm) and then stack. The photo column
   is capped at its intrinsic width; the object takes the rest. Tablets (>=600px)
   keep the two columns, which is the intent. The prose bio and the record sit
   full width below this row.
   --------------------------------------------------------------------------- */
.hero-cols {
    margin-top: 1.5rem;
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 600px) {
    .hero-cols {
        grid-template-columns: minmax(0, 320px) 1fr;
        gap: 2.25rem;
        align-items: start;
    }
}

/* No full border and no scrollbar. A single accent rule on the left reads as a
   code block without boxing the content in; the JSON is hand-wrapped short
   enough that it never needs to scroll. */
/* Drop the whole card (not the <pre>) down so the object reads as vertically
   centred against the taller photo beside it. Padding here keeps the <pre>'s
   left-accent rail hugging the text instead of stretching up through empty space. */
.json-card {
    padding-top: 2em;
}

.json-card pre {
    margin: 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
    border-left: 3px solid var(--mud-palette-primary);
    background: none;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    overflow: visible;
    white-space: pre;
}

/* Punctuation recedes; keys and values carry the colour. */
.json-card .j-p { color: var(--mud-palette-text-disabled); }
.json-card .j-k { color: var(--mud-palette-primary); }
.json-card .j-s { color: var(--mud-palette-tertiary); }
.json-card .j-n { color: var(--mud-palette-secondary); }

/* ---------------------------------------------------------------------------
   App-bar CTA: full label with room, compact "Contact" on phones
   ---------------------------------------------------------------------------
   Pure CSS swap (not MudHidden) so both buttons render server-side and the right
   one shows on the first paint. Hide the compact one by default; below 600px hide
   the wide one and reveal the compact. inline-flex matches MudButton's root.
   --------------------------------------------------------------------------- */
.cta-compact { display: none; }

@media (max-width: 599.98px) {
    .cta-wide { display: none; }
    .cta-compact { display: inline-flex; }
}