:root {
  --crate-z-raised:   10;
  --crate-z-sticky:   30;
  --crate-z-scrim:    40;
  --crate-z-drawer:   50;
  --crate-z-dropdown: 600;
  --crate-z-modal:    700;
  --crate-z-toast:    800;

   
  --crate-menu-bg:        var(--color-surface-0, #ffffff);
  --crate-menu-ink:       var(--color-surface-800, #1f2937);
  --crate-menu-ink-mut:   var(--color-surface-500, #5a626f);
  --crate-menu-line:      var(--color-surface-200, #e5e7eb);
  --crate-menu-hover:     var(--color-surface-100, #f3f4f6);
  --crate-menu-danger:    var(--color-red-600, #dc2626);
  --crate-menu-danger-bg: var(--color-red-50, #fef2f2);
  --crate-menu-radius:    0.75rem;
  --crate-menu-shadow:    var(--shadow-card-lg, 0 12px 32px -8px rgb(16 24 40 / 0.18), 0 4px 10px -4px rgb(16 24 40 / 0.10));
   
  --crate-menu-gutter:    8px;
}

 
.crate-z-dropdown { z-index: var(--crate-z-dropdown); }
.crate-z-modal    { z-index: var(--crate-z-modal); }
.crate-z-toast    { z-index: var(--crate-z-toast); }


 
.dropdown-menu,
[data-dropdown-target="menu"],
[data-kit--popover-target="menu"],
.crate-dropdown__menu,
.crate-menu {
  position: absolute;
  z-index: var(--crate-z-dropdown);
  background-color: var(--crate-menu-bg);
  color: var(--crate-menu-ink);
  border: 1px solid var(--crate-menu-line);
  border-radius: var(--crate-menu-radius);
  box-shadow: var(--crate-menu-shadow);
   
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
   
  max-width: calc(100vw - (2 * var(--crate-menu-gutter)));
   
  max-height: min(70dvh, calc(100dvh - 6rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

 
.dropdown-menu,
[data-dropdown-target="menu"] {
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 12rem;
  padding: 0.25rem;
}
.dropdown-menu--right,
.dropdown-menu-right { right: auto; left: 0; }

 
.dropdown,
.crate-dropdown,
 
[data-controller~="dropdown"] {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

 
[data-kit--popover-target="menu"]:not([hidden]) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  translate: none;
}

 
.dropdown-menu[hidden],
[data-dropdown-target="menu"][hidden],
[data-kit--popover-target="menu"][hidden],
.crate-menu[hidden] { display: none !important; }


 
.dropdown-item,
.crate-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
   
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--crate-menu-ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
   
  transition: background-color var(--duration-fast, 140ms) var(--ease-crate-out, cubic-bezier(.215, .61, .355, 1)),
              color var(--duration-fast, 140ms) var(--ease-crate-out, cubic-bezier(.215, .61, .355, 1));
}
.dropdown-item:hover,
.dropdown-item:focus-visible,
.crate-menu__item:hover,
.crate-menu__item:focus-visible {
  background-color: var(--crate-menu-hover);
  color: var(--color-surface-900, #111827);
  outline: none;
}
.dropdown-item:focus-visible,
.crate-menu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-brand-500, #cf7946);
}
.dropdown-item[aria-disabled="true"],
.dropdown-item:disabled,
.crate-menu__item[aria-disabled="true"] {
  color: var(--crate-menu-ink-mut);
  cursor: default;
  pointer-events: none;
}
.dropdown-item--danger,
.crate-menu__item--danger { color: var(--crate-menu-danger); }
.dropdown-item--danger:hover,
.crate-menu__item--danger:hover {
  background-color: var(--crate-menu-danger-bg);
  color: var(--crate-menu-danger);
}

 
@media (min-width: 640px) {
  .dropdown-item,
  .crate-menu__item { min-height: 2.25rem; }
}

 
.dropdown-item--form,
.dropdown-item--button { padding: 0; }
.dropdown-menu form,
[data-dropdown-target="menu"] form,
[data-kit--popover-target="menu"] form { margin: 0; display: block; width: 100%; }
.dropdown-item--form > form,
.dropdown-item--form > * { width: 100%; }

.crate-menu__label {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crate-menu-ink-mut);
}
.crate-menu__divider,
.dropdown-divider {
  height: 1px;
  margin: 0.25rem;
  background-color: var(--crate-menu-line);
}

 
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  cursor: pointer;
}
@media (min-width: 640px) {
  .dropdown-toggle { min-height: 2.25rem; }
}


 
.crate-menu-fixed,
[data-kit--popover-target="menu"].crate-menu-fixed,
.crate-popout {
  position: fixed;
   
  right: auto;
  bottom: auto;
  margin: 0;
  z-index: var(--crate-z-dropdown);
}

 
[data-controller~="kit--popover"] { position: relative; }


 
.crate-header-more > div,
.crate-menu-panel {
  z-index: var(--crate-z-dropdown);
  max-width: calc(100vw - (2 * var(--crate-menu-gutter)));
  max-height: min(70dvh, calc(100dvh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

 
summary.list-none::-webkit-details-marker,
.crate-header-more summary::-webkit-details-marker { display: none; }


 
 
@keyframes crate-menu-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--motion-travel, 8px))); }
  to   { opacity: 1; transform: none; }
}
 
@keyframes crate-menu-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(calc(-1 * var(--motion-travel, 8px))); }
}
[data-kit--popover-target="menu"][data-state="open"][data-motion="full"],
details[open] > .crate-menu-panel {
  animation: crate-menu-in var(--duration-base, 200ms) var(--ease-crate-out, cubic-bezier(.215,.61,.355,1)) both;
}
[data-kit--popover-target="menu"][data-state="closing"][data-motion="full"] {
  animation: crate-menu-out var(--duration-fast, 140ms) var(--ease-crate-in, cubic-bezier(.55,.055,.675,.19)) both;
  pointer-events: none;
}
 
[data-kit--popover-target="menu"][data-placement="top"][data-state="open"][data-motion="full"] {
  animation-name: crate-in-up;
}
[data-kit--popover-target="menu"][data-placement="top"][data-state="closing"][data-motion="full"] {
  animation-name: crate-out-up;
}
 
[data-kit--popover-target="menu"][data-motion="reduced"],
.crate-menu-fixed[data-motion="reduced"] {
  animation-duration: 0.01ms;
  animation-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  [data-kit--popover-target="menu"],
  details[open] > .crate-menu-panel {
    animation-duration: 0.01ms;
    animation-delay: 0s;
  }
}
 
@keyframes crate-menu-in-fixed  { from { opacity: 0; } to { opacity: 1; } }
@keyframes crate-menu-out-fixed { from { opacity: 1; } to { opacity: 0; } }
.crate-menu-fixed[data-motion="full"] {
  animation: crate-menu-in-fixed var(--duration-base, 200ms) var(--ease-crate-out, cubic-bezier(.215,.61,.355,1)) both;
}
.crate-menu-fixed[data-state="closing"][data-motion="full"] {
  animation: crate-menu-out-fixed var(--duration-fast, 140ms) var(--ease-crate-in, cubic-bezier(.55,.055,.675,.19)) both;
  pointer-events: none;
}


 
@media (forced-colors: active) {
   
  .dropdown-menu,
  [data-dropdown-target="menu"],
  [data-kit--popover-target="menu"],
  .crate-menu,
  .crate-menu-panel {
    border: 1px solid CanvasText;
    background-color: Canvas;
  }
}

@supports not (height: 100dvh) {
  .dropdown-menu,
  [data-dropdown-target="menu"],
  [data-kit--popover-target="menu"],
  .crate-menu { max-height: min(60vh, calc(100vh - 6rem)); }
  .crate-header-more > div,
  .crate-menu-panel { max-height: min(60vh, calc(100vh - 8rem)); }
}

 
.crate-modal-dialog {
   
  width: 100%;
  max-width: none;
  max-height: 92dvh;
  margin: auto auto 0;           
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-surface-200, #e5e7eb);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  background: var(--color-surface-0, #fff);
  color: var(--color-surface-900, #111827);
  box-shadow: 0 -8px 32px rgb(15 23 42 / 18%);
}

.crate-modal-dialog[open] {
  display: flex;
  flex-direction: column;
}

.crate-modal-dialog::backdrop {
  background: rgb(2 6 23 / 45%);
}

 
.crate-modal-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.crate-modal-dialog__head,
.crate-modal-dialog__foot {
  flex: 0 0 auto;
}

 
@media (prefers-reduced-motion: no-preference) {
  .crate-modal-dialog[open] {
    animation: crate-modal-sheet-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes crate-modal-sheet-in {
  from { transform: translateY(8%); opacity: 0; }
  to   { transform: translateY(0);  opacity: 1; }
}

@media (min-width: 640px) {
  .crate-modal-dialog {
    width: 32rem;
    max-width: calc(100% - 2rem);
    max-height: 85dvh;
    margin: auto;
    border: 1px solid var(--color-surface-200, #e5e7eb);
    border-radius: 0.75rem;
    box-shadow: 0 24px 48px rgb(15 23 42 / 18%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .crate-modal-dialog[open] {
      animation: crate-modal-card-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
    }
  }
}

@keyframes crate-modal-card-in {
  from { transform: scale(0.98); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

 
@supports not (height: 100dvh) {
  .crate-modal-dialog { max-height: 92vh; }
  @media (min-width: 640px) {
    .crate-modal-dialog { max-height: 85vh; }
  }
}