/* sg-brand.css — Nov 2026. The StockGenie Pro logo (design/stockgenie-pro-son-classic)
   on every staff page: a small mark before the "StockGenie" name in the top bar /
   sidebar / splash, and the sign-in emoji tile replaced by the logo. Looks only —
   no element is shown or hidden that was not before.
   fieldrep.html (StockGenie Field) sets --sg-mark to the genie variation instead. */
:root{--sg-mark:url('/img/brand/sg-tile-128.png')}

/* top bars, sidebar, splash, simple pages */
.topbar-brand::before,.tb-brand::before,.sb-brand-name::before,.wl-brand::before,
.splash-brand::before,a.brand::before,div.brand::before{
  content:'';display:inline-block;width:1.75em;height:1.75em;vertical-align:middle;
  margin:-.15em .45em 0 0;flex-shrink:0;border-radius:.42em;
  background:var(--sg-mark) center/contain no-repeat;
  box-shadow:0 1px 3px rgba(15,23,42,.18)}

/* sign-in boxes: the emoji tile becomes the logo */
.login-logo .ico{
  font-size:0!important;color:transparent!important;
  background:#fff var(--sg-mark) center/contain no-repeat!important;
  width:72px!important;height:72px!important;border-radius:18px!important;
  display:block!important;margin:0 auto 12px!important;
  box-shadow:0 6px 18px -8px rgba(15,23,42,.35)!important}
/* sign-in boxes that had no emoji tile */
.login-logo:not(:has(.ico))::before{
  content:'';display:block;width:72px;height:72px;margin:0 auto 12px;border-radius:18px;
  background:#fff var(--sg-mark) center/contain no-repeat;
  box-shadow:0 6px 18px -8px rgba(15,23,42,.35)}
/* portal sign-in already shows the big logo beside the form */
#loginScreen .login-logo::before{display:none!important}

/* the big logo (portal sign-in, website hero): gentle float like the old genie;
   a white card behind it in dark mode so the navy hoodie and wordmark stay visible */
.sg-son{display:block;width:100%;height:auto;animation:sgSonBob 3.4s ease-in-out infinite}
[data-theme="dark"] .sg-son{background:#fff;border-radius:28px;padding:6%}
@keyframes sgSonBob{50%{transform:translateY(-1.6%)}}
@media (prefers-reduced-motion:reduce){.sg-son{animation:none}}

/* Nov 2026 — hero / sign-in logo: the teal (classic) and colour (playful) versions,
   exactly aligned, cross-fade every 8 s with the same gentle float. Shows the teal
   one, still, when the device asks for reduced motion. */
.sg-dual{position:relative;width:100%;aspect-ratio:640/606;animation:sgSonBob 3.4s ease-in-out infinite}
.sg-dual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.sg-dual .sg-col{opacity:0;-webkit-animation:sgXfade 8s ease-in-out infinite;animation:sgXfade 8s ease-in-out infinite;will-change:opacity}
@keyframes sgXfade{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
[data-theme="dark"] .sg-dual{background:#fff;border-radius:28px;padding:5%;box-sizing:border-box}
[data-theme="dark"] .sg-dual img{inset:5%;width:90%;height:90%}
/* Nov 2026 — with "Reduce Motion" on (common on iPhones) only the float stops; the
   colour change is a slow fade, not motion, so it keeps running (it looked frozen). */
@media (prefers-reduced-motion:reduce){.sg-dual{animation:none}.sg-dual .sg-col{animation:sgXfade 10s ease-in-out infinite}}