/* Navigator base styles. The HELM design tokens (helm-tokens.css) + fonts are loaded ahead of this
   file in App.razor; everything here resolves the HELM custom properties so the launcher tracks the
   platform brand + light/dark automatically. */

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

html, body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background: var(--bg-app);
    color: var(--text-default);
}

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

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    background: var(--color-danger);
    padding: 1rem 1rem 1rem 1rem;
    color: #fff;
}

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

/* Platform-operations panes (hygiene / notifications) — shared shell + grid-cell helpers. Global (not
   scoped) because both panes share them and the cells render inside kit grid templates. */
.pane {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--space-8) var(--gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pane__cell-main {
    color: var(--text-strong);
}

.pane__cell-sub {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.pane__footnote {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0;
}

.pane__footnote--error {
    color: var(--color-danger);
}