.site-navigation {
  position: relative;
  z-index: 20;
}

.tools-trigger[aria-expanded="true"] { color: var(--blue); }
.tools-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.tools-open .header { border-bottom-color: transparent; }

.tools-panel {
  position: absolute;
  inset: 100% 0 auto;
  max-height: calc(100dvh - var(--tools-panel-top, 82px) - 12px);
  overflow: auto;
  overscroll-behavior: contain;
  background: white;
  box-shadow: 0 12px 24px #26364d16;
}
.tools-panel-inner { padding: 0 42px 22px; }

.tools-groups {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
  gap: 28px;
  padding: 16px 0 12px;
}
.tools-group { min-width: 0; }
.tools-group h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 850;
}
.tools-group ul { margin: 0; padding: 0; list-style: none; }
.tools-group--effects ul {
  display: grid;
  grid-auto-flow: column;
  grid-template: repeat(11, auto) / repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}
.tools-group a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 6px;
  margin-inline: -6px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1.4;
}
.tools-group a:hover, .tools-group a:focus-visible, .tools-group a[aria-current="page"] {
  background: #eff6ff;
  color: #145fae;
}
.tools-group a[aria-current="page"] { font-weight: 800; }
@media (min-width: 1101px) {
  .tools-group:not(:first-child) { border-left: 1px solid #e9edf1; padding-left: 18px; }
}
@media (max-width: 1100px) {
  .tools-panel-inner { padding-inline: 28px; }
  .tools-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-group--effects { grid-column: span 2; }
}
@media (max-width: 560px) {
  .tools-panel-inner { padding-inline: 18px; }
  .tools-groups { gap: 22px 18px; padding-top: 18px; }
  .tools-group a { min-height: 44px; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tools-panel-inner { animation: tools-enter 160ms ease-out; }
  @keyframes tools-enter {
    from { transform: translateY(-8px); opacity: .65; }
    to { transform: translateY(0); opacity: 1; }
  }
}
