:root {
    --opcc-border: #b1b4b6;
    --opcc-card-shadow: 0 14px 32px rgb(11 12 12 / 8%);
    --opcc-shell-blue: #1d70b8;
    --opcc-shell-green: #00703c;
    --opcc-soft-blue: #f4f8fb;
    --opcc-soft-grey: #f3f2f1;
}

html {
    background:
        radial-gradient(circle at top right, rgb(29 112 184 / 12%), transparent 24rem),
        linear-gradient(180deg, #fff 0, #f7f7f7 11rem, #f3f2f1 100%);
}

body {
    margin: 0;
    color: #0b0c0c;
    background: transparent;
}

h1:focus {
    outline: none;
}

.govuk-header__product-name {
    letter-spacing: 0.04em;
}

.opcc-reset-alert {
    padding: 0.85rem 0;
    color: #fff;
    background: #b10e1e;
}

.opcc-reset-alert .govuk-body {
    color: inherit;
    font-weight: 700;
}

.govuk-service-navigation {
    box-shadow: inset 0 -1px 0 var(--opcc-border);
}

.govuk-service-navigation__link.active,
.govuk-service-navigation__link[aria-current="page"] {
    color: #0b0c0c;
    font-weight: 700;
    text-decoration-thickness: max(3px, 0.1875rem);
}

.opcc-persona-shell {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--opcc-border);
    border-left: 8px solid var(--opcc-shell-blue);
    box-shadow: var(--opcc-card-shadow);
}

.opcc-persona-shell__text {
    flex: 1;
}

.opcc-persona-switcher {
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--opcc-soft-grey) 0, var(--opcc-soft-blue) 100%);
    border-left: 8px solid var(--opcc-shell-green);
    box-shadow: var(--opcc-card-shadow);
}

.opcc-persona-switcher__header {
    max-width: 42rem;
}

.opcc-persona-switcher__victim-picker {
    max-width: 36rem;
}

.opcc-persona-switcher__victim-picker .govuk-select {
    min-width: min(100%, 28rem);
}

.opcc-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--opcc-border);
    box-shadow: var(--opcc-card-shadow);
}

.opcc-code-block {
    overflow-x: auto;
    padding: 1rem 1.25rem;
    background: #0b0c0c;
    color: #f3f2f1;
    border: 1px solid #505a5f;
    border-radius: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

.govuk-notification-banner {
    margin-top: 1rem;
}

.govuk-button[disabled] {
    cursor: default;
    opacity: 0.9;
}

#blazor-error-ui {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: auto;
    z-index: 1050;
    display: none;
    max-width: 32rem;
    padding: 1rem 1.25rem;
    background: #b10e1e;
    color: #fff;
    border-left: 8px solid #ffdd00;
    box-shadow: 0 12px 30px rgb(11 12 12 / 20%);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: #fff;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    color: #fff;
    background: #b10e1e;
    border-left: 8px solid #ffdd00;
}

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

@media (max-width: 48.0525em) {
    .opcc-persona-shell {
        flex-direction: column;
    }

    #blazor-error-ui {
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        max-width: none;
    }
}