:root {
    color-scheme: light;
    --ink: #243d50;
    --paper: #ffffff;
    --ground: #eef5f8;
    --accent: #12577b;
    --rule: #c6d8e2;
    --error: #a12b26;
    font-family: "Segoe UI", "DejaVu Sans", sans-serif;
    color: var(--ink);
    background: var(--ground);
}

* { box-sizing: border-box; }
/* Override Fluent's injected viewport-height, non-scrolling body for this document layout. */
html body { margin: 0; height: auto; min-height: 100dvh; overflow-y: auto; }
a { color: var(--accent); text-underline-offset: .2em; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.site-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; background: var(--ink); color: white; padding: 1.5rem max(1.25rem, calc((100vw - 1160px) / 2)); }
.site-header .brand { color: white; text-decoration: none; font: 600 1.5rem "Bahnschrift", "Arial Narrow", sans-serif; letter-spacing: .06em; }
.brand sup { font-size: .55em; }
main { max-width: 1160px; margin: 0 auto; padding: 2rem 1.25rem 3rem; min-height: 78vh; }
h1, h2, h3 { font-family: "Bahnschrift", "Arial Narrow", "DejaVu Sans", sans-serif; font-weight: 600; }
h1 { margin: 0 0 1.5rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { margin-top: 0; font-size: 1.3rem; }
p { line-height: 1.65; }
footer { max-width: 1160px; margin: auto; padding: 1.5rem 1.25rem; display: flex; gap: 1.5rem; border-top: 1px solid var(--rule); font-size: .85rem; }
#components-reconnect-modal { display: none; position: fixed; inset: auto 1rem 1rem; z-index: 10000; padding: 1rem 1.5rem; background: var(--paper); color: var(--ink); border: 3px solid var(--accent); box-shadow: 0 4px 28px #243d5040; }
#blazor-error-ui { display: none; position: fixed; inset: auto 1rem 1rem; z-index: 10001; padding: 1rem 1.5rem; background: var(--paper); color: var(--error); border: 3px solid var(--error); }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: block; }
#components-reconnect-modal .reconnect-failed { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed { display: block; }
#components-reconnect-modal.components-reconnect-failed .reconnect-wait,
#components-reconnect-modal.components-reconnect-rejected .reconnect-wait { display: none; }
@media (max-width: 540px) {
    .site-header { flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem; }
    main { padding-top: 1.5rem; }
    footer { flex-wrap: wrap; }
}