/*
  dropdownPanel — the Work menu's glass panel (component.json dropdownPanel, 9 tokens).
  Sits inside the nav pill, right after the Work button (keyboard order), placed against
  the pill's edges: exactly the nav's width at every screen size. Its blur reaches the page
  because no element around it has a blur of its own (see nav-container.css).
  No states: shown or hidden.
  MOTION (BUILD 19 DECISION 7): the panel fades in when it opens and out when it closes, at
  dropdownPanel.transition (reveal). Only its opacity changes; its blur stays fixed.
  It still opens and closes with the hidden attribute, so for the keyboard and screen readers
  it is gone the instant it closes (js/nav.js also makes it inert during the fade-out, so it
  can't be clicked or tabbed into). Browsers without @starting-style show and hide it at once.
*/

.dropdown-panel {
  --rim-image: var(--dropdown-panel-border-all);
  --rim-width: var(--dropdown-panel-border-width-all);
  position: absolute;
  top: calc(100% + var(--dropdown-panel-offset-top-all)); /* 8px below the nav container's bottom edge */
  left: 0;
  right: 0;
  border-radius: var(--dropdown-panel-radius-all);
  background-color: var(--dropdown-panel-fill-all);
  -webkit-backdrop-filter: blur(var(--dropdown-panel-backdrop-blur-all));
  backdrop-filter: blur(var(--dropdown-panel-backdrop-blur-all));
  box-shadow: var(--dropdown-panel-shadow-all);
  opacity: 1;
  transition:
    opacity var(--dropdown-panel-transition-all-duration) var(--dropdown-panel-transition-all-easing),
    display var(--dropdown-panel-transition-all-duration) allow-discrete;
}

.dropdown-panel[hidden] {
  display: none;
  opacity: 0;
}

/* where the fade starts when the panel opens */
@starting-style {
  .dropdown-panel {
    opacity: 0;
  }
}

/* The rows. The padding and the scrolling live on this list, so the panel's corners,
   rim and glass stay put if the rows ever have to scroll. */
.dropdown-panel__rows {
  display: flex;
  flex-direction: column;
  gap: var(--dropdown-panel-gap-all);
  padding: var(--dropdown-panel-padding-all);
  margin: 0;
  list-style: none;
  border-radius: inherit;
  /* NEVER RUNS OFF THE SCREEN: never taller than the space below the panel's top
     (the nav clearance + the 8px gap = 88px from the top). If the rows don't fit
     (a phone held sideways, 400% zoom), they scroll inside the panel. */
  max-height: calc(100dvh - var(--nav-clearance) - var(--dropdown-panel-offset-top-all));
  overflow-y: auto;
  overscroll-behavior: contain;
}