/* ==========================================================================
   ATHENA_RESPONSIVE_STANDARD_V100_CSS
   ========================================================================== */

:root{
  --athena-r-sidebar-desktop:300px;
  --athena-r-sidebar-laptop:250px;
  --athena-r-sidebar-tablet:270px;

  --athena-r-header:58px;

  --athena-r-mobile-touch:44px;

  --athena-r-gap:16px;
  --athena-r-gap-small:10px;

  --athena-r-line:#dce4ee;

  --athena-r-navy:#071f42;
  --athena-r-gold:#f3c35d;

  --athena-r-overlay:rgba(4,17,34,.42);
}

/* ==========================================================================
   GLOBAL SAFETY
   ========================================================================== */

html{
  max-width:100%;
  overflow-x:hidden;
}

body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

img,
video{
  height:auto;
}

iframe{
  max-width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

table{
  max-width:100%;
}

/* Avoid fixed child widths destroying mobile layouts. */
main,
section,
article,
header,
footer,
nav,
aside{
  min-width:0;
}

/* ==========================================================================
   SIDEBAR DESKTOP
   ========================================================================== */

aside:has(.athena32-nav),
.athena-contextual-sidebar,
.u-sidebar,
.athena-unified-sidebar{
  width:var(--athena-r-sidebar-desktop) !important;

  max-width:var(--athena-r-sidebar-desktop) !important;

  display:flex !important;

  flex-direction:column !important;

  overflow:hidden !important;
}

/*
 * Independent sidebar scrolling.
 */
.athena-unified-scroll,
.acs-scroll,
.u-nav,
.athena32-sidebar-scroll,
[data-athena-sidebar-role="scroll"]{
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  overscroll-behavior:contain !important;

  scrollbar-width:thin !important;

  scrollbar-color:
    rgba(255,255,255,.27)
    transparent !important;
}

.athena-unified-scroll::-webkit-scrollbar,
.acs-scroll::-webkit-scrollbar,
.u-nav::-webkit-scrollbar{
  width:5px !important;
}

.athena-unified-scroll::-webkit-scrollbar-thumb,
.acs-scroll::-webkit-scrollbar-thumb,
.u-nav::-webkit-scrollbar-thumb{
  background:
    rgba(255,255,255,.25) !important;

  border-radius:999px !important;
}

/* ==========================================================================
   SIDEBAR MENU ITEM STANDARD
   ========================================================================== */

.athena32-nav,
.acs-item,
.u-nav-link,
.athena-sidebar-item{
  min-height:40px !important;

  display:flex !important;
  align-items:center !important;

  gap:10px !important;

  padding-top:0 !important;
  padding-bottom:0 !important;

  line-height:1.2 !important;

  overflow:hidden !important;
}

/* Text must never collide with icons/badges. */
.athena32-label,
.acs-label,
.u-nav-link > span:not(.u-nav-icon),
.athena-sidebar-label{
  min-width:0 !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;

  white-space:nowrap !important;
}

/* Fixed icon column. */
.athena32-icon,
.acs-icon,
.u-nav-icon,
.athena-sidebar-icon{
  flex:0 0 23px !important;

  width:23px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;
}

/* Category headings. */
.athena-unified-category,
.acs-category,
.u-nav-heading,
.athena-sidebar-heading{
  white-space:normal !important;

  line-height:1.25 !important;
}

/* Athena Home return button. */
.acs-home,
.u-home-return,
.athena-unified-return,
.athena-secondary-home{
  flex:0 0 auto !important;

  min-height:40px !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;

  white-space:nowrap !important;
}

/* ==========================================================================
   SUBMENUS / FLYOUTS
   ========================================================================== */

.sidebar-menu,
.athena-submenu{
  max-width:min(360px,calc(100vw - 24px)) !important;

  max-height:min(72vh,640px) !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.menu-link,
.athena-submenu-item{
  min-height:34px !important;

  white-space:normal !important;
}

.menu-link > span:not(.mini),
.athena-submenu-label{
  min-width:0 !important;

  overflow-wrap:anywhere !important;
}

/* ==========================================================================
   HOVER DISCOVERY
   ========================================================================== */

.athena-hover-discovery{
  max-height:
    calc(100vh - 20px) !important;

  overflow-y:auto !important;

  overscroll-behavior:contain !important;
}

/* ==========================================================================
   CONTENT GRIDS
   ========================================================================== */

.u-grid,
.grid,
.cards,
.card-grid,
.dashboard-grid,
.feature-grid,
.content-grid{
  min-width:0;
}

.u-card,
.card,
.panel,
.tile,
.widget{
  min-width:0;
}

/* ==========================================================================
   TABLE WRAPPER
   ========================================================================== */

.athena-responsive-table-wrap{
  width:100%;

  overflow-x:auto;

  -webkit-overflow-scrolling:touch;
}

/* ==========================================================================
   MOBILE DRAWER CONTROL
   ========================================================================== */

.athena-responsive-menu-toggle{
  display:none;

  position:fixed;

  z-index:50000;

  left:10px;
  top:10px;

  width:40px;
  height:40px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:9px;

  background:
    #08254c;

  color:#fff;

  box-shadow:
    0 7px 18px
    rgba(8,27,52,.18);

  font-size:19px;

  align-items:center;
  justify-content:center;
}

.athena-responsive-overlay{
  display:none;

  position:fixed;

  inset:0;

  z-index:39990;

  background:
    var(--athena-r-overlay);

  backdrop-filter:
    blur(1px);
}

.athena-responsive-overlay.open{
  display:block;
}

/* ==========================================================================
   LAPTOP
   ========================================================================== */

@media(max-width:1199px) and (min-width:900px){

  aside:has(.athena32-nav),
  .athena-contextual-sidebar,
  .u-sidebar,
  .athena-unified-sidebar{
    width:
      var(--athena-r-sidebar-laptop) !important;

    max-width:
      var(--athena-r-sidebar-laptop) !important;
  }

  .athena32-nav,
  .acs-item,
  .u-nav-link,
  .athena-sidebar-item{
    min-height:38px !important;

    font-size:12px !important;
  }

  .athena32-label,
  .acs-label,
  .u-nav-link > span:not(.u-nav-icon),
  .athena-sidebar-label{
    font-size:12px !important;
  }

  .athena-unified-category,
  .acs-category,
  .u-nav-heading{
    font-size:8.5px !important;
  }

  .athena-hover-discovery{
    width:330px !important;
  }

  .u-grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }

}

/* ==========================================================================
   TABLET — DRAWER MODE
   ========================================================================== */

@media(max-width:899px){

  body{
    overflow-x:hidden !important;
  }

  .athena-responsive-menu-toggle{
    display:flex;
  }

  aside:has(.athena32-nav),
  .athena-contextual-sidebar,
  .u-sidebar,
  .athena-unified-sidebar{
    position:fixed !important;

    top:0 !important;
    bottom:0 !important;
    left:0 !important;

    z-index:40000 !important;

    width:
      var(--athena-r-sidebar-tablet) !important;

    max-width:
      min(
        82vw,
        var(--athena-r-sidebar-tablet)
      ) !important;

    transform:
      translateX(-102%) !important;

    transition:
      transform .2s ease !important;

    box-shadow:
      12px 0 35px
      rgba(5,19,38,.22) !important;
  }

  aside:has(.athena32-nav).athena-responsive-open,
  .athena-contextual-sidebar.athena-responsive-open,
  .u-sidebar.athena-responsive-open,
  .athena-unified-sidebar.athena-responsive-open{
    transform:
      translateX(0) !important;
  }

  /*
   * All content areas must stop reserving permanent sidebar width.
   */
  body > main,
  .u-shell,
  .main,
  .content,
  .page-content,
  .workspace-main,
  .app-main{
    margin-left:0 !important;
  }

  /*
   * Keep top area clear of hamburger.
   */
  .athena-messaging-topbar,
  .u-topbar,
  main > header:first-child,
  .content > header:first-child{
    padding-left:
      58px !important;
  }

  /*
   * Responsive grids.
   */
  .u-grid,
  .u-grid.three,
  .dashboard-grid,
  .feature-grid,
  .card-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }

  .u-pulse{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }

  .u-hero-grid,
  .two-column,
  .u-two-col{
    grid-template-columns:
      1fr !important;
  }

  .u-globe{
    max-width:170px !important;
    max-height:170px !important;
  }

}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:720px){

  :root{
    --athena-r-gap:10px;
  }

  /*
   * Drawer size.
   */
  aside:has(.athena32-nav),
  .athena-contextual-sidebar,
  .u-sidebar,
  .athena-unified-sidebar{
    width:
      min(
        84vw,
        285px
      ) !important;

    max-width:
      min(
        84vw,
        285px
      ) !important;
  }

  /*
   * Sidebar header.
   */
  .athena-unified-header,
  .acs-header,
  .u-brand{
    min-height:67px !important;

    height:auto !important;

    padding:
      10px
      14px !important;
  }

  .athena-unified-header-title,
  .acs-header-title,
  .u-brand-copy strong{
    font-size:20px !important;
  }

  .athena-unified-header-subtitle,
  .acs-header-subtitle,
  .u-brand-copy span{
    font-size:9px !important;
  }

  /*
   * Athena Home return.
   */
  .acs-home,
  .u-home-return,
  .athena-unified-return,
  .athena-secondary-home{
    min-height:
      var(--athena-r-mobile-touch) !important;

    margin:
      9px
      8px
      6px !important;

    font-size:12px !important;
  }

  /*
   * Menu categories.
   */
  .athena-unified-category,
  .acs-category,
  .u-nav-heading,
  .athena-sidebar-heading{
    min-height:25px !important;

    padding:
      8px
      19px
      4px !important;

    font-size:8.5px !important;

    letter-spacing:.13em !important;
  }

  /*
   * Menu rows become proper touch targets.
   */
  .athena32-nav,
  .acs-item,
  .u-nav-link,
  .athena-sidebar-item{
    min-height:
      var(--athena-r-mobile-touch) !important;

    height:
      var(--athena-r-mobile-touch) !important;

    margin:
      1px
      7px !important;

    padding:
      0
      12px !important;

    border-radius:8px !important;

    font-size:13px !important;
  }

  .athena32-label,
  .acs-label,
  .u-nav-link > span:not(.u-nav-icon),
  .athena-sidebar-label{
    font-size:13px !important;
  }

  .athena32-icon,
  .acs-icon,
  .u-nav-icon,
  .athena-sidebar-icon{
    width:24px !important;
    min-width:24px !important;

    font-size:18px !important;
  }

  /*
   * Main page spacing.
   */
  main,
  .u-main,
  .content,
  .page-content,
  .workspace-main,
  .app-main{
    padding-left:
      var(--athena-r-gap) !important;

    padding-right:
      var(--athena-r-gap) !important;
  }

  /*
   * Hero typography.
   */
  h1{
    overflow-wrap:anywhere;
  }

  .u-hero{
    padding:
      18px
      16px !important;
  }

  .u-hero h1{
    font-size:
      clamp(
        26px,
        9vw,
        38px
      ) !important;

    line-height:1.03 !important;
  }

  .u-hero p{
    font-size:12px !important;
  }

  /*
   * All standard grids collapse.
   */
  .u-grid,
  .u-grid.three,
  .u-grid.two,
  .u-pulse,
  .u-two-col,
  .dashboard-grid,
  .feature-grid,
  .card-grid,
  .content-grid{
    grid-template-columns:
      1fr !important;
  }

  /*
   * Cards.
   */
  .u-card,
  .card,
  .panel,
  .tile,
  .widget{
    width:100% !important;

    max-width:100% !important;
  }

  /*
   * Horizontal actions.
   */
  .u-hero-actions,
  .actions,
  .button-row,
  .toolbar{
    flex-wrap:wrap !important;
  }

  /*
   * Form controls.
   */
  .u-controls{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }

  .u-controls select{
    width:100% !important;

    max-width:none !important;
  }

  .u-query{
    width:100% !important;

    min-width:0 !important;
  }

  /*
   * Content messaging header.
   */
  .athena-messaging-topbar{
    min-height:54px !important;

    gap:8px !important;

    padding:
      7px
      9px
      7px
      57px !important;
  }

  .athena-messaging-context strong{
    font-size:13px !important;
  }

  .athena-message-bell{
    width:38px !important;
    height:38px !important;

    flex:0 0 38px !important;
  }

  /*
   * Messaging drawer fills mobile.
   */
  .athena-notification-drawer{
    width:100vw !important;

    max-width:100vw !important;
  }

  /*
   * Popup hover cards do not make sense on touch.
   */
  .athena-hover-discovery{
    display:none !important;
  }

  /*
   * Flyouts become mobile sheets if visible.
   */
  .sidebar-menu{
    position:fixed !important;

    left:10px !important;
    right:10px !important;

    width:auto !important;

    max-width:none !important;

    top:auto !important;
    bottom:10px !important;

    max-height:
      68vh !important;

    border-radius:13px !important;

    z-index:45000 !important;
  }

  .menu-link{
    min-height:42px !important;

    padding:
      8px
      14px !important;
  }

  /*
   * Tables.
   */
  table{
    font-size:12px;
  }

  th,
  td{
    white-space:nowrap;
  }

}

/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media(max-width:420px){

  .athena-responsive-menu-toggle{
    width:38px;
    height:38px;

    left:8px;
    top:8px;
  }

  .u-controls{
    grid-template-columns:
      1fr !important;
  }

  .u-hero h1{
    font-size:
      clamp(
        24px,
        10vw,
        34px
      ) !important;
  }

  .athena-notification-tabs{
    gap:1px !important;

    padding:
      7px
      5px !important;
  }

  .athena-notification-tab{
    min-width:0 !important;

    padding:
      7px
      4px !important;

    font-size:9px !important;
  }

}

/* ==========================================================================
   LANDSCAPE MOBILE
   ========================================================================== */

@media(
  max-width:899px
)
and
(
  orientation:landscape
){

  aside:has(.athena32-nav),
  .athena-contextual-sidebar,
  .u-sidebar,
  .athena-unified-sidebar{
    width:
      min(
        48vw,
        285px
      ) !important;
  }

}

/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

@media(
  prefers-reduced-motion:reduce
){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;

    transition-duration:
      .001ms !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;
  }

}