/* NDisplay palette, based on nyttodata.se's Astra global colours (2026-09-07). */
:root {
    --brand-primary: #b94843;
    --brand-primary-hover: #9e3b37;
    --brand-secondary: #29606f;
    --brand-secondary-dark: #1e4853;
    --brand-ink: #101218;
    --brand-muted: #494b51;
    --brand-background: #f3f5f5;
}

.public-brand-mark,
.brand-mark,
.control-sidebar .brand-mark,
.error-brand-mark,
.demo-app-brand {
    background: var(--brand-secondary);
    color: #fff;
}

.public-button.primary,
.button.primary,
.error-button.primary {
    color: #fff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 8px 22px rgba(185, 72, 67, .16);
}

.public-button.primary:hover,
.button.primary:hover,
.error-button.primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

:focus-visible {
    outline-color: var(--brand-secondary);
}

.brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 100%;
}
.ndisplay-logo-frame {
    position: relative;
    display: block;
    width: 210px;
    max-width: 100%;
    aspect-ratio: 4.15;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
}
/* Frame the supplied artwork's whitespace without modifying the original image. */
.ndisplay-logo-frame .ndisplay-logo {
    position: absolute;
    display: block;
    width: 115%;
    max-width: none;
    height: auto;
    left: -7.5%;
    top: -29%;
}
.brand-surface {
    padding-left: 4px;
    color: var(--brand-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}
.control-sidebar .brand-lockup {
    padding: 4px 8px 10px;
    background: #fff;
    border-radius: 10px;
}
.control-sidebar .brand-surface {
    color: var(--brand-muted);
}
@media (max-width: 620px) {
    .public-brand .ndisplay-logo-frame { width: 165px; }
}