/* ============================================ Branding Page — suite-kit overrides This page wears the unified suite kit (suite.css + editor-suite.css): , fields are .s-field/.s-input/.s-select, sections are .s-fieldgroup, image tiles are .s-dropzone-tile, provinces are .s-chip, the save button is .s-btn-primary. Everything visual comes from those two stylesheets. What remains here is ONLY the handful of page-specific bits the kit doesn't ship: the narrower form column, the three-up upload grid, the province active-state (suite .s-chip uses an explicit .is-active class; here the chip wraps a checkbox so we drive the state off :checked), the compact colour-picker row, the font preview, and the save-status states. All values reference --s-* tokens — no --color-* / no new hues. ============================================ */ /* --- Page / form width --- */ /* .s-page is 1160px wide for the contacts table; the branding form reads better in a single narrower column. */ .branding-page.s-page { max-width: 760px; } .branding-form-page { margin-top: 0.5rem; } /* Small "optional" qualifier inside a field label. */ .field-optional { font-weight: 400; color: var(--s-text-3); font-size: 0.72rem; letter-spacing: 0; text-transform: none; } /* --- Logos & photos: three square upload tiles --- */ .upload-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } /* The placeholder (icon + label) stacks centred inside the square tile. */ .upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } /* Brokerage logos are usually wide rectangles; "contain" keeps them intact instead of cropping. (The headshot + logo tiles use the default cover.) */ #preview-brokerage-logo { object-fit: contain; padding: 8px; background: var(--s-surface); } /* --- Province chips --- suite .s-chip normally toggles an explicit .is-active class in JS; here the chip is a