html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* #299 — the overlay z-index scale, as ONE source of truth. These five band anchors mirror
   SpaceSails.Core.OverlayBands (BaseMap / MapChrome / DesksAndPopups / DistressLifeline / Modal);
   Map.razor.css sets every overlay's z-index to var(--z-BAND) (or calc(var(--z-BAND) + N) for a fine
   layer within a band). CssZBandSyncTests parses this block AND Map.razor.css and fails `dotnet test`
   the moment a value drifts from the Core constants — so a CSS edit that would bury a critical control
   (Lab 34 / #293) goes red in the build, not in a playtest. Defined here (global, unscoped) rather than
   in a scoped .razor.css so :root actually reaches the document root and the vars cascade everywhere.
   Keep these values in lockstep with OverlayBands; do NOT hand-tune an overlay past its band. */
:root {
    --z-base-map: 0;
    --z-map-chrome: 10;
    --z-desks-popups: 1200;
    --z-distress-lifeline: 1340;
    --z-modal: 1360;
}

/* Owner request: "Peek" — temporarily clear every panel to read the map, then bring them back
   (👁 Peek button in the desk tab bar, or the ` hotkey). Fades every overlay that's a direct
   child of the map page EXCEPT the live canvas, the desk tab bar (which carries the button and
   the key to restore) and the loading splash. Global rather than scoped to Map.razor.css so it
   also reaches child-component roots (the desk-chip strip). Pointer events fall through so map
   contacts stay clickable while peeking. */
.map-peek > *:not(.map-canvas):not(.desk-tab-bar):not(.map-loading) {
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.12s ease;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* Boot screen — themed loading page with live progress and surfaced errors (PR-10).
   Driven by the inline script in index.html; Blazor supplies --blazor-load-percentage. */
.boot-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: #060912;
    color: #e0e4ec;
    font-family: system-ui, sans-serif;
    padding: 1rem;
}

.boot-title {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.06em;
}

.boot-status {
    color: #9aa4b8;
}

.boot-bar {
    width: min(28rem, 80vw);
    height: 0.6rem;
    border: 1px solid #2a3a55;
    border-radius: 0.3rem;
    overflow: hidden;
    background: #0b1220;
}

.boot-bar-fill {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: linear-gradient(90deg, #1b6ec2, #4dd0e1);
    transition: width 0.1s ease-out;
}

.boot-percent {
    font-size: 0.85rem;
    color: #9aa4b8;
    min-height: 1.2em;
}

.boot-errors {
    margin-top: 1rem;
    width: min(44rem, 92vw);
    max-height: 40vh;
    overflow: auto;
    border: 1px solid #7a2e3a;
    border-radius: 0.4rem;
    background: #1a0d12;
    padding: 0.75rem;
}

.boot-errors-title {
    color: #ff8fa0;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.boot-errors pre {
    color: #ffb3be;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}