/* Theme-native presentation improvements inspired by Xtra's utility patterns. */
.ymm-xtra-ui .ymm-header {
  position: sticky;
  top: 0;
  z-index: 90;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ymm-xtra-ui .ymm-header.is-scrolled {
  background: color-mix(in srgb, var(--ymm-bg) 92%, transparent);
  box-shadow: 0 12px 38px rgba(0,0,0,.16);
  backdrop-filter: blur(16px);
}
.ymm-xtra-ui .ymm-nav__list > li { position: relative; }
.ymm-xtra-ui .ymm-theme-toggle {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ymm-line);
  border-radius: 50%; background: transparent; color: var(--ymm-text); cursor: pointer; font-size: 18px; line-height: 1;
}
.ymm-xtra-ui .ymm-theme-toggle:hover { color: var(--ymm-accent); border-color: var(--ymm-accent); }
.ymm-xtra-ui .ymm-nav__list > li.menu-item-has-children > a::after {
  content: '⌄'; display: inline-block; margin-inline-start: 7px; font-size: 12px; opacity: .65;
}
.ymm-xtra-ui .ymm-nav__list .sub-menu {
  min-width: 210px; padding: 12px; border: 1px solid var(--ymm-line); border-radius: var(--ymm-radius, 8px);
  background: var(--ymm-panel); box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.ymm-xtra-ui .ymm-nav__list > li:hover > .sub-menu,
.ymm-xtra-ui .ymm-nav__list > li:focus-within > .sub-menu { display: block; }
.ymm-xtra-ui .ymm-nav__list > li.y_mm_mega > .sub-menu,
.ymm-xtra-ui .ymm-nav__list > li.ymm-mega > .sub-menu {
  display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 18px; width: min(760px, 80vw); padding: 24px;
}
.ymm-xtra-ui .ymm-back-to-top {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 85; display: grid; place-items: center;
  width: 48px; height: 48px; border: 1px solid var(--ymm-line); border-radius: 50%; background: var(--ymm-panel); color: var(--ymm-text);
  box-shadow: 0 10px 28px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s;
}
.ymm-xtra-ui .ymm-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.ymm-xtra-ui .ymm-back-to-top span { font-size: 20px; line-height: 1; }
.ymm-xtra-ui .ymm-back-to-top small { font-size: 8px; line-height: 1; margin-top: 2px; }
@media (max-width: 760px) {
  .ymm-xtra-ui .ymm-header__actions .ymm-theme-toggle { display: inline-grid !important; }
  .ymm-xtra-ui .ymm-nav__list > li.y_mm_mega > .sub-menu,
  .ymm-xtra-ui .ymm-nav__list > li.ymm-mega > .sub-menu { display: block; width: auto; }
  .ymm-xtra-ui .ymm-back-to-top { inset-inline-end: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ymm-xtra-ui .ymm-header, .ymm-xtra-ui .ymm-back-to-top { transition: none; }
}

/* The two built-in defaults. The visual studio can still override individual colors. */
html[data-ymm-theme="light"] {
  --ymm-bg: #f5f1e8;
  --ymm-panel: #fffdf8;
  --ymm-paper: #1b1b19;
  --ymm-accent: #a9572d;
  --ymm-accent-strong: #7d3e20;
  --ymm-text: #24231f;
  --ymm-muted: #6b675e;
  --ymm-line: #d9d2c5;
  --ymm-raised: #ece7dd;
  --ymm-shadow: 0 18px 50px rgba(48,42,31,.14);
  color-scheme: light;
}
html:not([data-ymm-theme="light"]) { color-scheme: dark; }
html[data-ymm-theme="light"] .ymm-announcement,
html[data-ymm-theme="light"] .ymm-header,
html[data-ymm-theme="light"] .ymm-footer { border-color: rgba(36,35,31,.14); }