:root {
    --scout-blue-700: #155eef;
    --scout-blue-600: #1677ff;
    --scout-blue-300: #84caff;
    --scout-navy-950: #071a36;
    --scout-navy-900: #0b2852;
    --scout-surface: #ffffff;
    --scout-background: #f7f9fc;
    --scout-text: #101828;
    --scout-text-muted: #475467;
    --scout-border: #d0d5dd;
    --scout-hover: #eef4ff;
    --scout-success: #067647;
    --scout-warning: #b54708;
    --scout-error: #b42318;
    --scout-trust: #175cd3;
    --scout-badge: #6941c6;
    --scout-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.12);
    --scout-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.12);
    --scout-radius-sm: 8px;
    --scout-radius-md: 12px;
    --scout-radius-lg: 18px;
    --scout-space-1: 0.25rem;
    --scout-space-2: 0.5rem;
    --scout-space-3: 0.75rem;
    --scout-space-4: 1rem;
    --scout-space-6: 1.5rem;
    --scout-space-8: 2rem;
    --scout-font: Inter, Roboto, Arial, sans-serif;
}

html,
body {
    background: var(--scout-background);
    color: var(--scout-text);
    font-family: var(--scout-font);
}

.scout-brand-logo {
    display: block;
    height: auto;
    max-width: 100%;
}

.scout-brand-logo--appbar {
    height: 36px;
    width: 124px;
}

.scout-brand-logo--drawer {
    height: 44px;
    width: 151px;
}

.scout-brand-logo--account {
    height: 48px;
    margin-bottom: var(--scout-space-4);
    width: 165px;
}

.mud-paper,
.mud-card {
    border-color: var(--scout-border);
}

/* Layout classes are global because MudBlazor renders the final DOM nodes in
   child components; isolated selectors cannot reliably reach those nodes. */
.public-appbar {
    padding-inline: clamp(0.5rem, 3vw, 2rem);
}

.public-brand,
.scout-appbar-brand {
    align-items: center;
    display: inline-flex;
}

.public-main {
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 64px;
}

.public-logout {
    margin: 0;
}

.scout-drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--scout-border);
    display: flex;
    gap: 0.75rem;
    min-height: 72px;
    padding: 0.75rem 1rem;
}

.scout-main-content {
    min-height: 100vh;
    padding: 5.5rem 1.5rem 2rem;
}

.mud-drawer-content {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.scout-account-menu {
    max-width: min(22rem, 42vw);
}

.scout-account-menu .mud-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-shell {
    padding-block: clamp(3rem, 8vw, 7rem);
}

.home-grid {
    align-items: center;
}

.home-title {
    font-size: clamp(2.35rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
    max-width: 12ch;
}

.home-lead {
    line-height: 1.65;
    max-width: 42rem;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.home-info-card {
    border: 1px solid rgba(21, 94, 239, 0.12);
    overflow-wrap: anywhere;
}

.home-state-card {
    max-width: 44rem;
}

.home-steps {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
    padding-left: 1.35rem;
}

@media (max-width: 600px) {
    .scout-brand-logo--appbar {
        height: 32px;
        width: 110px;
    }

    .public-providers-link,
    .public-secondary-link {
        display: none;
    }

    .public-appbar .mud-button-label {
        font-size: 0.78rem;
    }

    .public-appbar .mud-button-root {
        min-width: auto;
        padding-inline: 0.45rem;
    }

    .scout-main-content {
        padding: 4.75rem 1rem 1.5rem;
    }

    .scout-account-menu .mud-button-label {
        display: none;
    }

    .home-shell {
        padding-block: 2.25rem;
    }

    .home-actions .mud-button-root {
        width: 100%;
    }
}