/* Added: 2026-08-23 12:28 - Defines the lightweight country-and-technology visual system. */
/* Added: 2026-08-31 20:09 - Applies the selected cobalt-and-orange identity on cool white surfaces. */
:root {
    color-scheme: light;
    --brand-primary: #1746d1;
    --brand-primary-dark: #1037a8;
    --brand-primary-soft: #eaf0ff;
    --brand-accent: #ff6b00;
    --brand-accent-text: #b84600;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f9fc;
    --color-border: #d9e0ee;
    --color-green-dark: var(--brand-primary);
    --color-green: var(--brand-primary-dark);
    --color-sage: #7d8fb5;
    --color-cream: var(--color-surface-subtle);
    --color-oat: var(--color-border);
    --color-copper: var(--brand-accent-text);
    --color-ink: #172033;
    --color-muted: #566176;
    --font-display: "Segoe UI", Arial, sans-serif;
    --font-body: "Segoe UI", Arial, sans-serif;
    --shadow-soft: 0 1.25rem 3.5rem rgba(23, 70, 209, 0.1);
    /* Added: 2026-09-01 17:42 - Keeps ordinary public page starts and section gaps on one compact rhythm. */
    --space-page-top: clamp(1.5rem, 3vw, 2.5rem);
    --space-page-bottom: clamp(3.5rem, 8vw, 6.5rem);
    --space-page-section: clamp(1.75rem, 3.5vw, 3rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    background: var(--color-cream);
}

body {
    margin: 0;
    background: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-body);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--brand-primary);
}

:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
}

/* Added: 2026-08-23 12:43 - Hides only Blazor's programmatic page-heading focus outline. */
h1:focus {
    outline: none;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

img {
    display: block;
    max-width: 100%;
}

.valid.modified:not([type="checkbox"]) {
    outline: 2px solid #3f7b57;
}

.invalid {
    outline: 2px solid #a13b2a;
}

.validation-message,
.text-danger {
    color: #9a3428;
}

.blazor-error-boundary {
    margin: 2rem;
    padding: 1rem;
    border-radius: 0.6rem;
    background: #9a3428;
    color: white;
}

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

/* Added: 2026-09-01 17:42 - Gives every public error, unavailable, and access state the same compact page frame. */
.public-status-page {
    width: min(100% - 2rem, 48rem);
    margin-inline: auto;
    padding-block: var(--space-page-top) var(--space-page-bottom);
}

.public-status-page h1 {
    color: var(--brand-primary);
    font-size: clamp(2.2rem, 6vw, 4rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.public-status-page p {
    color: var(--color-muted);
}

.public-status-page .text-danger {
    color: #9a3428;
}

/* Added: 2026-09-09 09:00 - Compact, touch-sized viewport shortcuts stay below menus and dialogs, with no scroll listeners or layout movement. */
.page-jump-controls {
    position: fixed;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 90;
    display: flex;
    gap: 0.25rem;
}

.page-jump-controls button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--brand-primary);
    box-shadow: 0 2px 8px rgba(23, 32, 51, 0.15);
    cursor: pointer;
}

.page-jump-controls button:hover,
.page-jump-controls button:active {
    border-color: var(--brand-primary-dark);
    background: var(--brand-primary-dark);
    color: var(--color-surface);
}

.page-jump-controls svg {
    pointer-events: none;
}

/* Added: 2026-09-09 09:00 - Background page shortcuts must not enter the keyboard order while a media or reconnect dialog is open. */
body:has(.media-picker-backdrop, dialog[open]) .page-jump-controls {
    display: none;
}

/* Added: 2026-09-09 09:00 - Keep footer links clear of the floating pair when the viewport has no wide outside gutter. */
@media (max-width: 90rem) {
    .site-footer .footer-inner,
    .download-shell .download-footer {
        padding-right: calc(6.5rem + env(safe-area-inset-right));
    }
}

/* Added: 2026-09-09 09:49 - Narrow screens use a vertical pair; reserve just enough end space to keep the last editor controls reachable. */
@media (max-width: 30rem) {
    .page-jump-controls {
        flex-direction: column;
    }

    .site-footer .footer-inner,
    .download-shell .download-footer {
        padding-right: calc(3.5rem + env(safe-area-inset-right));
    }

    .admin-shell .admin-main {
        padding-bottom: calc(7rem + env(safe-area-inset-bottom));
    }
}

@media print {
    .page-jump-controls {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}