/* Approved mask-in-O wordmarks and original masks. Brand-only sizing and theme. */
.jm-slot {
  --jm-logo-height: 20px;
  --jm-mark-size: 32px;
  --jm-light-display: block;
  --jm-dark-display: none;
  --jm-dark-focus: #c8ff00;
  --jm-focus: #7624f4;
  display: block;
  container: jok-mask / inline-size;
  min-inline-size: 0;
  inline-size: 100%;
  font-size: var(--jm-logo-height);
  line-height: 1;
}
.jm-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-inline-size: 44px;
  min-block-size: 44px;
  max-inline-size: 100%;
  box-sizing: border-box;
  padding: 4px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  vertical-align: middle;
  line-height: 1;
  box-shadow: none;
}
button.jm-brand:hover:not(:disabled) { background: var(--hover); color: inherit; box-shadow: none; transform: none; }
.jm-brand:focus-visible { outline: 2px solid var(--jm-focus); outline-offset: 2px; }
.jm-art { display: none; flex: none; }
.jm-art-full { inline-size: calc(var(--jm-logo-height) * 1018.864 / 114); block-size: var(--jm-logo-height); }
.jm-art-wordmark { inline-size: calc(var(--jm-logo-height) * 759.725 / 114); block-size: var(--jm-logo-height); }
.jm-art-stacked { inline-size: calc(var(--jm-logo-height) * 759.725 / 114); block-size: calc(var(--jm-logo-height) * 206 / 114); }
.jm-art-mark { inline-size: var(--jm-mark-size); block-size: var(--jm-mark-size); }
.jm-art > img { inline-size: 100%; block-size: 100%; object-fit: contain; max-inline-size: none; filter: none; }
.jm-art > .jm-image--light { display: var(--jm-light-display); }
.jm-art > .jm-image--dark { display: var(--jm-dark-display); }
/* Dedicated JOK artwork includes the complete mask inside O; no CSS crop. */
.jm-art-jok { inline-size: calc(var(--jm-logo-height) * 300 / 114); block-size: var(--jm-logo-height); }
[data-theme="dark"] .jm-slot[data-jm-theme="auto"], .jm-slot[data-jm-theme="dark"] { --jm-light-display: none; --jm-dark-display: block; --jm-focus: var(--jm-dark-focus); }
.jm-slot[data-jm-theme="light"] { --jm-light-display: block; --jm-dark-display: none; --jm-focus: #7624f4; }
.jm-slot[data-jm-dark-variant="purple"] { --jm-dark-focus: #a875ff; }
/* The existing head bootstrap resolves system preference before styles load.
   With scripts disabled, both the site and brand retain their light fallback. */
.jm-slot[data-mode="auto"] .jm-art-full,
.jm-slot[data-mode="full"] .jm-art-full,
.jm-slot[data-mode="wordmark"] .jm-art-wordmark,
.jm-slot[data-mode="mark"] .jm-art-mark,
.jm-slot[data-mode="stacked"] .jm-art-stacked,
.jm-slot[data-mode="compact"] .jm-art-jok { display: block; }
/* SVG geometry plus the 8px touch padding; em uses this container's font size. */
@container jok-mask (max-width: calc(9em + 8px)) {
  .jm-slot[data-mode="auto"] .jm-art-full { display: none; }
  .jm-slot[data-mode="auto"] .jm-art-wordmark { display: block; }
}
@container jok-mask (max-width: calc(6.7em + 8px)) {
  .jm-slot[data-mode="auto"] .jm-art-full,
  .jm-slot[data-mode="auto"] .jm-art-wordmark,
  .jm-slot[data-mode="wordmark"] .jm-art-wordmark { display: none; }
  .jm-slot[data-mode="auto"] .jm-art-mark,
  .jm-slot[data-mode="wordmark"] .jm-art-mark { display: block; }
}
@supports not (container-type: inline-size) {
  .jm-slot[data-mode="auto"] .jm-art-full, .jm-slot[data-mode="wordmark"] .jm-art-wordmark { display: none; }
  .jm-slot[data-mode="auto"] .jm-art-mark, .jm-slot[data-mode="wordmark"] .jm-art-mark { display: block; }
}
.desktop-shell-brand.jm-slot { flex: 0 0 192px; inline-size: 192px; }
.mobile-shell-brand-slot, .jm-header-mobile { display: none; }
.auth-brand.jm-slot { --jm-logo-height: 22px; flex: 0 1 210px; inline-size: 210px; }
.login-panel-brand.jm-slot { --jm-logo-height: 28px; margin-bottom: 12px; }
.jm-hero { container-type: normal; }
.jm-hero .jm-brand { display: block; padding: 0; }
.jm-hero .jm-art-mark { inline-size: 100%; block-size: auto; aspect-ratio: 1; }
.platform-about-brand > .jm-slot { --jm-logo-height: 26px; }
.jm-slot[data-mode="compact"] { --jm-logo-height: 22px; }
.jm-slot[data-mode="compact"] .jm-brand { flex-wrap: nowrap; }
@media (max-width: 1023px) {
  .desktop-shell-brand.jm-slot, .jm-header-desktop { display: none; }
  .mobile-shell-brand-slot { display: block; grid-area: brand; }
  .jm-header-mobile { display: block; }
}
@media (forced-colors: active) {
  .jm-brand:focus-visible { outline-color: Highlight; }
}