.tooltip {
  position: relative;
  overflow: visible;
  isolation: auto;
}
.tooltip:hover,
.tooltip:focus {
  z-index: var(--m-z-tooltip);
}
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 2px);
  padding: .35em .8em;
  border-radius: var(--m-r-sm);
  background: var(--m-fg);
  color: var(--m-bg);
  font-size: .875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-dur), transform var(--m-dur);
  z-index: var(--m-z-tooltip);
}
.tooltip:hover::after,
.tooltip:focus::after { opacity: 1; transform: translate(-50%, 0); }
.tooltip-b::after { bottom: auto; top: calc(100% + 6px); transform: translate(-50%, -2px); }
.tooltip-b:hover::after,
.tooltip-b:focus::after { transform: translate(-50%, 0); }
.tooltip-r::after { bottom: auto; top: 50%; left: calc(100% + 6px); transform: translate(-2px, -50%); }
.tooltip-r:hover::after,
.tooltip-r:focus::after { transform: translate(0, -50%); }
.tooltip-l::after { bottom: auto; top: 50%; right: calc(100% + 6px); left: auto; transform: translate(2px, -50%); }
.tooltip-l:hover::after,
.tooltip-l:focus::after { transform: translate(0, -50%); }

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--m-dur), visibility var(--m-dur);
  z-index: var(--m-z-modal);
  pointer-events: none;
}
.modal.open { visibility: visible; opacity: 1; pointer-events: auto; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-box {
  position: relative;
  width: min(32rem, 100%);
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r);
  box-shadow: var(--m-shadow);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.4rem .6rem; }
.modal-title { margin: 0; font-size: 1.25rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.4rem 1.25rem; }
.modal-box > .modal-body { padding: .35rem 1.4rem; }

.menu { position: relative; display: inline-block; }
.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 13rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  box-shadow: var(--m-shadow);
  padding: .4rem;
  z-index: var(--m-z-menu);
}
.menu.open > .menu-panel { display: block; }
.menu-r > .menu-panel { left: auto; right: 0; }
.menu-item {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .55em .85em;
  border-radius: calc(var(--m-r-sm) - 1px);
  color: var(--m-fg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover { background: var(--m-surface); text-decoration: none; }
.menu-item.selected { background: var(--m-primary-soft); color: var(--m-primary); }
.menu-danger { color: var(--m-danger); }
.menu-sep { border: 0; border-top: 1px solid var(--m-border); margin: .3rem .35rem; }

.drawer {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: var(--m-z-drawer);
  transition: opacity var(--m-dur), visibility var(--m-dur);
  pointer-events: none;
}
.drawer.open { visibility: visible; opacity: 1; pointer-events: auto; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.drawer-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(var(--m-drawer-w), 100%);
  background: var(--m-bg);
  border-right: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  transform: translateX(-100%);
  transition: transform var(--m-dur);
  overflow: auto;
  padding: 1.15rem;
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer.drawer-r .drawer-panel,
.drawer-r > .drawer-panel {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--m-border);
  transform: translateX(100%);
}
.drawer.drawer-r.open .drawer-panel { transform: translateX(0); }

.sheet {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  z-index: var(--m-z-drawer);
  transition: opacity var(--m-dur), visibility var(--m-dur);
  pointer-events: none;
}
.sheet.open { visibility: visible; opacity: 1; pointer-events: auto; }
.sheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: var(--m-sheet-h);
  background: var(--m-bg);
  border-radius: var(--m-r) var(--m-r) 0 0;
  box-shadow: var(--m-shadow);
  transform: translateY(100%);
  transition: transform var(--m-dur);
  overflow: auto;
  padding: 0 1.35rem 1.35rem;
}
.sheet.open .sheet-panel { transform: translateY(0); }
.sheet-handle {
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--m-border-2);
  margin: .65rem auto .85rem;
}

.pop { position: relative; display: inline-block; }
.pop-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 13rem;
  padding: .9rem 1.15rem;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-sm);
  box-shadow: var(--m-shadow);
  z-index: var(--m-z-menu);
}
.pop.open > .pop-panel { display: block; }
.pop-t > .pop-panel { top: auto; bottom: calc(100% + 6px); }
.pop-l > .pop-panel { left: auto; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.pop-r > .pop-panel { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }