/* Brand accent overrides. Edit the BRAND object in branding.mjs, not this file. */
:root { --brand-primary: #0d8450; --brand-soft: color-mix(in srgb, var(--brand-primary) 10%, white); --brand-deep: color-mix(in srgb, var(--brand-primary) 55%, black); }
.brand-logo {width:38px;height:38px;object-fit:contain;border-radius:9px;flex-shrink:0}
.brand-logo[hidden], .brand-mark[hidden] {display:none!important}
.brand > span:last-child {min-width:0;overflow-wrap:anywhere}
.brand {gap:10px}
.brand-mark,.primary,.status-dot {background:var(--brand-primary)}
.brand .lime,.text-button,.nav-glyph,.stat strong,.tool-icon {color:var(--brand-primary)}
.side-nav a:hover,.side-nav a.active,.tool-icon,.secondary,.small-icon,.sidebar-helper {background:var(--brand-soft)}
.side-nav a:hover,.side-nav a.active,.sidebar-helper a,.secondary,.small-icon {color:var(--brand-primary)}
.side-nav a.active:before {background:var(--brand-primary)}
.hero {background:linear-gradient(112deg,var(--brand-deep),var(--brand-primary) 85%)}
.hero-link {color:var(--brand-deep)}
.hero-badge {font-size:clamp(17px,2vw,25px);overflow-wrap:anywhere;word-break:break-word;min-width:165px;max-width:280px;transform:rotate(-4deg);}
.hero-badge .hero-check {margin-left:9px;float:none}
.dark-panel {background:var(--brand-deep);border-color:var(--brand-deep)}
.dark-panel input {background:color-mix(in srgb,var(--brand-primary) 55%,black)}
.primary:hover {background:var(--brand-deep)}
.brand-logo {background:white}
@media(max-width:560px){.brand-logo{height:32px;width:32px}}
.hero-badge [data-brand-name] {float:none;display:inline}