/* Loriginary UX36. DEVELOPMENT ONLY. Release after screenshot approval.
   Top-level navigation never forces horizontal scrolling; dropdowns are viewport-contained. */
nav.primary-nav.ux24-primary-nav {
  box-sizing:border-box!important;
  display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;
  align-items:stretch!important;gap:5px!important;width:100%!important;max-width:100%!important;
  height:auto!important;min-height:48px!important;padding:6px 10px!important;
  overflow:visible!important;overflow-x:visible!important;scrollbar-width:none!important;
}
nav.primary-nav.ux24-primary-nav > .nav-btn,
nav.primary-nav.ux24-primary-nav > details.ux24-nav-menu > summary.nav-btn {
  box-sizing:border-box!important;flex:0 1 auto!important;
  width:auto!important;min-width:max-content!important;max-width:none!important;
  min-height:42px!important;height:auto!important;
  padding:10px 13px!important;
  font:700 13px/1.35 system-ui,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important;white-space:normal!important;
  overflow-wrap:break-word!important;text-overflow:clip!important;
  border-radius:6px!important;
}
nav.primary-nav.ux24-primary-nav > details.ux24-nav-menu {
  box-sizing:border-box!important;flex:0 1 auto!important;min-width:0!important;max-width:100%!important;position:relative!important;
}
nav.primary-nav.ux24-primary-nav .ux25-nav-label {display:inline!important;white-space:normal!important;}
nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown {
  box-sizing:border-box!important;position:fixed!important;
  width:min(500px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;
  max-height:min(70vh,calc(100dvh - 65px))!important;
  overflow-y:auto!important;overflow-x:hidden!important;z-index:100000!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:12px!important;gap:8px!important;
}
nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown-wide {
  width:min(710px,calc(100vw - 20px))!important;
  grid-template-columns:minmax(0,1fr)!important;
}
nav.primary-nav.ux24-primary-nav .ux24-menu-grid {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;min-width:0!important;
}
nav.primary-nav.ux24-primary-nav .ux24-menu-section,
nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown > * {min-width:0!important;max-width:100%!important;}
nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown button,
nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown a {
  box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
  font:600 13px/1.4 system-ui,sans-serif!important;
  min-height:44px!important;padding:10px 12px!important;
  white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
  text-overflow:clip!important;text-transform:none!important;
}
nav.primary-nav.ux24-primary-nav .ux36-nav-toggle{display:none!important;}
@media(max-width:760px){
  nav.primary-nav.ux24-primary-nav{display:block!important;padding:7px 10px!important;}
  nav.primary-nav.ux24-primary-nav .ux36-nav-toggle{
    display:flex!important;width:100%!important;justify-content:space-between!important;align-items:center!important;
    font:700 15px/1.35 system-ui,sans-serif!important;padding:11px 13px!important;
    min-height:44px!important;background:#0b3552!important;color:#f1f8ff!important;
    border:1px solid #3779a3!important;border-radius:7px!important;cursor:pointer!important;
  }
  nav.primary-nav.ux24-primary-nav:not(.ux36-nav-expanded)>:not(.ux36-nav-toggle){display:none!important;}
  nav.primary-nav.ux24-primary-nav.ux36-nav-expanded>details.ux24-nav-menu,
  nav.primary-nav.ux24-primary-nav.ux36-nav-expanded>.nav-btn {display:block!important;width:100%!important;max-width:100%!important;margin:5px 0!important;}
  nav.primary-nav.ux24-primary-nav.ux36-nav-expanded>details.ux24-nav-menu>summary.nav-btn,
  nav.primary-nav.ux24-primary-nav.ux36-nav-expanded>.nav-btn {width:100%!important;min-width:0!important;text-align:left!important;}
  nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown,
  nav.primary-nav.ux24-primary-nav .ux24-nav-dropdown-wide {
    position:static!important;top:auto!important;left:auto!important;right:auto!important;
    width:100%!important;max-width:100%!important;max-height:min(65vh,550px)!important;
    margin:5px 0 9px!important;grid-template-columns:minmax(0,1fr)!important;
  }
}
@media(max-width:440px){
  nav.primary-nav.ux24-primary-nav .ux24-menu-grid{grid-template-columns:minmax(0,1fr)!important;}
}

/* UX36 P12: one RPG-family entry with an explicit directory entry-point. */
.ux36-pbta-family-callout{padding:16px 18px;margin:17px 0;background:linear-gradient(110deg,#153a55,#092239);border:1px solid #417f9c;border-radius:10px;color:#e7f2ff}.ux36-pbta-family-callout p{margin:6px 0 9px;line-height:1.5}.ux36-pbta-family-callout a,.ux36-pbta-template-family-link{display:inline-flex;align-items:center;padding:9px 12px;min-height:42px;border:1px solid #5693b8;border-radius:8px;color:#bce8ff;font-weight:700;text-decoration:none;white-space:normal;overflow-wrap:anywhere}.ux36-pbta-template-family-link{margin-top:10px}.ux36-pbta-family-callout a:hover,.ux36-pbta-template-family-link:hover{background:#155579;color:#fff}.ux36-pbta-family-callout a:focus-visible,.ux36-pbta-template-family-link:focus-visible{outline:3px solid #f6c65d;outline-offset:2px}

/* UX36 P13: fix 390px header collision that the previous overflow-only smoke check missed. */
@media(max-width:760px){
  .site-header{
    height:auto!important;min-height:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:auto!important;row-gap:9px!important;
    padding:9px 10px 12px!important;
  }
  .site-header .brand-wrap{
    display:flex!important;grid-template-columns:none!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    align-items:center!important;justify-content:center!important;
    justify-self:center!important;gap:0!important;
  }
  .site-header .brand-logo-link{
    display:flex!important;flex:0 1 auto!important;min-width:0!important;
    width:auto!important;max-width:100%!important;align-items:center!important;gap:9px!important;
  }
  .site-header .brand-logo-symbol{
    width:38px!important;height:38px!important;flex:0 0 38px!important;
  }
  .site-header .brand-wordmark-dragon{
    width:min(290px,calc(100vw - 78px))!important;
    min-width:0!important;max-width:calc(100vw - 78px)!important;
    height:auto!important;max-height:47px!important;flex:0 1 auto!important;
    object-fit:contain!important;
  }
  .site-header .header-actions{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    justify-content:center!important;justify-self:center!important;gap:6px!important;
    margin:0!important;
  }
  .site-header .header-actions .plan-badge{display:none!important}
  .site-header .header-actions .ghost-btn{
    max-width:100%!important;min-width:0!important;white-space:normal!important;
    font-size:12px!important;min-height:36px!important;
  }
}
@media(max-width:440px){
  .site-header .brand-logo-symbol{width:32px!important;height:32px!important;flex-basis:32px!important}
  .site-header .brand-wordmark-dragon{width:min(258px,calc(100vw - 72px))!important;max-width:calc(100vw - 72px)!important;max-height:43px!important}
  .site-header .header-actions .install-app-btn{padding:7px 9px!important}
}
