/* The approved rounded icon family uses only the existing brand palette. */
.brand-icon { width: 28px; height: 28px; flex: 0 0 28px; overflow: visible; }
.brand-icon .bi-main { fill: var(--ink); }
.brand-icon .bi-soft { fill: var(--green-mid, var(--line)); }
.brand-icon .bi-paper { fill: var(--paper, var(--surface)); }
.brand-icon .bi-accent { fill: var(--orange); }
.brand-icon .bi-line, .brand-icon .bi-soft-line, .brand-icon .bi-accent-line {
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.brand-icon .bi-line { stroke: var(--ink); }
.brand-icon .bi-soft-line { stroke: var(--green-mid, var(--line)); stroke-width: 4; }
.brand-icon .bi-accent-line { stroke: var(--orange); }
.brand-icon .bi-paper-edge { stroke: var(--paper, var(--surface)); stroke-width: 1.4; stroke-linejoin: round; }
.nav-item .brand-icon { width: 26px; height: 26px; flex-basis: 26px; }
.nav-item.active .brand-icon .bi-main { fill: var(--paper, var(--surface)); }
.nav-item.active .brand-icon .bi-line { stroke: var(--paper, var(--surface)); }
.nav-item.active .brand-icon .bi-paper-edge { stroke: var(--ink); }
.nav-item.active .brand-icon .bi-paper { fill: var(--ink); }